npm - @intlayer/design-system - Versions diffs - 7.2.1-canary.1 → 7.2.2 - Mend

@intlayer/design-system 7.2.1-canary.1 → 7.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (313) hide show

package/dist/esm/components/Select/Select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.mjs","names":["SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /*\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n>","SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n>","SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n>","SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n>","SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>>","SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>>","SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n>"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport as SelectPrimitive from '@radix-ui/react-select';\nimport {\n CheckIcon,\n ChevronDownIcon,\n ChevronsUpDown,\n ChevronUpIcon,\n} from 'lucide-react';\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Enum for Select content positioning strategies\n \n @enum SelectContentPosition\n /\nexport enum SelectContentPosition {\n /* Position relative to the trigger with automatic placement /\n POPPER = 'popper',\n /* Align content with the selected item /\n ITEM_ALIGNED = 'item-aligned',\n}\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/\n Select trigger button component that displays the current selection and opens the dropdown\n \n Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n \n @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n \n @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n /\nconst SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n <SelectPrimitive.Trigger\n className={cn(\n // Base layout and typography\n 'flex w-full cursor-pointer items-center justify-between whitespace-nowrap',\n 'select-text text-base shadow-none outline-none md:text-sm',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n // Spacing\n 'px-2 py-3 md:py-2',\n\n // Background and text\n 'bg-neutral-50 dark:bg-neutral-950',\n 'text-text',\n\n // Focus ring\n 'ring-0',\n 'focus-visible:outline-none',\n 'focus-visible:ring-3',\n 'focus-visible:ring-neutral-200',\n 'dark:focus-visible:ring-neutral-500',\n\n 'focus-visible:ring-offset-white',\n 'dark:focus-visible:ring-offset-neutral-500',\n\n // Remove box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // States\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-invalid:border-error',\n '[&>span]:line-clamp-1',\n\n // Validation styles\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\n/\n Scroll up button for select content with long lists\n \n Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n);\n\n/\n Scroll down button for select content with long lists\n \n Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n);\n\n/\n Select dropdown content container with positioning and animation\n \n Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n \n @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n \n @example\n * ```tsx\n * <Select.Content position={SelectContentPosition.POPPER}>\n * <Select.Item value=\"option1\">Option 1</Select.Item>\n * <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n> = ({\n className,\n children,\n position = SelectContentPosition.POPPER,\n ...props\n}) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n // Base styles\n 'relative z-50 max-h-96 min-w-32 overflow-hidden',\n 'rounded-xl shadow-md',\n\n // Background and text\n 'bg-white dark:bg-neutral-950',\n 'text-text',\n\n // Border\n 'border border-neutral-200 dark:border-neutral-800',\n\n // Animations\n 'data-[state=closed]:animate-out data-[state=open]:animate-in',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n\n // Positioning adjustments\n position === 'popper' &&\n 'data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1',\n\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n);\n\n/\n Label component for grouping select options\n \n Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Separator />\n * <Select.Label>Vegetables</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n className,\n ...props\n}) => (\n <SelectPrimitive.Label\n className={cn('px-1 py-0.5 font-semibold text-sm', className)}\n {...props}\n />\n);\n\n/\n Individual selectable item within the dropdown\n \n Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n \n @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n \n @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n * 🌙 Dark Mode\n * </Select.Item>\n * ```\n /\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n className,\n children,\n ...props\n}) => (\n <SelectPrimitive.Item\n className={cn(\n 'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\n/\n Visual separator for grouping options in the dropdown\n \n Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Item value=\"recent\">Recent Files</Select.Item>\n * <Select.Separator />\n * <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n <SelectPrimitive.Separator\n className={cn(\n '-mx-1 my-1 h-px',\n 'bg-neutral-200 dark:bg-neutral-800',\n className\n )}\n {...props}\n />\n);\n\n/\n Type definition for the compound Select component with all subcomponents\n /\ntype SelectType = typeof SelectRoot & {\n /* Group container for organizing related options /\n Group: typeof SelectGroup;\n /* Value display component for the trigger /\n Value: typeof SelectValue;\n /* Trigger button that opens the dropdown /\n Trigger: typeof SelectTrigger;\n /* Scroll up button for long lists /\n ScrollUpButton: typeof SelectScrollUpButton;\n /* Scroll down button for long lists /\n ScrollDownButton: typeof SelectScrollDownButton;\n /* Dropdown content container /\n Content: typeof SelectContent;\n /* Label component for option groups /\n Label: typeof SelectLabel;\n /* Individual selectable item /\n Item: typeof SelectItem;\n /* Visual separator between option groups /\n Separator: typeof SelectSeparator;\n};\n\n/\n Select - A comprehensive dropdown selection component\n \n A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n \n ## Key Features\n * - Accessibility First: Full keyboard navigation, screen reader support, and ARIA attributes\n * - Flexible Positioning: Multiple positioning strategies for optimal dropdown placement\n * - Validation Integration: Built-in support for form validation with visual feedback\n * - Design System: Consistent theming with design tokens and style variants\n * - Responsive Design: Works seamlessly across desktop and mobile devices\n * - Rich Content: Support for icons, separators, labels, and complex option layouts\n \n ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter, Escape, and Home/End support\n * - Screen Readers: Proper ARIA labels and state announcements\n * - Focus Management: Intuitive focus flow and visual indicators\n * - High Contrast: Supports system high contrast modes\n \n ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n \n @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n * <Select.Trigger>\n * <Select.Value placeholder=\"Choose theme...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">☀️ Light</Select.Item>\n * <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n * <Select.Item value=\"system\">⚙️ System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Select category...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Label>Web Technologies</Select.Label>\n * <Select.Item value=\"react\">React</Select.Item>\n * <Select.Item value=\"vue\">Vue</Select.Item>\n * <Select.Separator />\n * <Select.Label>Mobile</Select.Label>\n * <Select.Item value=\"react-native\">React Native</Select.Item>\n * <Select.Item value=\"flutter\">Flutter</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <Select required name=\"country\">\n * <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n * <Select.Value placeholder=\"Select country...\" />\n * </Select.Trigger>\n * <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>\n * <Select.Item value=\"us\">United States</Select.Item>\n * <Select.Item value=\"ca\">Canada</Select.Item>\n * <Select.Item value=\"uk\">United Kingdom</Select.Item>\n * </Select.Content>\n * </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,IAAY,0EAAL;;AAEL;;AAEA;;;AAGF,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;;;;;;;;;;;;;;;;;;AAmBpC,MAAMA,iBAcD,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,YAC7D,qBAAC,gBAAgB;CACf,WAAW,GAET,6EACA,6DAGA,mFAGA,qBAGA,qCACA,aAGA,UACA,8BACA,wBACA,kCACA,uCAEA,mCACA,8CAGA,6CAGA,mDACA,6BACA,yBAGA,0BAA0B,6CAE1B,UACD;CACD,GAAI;YAEH,UACD,oBAAC,gBAAgB;EAAK;YACpB,oBAAC,kBAAe,WAAU,sBAAsB;GAC3B;EACC;;;;;;;;;AAW5B,MAAMC,wBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,kBAAgB;EACc;;;;;;;;;AAWnC,MAAMC,0BAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,oBAAkB;EACc;;;;;;;;;;;;;;;;;;;AAqBrC,MAAaC,iBAER,EACH,WACA,UACA,WAAW,sBAAsB,QACjC,GAAG,YAEH,oBAAC,gBAAgB,oBACf,qBAAC,gBAAgB;CACf,WAAW,GAET,mDACA,wBAGA,gCACA,aAGA,qDAGA,gEACA,8DACA,gEACA,0CACA,0CACA,0CACA,0CAGA,aAAa,YACX,mIAEF,UACD;CACS;CACV,GAAI;;EAEJ,oBAAC,yBAAuB;EACxB,oBAAC,gBAAgB;GACf,WAAW,GACT,OACA,aAAa,YACX,gFACH;GAEA;IACwB;EAC3B,oBAAC,2BAAyB;;EACF,GACH;;;;;;;;;;;;;;;;;;;;;AAuB3B,MAAaC,eAAiE,EAC5E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,qCAAqC,UAAU;CAC7D,GAAI;EACJ;;;;;;;;;;;;;;;;;AAmBJ,MAAMC,cAA+D,EACnE,WACA,UACA,GAAG,YAEH,qBAAC,gBAAgB;CACf,WAAW,GACT,kMACA,UACD;CACD,GAAI;YAEJ,oBAAC;EAAK,WAAU;YACd,oBAAC,gBAAgB,2BACf,oBAAC,aAAU,WAAU,WAAW,GACF;GAC3B,EACP,oBAAC,gBAAgB,YAAU,WAAoC;EAC1C;;;;;;;;;;;;;;;;;;AAoBzB,MAAaC,mBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,mBACA,sCACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHJ,MAAa,SAAS;AACtB,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,OAAO;AACd,OAAO,YAAY"}
1	+ {"version":3,"file":"Select.mjs","names":["SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /*\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n>","SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n>","SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n>","SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n>","SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>>","SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>>","SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n>"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport as SelectPrimitive from '@radix-ui/react-select';\nimport {\n CheckIcon,\n ChevronDownIcon,\n ChevronsUpDown,\n ChevronUpIcon,\n} from 'lucide-react';\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Enum for Select content positioning strategies\n \n @enum SelectContentPosition\n /\nexport enum SelectContentPosition {\n /* Position relative to the trigger with automatic placement /\n POPPER = 'popper',\n /* Align content with the selected item /\n ITEM_ALIGNED = 'item-aligned',\n}\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/\n Select trigger button component that displays the current selection and opens the dropdown\n \n Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n \n @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n \n @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n /\nconst SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n <SelectPrimitive.Trigger\n className={cn(\n // Base layout and typography\n 'flex w-full cursor-pointer items-center justify-between whitespace-nowrap',\n 'select-text text-base shadow-none outline-none md:text-sm',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n // Spacing\n 'px-2 py-3 md:py-2',\n\n // Background and text\n 'bg-neutral-50 dark:bg-neutral-950',\n 'text-text',\n\n // Focus ring\n 'ring-0',\n 'focus-visible:outline-none',\n 'focus-visible:ring-3',\n 'focus-visible:ring-neutral-200',\n 'dark:focus-visible:ring-neutral-500',\n\n 'focus-visible:ring-offset-white',\n 'dark:focus-visible:ring-offset-neutral-500',\n\n // Remove box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // States\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-invalid:border-error',\n '[&>span]:line-clamp-1',\n\n // Validation styles\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\n/\n Scroll up button for select content with long lists\n \n Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n);\n\n/\n Scroll down button for select content with long lists\n \n Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n);\n\n/\n Select dropdown content container with positioning and animation\n \n Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n \n @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n \n @example\n * ```tsx\n * <Select.Content position={SelectContentPosition.POPPER}>\n * <Select.Item value=\"option1\">Option 1</Select.Item>\n * <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n> = ({\n className,\n children,\n position = SelectContentPosition.POPPER,\n ...props\n}) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n // Base styles\n 'relative z-50 max-h-96 min-w-32 overflow-hidden',\n 'rounded-xl shadow-md',\n\n // Background and text\n 'bg-white dark:bg-neutral-950',\n 'text-text',\n\n // Border\n 'border border-neutral-200 dark:border-neutral-800',\n\n // Animations\n 'data-[state=closed]:animate-out data-[state=open]:animate-in',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n\n // Positioning adjustments\n position === 'popper' &&\n 'data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1',\n\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n);\n\n/\n Label component for grouping select options\n \n Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Separator />\n * <Select.Label>Vegetables</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n className,\n ...props\n}) => (\n <SelectPrimitive.Label\n className={cn('px-1 py-0.5 font-semibold text-sm', className)}\n {...props}\n />\n);\n\n/\n Individual selectable item within the dropdown\n \n Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n \n @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n \n @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n * 🌙 Dark Mode\n * </Select.Item>\n * ```\n /\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n className,\n children,\n ...props\n}) => (\n <SelectPrimitive.Item\n className={cn(\n 'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\n/\n Visual separator for grouping options in the dropdown\n \n Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Item value=\"recent\">Recent Files</Select.Item>\n * <Select.Separator />\n * <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n <SelectPrimitive.Separator\n className={cn(\n '-mx-1 my-1 h-px',\n 'bg-neutral-200 dark:bg-neutral-800',\n className\n )}\n {...props}\n />\n);\n\n/\n Type definition for the compound Select component with all subcomponents\n /\ntype SelectType = typeof SelectRoot & {\n /* Group container for organizing related options /\n Group: typeof SelectGroup;\n /* Value display component for the trigger /\n Value: typeof SelectValue;\n /* Trigger button that opens the dropdown /\n Trigger: typeof SelectTrigger;\n /* Scroll up button for long lists /\n ScrollUpButton: typeof SelectScrollUpButton;\n /* Scroll down button for long lists /\n ScrollDownButton: typeof SelectScrollDownButton;\n /* Dropdown content container /\n Content: typeof SelectContent;\n /* Label component for option groups /\n Label: typeof SelectLabel;\n /* Individual selectable item /\n Item: typeof SelectItem;\n /* Visual separator between option groups /\n Separator: typeof SelectSeparator;\n};\n\n/\n Select - A comprehensive dropdown selection component\n \n A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n \n ## Key Features\n * - Accessibility First: Full keyboard navigation, screen reader support, and ARIA attributes\n * - Flexible Positioning: Multiple positioning strategies for optimal dropdown placement\n * - Validation Integration: Built-in support for form validation with visual feedback\n * - Design System: Consistent theming with design tokens and style variants\n * - Responsive Design: Works seamlessly across desktop and mobile devices\n * - Rich Content: Support for icons, separators, labels, and complex option layouts\n \n ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter, Escape, and Home/End support\n * - Screen Readers: Proper ARIA labels and state announcements\n * - Focus Management: Intuitive focus flow and visual indicators\n * - High Contrast: Supports system high contrast modes\n \n ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n \n @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n * <Select.Trigger>\n * <Select.Value placeholder=\"Choose theme...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">☀️ Light</Select.Item>\n * <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n * <Select.Item value=\"system\">⚙️ System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Select category...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Label>Web Technologies</Select.Label>\n * <Select.Item value=\"react\">React</Select.Item>\n * <Select.Item value=\"vue\">Vue</Select.Item>\n * <Select.Separator />\n * <Select.Label>Mobile</Select.Label>\n * <Select.Item value=\"react-native\">React Native</Select.Item>\n * <Select.Item value=\"flutter\">Flutter</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <Select required name=\"country\">\n * <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n * <Select.Value placeholder=\"Select country...\" />\n * </Select.Trigger>\n * <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>\n * <Select.Item value=\"us\">United States</Select.Item>\n * <Select.Item value=\"ca\">Canada</Select.Item>\n * <Select.Item value=\"uk\">United Kingdom</Select.Item>\n * </Select.Content>\n * </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAY,0EAAL;;AAEL;;AAEA;;;AAGF,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;;;;;;;;;;;;;;;;;;AAmBpC,MAAMA,iBAcD,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,YAC7D,qBAAC,gBAAgB;CACf,WAAW,GAET,6EACA,6DAGA,mFAGA,qBAGA,qCACA,aAGA,UACA,8BACA,wBACA,kCACA,uCAEA,mCACA,8CAGA,6CAGA,mDACA,6BACA,yBAGA,0BAA0B,6CAE1B,UACD;CACD,GAAI;YAEH,UACD,oBAAC,gBAAgB;EAAK;YACpB,oBAAC,kBAAe,WAAU,sBAAsB;GAC3B;EACC;;;;;;;;;AAW5B,MAAMC,wBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,kBAAgB;EACc;;;;;;;;;AAWnC,MAAMC,0BAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,oBAAkB;EACc;;;;;;;;;;;;;;;;;;;AAqBrC,MAAaC,iBAER,EACH,WACA,UACA,WAAW,sBAAsB,QACjC,GAAG,YAEH,oBAAC,gBAAgB,oBACf,qBAAC,gBAAgB;CACf,WAAW,GAET,mDACA,wBAGA,gCACA,aAGA,qDAGA,gEACA,8DACA,gEACA,0CACA,0CACA,0CACA,0CAGA,aAAa,YACX,mIAEF,UACD;CACS;CACV,GAAI;;EAEJ,oBAAC,yBAAuB;EACxB,oBAAC,gBAAgB;GACf,WAAW,GACT,OACA,aAAa,YACX,gFACH;GAEA;IACwB;EAC3B,oBAAC,2BAAyB;;EACF,GACH;;;;;;;;;;;;;;;;;;;;;AAuB3B,MAAaC,eAAiE,EAC5E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,qCAAqC,UAAU;CAC7D,GAAI;EACJ;;;;;;;;;;;;;;;;;AAmBJ,MAAMC,cAA+D,EACnE,WACA,UACA,GAAG,YAEH,qBAAC,gBAAgB;CACf,WAAW,GACT,kMACA,UACD;CACD,GAAI;YAEJ,oBAAC;EAAK,WAAU;YACd,oBAAC,gBAAgB,2BACf,oBAAC,aAAU,WAAU,WAAW,GACF;GAC3B,EACP,oBAAC,gBAAgB,YAAU,WAAoC;EAC1C;;;;;;;;;;;;;;;;;;AAoBzB,MAAaC,mBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,mBACA,sCACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHJ,MAAa,SAAS;AACtB,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,OAAO;AACd,OAAO,YAAY"}

package/dist/esm/components/SwitchSelector/index.mjs CHANGED Viewed

@@ -1,8 +1,7 @@
 'use client';
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { createElement, useEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/SwitchSelector/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["defaultChoices: SwitchSelectorChoices<boolean>","value"],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n hoverable?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n 'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n 'border-destructive bg-destructive text-destructive',\n [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: `${SwitchSelectorColor.PRIMARY}`,\n },\n }\n);\n\nexport enum SwitchSelectorSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${SwitchSelectorSize.MD}`,\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]:\n 'bg-primary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.SECONDARY}`]:\n 'bg-secondary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n 'bg-destructive data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.NEUTRAL}`]:\n 'bg-neutral data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.LIGHT}`]:\n 'bg-white data-[indicator=true]:text-black',\n [`${SwitchSelectorColor.DARK}`]:\n 'bg-neutral-800 data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.TEXT}`]:\n 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.MD,\n className,\n hoverable = true,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null);\n\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n isHoverable: hoverable,\n });\n\n const selectedIndex = choices.findIndex(\n (choice) => choice.value === valueState\n );\n\n // The indicator follows hover if hoverable, otherwise the selected option\n const indicatorIndex =\n hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={isSelected}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => setHoveredIndex(index)}\n onMouseLeave={() => setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"index.mjs","names":["defaultChoices: SwitchSelectorChoices<boolean>","value"],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n hoverable?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n 'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n 'border-destructive bg-destructive text-destructive',\n [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: `${SwitchSelectorColor.PRIMARY}`,\n },\n }\n);\n\nexport enum SwitchSelectorSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${SwitchSelectorSize.MD}`,\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]:\n 'bg-primary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.SECONDARY}`]:\n 'bg-secondary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n 'bg-destructive data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.NEUTRAL}`]:\n 'bg-neutral data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.LIGHT}`]:\n 'bg-white data-[indicator=true]:text-black',\n [`${SwitchSelectorColor.DARK}`]:\n 'bg-neutral-800 data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.TEXT}`]:\n 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.MD,\n className,\n hoverable = true,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null);\n\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n isHoverable: hoverable,\n });\n\n const selectedIndex = choices.findIndex(\n (choice) => choice.value === valueState\n );\n\n // The indicator follows hover if hoverable, otherwise the selected option\n const indicatorIndex =\n hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={isSelected}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => setHoveredIndex(index)}\n onMouseLeave={() => setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/Tab/Tab.mjs CHANGED Viewed

@@ -1,8 +1,7 @@
 'use client';
-import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";

package/dist/esm/components/Tab/Tab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.mjs","names":["contextValue: TabContextType","props","children"],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Children,\n createContext,\n type HTMLAttributes,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useState,\n} from 'react';\nimport { useHorizontalSwipe } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n activeTab: string;\n setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType \| undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva(\n 'relative w-full rounded-lg border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border-2',\n ghost: 'border-0 bg-transparent shadow-none',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof tabContainerVariant> & {\n defaultTab?: string;\n group?: string;\n children: ReactNode;\n };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n label: string;\n value: string;\n disabled?: boolean;\n children: ReactNode;\n};\n\n/*\n TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n /\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n // This component is primarily used for its props by the parent Tab component\n // The actual rendering is handled by the Tab component\n <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/\n Tab container component that manages tab state and renders tab headers and content\n \n Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n * <Tab.Item label=\"First Tab\" value=\"tab1\">\n * Content for first tab\n * </Tab.Item>\n * <Tab.Item label=\"Second Tab\" value=\"tab2\">\n * Content for second tab\n * </Tab.Item>\n * </Tab>\n * ```\n /\nconst TabComponent = ({\n defaultTab,\n group,\n variant,\n children,\n className,\n ...props\n}: TabProps) => {\n // Extract TabItem children to get their props\n const tabItems = Children.toArray(children).filter((child) => {\n return isValidElement(child) && child.type === TabItem;\n }) as ReactElement<TabItemProps>[];\n\n const firstTabValue = tabItems[0]?.props?.value;\n const { tabsValues, setTabsValues } = useTabContext();\n const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n const hasGroup = group && typeof tabsValues === 'object';\n const currentTabValue =\n (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n const activeTabIndex = tabItems.findIndex(\n (tab) => tab.props.value === currentTabValue\n );\n\n const tabsCount = tabItems.length;\n\n const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n itemIndex: activeTabIndex,\n itemCount: tabsCount,\n onSwipeLeft: () => {\n const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n const nextValue = tabItems[targetIndex]?.props?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n onSwipeRight: () => {\n const targetIndex = Math.max(0, activeTabIndex - 1);\n const nextValue = tabItems[targetIndex]?.props?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n });\n\n const handleSetActiveTab = (tab: string) => {\n setActiveTab(tab);\n\n if (typeof setTabsValues === 'function') {\n setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n }\n };\n\n const contextValue: TabContextType = {\n activeTab: activeTab ?? firstTabValue ?? '',\n setActiveTab: handleSetActiveTab,\n };\n\n return (\n <TabContext.Provider value={contextValue}>\n <div\n className={cn(tabContainerVariant({ variant }), className)}\n {...props}\n >\n {/ Tab Headers /}\n <div className=\"sticky top-36 z-10 flex gap-3 bg-background/70 p-3 backdrop-blur\">\n <TabSelector\n selectedChoice={currentTabValue}\n tabs={tabItems.map((child) => {\n const { label, value, disabled } = child.props;\n const isActive = currentTabValue === value;\n\n return (\n <button\n key={value}\n className={cn(\n 'cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n !isActive && 'text-neutral/70'\n )}\n data-active={isActive}\n disabled={disabled}\n onClick={() => !disabled && handleSetActiveTab(value)}\n role=\"tab\"\n aria-selected={isActive}\n aria-controls={`tabpanel-${value}`}\n id={`tab-${value}`}\n >\n {label}\n </button>\n );\n })}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n </div>\n {/ Tab Content /}\n {/ Clipper: no overflow; uses clip-path /}\n <div\n className=\"relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]\"\n {...containerProps}\n >\n {/ Track /}\n <div\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={cn(\n 'grid w-full min-w-0',\n isDragging\n ? 'transition-none'\n : 'transition-transform duration-300 ease-in-out'\n )}\n style={{\n gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n transform: `translateX(-${activeTabIndex 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n }}\n >\n {tabItems.map(({ props }, index) => {\n const { value, children } = props;\n const isActive = index === activeTabIndex;\n\n return (\n <div\n key={value}\n role=\"tabpanel\"\n aria-labelledby={`tab-${value}`}\n id={`tabpanel-${value}`}\n aria-hidden={!isActive}\n tabIndex={isActive ? 0 : -1}\n data-active={isActive}\n className={cn(\n 'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n !isActive && 'pointer-events-none opacity-0' // prevent offscreen interaction\n )}\n >\n <div className=\"flex w-full min-w-0 flex-col items-stretch gap-6\">\n {children}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n </TabContext.Provider>\n );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n Item: TabItem,\n});\n\n// Add display name for better debugging\n"],"mappings":"~~;;;;;;;;;;;;~~AAuBA,MAAM,aAAa,cAA0C,OAAU;AAGvE,MAAM,sBAAsB,IAC1B,6HACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,UAAU;EACV,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;AAoBD,MAAM,WAAW,EAAE,UAAU,GAAG,YAG9B,oBAAC;CAAI,GAAI;CAAQ;EAAe;AAIlC,QAAQ,cAAc;;;;;;;;;;;;;;;;AAiBtB,MAAM,gBAAgB,EACpB,YACA,OACA,SACA,UACA,WACA,GAAG,YACW;CAEd,MAAM,WAAW,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAC5D,SAAO,eAAe,MAAM,IAAI,MAAM,SAAS;GAC/C;CAEF,MAAM,gBAAgB,SAAS,IAAI,OAAO;CAC1C,MAAM,EAAE,YAAY,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc,iBAAiB,GAAG;CAE7E,MAAM,mBADW,SAAS,OAAO,eAAe,WAElC,aAAa,SAAS,cAAc,cAAc;CAChE,MAAM,iBAAiB,SAAS,WAC7B,QAAQ,IAAI,MAAM,UAAU,gBAC9B;CAED,MAAM,YAAY,SAAS;CAE3B,MAAM,EAAE,gBAAgB,cAAc,eAAe,mBAAmB;EACtE,WAAW;EACX,WAAW;EACX,mBAAmB;GAEjB,MAAM,YAAY,SADE,KAAK,IAAI,YAAY,GAAG,iBAAiB,EAAE,GACtB,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE9C,oBAAoB;GAElB,MAAM,YAAY,SADE,KAAK,IAAI,GAAG,iBAAiB,EAAE,GACV,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE/C,CAAC;CAEF,MAAM,sBAAsB,QAAgB;AAC1C,eAAa,IAAI;AAEjB,MAAI,OAAO,kBAAkB,WAC3B,gBAAe,UAAU;GAAE,GAAG;IAAO,QAAS;GAAK,EAAE;;CAIzD,MAAMA,eAA+B;EACnC,WAAW,aAAa,iBAAiB;EACzC,cAAc;EACf;AAED,QACE,oBAAC,WAAW;EAAS,OAAO;YAC1B,qBAAC;GACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,CAAC,EAAE,UAAU;GAC1D,GAAI;cAGJ,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,gBAAgB;KAChB,MAAM,SAAS,KAAK,UAAU;MAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,MAAM;MACzC,MAAM,WAAW,oBAAoB;AAErC,aACE,oBAAC;OAEC,WAAW,GACT,gGACA,CAAC,YAAY,kBACd;OACD,eAAa;OACH;OACV,eAAe,CAAC,YAAY,mBAAmB,MAAM;OACrD,MAAK;OACL,iBAAe;OACf,iBAAe,YAAY;OAC3B,IAAI,OAAO;iBAEV;SAbI,MAcE;OAEX;KACF;KACA,OAAO,iBAAiB;MACxB;KACE,EAGN,oBAAC;IACC,WAAU;IACV,GAAI;cAGJ,oBAAC;KACC,MAAK;KACL,oBAAiB;KACjB,WAAW,GACT,uBACA,aACI,oBACA,gDACL;KACD,OAAO;MACL,qBAAqB,UAAU,SAAS,OAAO;MAC/C,WAAW,eAAe,iBAAiB,OAAO,aAAa,eAAe,GAAG;MAClF;eAEA,SAAS,KAAK,EAAE,kBAAS,UAAU;MAClC,MAAM,EAAE,OAAO,yBAAaC;MAC5B,MAAM,WAAW,UAAU;AAE3B,aACE,oBAAC;OAEC,MAAK;OACL,mBAAiB,OAAO;OACxB,IAAI,YAAY;OAChB,eAAa,CAAC;OACd,UAAU,WAAW,IAAI;OACzB,eAAa;OACb,WAAW,GACT,8EACA,CAAC,YAAY,gCACd;iBAED,oBAAC;QAAI,WAAU;kBACZC;SACG;SAdD,MAeD;OAER;MACE;KACF;IACF;GACc;;AAK1B,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,SACP,CAAC"}
1	+ {"version":3,"file":"Tab.mjs","names":["contextValue: TabContextType","props","children"],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Children,\n createContext,\n type HTMLAttributes,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useState,\n} from 'react';\nimport { useHorizontalSwipe } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n activeTab: string;\n setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType \| undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva(\n 'relative w-full rounded-lg border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border-2',\n ghost: 'border-0 bg-transparent shadow-none',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof tabContainerVariant> & {\n defaultTab?: string;\n group?: string;\n children: ReactNode;\n };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n label: string;\n value: string;\n disabled?: boolean;\n children: ReactNode;\n};\n\n/*\n TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n /\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n // This component is primarily used for its props by the parent Tab component\n // The actual rendering is handled by the Tab component\n <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/\n Tab container component that manages tab state and renders tab headers and content\n \n Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n * <Tab.Item label=\"First Tab\" value=\"tab1\">\n * Content for first tab\n * </Tab.Item>\n * <Tab.Item label=\"Second Tab\" value=\"tab2\">\n * Content for second tab\n * </Tab.Item>\n * </Tab>\n * ```\n /\nconst TabComponent = ({\n defaultTab,\n group,\n variant,\n children,\n className,\n ...props\n}: TabProps) => {\n // Extract TabItem children to get their props\n const tabItems = Children.toArray(children).filter((child) => {\n return isValidElement(child) && child.type === TabItem;\n }) as ReactElement<TabItemProps>[];\n\n const firstTabValue = tabItems[0]?.props?.value;\n const { tabsValues, setTabsValues } = useTabContext();\n const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n const hasGroup = group && typeof tabsValues === 'object';\n const currentTabValue =\n (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n const activeTabIndex = tabItems.findIndex(\n (tab) => tab.props.value === currentTabValue\n );\n\n const tabsCount = tabItems.length;\n\n const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n itemIndex: activeTabIndex,\n itemCount: tabsCount,\n onSwipeLeft: () => {\n const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n const nextValue = tabItems[targetIndex]?.props?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n onSwipeRight: () => {\n const targetIndex = Math.max(0, activeTabIndex - 1);\n const nextValue = tabItems[targetIndex]?.props?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n });\n\n const handleSetActiveTab = (tab: string) => {\n setActiveTab(tab);\n\n if (typeof setTabsValues === 'function') {\n setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n }\n };\n\n const contextValue: TabContextType = {\n activeTab: activeTab ?? firstTabValue ?? '',\n setActiveTab: handleSetActiveTab,\n };\n\n return (\n <TabContext.Provider value={contextValue}>\n <div\n className={cn(tabContainerVariant({ variant }), className)}\n {...props}\n >\n {/ Tab Headers /}\n <div className=\"sticky top-36 z-10 flex gap-3 bg-background/70 p-3 backdrop-blur\">\n <TabSelector\n selectedChoice={currentTabValue}\n tabs={tabItems.map((child) => {\n const { label, value, disabled } = child.props;\n const isActive = currentTabValue === value;\n\n return (\n <button\n key={value}\n className={cn(\n 'cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n !isActive && 'text-neutral/70'\n )}\n data-active={isActive}\n disabled={disabled}\n onClick={() => !disabled && handleSetActiveTab(value)}\n role=\"tab\"\n aria-selected={isActive}\n aria-controls={`tabpanel-${value}`}\n id={`tab-${value}`}\n >\n {label}\n </button>\n );\n })}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n </div>\n {/ Tab Content /}\n {/ Clipper: no overflow; uses clip-path /}\n <div\n className=\"relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]\"\n {...containerProps}\n >\n {/ Track /}\n <div\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={cn(\n 'grid w-full min-w-0',\n isDragging\n ? 'transition-none'\n : 'transition-transform duration-300 ease-in-out'\n )}\n style={{\n gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n transform: `translateX(-${activeTabIndex 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n }}\n >\n {tabItems.map(({ props }, index) => {\n const { value, children } = props;\n const isActive = index === activeTabIndex;\n\n return (\n <div\n key={value}\n role=\"tabpanel\"\n aria-labelledby={`tab-${value}`}\n id={`tabpanel-${value}`}\n aria-hidden={!isActive}\n tabIndex={isActive ? 0 : -1}\n data-active={isActive}\n className={cn(\n 'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n !isActive && 'pointer-events-none opacity-0' // prevent offscreen interaction\n )}\n >\n <div className=\"flex w-full min-w-0 flex-col items-stretch gap-6\">\n {children}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n </TabContext.Provider>\n );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n Item: TabItem,\n});\n\n// Add display name for better debugging\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,aAAa,cAA0C,OAAU;AAGvE,MAAM,sBAAsB,IAC1B,6HACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,UAAU;EACV,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;AAoBD,MAAM,WAAW,EAAE,UAAU,GAAG,YAG9B,oBAAC;CAAI,GAAI;CAAQ;EAAe;AAIlC,QAAQ,cAAc;;;;;;;;;;;;;;;;AAiBtB,MAAM,gBAAgB,EACpB,YACA,OACA,SACA,UACA,WACA,GAAG,YACW;CAEd,MAAM,WAAW,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAC5D,SAAO,eAAe,MAAM,IAAI,MAAM,SAAS;GAC/C;CAEF,MAAM,gBAAgB,SAAS,IAAI,OAAO;CAC1C,MAAM,EAAE,YAAY,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc,iBAAiB,GAAG;CAE7E,MAAM,mBADW,SAAS,OAAO,eAAe,WAElC,aAAa,SAAS,cAAc,cAAc;CAChE,MAAM,iBAAiB,SAAS,WAC7B,QAAQ,IAAI,MAAM,UAAU,gBAC9B;CAED,MAAM,YAAY,SAAS;CAE3B,MAAM,EAAE,gBAAgB,cAAc,eAAe,mBAAmB;EACtE,WAAW;EACX,WAAW;EACX,mBAAmB;GAEjB,MAAM,YAAY,SADE,KAAK,IAAI,YAAY,GAAG,iBAAiB,EAAE,GACtB,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE9C,oBAAoB;GAElB,MAAM,YAAY,SADE,KAAK,IAAI,GAAG,iBAAiB,EAAE,GACV,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE/C,CAAC;CAEF,MAAM,sBAAsB,QAAgB;AAC1C,eAAa,IAAI;AAEjB,MAAI,OAAO,kBAAkB,WAC3B,gBAAe,UAAU;GAAE,GAAG;IAAO,QAAS;GAAK,EAAE;;CAIzD,MAAMA,eAA+B;EACnC,WAAW,aAAa,iBAAiB;EACzC,cAAc;EACf;AAED,QACE,oBAAC,WAAW;EAAS,OAAO;YAC1B,qBAAC;GACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,CAAC,EAAE,UAAU;GAC1D,GAAI;cAGJ,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,gBAAgB;KAChB,MAAM,SAAS,KAAK,UAAU;MAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,MAAM;MACzC,MAAM,WAAW,oBAAoB;AAErC,aACE,oBAAC;OAEC,WAAW,GACT,gGACA,CAAC,YAAY,kBACd;OACD,eAAa;OACH;OACV,eAAe,CAAC,YAAY,mBAAmB,MAAM;OACrD,MAAK;OACL,iBAAe;OACf,iBAAe,YAAY;OAC3B,IAAI,OAAO;iBAEV;SAbI,MAcE;OAEX;KACF;KACA,OAAO,iBAAiB;MACxB;KACE,EAGN,oBAAC;IACC,WAAU;IACV,GAAI;cAGJ,oBAAC;KACC,MAAK;KACL,oBAAiB;KACjB,WAAW,GACT,uBACA,aACI,oBACA,gDACL;KACD,OAAO;MACL,qBAAqB,UAAU,SAAS,OAAO;MAC/C,WAAW,eAAe,iBAAiB,OAAO,aAAa,eAAe,GAAG;MAClF;eAEA,SAAS,KAAK,EAAE,kBAAS,UAAU;MAClC,MAAM,EAAE,OAAO,yBAAaC;MAC5B,MAAM,WAAW,UAAU;AAE3B,aACE,oBAAC;OAEC,MAAK;OACL,mBAAiB,OAAO;OACxB,IAAI,YAAY;OAChB,eAAa,CAAC;OACd,UAAU,WAAW,IAAI;OACzB,eAAa;OACb,WAAW,GACT,8EACA,CAAC,YAAY,gCACd;iBAED,oBAAC;QAAI,WAAU;kBACZC;SACG;SAdD,MAeD;OAER;MACE;KACF;IACF;GACc;;AAK1B,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,SACP,CAAC"}

package/dist/esm/components/Tab/TabContext.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { createContext, useContext, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/Tab/TabContext.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabContext.mjs","names":["TabProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n useState,\n} from 'react';\n\ntype TabContextValue = {\n tabsValues: Record<string, any>;\n setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const TabContext = createContext<TabContextValue>({\n tabsValues: {},\n setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/\n Hook that provides the current locale\n /\nexport const useTabContext = () => useContext(TabContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n return (\n <TabContext\n value={{\n tabsValues,\n setTabsValues,\n }}\n >\n {children}\n </TabContext>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAoBA,MAAa,aAAa,cAA+B;CACvD,YAAY,EAAE;CACd,sBAAsB;CACvB,CAAC;;;;AAKF,MAAa,sBAAsB,WAAW,WAAW;;;;AAKzD,MAAaA,eAAsC,EAAE,eAAe;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAA8B,EAAE,CAAC;AAErE,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACD;EAEA;GACU"}
1	+ {"version":3,"file":"TabContext.mjs","names":["TabProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n useState,\n} from 'react';\n\ntype TabContextValue = {\n tabsValues: Record<string, any>;\n setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const TabContext = createContext<TabContextValue>({\n tabsValues: {},\n setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/\n Hook that provides the current locale\n /\nexport const useTabContext = () => useContext(TabContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n return (\n <TabContext\n value={{\n tabsValues,\n setTabsValues,\n }}\n >\n {children}\n </TabContext>\n );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,aAAa,cAA+B;CACvD,YAAY,EAAE;CACd,sBAAsB;CACvB,CAAC;;;;AAKF,MAAa,sBAAsB,WAAW,WAAW;;;;AAKzD,MAAaA,eAAsC,EAAE,eAAe;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAA8B,EAAE,CAAC;AAErE,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACD;EAEA;GACU"}

package/dist/esm/components/TabSelector/TabSelector.mjs CHANGED Viewed

@@ -1,8 +1,7 @@
 'use client';
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { cloneElement, useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/TabSelector/TabSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n useEffect,\n useRef,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n destructive: 'border-destructive bg-destructive text-destructive',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n destructive: 'bg-destructive/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n },\n }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = TabSelectorColor.PRIMARY,\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n { isHoverable: hoverable }\n );\n\n useEffect(() => {\n calculatePosition();\n }, [selectedChoice, tabs]);\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: (e: MouseEvent<HTMLElement>) => {\n Tab.props?.onClick?.(e);\n onTabClick?.(key);\n },\n 'aria-selected': isSelected,\n 'data-active': isSelected as unknown as string,\n tabIndex: isSelected ? 0 : -1,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAcA,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,qBAAqB,IACzB,uDACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACP,EACF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,iIACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;CACX,aAAa;CACb,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;CACP,EACF,EACF,CACF;;;;;;;;;;;;;;;;;;AAiCD,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA,EAAE,aAAa,WAAW,CAC3B;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAiB;EACjB,wBAAqB;EACrB,MAAK;aAEJ,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;AAEtC,UAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;AACvC,SAAI,OAAO,UAAU,EAAE;AACvB,kBAAa,IAAI;;IAEnB,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;AACxB,iBAAY,QAAQ,SAAS;;IAEhC,CAAiB;IAClB,EACD,2BACC,oBAAC;GACC,WAAW,GACT,iBAAiB,EACf,OACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}
1	+ {"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n cloneElement,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n useEffect,\n useRef,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n destructive: 'border-destructive bg-destructive text-destructive',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary/10 aria-selected:text-text',\n secondary: 'bg-secondary/10 aria-selected:text-text',\n destructive: 'bg-destructive/10 aria-selected:text-text',\n neutral: 'bg-neutral/10 aria-selected:text-white/10',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-opposite',\n },\n },\n }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n color?: TabSelectorColor \| `${TabSelectorColor}`;\n };\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = TabSelectorColor.PRIMARY,\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n { isHoverable: hoverable }\n );\n\n useEffect(() => {\n calculatePosition();\n }, [selectedChoice, tabs]);\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: (e: MouseEvent<HTMLElement>) => {\n Tab.props?.onClick?.(e);\n onTabClick?.(key);\n },\n 'aria-selected': isSelected,\n 'data-active': isSelected as unknown as string,\n tabIndex: isSelected ? 0 : -1,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAcA,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,qBAAqB,IACzB,uDACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACP,EACF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,iIACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;CACX,aAAa;CACb,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;CACP,EACF,EACF,CACF;;;;;;;;;;;;;;;;;;AAiCD,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA,EAAE,aAAa,WAAW,CAC3B;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAiB;EACjB,wBAAqB;EACrB,MAAK;aAEJ,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;AAEtC,UAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;AACvC,SAAI,OAAO,UAAU,EAAE;AACvB,kBAAa,IAAI;;IAEnB,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;AACxB,iBAAY,QAAQ,SAAS;;IAEhC,CAAiB;IAClB,EACD,2BACC,oBAAC;GACC,WAAW,GACT,iBAAiB,EACf,OACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}

package/dist/esm/components/Table/Table.mjs CHANGED Viewed

@@ -1,12 +1,11 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Modal, ModalSize } from "../Modal/Modal.mjs";
 import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
-import { useState } from "react";
 import { MoveDiagonal } from "lucide-react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table/Table.tsx

package/dist/esm/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","names":["Table: FC<TableProps>"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAsMA,MAAaA,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,QACE,qBAAC;EAAI,WAAU;;GACZ,gBACC,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;OACN;MACE;KACF;GAER,oBAAC;IACa;IACZ,WAAU;cAEV,oBAAC;KACC,WAAW,GACT,4EACA,UACD;KACD,GAAI;MACJ;KACa;GAEjB,oBAAC;IACC,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,WAAW,GACT,8CACA,UACD;MACD,GAAI;OACJ;MACE,GAEN,mCAAK;KAED;;GACJ"}
1	+ {"version":3,"file":"Table.mjs","names":["Table: FC<TableProps>"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA,MAAaA,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,QACE,qBAAC;EAAI,WAAU;;GACZ,gBACC,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;OACN;MACE;KACF;GAER,oBAAC;IACa;IACZ,WAAU;cAEV,oBAAC;KACC,WAAW,GACT,4EACA,UACD;KACD,GAAI;MACJ;KACa;GAEjB,oBAAC;IACC,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,WAAW,GACT,8CACA,UACD;MACD,GAAI;OACJ;MACE,GAEN,mCAAK;KAED;;GACJ"}

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { TextArea } from "./TextArea.mjs";
 import { useEffect, useImperativeHandle, useRef } from "react";

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutoSizeTextArea.mjs","names":["AutoSizedTextArea: FC<AutoSizedTextAreaProps>","handleChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ChangeEventHandler,\n type FC,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/*\n Props for the AutoSizedTextArea component.\n \n Extends TextAreaProps with auto-sizing functionality and row limitations.\n \n @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n * placeholder=\"Start typing and watch it grow...\"\n * autoSize={true}\n * maxRows={10}\n * />\n \n // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n * value={longText}\n * onChange={handleChange}\n * autoSize={true}\n * maxRows={5}\n * className=\"max-h-[120px]\"\n * />\n \n // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n * autoSize={false}\n * rows={3}\n * placeholder=\"Fixed height textarea\"\n * />\n * ```\n /\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n /* Whether to automatically adjust height based on content /\n autoSize?: boolean;\n /* Maximum number of rows before scrolling is enabled /\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/\n AutoSizedTextArea Component\n \n An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n \n ## Features\n * - Auto-Sizing: Dynamically grows and shrinks based on content\n * - Row Limits: Configurable maximum rows before scrolling\n * - Smooth Transitions: Seamless height adjustments as user types\n * - Scroll Management: Automatic overflow handling when max height reached\n * - Performance Optimized: Efficient height calculations and updates\n \n ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n \n ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n \n @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n \n <AutoSizedTextArea\n * value={message}\n * onChange={(e) => setMessage(e.target.value)}\n * placeholder=\"Type your message...\"\n * autoSize={true}\n * maxRows={8}\n * className=\"min-h-[40px]\"\n * onKeyDown={(e) => {\n * if (e.key === 'Enter' && !e.shiftKey) {\n * e.preventDefault();\n * sendMessage(message);\n * setMessage('');\n * }\n * }}\n * />\n \n // Note-taking with generous height limits\n * <AutoSizedTextArea\n * defaultValue={note.content}\n * onChange={handleNoteChange}\n * placeholder=\"Write your notes here...\"\n * autoSize={true}\n * maxRows={20}\n * variant={InputVariant.DEFAULT}\n * />\n * ```\n /\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n className,\n autoSize = true,\n onChange,\n maxRows = 999,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = () => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl \|\| !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n };\n\n useEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = (el: HTMLTextAreaElement \| null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n };\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n {...props}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAaA,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,KAAK;AAE5D,qBAAoB,WAAW,YAAY,QAAS;CAEpD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;AAE/B,MAAI,CAAC,cAAc,CAAC,SAAU;EAE9B,MAAM,gBAAgB,WAAW;AAGjC,gBAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;AAGhC,gBAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,UAAU,EAAE,UAAU,CAAC;;AAGnF,iBAAgB;AACd,gBAAc;IACb;EAAC,MAAM;EAAO,MAAM;EAAc;EAAa,CAAC;CAEnD,MAAMC,gBAAyD,MAAM;AACnE,aAAW,EAAE;AACb,gBAAc;;CAGhB,MAAM,UAAU,OAAmC;AACjD,cAAY,UAAU;AACtB,MAAI,GACF,eAAc;;AAIlB,QACE,oBAAC;EACC,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;GACJ"}
1	+ {"version":3,"file":"AutoSizeTextArea.mjs","names":["AutoSizedTextArea: FC<AutoSizedTextAreaProps>","handleChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ChangeEventHandler,\n type FC,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/*\n Props for the AutoSizedTextArea component.\n \n Extends TextAreaProps with auto-sizing functionality and row limitations.\n \n @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n * placeholder=\"Start typing and watch it grow...\"\n * autoSize={true}\n * maxRows={10}\n * />\n \n // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n * value={longText}\n * onChange={handleChange}\n * autoSize={true}\n * maxRows={5}\n * className=\"max-h-[120px]\"\n * />\n \n // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n * autoSize={false}\n * rows={3}\n * placeholder=\"Fixed height textarea\"\n * />\n * ```\n /\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n /* Whether to automatically adjust height based on content /\n autoSize?: boolean;\n /* Maximum number of rows before scrolling is enabled /\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/\n AutoSizedTextArea Component\n \n An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n \n ## Features\n * - Auto-Sizing: Dynamically grows and shrinks based on content\n * - Row Limits: Configurable maximum rows before scrolling\n * - Smooth Transitions: Seamless height adjustments as user types\n * - Scroll Management: Automatic overflow handling when max height reached\n * - Performance Optimized: Efficient height calculations and updates\n \n ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n \n ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n \n @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n \n <AutoSizedTextArea\n * value={message}\n * onChange={(e) => setMessage(e.target.value)}\n * placeholder=\"Type your message...\"\n * autoSize={true}\n * maxRows={8}\n * className=\"min-h-[40px]\"\n * onKeyDown={(e) => {\n * if (e.key === 'Enter' && !e.shiftKey) {\n * e.preventDefault();\n * sendMessage(message);\n * setMessage('');\n * }\n * }}\n * />\n \n // Note-taking with generous height limits\n * <AutoSizedTextArea\n * defaultValue={note.content}\n * onChange={handleNoteChange}\n * placeholder=\"Write your notes here...\"\n * autoSize={true}\n * maxRows={20}\n * variant={InputVariant.DEFAULT}\n * />\n * ```\n /\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n className,\n autoSize = true,\n onChange,\n maxRows = 999,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = () => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl \|\| !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n };\n\n useEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = (el: HTMLTextAreaElement \| null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n };\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAaA,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,KAAK;AAE5D,qBAAoB,WAAW,YAAY,QAAS;CAEpD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;AAE/B,MAAI,CAAC,cAAc,CAAC,SAAU;EAE9B,MAAM,gBAAgB,WAAW;AAGjC,gBAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;AAGhC,gBAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,UAAU,EAAE,UAAU,CAAC;;AAGnF,iBAAgB;AACd,gBAAc;IACb;EAAC,MAAM;EAAO,MAAM;EAAc;EAAa,CAAC;CAEnD,MAAMC,gBAAyD,MAAM;AACnE,aAAW,EAAE;AACb,gBAAc;;CAGhB,MAAM,UAAU,OAAmC;AACjD,cAAY,UAAU;AACtB,MAAI,GACF,eAAc;;AAIlB,QACE,oBAAC;EACC,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;GACJ"}

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs CHANGED Viewed

@@ -1,11 +1,10 @@
 'use client';
 import { useAutocomplete } from "../../hooks/reactQuery.mjs";
 import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
-import { useConfiguration } from "@intlayer/editor-react";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useConfiguration } from "@intlayer/editor-react";
 //#region src/components/TextArea/AutocompleteTextArea.tsx
 /**

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutocompleteTextArea.mjs","names":["AutoCompleteTextarea: FC<AutocompleteTextAreaProps>"],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n AutoSizedTextArea,\n type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/*\n Custom hook for debouncing values to prevent excessive API calls.\n \n Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n \n @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n \n @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n \n useEffect(() => {\n * if (debouncedSearchTerm) {\n * performSearch(debouncedSearchTerm);\n * }\n * }, [debouncedSearchTerm]);\n * ```\n /\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cleanup the timer if value changes before 'delay' ms\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n};\n\n/\n Props for the AutocompleteTextArea component.\n \n Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n \n @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n * placeholder=\"Start typing for AI suggestions...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={10}\n * />\n \n // Manual suggestion mode\n * <AutoCompleteTextarea\n * value={content}\n * onChange={handleChange}\n * suggestion=\"Consider adding more details about...\"\n * isActive={false}\n * />\n \n // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n * placeholder=\"Private notes (no AI assistance)\"\n * isActive={false}\n * autoSize={true}\n * />\n * ```\n /\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n /* Whether AI autocomplete is active and should fetch suggestions /\n isActive?: boolean;\n /* Manual suggestion text to display (overrides AI suggestions) /\n suggestion?: string;\n};\n\n/\n AutoCompleteTextarea Component\n \n An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n \n ## Features\n * - AI-Powered Suggestions: Context-aware autocomplete using configured AI models\n * - Debounced API Calls: Efficient suggestion fetching with 200ms debounce\n * - Visual Suggestions: Inline preview of suggested completions\n * - Keyboard Navigation: Tab key to accept suggestions\n * - Context Analysis: Uses surrounding text for better suggestions\n * - Auto-Sizing: Inherits all AutoSizedTextArea capabilities\n * - Performance Optimized: Smart caching and minimal re-renders\n \n ## Technical Implementation\n * - Debounce Strategy: 200ms delay before fetching suggestions\n * - Context Window: 5 lines before/after cursor for context\n * - Minimum Trigger: Requires 3+ characters before suggesting\n * - Position Tracking: Ghost layer for accurate suggestion positioning\n * - Cursor Management: Tracks cursor position during suggestion fetch\n \n ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n \n ## Use Cases\n * - Content Creation: Blog posts, articles, documentation\n * - Code Comments: Intelligent code documentation assistance\n * - Email Composition: Professional email writing assistance\n * - Creative Writing: Story and narrative completion\n * - Technical Documentation: API docs, README files\n * - Social Media: Post creation with engagement optimization\n \n @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n \n <div className=\"space-y-4\">\n * <div className=\"flex items-center gap-2\">\n * <Switch\n * checked={isAiEnabled}\n * onChange={setIsAiEnabled}\n * />\n * <label>AI Writing Assistant</label>\n * </div>\n \n <AutoCompleteTextarea\n * value={blogPost}\n * onChange={(e) => setBlogPost(e.target.value)}\n * placeholder=\"Start writing your blog post...\"\n * isActive={isAiEnabled}\n * autoSize={true}\n * maxRows={15}\n * className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n * />\n * </div>\n \n // Code documentation assistant\n * <AutoCompleteTextarea\n * value={docComment}\n * onChange={handleDocChange}\n * placeholder=\"/** Describe this function... \\/\"\n isActive={true}\n * autoSize={true}\n * maxRows={8}\n * className=\"font-mono text-sm\"\n * />\n \n // Email composition with templates\n * <AutoCompleteTextarea\n * defaultValue=\"Dear \"\n * placeholder=\"AI will help complete your email...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={12}\n * variant={InputVariant.DEFAULT}\n * />\n * ```\n \n ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n isActive = true,\n suggestion: suggestionProp,\n ...props\n}) => {\n const defaultValue = String(props.value ?? props.defaultValue ?? '');\n const { mutate: autocomplete } = useAutocomplete();\n const configuration = useConfiguration();\n const [isTyped, setIsTyped] = useState(false);\n const [text, setText] = useState(defaultValue);\n const [suggestion, setSuggestion] = useState('');\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const placeholderRef = useRef<HTMLSpanElement>(null);\n const ghostLayerRef = useRef<HTMLDivElement>(null);\n const [suggestionPosition, setSuggestionPosition] = useState<{\n left: number;\n top: number;\n } \| null>(null);\n const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n // Only update this “debouncedText” after the user stops typing for 200ms\n const debouncedText = useDebounce(text, 200);\n\n useEffect(() => {\n if (typeof props.value === 'undefined') return;\n setText(defaultValue);\n }, [props.value, props.defaultValue]);\n\n useEffect(() => {\n if (!isActive) return;\n if (!isTyped) return;\n\n const fetchSuggestion = async () => {\n try {\n const cursor =\n textareaRef.current?.selectionStart ?? debouncedText.length;\n const before = debouncedText.slice(0, cursor);\n const after = debouncedText.slice(cursor);\n const numLines = 5;\n const beforeLines = before.split('\\n');\n const contextBeforeLines = beforeLines.slice(\n Math.max(0, beforeLines.length - numLines - 1),\n -1\n );\n const contextBefore = contextBeforeLines.join('\\n');\n const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n const afterLines = after.split('\\n');\n const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n autocomplete(\n {\n text: before,\n contextBefore,\n currentLine,\n contextAfter,\n aiOptions: {\n apiKey: configuration.ai?.apiKey,\n model: configuration.ai?.model,\n temperature: configuration.ai?.temperature,\n },\n },\n {\n onSuccess: (data: AutocompleteResponse) => {\n setSuggestion(data.data?.autocompletion ?? '');\n setCursorAtFetch(cursor);\n },\n }\n );\n } catch (err) {\n console.error('Autocomplete error:', err);\n }\n };\n\n if (debouncedText.length > 3) {\n // Only fetch if user typed more than 3 chars and has paused\n setSuggestion('');\n fetchSuggestion();\n } else {\n // If typed less than threshold, clear the suggestion\n setSuggestion('');\n }\n }, [debouncedText, isActive, autocomplete, configuration]);\n\n useEffect(() => {\n if (\n !suggestion \|\|\n cursorAtFetch === -1 \|\|\n !placeholderRef.current \|\|\n !ghostLayerRef.current\n ) {\n setSuggestionPosition(null);\n return;\n }\n\n const rect = placeholderRef.current.getBoundingClientRect();\n const parentRect = ghostLayerRef.current.getBoundingClientRect();\n setSuggestionPosition({\n left: rect.left - parentRect.left,\n top: rect.top - parentRect.top,\n });\n }, [suggestion, cursorAtFetch, text]);\n\n const acceptSuggestion = () => {\n const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n if (currentCursor !== cursorAtFetch) return;\n const newText =\n text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n setText(newText);\n setSuggestion('');\n setCursorAtFetch(-1);\n setTimeout(() => {\n textareaRef.current?.focus();\n const newCursorPos = currentCursor + suggestion.length;\n textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n }, 0);\n };\n\n return (\n <div className=\"relative w-full\">\n <div\n ref={ghostLayerRef}\n className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n aria-hidden=\"true\"\n >\n {suggestion && cursorAtFetch !== -1 ? (\n <>\n <span className=\"align-text-top text-transparent\">\n {text.slice(0, cursorAtFetch)}\n </span>\n <span\n ref={placeholderRef}\n style={{ visibility: 'hidden' }}\n aria-hidden=\"true\"\n >\n {suggestion}\n </span>\n <span className=\"align-text-top text-transparent\">\n {text.slice(cursorAtFetch)}\n </span>\n </>\n ) : (\n <span className=\"align-text-top text-transparent\">{text}</span>\n )}\n {suggestionProp && (\n <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n )}\n </div>\n {suggestion && suggestionPosition && (\n <div\n className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n style={{\n position: 'absolute',\n left: suggestionPosition.left,\n top: suggestionPosition.top,\n }}\n >\n {suggestion}\n </div>\n )}\n <AutoSizedTextArea\n {...props}\n ref={textareaRef}\n value={text}\n onChange={(e) => {\n setIsTyped(true);\n setText(e.target.value);\n setSuggestion('');\n props.onChange?.(e);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Tab' && suggestion) {\n e.preventDefault();\n acceptSuggestion();\n }\n props.onKeyDown?.(e);\n }}\n onSelect={(e) => {\n if (\n suggestion &&\n (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n ) {\n setSuggestion('');\n setCursorAtFetch(-1);\n }\n props.onSelect?.(e);\n }}\n />\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"AutocompleteTextArea.mjs","names":["AutoCompleteTextarea: FC<AutocompleteTextAreaProps>"],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n AutoSizedTextArea,\n type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/*\n Custom hook for debouncing values to prevent excessive API calls.\n \n Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n \n @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n \n @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n \n useEffect(() => {\n * if (debouncedSearchTerm) {\n * performSearch(debouncedSearchTerm);\n * }\n * }, [debouncedSearchTerm]);\n * ```\n /\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cleanup the timer if value changes before 'delay' ms\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n};\n\n/\n Props for the AutocompleteTextArea component.\n \n Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n \n @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n * placeholder=\"Start typing for AI suggestions...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={10}\n * />\n \n // Manual suggestion mode\n * <AutoCompleteTextarea\n * value={content}\n * onChange={handleChange}\n * suggestion=\"Consider adding more details about...\"\n * isActive={false}\n * />\n \n // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n * placeholder=\"Private notes (no AI assistance)\"\n * isActive={false}\n * autoSize={true}\n * />\n * ```\n /\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n /* Whether AI autocomplete is active and should fetch suggestions /\n isActive?: boolean;\n /* Manual suggestion text to display (overrides AI suggestions) /\n suggestion?: string;\n};\n\n/\n AutoCompleteTextarea Component\n \n An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n \n ## Features\n * - AI-Powered Suggestions: Context-aware autocomplete using configured AI models\n * - Debounced API Calls: Efficient suggestion fetching with 200ms debounce\n * - Visual Suggestions: Inline preview of suggested completions\n * - Keyboard Navigation: Tab key to accept suggestions\n * - Context Analysis: Uses surrounding text for better suggestions\n * - Auto-Sizing: Inherits all AutoSizedTextArea capabilities\n * - Performance Optimized: Smart caching and minimal re-renders\n \n ## Technical Implementation\n * - Debounce Strategy: 200ms delay before fetching suggestions\n * - Context Window: 5 lines before/after cursor for context\n * - Minimum Trigger: Requires 3+ characters before suggesting\n * - Position Tracking: Ghost layer for accurate suggestion positioning\n * - Cursor Management: Tracks cursor position during suggestion fetch\n \n ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n \n ## Use Cases\n * - Content Creation: Blog posts, articles, documentation\n * - Code Comments: Intelligent code documentation assistance\n * - Email Composition: Professional email writing assistance\n * - Creative Writing: Story and narrative completion\n * - Technical Documentation: API docs, README files\n * - Social Media: Post creation with engagement optimization\n \n @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n \n <div className=\"space-y-4\">\n * <div className=\"flex items-center gap-2\">\n * <Switch\n * checked={isAiEnabled}\n * onChange={setIsAiEnabled}\n * />\n * <label>AI Writing Assistant</label>\n * </div>\n \n <AutoCompleteTextarea\n * value={blogPost}\n * onChange={(e) => setBlogPost(e.target.value)}\n * placeholder=\"Start writing your blog post...\"\n * isActive={isAiEnabled}\n * autoSize={true}\n * maxRows={15}\n * className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n * />\n * </div>\n \n // Code documentation assistant\n * <AutoCompleteTextarea\n * value={docComment}\n * onChange={handleDocChange}\n * placeholder=\"/** Describe this function... \\/\"\n isActive={true}\n * autoSize={true}\n * maxRows={8}\n * className=\"font-mono text-sm\"\n * />\n \n // Email composition with templates\n * <AutoCompleteTextarea\n * defaultValue=\"Dear \"\n * placeholder=\"AI will help complete your email...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={12}\n * variant={InputVariant.DEFAULT}\n * />\n * ```\n \n ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n isActive = true,\n suggestion: suggestionProp,\n ...props\n}) => {\n const defaultValue = String(props.value ?? props.defaultValue ?? '');\n const { mutate: autocomplete } = useAutocomplete();\n const configuration = useConfiguration();\n const [isTyped, setIsTyped] = useState(false);\n const [text, setText] = useState(defaultValue);\n const [suggestion, setSuggestion] = useState('');\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const placeholderRef = useRef<HTMLSpanElement>(null);\n const ghostLayerRef = useRef<HTMLDivElement>(null);\n const [suggestionPosition, setSuggestionPosition] = useState<{\n left: number;\n top: number;\n } \| null>(null);\n const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n // Only update this “debouncedText” after the user stops typing for 200ms\n const debouncedText = useDebounce(text, 200);\n\n useEffect(() => {\n if (typeof props.value === 'undefined') return;\n setText(defaultValue);\n }, [props.value, props.defaultValue]);\n\n useEffect(() => {\n if (!isActive) return;\n if (!isTyped) return;\n\n const fetchSuggestion = async () => {\n try {\n const cursor =\n textareaRef.current?.selectionStart ?? debouncedText.length;\n const before = debouncedText.slice(0, cursor);\n const after = debouncedText.slice(cursor);\n const numLines = 5;\n const beforeLines = before.split('\\n');\n const contextBeforeLines = beforeLines.slice(\n Math.max(0, beforeLines.length - numLines - 1),\n -1\n );\n const contextBefore = contextBeforeLines.join('\\n');\n const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n const afterLines = after.split('\\n');\n const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n autocomplete(\n {\n text: before,\n contextBefore,\n currentLine,\n contextAfter,\n aiOptions: {\n apiKey: configuration.ai?.apiKey,\n model: configuration.ai?.model,\n temperature: configuration.ai?.temperature,\n },\n },\n {\n onSuccess: (data: AutocompleteResponse) => {\n setSuggestion(data.data?.autocompletion ?? '');\n setCursorAtFetch(cursor);\n },\n }\n );\n } catch (err) {\n console.error('Autocomplete error:', err);\n }\n };\n\n if (debouncedText.length > 3) {\n // Only fetch if user typed more than 3 chars and has paused\n setSuggestion('');\n fetchSuggestion();\n } else {\n // If typed less than threshold, clear the suggestion\n setSuggestion('');\n }\n }, [debouncedText, isActive, autocomplete, configuration]);\n\n useEffect(() => {\n if (\n !suggestion \|\|\n cursorAtFetch === -1 \|\|\n !placeholderRef.current \|\|\n !ghostLayerRef.current\n ) {\n setSuggestionPosition(null);\n return;\n }\n\n const rect = placeholderRef.current.getBoundingClientRect();\n const parentRect = ghostLayerRef.current.getBoundingClientRect();\n setSuggestionPosition({\n left: rect.left - parentRect.left,\n top: rect.top - parentRect.top,\n });\n }, [suggestion, cursorAtFetch, text]);\n\n const acceptSuggestion = () => {\n const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n if (currentCursor !== cursorAtFetch) return;\n const newText =\n text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n setText(newText);\n setSuggestion('');\n setCursorAtFetch(-1);\n setTimeout(() => {\n textareaRef.current?.focus();\n const newCursorPos = currentCursor + suggestion.length;\n textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n }, 0);\n };\n\n return (\n <div className=\"relative w-full\">\n <div\n ref={ghostLayerRef}\n className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n aria-hidden=\"true\"\n >\n {suggestion && cursorAtFetch !== -1 ? (\n <>\n <span className=\"align-text-top text-transparent\">\n {text.slice(0, cursorAtFetch)}\n </span>\n <span\n ref={placeholderRef}\n style={{ visibility: 'hidden' }}\n aria-hidden=\"true\"\n >\n {suggestion}\n </span>\n <span className=\"align-text-top text-transparent\">\n {text.slice(cursorAtFetch)}\n </span>\n </>\n ) : (\n <span className=\"align-text-top text-transparent\">{text}</span>\n )}\n {suggestionProp && (\n <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n )}\n </div>\n {suggestion && suggestionPosition && (\n <div\n className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n style={{\n position: 'absolute',\n left: suggestionPosition.left,\n top: suggestionPosition.top,\n }}\n >\n {suggestion}\n </div>\n )}\n <AutoSizedTextArea\n {...props}\n ref={textareaRef}\n value={text}\n onChange={(e) => {\n setIsTyped(true);\n setText(e.target.value);\n setSuggestion('');\n props.onChange?.(e);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Tab' && suggestion) {\n e.preventDefault();\n acceptSuggestion();\n }\n props.onKeyDown?.(e);\n }}\n onSelect={(e) => {\n if (\n suggestion &&\n (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n ) {\n setSuggestion('');\n setCursorAtFetch(-1);\n }\n props.onSelect?.(e);\n }}\n />\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs CHANGED Viewed

@@ -1,12 +1,11 @@
 'use client';
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonVariant } from "../Button/Button.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Modes } from "./types.mjs";
-import { useState } from "react";
 import { CircleDashed, Moon, Sun } from "lucide-react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DesktopThemeSwitcher.mjs","names":["ButtonItem: FC<ButtonProps>","DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps>","mode"],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant={ButtonVariant.NONE}\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;~~AASA,MAAMA,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC;CAAI,WAAU;WACb,oBAAC;EACC,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL,SAAS,cAAc;EACvB,GAAI;EAEH;GACM;EACL;AASR,MAAaC,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,QACF,MAAM,SAAS,MAEJ;CAEpD,MAAM,cAAc,WAAgB;AAClC,MAAIC,WAAS,MAAM,OACjB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAASA,OAAK;AAEhB,UAAQA,OAAK;;CAGf,MAAM,kBAAkB;AAExB,QACE,qBAAC;EAAS,YAAY;aACpB,qBAAC,SAAS;GACR,WAAU;GACV,YAAY;GACZ,cAAW;;IAEV,SAAS,MAAM,UAAU,oBAAC,gBAAa,aAAU,WAAW;IAC5D,SAAS,MAAM,SAAS,oBAAC,OAAI,aAAU,UAAU;IACjD,SAAS,MAAM,QAAQ,oBAAC,QAAK,aAAU,SAAS;;IAChC,EAEnB,oBAAC,SAAS;GAAM,YAAY;GAAiB;GAAY;aACvD,qBAAC;IAAU,WAAU;IAAgC,WAAU;;KAC7D,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,OAAO;MACvC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;KACb,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,MAAM;MACtC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;KACb,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,KAAK;MACrC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;;KACH;IACG;GACR"}
1	+ {"version":3,"file":"DesktopThemeSwitcher.mjs","names":["ButtonItem: FC<ButtonProps>","DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps>","mode"],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant={ButtonVariant.NONE}\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAMA,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC;CAAI,WAAU;WACb,oBAAC;EACC,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL,SAAS,cAAc;EACvB,GAAI;EAEH;GACM;EACL;AASR,MAAaC,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,QACF,MAAM,SAAS,MAEJ;CAEpD,MAAM,cAAc,WAAgB;AAClC,MAAIC,WAAS,MAAM,OACjB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAASA,OAAK;AAEhB,UAAQA,OAAK;;CAGf,MAAM,kBAAkB;AAExB,QACE,qBAAC;EAAS,YAAY;aACpB,qBAAC,SAAS;GACR,WAAU;GACV,YAAY;GACZ,cAAW;;IAEV,SAAS,MAAM,UAAU,oBAAC,gBAAa,aAAU,WAAW;IAC5D,SAAS,MAAM,SAAS,oBAAC,OAAI,aAAU,UAAU;IACjD,SAAS,MAAM,QAAQ,oBAAC,QAAK,aAAU,SAAS;;IAChC,EAEnB,oBAAC,SAAS;GAAM,YAAY;GAAiB;GAAY;aACvD,qBAAC;IAAU,WAAU;IAAgC,WAAU;;KAC7D,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,OAAO;MACvC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;KACb,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,MAAM;MACtC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;KACb,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,KAAK;MACrC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;;KACH;IACG;GACR"}

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs CHANGED Viewed

@@ -1,10 +1,9 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { Modes } from "./types.mjs";
-import { useState } from "react";
 import { CircleDashed, Moon, Sun } from "lucide-react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx

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

	@@ -1 +1 @@
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"}
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/Toaster/Toast.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { X } from "lucide-react";
 import { cva } from "class-variance-authority";