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:T169f,'use client'; /* eslint-disable eslint-frontend-rules/top-level-const-snake */ import { cva, type VariantProps } from 'class-variance-authority'; import { AlertTriangle, CheckCircle2, Info, Loader2, XCircle } from 'lucide-react'; import { ComponentProps, createContext, useCallback, useContext, useMemo, useState } from 'react'; import { CloseButton } from '@/components/ui/close-button'; import { Body2, Title3 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G toast: 358px wide, radius 8px, 1px neutral-100 border, padding 12px, * shadow-lg. Optional 24px status icon leads the row. */ /* Figma leads each toast with a 24px status glyph. Colours use semantic * tokens, so a status only reads correctly on the default (white) theme. */ const TOAST_STATUS_ICONS = { success: { Icon: CheckCircle2, className: 'text-success' }, warning: { Icon: AlertTriangle, className: 'text-warning' }, info: { Icon: Info, className: 'text-info' }, error: { Icon: XCircle, className: 'text-danger' }, loading: { Icon: Loader2, className: 'text-primary animate-spin' }, } as const; type TToastStatus = keyof typeof TOAST_STATUS_ICONS; const TOAST_VARIANTS = cva( 'pointer-events-auto relative flex w-[358px] max-w-full items-center gap-2 overflow-hidden rounded-md border p-3 text-sm shadow-lg transition-all', { variants: { theme: { default: 'bg-neutral-0 text-neutral border-neutral-100', primary: 'bg-primary text-primary-foreground border-transparent', secondary: 'bg-secondary text-secondary-foreground border-transparent', success: 'bg-success text-success-foreground border-transparent', danger: 'bg-danger text-danger-foreground border-transparent', warning: 'bg-warning text-warning-foreground border-transparent', info: 'bg-info text-info-foreground border-transparent', }, }, defaultVariants: { theme: 'default', }, }, ); type TToastTheme = NonNullable['theme']>; interface IToast { id: string; title?: string; description?: string; theme?: TToastTheme; duration?: number; } interface IToastContext { toasts: IToast[]; addToast: (toast: Omit) => void; removeToast: (id: string) => void; } const ToastContext = createContext({ toasts: [], addToast: () => {}, removeToast: () => {}, }); /** Context provider that manages toast state. */ function ToastProvider({ children }: { children: React.ReactNode }) { const [toasts, setToasts] = useState([]); const addToast = useCallback((toast: Omit) => { const id = Math.random().toString(36).slice(2); setToasts(prev => [...prev, { ...toast, id }]); if (toast.duration !== 0) { setTimeout(() => { setToasts(prev => prev.filter(t => t.id !== id)); }, toast.duration ?? 5000); } }, []); const removeToast = useCallback((id: string) => { setToasts(prev => prev.filter(t => t.id !== id)); }, []); const contextValue = useMemo( () => ({ toasts, addToast, removeToast }), [toasts, addToast, removeToast], ); return {children}; } /** Hook to create and dismiss toast notifications. */ function useToast() { const context = useContext(ToastContext); return { toast: context.addToast, dismiss: context.removeToast, toasts: context.toasts }; } interface IToastProps extends ComponentProps<'div'>, VariantProps { onDismiss?: () => void; status?: TToastStatus; } /** 24px status glyph shown at the start of a toast. */ function ToastStatusIcon({ status }: { status: TToastStatus }) { const { Icon, className } = TOAST_STATUS_ICONS[status]; return ; } /** Dismissable toast notification component. */ function Toast({ className, theme, onDismiss, status, children, ...props }: IToastProps) { return (

{status && }

{children}

{onDismiss && ( )}

); } /** Title heading for a toast notification. UX4G title-3: 14px/20px, weight 500. */ function ToastTitle({ className, ...props }: ComponentProps) { return ; } /** Description body text for a toast notification. UX4G body-2. */ function ToastDescription({ className, ...props }: ComponentProps) { return ; } /** Fixed-position container for stacking toast notifications. */ function ToastContainer({ className, position = 'bottom-right', ...props }: ComponentProps<'div'> & { position?: | 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'; }) { const positionClasses = { 'top-left': 'top-4 left-4', 'top-right': 'top-4 right-4', 'top-center': 'top-4 left-1/2 -translate-x-1/2', 'bottom-left': 'bottom-4 left-4', 'bottom-right': 'bottom-4 right-4', 'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2', }; return (

); } export type { TToastStatus }; export { Toast, ToastTitle, ToastDescription, ToastContainer, ToastProvider, useToast, TOAST_VARIANTS, }; 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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/close-button.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/toast.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]