@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileThemeSwitcher.mjs","names":["MobileThemeSwitcher: FC<MobileThemeSwitcherProps>"],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === Modes.system\n      ? theme === Modes.dark\n        ? Modes.light\n        : Modes.dark\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? Modes.system\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === Modes.light\n          ? Modes.dark\n          : Modes.light;\n\n  const toggleMode = () => {\n    if (nextMode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.system,\n          isNextMode: nextMode === Modes.system,\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.light,\n          isNextMode: nextMode === Modes.light,\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.dark,\n          isNextMode: nextMode === Modes.dark,\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAaA,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,MAAM,SAAS,MAEJ;CAEpD,MAAM,WAGJ,SAAS,MAAM,SACX,UAAU,MAAM,OACd,MAAM,QACN,MAAM,OAGR,qBACE,MAAM,SAGN,SAAS,MAAM,QACb,MAAM,OACN,MAAM;CAEhB,MAAM,mBAAmB;AACvB,MAAI,aAAa,MAAM,OACrB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC;EAAO,WAAU;EAAyB,cAAW;;GACpD,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;;GACK"}

package/dist/esm/components/ThemeSwitcherDropDown/index.mjs

@@ -0,0 +1,5 @@
+import { Modes } from "./types.mjs";
+import { DesktopThemeSwitcher } from "./DesktopThemeSwitcher.mjs";
+import { MobileThemeSwitcher } from "./MobileThemeSwitcher.mjs";
+
+export { DesktopThemeSwitcher, MobileThemeSwitcher, Modes };

package/dist/esm/components/ThemeSwitcherDropDown/types.mjs

@@ -0,0 +1,11 @@
+//#region src/components/ThemeSwitcherDropDown/types.ts
+let Modes = /* @__PURE__ */ function(Modes$1) {
+	Modes$1["dark"] = "dark";
+	Modes$1["light"] = "light";
+	Modes$1["system"] = "system";
+	return Modes$1;
+}({});
+
+//#endregion
+export { Modes };
+//# sourceMappingURL=types.mjs.map

package/dist/esm/components/ThemeSwitcherDropDown/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/types.ts"],"sourcesContent":["export enum Modes {\n  dark = 'dark',\n  light = 'light',\n  system = 'system',\n}\n"],"mappings":";AAAA,IAAY,0CAAL;AACL;AACA;AACA"}

package/dist/esm/components/Toaster/Toast.mjs

