50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Te14,import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const noticeVariants = cva('p-3 rounded-lg border text-sm', { variants: { tone: { error: [ 'bg-[var(--color-error-50)] dark:bg-[color-mix(in_srgb,var(--color-error-900)_20%,transparent)]', 'border-[var(--color-error-200)] dark:border-[var(--color-error-800)]', 'text-[var(--color-error-700)] dark:text-[var(--color-error-400)]', ].join(' '), warning: [ 'bg-[var(--color-warning-50)] dark:bg-[color-mix(in_srgb,var(--color-warning-900)_20%,transparent)]', 'border-[var(--color-warning-200)] dark:border-[var(--color-warning-800)]', 'text-[var(--color-warning-700)] dark:text-[var(--color-warning-400)]', ].join(' '), success: [ 'bg-[var(--color-success-50)] dark:bg-[color-mix(in_srgb,var(--color-success-900)_20%,transparent)]', 'border-[var(--color-success-200)] dark:border-[var(--color-success-800)]', 'text-[var(--color-success-700)] dark:text-[var(--color-success-400)]', ].join(' '), info: [ 'bg-[var(--color-info-50)] dark:bg-[color-mix(in_srgb,var(--color-info-900)_20%,transparent)]', 'border-[var(--color-info-200)] dark:border-[var(--color-info-800)]', 'text-[var(--color-info-700)] dark:text-[var(--color-info-400)]', ].join(' '), neutral: [ 'bg-[var(--color-surface-muted-light)] dark:bg-[var(--color-surface-muted-dark)]', 'border-[var(--color-border-light)] dark:border-[var(--color-border-dark)]', 'text-[var(--color-text-secondary-light)] dark:text-[var(--color-text-secondary-dark)]', ].join(' '), }, }, defaultVariants: { tone: 'neutral', }, }) export interface NoticeProps extends React.HTMLAttributes, VariantProps { /** Optional leading icon element (e.g. a 16px filled Phosphor icon), * rendered in the tone's text color on the same line as the content. */ icon?: React.ReactNode } /** * In-flow, tone-tinted status box for context-bound messages: sync results, * form validation errors, inline confirmations. Sits in the surrounding * layout (inside Settings sections, below form fields) rather than floating. * For app-level floating notifications below the header, use `Toast`. * * With `icon`, the content renders on one line next to it. Without `icon`, * children render as-is, so richer layouts (multiple lines, button rows) * can be passed directly. */ /** Maps a tone to its ARIA live-region role and aria-live value. */ function getToneAriaProps(tone: string | null | undefined): React.HTMLAttributes { switch (tone) { case 'error': return { role: 'alert' } case 'success': case 'warning': case 'info': return { role: 'status', 'aria-live': 'polite' } default: // 'neutral' and undefined: plain div, no live-region semantics return {} } } const Notice = React.forwardRef( ({ tone, icon, className, children, ...props }, ref) => { const ariaProps = getToneAriaProps(tone) return (

{icon ? (

{icon} {children}

) : ( children )}

) }, ) Notice.displayName = 'Notice' export { Notice, noticeVariants } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/notice.tsx","content":"$52","type":"registry:ui","target":"components/ui/notice.tsx"}],"className":"h-[70svh] min-h-80"}]]}]