@@ -0,0 +1,189 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+
+//#region src/components/Toaster/Toast.tsx
+const ToastProvider = ToastPrimitives;
+const ToastViewport = ({ className,...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Viewport, {
+	className: cn("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]", className),
+	...props
+});
+/**
+* Toast variant styles using class-variance-authority.
+*
+* Defines visual styles for different toast types with semantic colors,
+* animations, and responsive behavior.
+*
+* @example
+* ```tsx
+* // Error toast with red background
+* <Toast variant="error">Error message</Toast>
+*
+* // Success toast with green background
+* <Toast variant="success">Success message</Toast>
+*
+* // Default toast with neutral styling
+* <Toast variant="default">Info message</Toast>
+* ```
+*/
+const toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none", {
+	variants: { variant: {
+		error: "bg-error/40 text-text",
+		success: "bg-success/30 text-text",
+		default: "bg-card/80 text-text"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* Toast Component
+*
+* A notification component that displays temporary messages to users using Radix UI primitives.
+* Supports different visual variants, animations, and user interactions including swipe-to-dismiss.
+*
+* ## Features
+* - **Visual Variants**: Error, success, and default styling themes
+* - **Animations**: Smooth slide-in/slide-out transitions with fade effects
+* - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality
+* - **Accessibility**: Full screen reader support and keyboard navigation
+* - **Positioning**: Smart positioning with responsive viewport handling
+* - **Auto-dismiss**: Configurable automatic dismissal timing
+*
+* ## Technical Implementation
+* - Built on Radix UI Toast primitives for accessibility compliance
+* - Uses Framer Motion for smooth animations and gestures
+* - CVA (class-variance-authority) for consistent styling variants
+* - Backdrop blur effects for modern visual appeal
+* - CSS transforms for hardware-accelerated animations
+*
+* @example
+* ```tsx
+* // Basic toast with title and description
+* <Toast variant="default">
+*   <ToastTitle>Notification</ToastTitle>
+*   <ToastDescription>Your action was completed successfully.</ToastDescription>
+*   <ToastClose />
+* </Toast>
+*
+* // Error toast with action button
+* <Toast variant="error">
+*   <ToastTitle>Upload Failed</ToastTitle>
+*   <ToastDescription>Could not upload file. Please try again.</ToastDescription>
+*   <ToastAction altText="Retry upload">Retry</ToastAction>
+*   <ToastClose />
+* </Toast>
+* ```
+*/
+const Toast = ({ className, variant,...props }) => {
+	return /* @__PURE__ */ jsx(ToastPrimitives.Root, {
+		className: cn(toastVariants({ variant }), className),
+		...props
+	});
+};
+/**
+* ToastAction Component
+*
+* An interactive button component for toast notifications that allows users to take
+* actions related to the notification message.
+*
+* ## Features
+* - **Accessibility**: Requires `altText` prop for screen readers
+* - **Visual States**: Hover, focus, and disabled state styling
+* - **Theme Integration**: Supports destructive and default themes
+* - **Keyboard Navigation**: Full keyboard accessibility support
+*
+* ## Usage Guidelines
+* - Use for actionable notifications (retry, undo, view details)
+* - Keep action text short and descriptive
+* - Provide meaningful `altText` for accessibility
+* - Limit to one primary action per toast
+*
+* @example
+* ```tsx
+* // Retry action for failed operations
+* <ToastAction altText="Retry the failed operation">
+*   Retry
+* </ToastAction>
+*
+* // Undo action for reversible operations
+* <ToastAction altText="Undo the last action">
+*   Undo
+* </ToastAction>
+*
+* // Navigation action
+* <ToastAction altText="View the uploaded file">
+*   View File
+* </ToastAction>
+* ```
+*/
+const ToastAction = ({ className,...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Action, {
+	className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground", className),
+	...props
+});
+const ToastClose = ({ className,...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Close, {
+	className: cn("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
+	"toast-close": "",
+	...props,
+	children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+});
+/**
+* ToastTitle Component
+*
+* The primary heading text for toast notifications. Provides semantic structure
+* and proper typography hierarchy within the toast.
+*
+* ## Styling Features
+* - Semi-bold font weight for emphasis
+* - Automatic text sizing adjustments for descriptions
+* - Proper spacing relationships with other toast elements
+*
+* @example
+* ```tsx
+* <ToastTitle>File Upload Complete</ToastTitle>
+* <ToastTitle>Error: Connection Failed</ToastTitle>
+* <ToastTitle>Settings Saved</ToastTitle>
+* ```
+*/
+const ToastTitle = ({ className,...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Title, {
+	className: cn("font-semibold text-sm [&+div]:text-xs", className),
+	...props
+});
+/**
+* ToastDescription Component
+*
+* Supporting text that provides additional context or details for the toast notification.
+* Complements the ToastTitle with more detailed information.
+*
+* ## Styling Features
+* - Slightly reduced opacity for visual hierarchy
+* - Smaller text size than title
+* - Optimal line height for readability
+*
+* ## Content Guidelines
+* - Keep descriptions concise but informative
+* - Provide actionable information when possible
+* - Use plain language for better accessibility
+*
+* @example
+* ```tsx
+* <ToastDescription>
+*   Your document has been uploaded successfully and is now available for sharing.
+* </ToastDescription>
+*
+* <ToastDescription>
+*   Please check your internet connection and try again.
+* </ToastDescription>
+* ```
+*/
+const ToastDescription = ({ className,...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Description, {
+	className: cn("text-sm opacity-90", className),
+	...props
+});
+
+//#endregion
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };
+//# sourceMappingURL=Toast.mjs.map

package/dist/esm/components/Toaster/Toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.mjs","names":["ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>","Toast: FC<\n  ComponentProps<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>","ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>>","ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>>","ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>>","ToastDescription: FC<\n  ComponentProps<typeof ToastPrimitives.Description>\n>"],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Viewport\n    className={cn(\n      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Toast variant styles using class-variance-authority.\n *\n * Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n *\n * @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n *\n * // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n *\n * // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n */\nconst toastVariants = cva(\n  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n  {\n    variants: {\n      /** Toast visual variants for different message types */\n      variant: {\n        /** Error state with red styling for failures and warnings */\n        error: 'bg-error/40 text-text',\n        /** Success state with green styling for confirmations */\n        success: 'bg-success/30 text-text',\n        /** Default neutral styling for general information */\n        default: 'bg-card/80 text-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\n/**\n * Toast Component\n *\n * A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n *\n * ## Features\n * - **Visual Variants**: Error, success, and default styling themes\n * - **Animations**: Smooth slide-in/slide-out transitions with fade effects\n * - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality\n * - **Accessibility**: Full screen reader support and keyboard navigation\n * - **Positioning**: Smart positioning with responsive viewport handling\n * - **Auto-dismiss**: Configurable automatic dismissal timing\n *\n * ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n *\n * @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n *   <ToastTitle>Notification</ToastTitle>\n *   <ToastDescription>Your action was completed successfully.</ToastDescription>\n *   <ToastClose />\n * </Toast>\n *\n * // Error toast with action button\n * <Toast variant=\"error\">\n *   <ToastTitle>Upload Failed</ToastTitle>\n *   <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n *   <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n *   <ToastClose />\n * </Toast>\n * ```\n */\nconst Toast: FC<\n  ComponentProps<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n  return (\n    <ToastPrimitives.Root\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n};\n\n/**\n * ToastAction Component\n *\n * An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n *\n * ## Features\n * - **Accessibility**: Requires `altText` prop for screen readers\n * - **Visual States**: Hover, focus, and disabled state styling\n * - **Theme Integration**: Supports destructive and default themes\n * - **Keyboard Navigation**: Full keyboard accessibility support\n *\n * ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n *\n * @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n *   Retry\n * </ToastAction>\n *\n * // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n *   Undo\n * </ToastAction>\n *\n * // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n *   View File\n * </ToastAction>\n * ```\n */\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Action\n    className={cn(\n      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Close\n    className={cn(\n      'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-5\" />\n  </ToastPrimitives.Close>\n);\n/**\n * ToastTitle Component\n *\n * The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n *\n * ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n *\n * @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n */\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n  className,\n  ...props\n}) => (\n  <ToastPrimitives.Title\n    className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n    {...props}\n  />\n);\n\n/**\n * ToastDescription Component\n *\n * Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n *\n * ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n *\n * ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n *\n * @example\n * ```tsx\n * <ToastDescription>\n *   Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n *\n * <ToastDescription>\n *   Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n */\nconst ToastDescription: FC<\n  ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n  <ToastPrimitives.Description\n    className={cn('text-sm opacity-90', className)}\n    {...props}\n  />\n);\n/**\n * Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n */\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/**\n * Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n  type ToastActionElement,\n  type ToastProps,\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAMA,iBAAsE,EAC1E,UACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,qIACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,gBAAgB,IACpB,koBACA;CACE,UAAU,EAER,SAAS;EAEP,OAAO;EAEP,SAAS;EAET,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,MAAMC,SAGD,EAAE,WAAW,QAAS,GAAG,YAAY;AACxC,QACE,oBAAC,gBAAgB;EACf,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCN,MAAMC,eAAkE,EACtE,UACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,wdACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMC,cAAgE,EACpE,UACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,kVACA,UACD;CACD,eAAY;CACZ,GAAI;WAEJ,oBAAC,KAAE,WAAU,WAAW;EACF;;;;;;;;;;;;;;;;;;;AAoB1B,MAAMC,cAAgE,EACpE,UACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BJ,MAAMC,oBAED,EAAE,UAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GAAG,sBAAsB,UAAU;CAC9C,GAAI;EACJ"}

package/dist/esm/components/Toaster/Toaster.mjs

@@ -0,0 +1,68 @@
+'use client';
+
+
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toast.mjs";
+import { useToast } from "./useToast.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Toaster/Toaster.tsx
+/**
+* Toast notification provider component that renders active toast notifications.
+*
+* This component serves as the visual layer for the toast system, rendering all
+* active toasts and handling their animations and positioning. It should be placed
+* at a high level in your component tree to ensure toasts appear above other content.
+*
+* ## Features
+* - **Global Toast Rendering**: Renders all toasts from the global state
+* - **Automatic Positioning**: Uses Radix UI positioning system
+* - **Animation Integration**: Handles enter/exit animations for toasts
+* - **Accessibility**: Provides proper ARIA landmarks and focus management
+* - **Portal Rendering**: Renders toasts in a portal for z-index safety
+*
+* ## Positioning
+* Toasts are positioned at the bottom-right of the viewport by default.
+* This can be customized through the ToastViewport component styling.
+*
+* ## Integration
+* Place this component near the root of your application, typically:
+* - Next.js: In _app.tsx or layout.tsx
+* - React: In your main App component
+* - Ensure it's outside any containers that might clip overflow
+*
+* ## Usage Example
+* Place Toaster component at the root level of your application to ensure
+* toast notifications appear above all other content. Components throughout
+* your app can then use the useToast hook to display notifications.
+*
+* ## Styling Notes
+* - Toasts use fixed positioning to appear above all other content
+* - The viewport is styled for bottom-right positioning by default
+* - Animations are handled automatically through Radix UI primitives
+* - Custom positioning can be achieved by styling the ToastViewport
+*
+* ## Performance
+* - Only active toasts are rendered (dismissed toasts are cleaned up)
+* - Animations are hardware-accelerated where possible
+* - Memory usage is minimal due to automatic cleanup
+*
+* @returns JSX element rendering the toast viewport and active toasts
+*/
+const Toaster = () => {
+	const { toasts } = useToast();
+	return /* @__PURE__ */ jsxs(ToastProvider.Provider, { children: [toasts.map(({ id, title, description, action,...props }) => /* @__PURE__ */ jsxs(Toast, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1",
+				children: [title && /* @__PURE__ */ jsx(ToastTitle, { children: title }), description && /* @__PURE__ */ jsx(ToastDescription, { children: description })]
+			}),
+			action,
+			/* @__PURE__ */ jsx(ToastClose, {})
+		]
+	}, id)), /* @__PURE__ */ jsx(ToastViewport, {})] });
+};
+
+//#endregion
+export { Toaster };
+//# sourceMappingURL=Toaster.mjs.map

package/dist/esm/components/Toaster/Toaster.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.mjs","names":[],"sources":["../../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './Toast';\nimport { useToast } from './useToast';\n\n/**\n * Toast notification provider component that renders active toast notifications.\n *\n * This component serves as the visual layer for the toast system, rendering all\n * active toasts and handling their animations and positioning. It should be placed\n * at a high level in your component tree to ensure toasts appear above other content.\n *\n * ## Features\n * - **Global Toast Rendering**: Renders all toasts from the global state\n * - **Automatic Positioning**: Uses Radix UI positioning system\n * - **Animation Integration**: Handles enter/exit animations for toasts\n * - **Accessibility**: Provides proper ARIA landmarks and focus management\n * - **Portal Rendering**: Renders toasts in a portal for z-index safety\n *\n * ## Positioning\n * Toasts are positioned at the bottom-right of the viewport by default.\n * This can be customized through the ToastViewport component styling.\n *\n * ## Integration\n * Place this component near the root of your application, typically:\n * - Next.js: In _app.tsx or layout.tsx\n * - React: In your main App component\n * - Ensure it's outside any containers that might clip overflow\n *\n * ## Usage Example\n * Place Toaster component at the root level of your application to ensure\n * toast notifications appear above all other content. Components throughout\n * your app can then use the useToast hook to display notifications.\n *\n * ## Styling Notes\n * - Toasts use fixed positioning to appear above all other content\n * - The viewport is styled for bottom-right positioning by default\n * - Animations are handled automatically through Radix UI primitives\n * - Custom positioning can be achieved by styling the ToastViewport\n *\n * ## Performance\n * - Only active toasts are rendered (dismissed toasts are cleaned up)\n * - Animations are hardware-accelerated where possible\n * - Memory usage is minimal due to automatic cleanup\n *\n * @returns JSX element rendering the toast viewport and active toasts\n */\nexport const Toaster = () => {\n  const { toasts } = useToast();\n\n  return (\n    <ToastProvider.Provider>\n      {toasts.map(({ id, title, description, action, ...props }) => (\n        <Toast key={id} {...props}>\n          <div className=\"grid gap-1\">\n            {title && <ToastTitle>{title}</ToastTitle>}\n            {description && <ToastDescription>{description}</ToastDescription>}\n          </div>\n          {action}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport />\n    </ToastProvider.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,gBAAgB;CAC3B,MAAM,EAAE,WAAW,UAAU;AAE7B,QACE,qBAAC,cAAc,uBACZ,OAAO,KAAK,EAAE,IAAI,OAAO,aAAa,OAAQ,GAAG,YAChD,qBAAC;EAAe,GAAI;;GAClB,qBAAC;IAAI,WAAU;eACZ,SAAS,oBAAC,wBAAY,QAAmB,EACzC,eAAe,oBAAC,8BAAkB,cAA+B;KAC9D;GACL;GACD,oBAAC,eAAa;;IANJ,GAOJ,CACR,EACF,oBAAC,kBAAgB,IACM"}

package/dist/esm/components/Toaster/index.mjs

@@ -0,0 +1,5 @@
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toast.mjs";
+import { reducer, toast, useToast } from "./useToast.mjs";
+import { Toaster } from "./Toaster.mjs";
+
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, reducer, toast, useToast };

package/dist/esm/components/Toaster/useToast.mjs

@@ -0,0 +1,310 @@
+'use client';
+
+
+import { useEffect, useState } from "react";
+
+//#region src/components/Toaster/useToast.tsx
+/**
+* Maximum number of toasts that can be displayed simultaneously.
+* Prevents UI overflow and maintains clean notification experience.
+*/
+const TOAST_LIMIT = 1;
+/**
+* Delay before automatically removing dismissed toasts from memory.
+* Set to 15 minutes (900,000ms) to allow for potential undo actions.
+*/
+const TOAST_REMOVE_DELAY = 900 * 1e3;
+/**
+* Action types for toast state management using reducer pattern.
+*
+* Defines all possible actions that can be performed on the toast state,
+* enabling predictable state updates and better debugging.
+*/
+var ActionTypes = /* @__PURE__ */ function(ActionTypes$1) {
+	/** Add a new toast to the display queue */
+	ActionTypes$1["ADD_TOAST"] = "ADD_TOAST";
+	/** Update properties of an existing toast */
+	ActionTypes$1["UPDATE_TOAST"] = "UPDATE_TOAST";
+	/** Mark a toast as dismissed (triggers exit animation) */
+	ActionTypes$1["DISMISS_TOAST"] = "DISMISS_TOAST";
+	/** Completely remove a toast from memory */
+	ActionTypes$1["REMOVE_TOAST"] = "REMOVE_TOAST";
+	return ActionTypes$1;
+}(ActionTypes || {});
+let count = 0;
+const genId = () => {
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+	return count.toString();
+};
+const toastTimeouts = /* @__PURE__ */ new Map();
+const addToRemoveQueue = (toastId) => {
+	if (toastTimeouts.has(toastId)) return;
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId);
+		dispatch({
+			type: ActionTypes.REMOVE_TOAST,
+			toastId
+		});
+	}, TOAST_REMOVE_DELAY);
+	toastTimeouts.set(toastId, timeout);
+};
+/**
+* Toast state reducer function that handles all toast state transitions.
+*
+* Implements predictable state updates using the reducer pattern, ensuring
+* consistent behavior across all toast operations.
+*
+* ## State Management
+* - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts
+* - **UPDATE_TOAST**: Updates existing toast properties while preserving identity
+* - **DISMISS_TOAST**: Marks toasts as closed and schedules removal
+* - **REMOVE_TOAST**: Permanently removes toasts from state
+*
+* ## Side Effects
+* The DISMISS_TOAST action includes side effects for scheduling toast removal,
+* which could be extracted but is kept here for simplicity.
+*
+* @param state - Current toast state
+* @param action - Action to perform on the state
+* @returns Updated toast state
+*
+* @example
+* ```tsx
+* // Add a new toast
+* const newState = reducer(state, {
+*   type: ActionTypes.ADD_TOAST,
+*   toast: { id: '1', title: 'Hello', variant: 'default' }
+* });
+*
+* // Dismiss a specific toast
+* const dismissedState = reducer(state, {
+*   type: ActionTypes.DISMISS_TOAST,
+*   toastId: '1'
+* });
+* ```
+*/
+const reducer = (state, action) => {
+	switch (action.type) {
+		case ActionTypes.ADD_TOAST: return {
+			...state,
+			toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+		};
+		case ActionTypes.UPDATE_TOAST: return {
+			...state,
+			toasts: state.toasts.map((t) => t.id === action.toast.id ? {
+				...t,
+				...action.toast
+			} : t)
+		};
+		case ActionTypes.DISMISS_TOAST: {
+			const { toastId } = action;
+			if (toastId) addToRemoveQueue(toastId);
+			else state.toasts.forEach((toast$1) => {
+				addToRemoveQueue(toast$1.id);
+			});
+			return {
+				...state,
+				toasts: state.toasts.map((t) => t.id === toastId || toastId === void 0 ? {
+					...t,
+					open: false
+				} : t)
+			};
+		}
+		case ActionTypes.REMOVE_TOAST:
+			if (action.toastId === void 0) return {
+				...state,
+				toasts: []
+			};
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId)
+			};
+	}
+};
+const listeners = [];
+let memoryState = { toasts: [] };
+const dispatch = (action) => {
+	memoryState = reducer(memoryState, action);
+	listeners.forEach((listener) => {
+		listener(memoryState);
+	});
+};
+/**
+* Creates and displays a new toast notification.
+*
+* This is the primary function for showing toast notifications to users.
+* It automatically generates unique IDs, handles state updates, and provides
+* control functions for managing the toast lifecycle.
+*
+* ## Features
+* - **Automatic ID Generation**: Each toast gets a unique identifier
+* - **State Management**: Integrates with global toast state
+* - **Lifecycle Control**: Returns functions to update or dismiss the toast
+* - **Auto-dismiss**: Automatically closes when user dismisses
+*
+* ## Return Value
+* Returns an object with control functions:
+* - `id`: Unique identifier for the toast
+* - `dismiss()`: Function to manually dismiss the toast
+* - `update()`: Function to update toast properties
+*
+* @param props - Toast configuration (title, description, variant, etc.)
+* @returns Object with toast ID and control functions
+*
+* @example
+* ```tsx
+* // Basic success toast
+* const { dismiss } = toast({
+*   title: 'Success!',
+*   description: 'Your file was uploaded successfully.',
+*   variant: 'success'
+* });
+*
+* // Error toast with retry action
+* const errorToast = toast({
+*   title: 'Upload Failed',
+*   description: 'Could not upload file. Please try again.',
+*   variant: 'error',
+*   action: <ToastAction altText="Retry upload">Retry</ToastAction>
+* });
+*
+* // Update toast content dynamically
+* errorToast.update({
+*   title: 'Retrying...',
+*   description: 'Please wait while we retry the upload.',
+*   variant: 'default'
+* });
+*
+* // Manually dismiss toast
+* setTimeout(() => errorToast.dismiss(), 5000);
+* ```
+*/
+const toast = ({ ...props }) => {
+	const id = genId();
+	const update = (props$1) => dispatch({
+		type: ActionTypes.UPDATE_TOAST,
+		toast: {
+			...props$1,
+			id
+		}
+	});
+	const dismiss = () => dispatch({
+		type: ActionTypes.DISMISS_TOAST,
+		toastId: id
+	});
+	dispatch({
+		type: ActionTypes.ADD_TOAST,
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss();
+			}
+		}
+	});
+	return {
+		id,
+		dismiss,
+		update
+	};
+};
+/**
+* React hook for managing toast notifications.
+*
+* Provides access to the global toast state and functions for creating and
+* managing toast notifications. This hook connects components to the toast
+* system and ensures reactive updates when toasts change.
+*
+* ## Features
+* - **State Synchronization**: Automatically updates when toast state changes
+* - **Toast Creation**: Provides the `toast()` function for creating notifications
+* - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID
+* - **Memory Management**: Handles proper cleanup of listeners
+*
+* ## Return Value
+* - `toasts`: Array of current toast objects
+* - `toast()`: Function to create new toast notifications
+* - `dismiss()`: Function to dismiss toasts (all or by ID)
+*
+* @returns Toast state and control functions
+*
+* @example
+* ```tsx
+* function NotificationButton() {
+*   const { toast, toasts, dismiss } = useToast();
+*
+*   const showSuccess = () => {
+*     toast({
+*       title: 'Success!',
+*       description: 'Operation completed successfully.',
+*       variant: 'success'
+*     });
+*   };
+*
+*   const clearAll = () => {
+*     dismiss(); // Dismisses all toasts
+*   };
+*
+*   return (
+*     <div>
+*       <button onClick={showSuccess}>Show Success</button>
+*       <button onClick={clearAll}>Clear All ({toasts.length})</button>
+*     </div>
+*   );
+* }
+*
+* // Usage in a form component
+* function ContactForm() {
+*   const { toast } = useToast();
+*
+*   const handleSubmit = async (data) => {
+*     try {
+*       await submitForm(data);
+*       toast({
+*         title: 'Form Submitted',
+*         description: 'We\'ll get back to you soon!',
+*         variant: 'success'
+*       });
+*     } catch (error) {
+*       toast({
+*         title: 'Submission Failed',
+*         description: 'Please check your connection and try again.',
+*         variant: 'error',
+*         action: <ToastAction altText="Retry">Retry</ToastAction>
+*       });
+*     }
+*   };
+*
+*   // ... form JSX
+* }
+* ```
+*
+* ## Usage Notes
+* - Must be used within a component tree that includes `<Toaster />`
+* - Toast state is global - changes affect all components using this hook
+* - Toasts are automatically cleaned up after the configured delay
+* - Consider UX best practices: don't overwhelm users with too many toasts
+*/
+const useToast = () => {
+	const [state, setState] = useState(memoryState);
+	useEffect(() => {
+		listeners.push(setState);
+		return () => {
+			const index = listeners.indexOf(setState);
+			if (index > -1) listeners.splice(index, 1);
+		};
+	}, [state]);
+	return {
+		...state,
+		toast,
+		dismiss: (toastId) => dispatch({
+			type: ActionTypes.DISMISS_TOAST,
+			toastId
+		})
+	};
+};
+
+//#endregion
+export { reducer, toast, useToast };
+//# sourceMappingURL=useToast.mjs.map