npm - periplo-ui - Versions diffs - 3.47.0 → 3.48.1 - Mend

periplo-ui 3.47.0 → 3.48.1

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 (46) hide show

package/dist/components/Combobox/VirtualizedComboboxList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VirtualizedComboboxList.js","sources":["../../../src/components/Combobox/VirtualizedComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { useRef, useEffect } from 'react'\n\nimport { CommandEmpty, CommandItem } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { VirtualizedComboboxListProps } from './types'\n\nexport const VirtualizedComboboxList = <T extends object>({\n localOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n hasNextPage,\n loadingMore,\n onLoadMore,\n}: VirtualizedComboboxListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null)\n const hasTriggeredRef = useRef(false)\n\n const totalCount = localOptions.length\n const PREFETCH_THRESHOLD = 25\n\n const rowVirtualizer = useVirtualizer({\n count: totalCount,\n getScrollElement: () => parentRef.current,\n estimateSize: () => 40,\n overscan: 10,\n })\n\n useEffect(() => {\n hasTriggeredRef.current = false\n }, [totalCount])\n\n const virtualItems = rowVirtualizer.getVirtualItems()\n\n useEffect(() => {\n if (virtualItems.length === 0 \|\| !hasNextPage \|\| loadingMore \|\| loading \|\| hasTriggeredRef.current) {\n return\n }\n\n const lastVisibleItem = virtualItems.at(-1)\n const itemsFromEnd = totalCount - (lastVisibleItem?.index ?? 0)\n\n if (itemsFromEnd <= PREFETCH_THRESHOLD) {\n hasTriggeredRef.current = true\n onLoadMore()\n }\n }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore])\n\n if (loading && localOptions.length === 0) {\n return (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n )\n }\n\n if (localOptions.length === 0 && !loading && !loadingMore) {\n return <CommandEmpty>{emptyMessage}</CommandEmpty>\n }\n\n const getItemAtIndex = (index: number) => {\n const option = localOptions[index]\n const isSelected = value === getOptionValue(option)\n return { option, isSelected }\n }\n\n return (\n <div ref={parentRef} className=\"overflow-auto\" style={{ maxHeight }} onWheel={(event) => event.stopPropagation()}>\n <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const { option, isSelected } = getItemAtIndex(virtualRow.index)\n const optionValue = getOptionValue(option)\n\n return (\n <div\n key={optionValue}\n data-index={virtualRow.index}\n ref={(el) => {\n if (el) rowVirtualizer.measureElement(el)\n }}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <CommandItem value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, isSelected)\n ) : (\n <>\n <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n </div>\n )\n })}\n </div>\n {loadingMore && (\n <div className=\"flex items-center justify-center py-2 text-sm text-neutral-500\">{loadingPlaceholder}</div>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"VirtualizedComboboxList.js","sources":["../../../src/components/Combobox/VirtualizedComboboxList.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { useRef, useEffect } from 'react'\n\nimport { CommandEmpty, CommandItem } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { VirtualizedComboboxListProps } from './types'\n\nexport const VirtualizedComboboxList = <T extends object>({\n localOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n hasNextPage,\n loadingMore,\n onLoadMore,\n}: VirtualizedComboboxListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null)\n const hasTriggeredRef = useRef(false)\n\n const totalCount = localOptions.length\n const PREFETCH_THRESHOLD = 25\n\n const rowVirtualizer = useVirtualizer({\n count: totalCount,\n getScrollElement: () => parentRef.current,\n estimateSize: () => 40,\n overscan: 10,\n })\n\n useEffect(() => {\n hasTriggeredRef.current = false\n }, [totalCount])\n\n const virtualItems = rowVirtualizer.getVirtualItems()\n\n useEffect(() => {\n if (virtualItems.length === 0 \|\| !hasNextPage \|\| loadingMore \|\| loading \|\| hasTriggeredRef.current) {\n return\n }\n\n const lastVisibleItem = virtualItems.at(-1)\n const itemsFromEnd = totalCount - (lastVisibleItem?.index ?? 0)\n\n if (itemsFromEnd <= PREFETCH_THRESHOLD) {\n hasTriggeredRef.current = true\n onLoadMore()\n }\n }, [virtualItems, totalCount, hasNextPage, loadingMore, loading, onLoadMore])\n\n if (loading && localOptions.length === 0) {\n return (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n )\n }\n\n if (localOptions.length === 0 && !loading && !loadingMore) {\n return <CommandEmpty>{emptyMessage}</CommandEmpty>\n }\n\n const getItemAtIndex = (index: number) => {\n const option = localOptions[index]\n const isSelected = value === getOptionValue(option)\n return { option, isSelected }\n }\n\n return (\n <div ref={parentRef} className=\"overflow-auto\" style={{ maxHeight }} onWheel={(event) => event.stopPropagation()}>\n <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const { option, isSelected } = getItemAtIndex(virtualRow.index)\n const optionValue = getOptionValue(option)\n\n return (\n <div\n key={optionValue}\n data-index={virtualRow.index}\n ref={(el) => {\n if (el) rowVirtualizer.measureElement(el)\n }}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <CommandItem value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, isSelected)\n ) : (\n <>\n <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n </div>\n )\n })}\n </div>\n {loadingMore && (\n <div className=\"flex items-center justify-center py-2 text-sm text-neutral-500\">{loadingPlaceholder}</div>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Command/Command.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { MagnifyingGlass } from '@phosphor-icons/react';
+import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
 import { Command as Command$1 } from 'cmdk';
 import * as React from 'react';
 import { Dialog, DialogContent } from '../Dialog/Dialog.js';

package/dist/components/Command/Command.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { MagnifyingGlass } from '@phosphor-icons/react'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '../Dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white', className)}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0\">\n <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n <div className=\"!mx-[10px] !my-[10px] flex h-12 items-center rounded-lg border border-neutral-200 px-3\">\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n />\n {children && <div className=\"ml-2\">{children}</div>}\n <MagnifyingGlass className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n '[&_[cmdk-group-heading]]:text-muted-foreground text-foreground overflow-hidden p-1 text-left [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal',\n className,\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator ref={ref} className={cn('bg-border h-px', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'data-[selected=true]:text-accent-foreground relative flex min-h-12 cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n className,\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;AAIE;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAAA;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AACiB;AAIlE;AAEA;AAIE;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AAMA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}
1	+ {"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '../Dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white', className)}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0\">\n <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n <div className=\"!mx-[10px] !my-[10px] flex h-12 items-center rounded-lg border border-neutral-200 px-3\">\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n />\n {children && <div className=\"ml-2\">{children}</div>}\n <MagnifyingGlass className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n '[&_[cmdk-group-heading]]:text-muted-foreground text-foreground overflow-hidden p-1 text-left [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal',\n className,\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator ref={ref} className={cn('bg-border h-px', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ComponentRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'data-[selected=true]:text-accent-foreground relative flex min-h-12 cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n className,\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;AAIE;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAAA;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AACiB;AAIlE;AAEA;AAIE;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AAMA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}

package/dist/components/DataTable/components/DataTableToolbar.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { X, SelectionAll, FunnelSimple, TextColumns } from '@phosphor-icons/react';
+import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple';
+import { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll';
+import { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns';
+import { X } from '@phosphor-icons/react/dist/ssr/X';
 import { Badge } from '../../Badge/Badge.js';
 import { Button } from '../../Button/Button.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator } from '../../DropdownMenu/DropdownMenu.js';

package/dist/components/DataTable/components/DataTableToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { ColumnVisibilityConfig } from '@/components/DataTable/types'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n readonly table: Table<TData>\n readonly columnVisibility?: ColumnVisibilityConfig\n readonly primaryFilters?: React.ReactNode\n readonly secondaryFilters?: React.ReactNode\n readonly activePrimaryFiltersCount?: number\n readonly activeSecondaryFiltersCount?: number\n readonly labels?: {\n filters?: string\n moreFilters?: string\n }\n readonly selection?: {\n isSelectionStarted?: boolean\n onSelectionStart?: () => void\n onSelectionCancel?: () => void\n selectionSummary?: string \| null\n isSelectionDisabled?: boolean\n labels?: {\n startSelection?: string\n cancelSelection?: string\n selectionSummary?: string\n selectionDisabledTooltip?: string\n }\n }\n}\n\nconst defaultLabels = {\n filters: 'Filters',\n moreFilters: 'More filters',\n}\n\nconst defaultColumnVisibilityLabels = {\n button: 'Hide columns',\n selectAll: 'Select all',\n}\n\nconst defaultSelectionLabels = {\n startSelection: 'Start selection',\n cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n table,\n columnVisibility,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n const isMobile = useIsMobile()\n\n const labels = {\n ...defaultLabels,\n ...labelsProp,\n }\n\n const columnVisibilityLabels = {\n ...defaultColumnVisibilityLabels,\n ...columnVisibility?.labels,\n }\n\n const selectionLabels = {\n ...defaultSelectionLabels,\n ...selection?.labels,\n }\n\n const showColumnVisibilityControls = columnVisibility?.showControls ?? true\n\n const hasPrimaryFilters = !!primaryFilters\n const hasSecondaryFilters = !!secondaryFilters\n\n const showFiltersButton = isMobile ? hasPrimaryFilters \|\| hasSecondaryFilters : hasSecondaryFilters\n\n const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n const showBadge = activeFiltersCount > 0\n\n const filtersButtonLabel = !hasPrimaryFilters \|\| isMobile ? labels.filters : labels.moreFilters\n\n if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n return null\n }\n\n return (\n <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n {selection && (\n <div className=\"flex items-center gap-2\">\n {selection.isSelectionStarted ? (\n <>\n <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n {selectionLabels.cancelSelection}\n </Button>\n {selection.selectionSummary && !isMobile && (\n <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n {selection.selectionSummary}\n </Typography>\n )}\n </>\n ) : (\n <TooltipProvider>\n <TooltipRoot delayDuration={200}>\n <TooltipTrigger asChild>\n <div>\n <Button\n variant=\"text\"\n size=\"sm\"\n StartIcon={SelectionAll}\n onClick={selection.onSelectionStart}\n disabled={selection.isSelectionDisabled}\n >\n {selectionLabels.startSelection}\n </Button>\n </div>\n </TooltipTrigger>\n {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n )}\n </TooltipRoot>\n </TooltipProvider>\n )}\n </div>\n )}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {showFiltersButton && (\n <PopoverRoot>\n <PopoverTrigger asChild>\n <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n {showBadge && (\n <Badge\n count={activeFiltersCount}\n color=\"primary\"\n ping={false}\n className=\"absolute -top-1 -right-1\"\n />\n )}\n {filtersButtonLabel}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"center\"\n className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n >\n <div className=\"flex flex-col gap-4\">\n {isMobile && primaryFilters}\n {secondaryFilters}\n </div>\n </PopoverContent>\n </PopoverRoot>\n )}\n {showColumnVisibilityControls && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n {columnVisibilityLabels.button}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuCheckboxItem\n key={'all-columns'}\n className=\"capitalize\"\n checked={table.getAllColumns().every((column) => column.getIsVisible())}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) =>\n table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n }\n >\n {columnVisibilityLabels.selectAll}\n </DropdownMenuCheckboxItem>\n <DropdownMenuSeparator className=\"bg-neutral-100\" />\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide() && column.id !== 'select')\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.columnDef.header?.toString()}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple'\nimport { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll'\nimport { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { ColumnVisibilityConfig } from '@/components/DataTable/types'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n readonly table: Table<TData>\n readonly columnVisibility?: ColumnVisibilityConfig\n readonly primaryFilters?: React.ReactNode\n readonly secondaryFilters?: React.ReactNode\n readonly activePrimaryFiltersCount?: number\n readonly activeSecondaryFiltersCount?: number\n readonly labels?: {\n filters?: string\n moreFilters?: string\n }\n readonly selection?: {\n isSelectionStarted?: boolean\n onSelectionStart?: () => void\n onSelectionCancel?: () => void\n selectionSummary?: string \| null\n isSelectionDisabled?: boolean\n labels?: {\n startSelection?: string\n cancelSelection?: string\n selectionSummary?: string\n selectionDisabledTooltip?: string\n }\n }\n}\n\nconst defaultLabels = {\n filters: 'Filters',\n moreFilters: 'More filters',\n}\n\nconst defaultColumnVisibilityLabels = {\n button: 'Hide columns',\n selectAll: 'Select all',\n}\n\nconst defaultSelectionLabels = {\n startSelection: 'Start selection',\n cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n table,\n columnVisibility,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n const isMobile = useIsMobile()\n\n const labels = {\n ...defaultLabels,\n ...labelsProp,\n }\n\n const columnVisibilityLabels = {\n ...defaultColumnVisibilityLabels,\n ...columnVisibility?.labels,\n }\n\n const selectionLabels = {\n ...defaultSelectionLabels,\n ...selection?.labels,\n }\n\n const showColumnVisibilityControls = columnVisibility?.showControls ?? true\n\n const hasPrimaryFilters = !!primaryFilters\n const hasSecondaryFilters = !!secondaryFilters\n\n const showFiltersButton = isMobile ? hasPrimaryFilters \|\| hasSecondaryFilters : hasSecondaryFilters\n\n const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n const showBadge = activeFiltersCount > 0\n\n const filtersButtonLabel = !hasPrimaryFilters \|\| isMobile ? labels.filters : labels.moreFilters\n\n if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n return null\n }\n\n return (\n <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n {selection && (\n <div className=\"flex items-center gap-2\">\n {selection.isSelectionStarted ? (\n <>\n <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n {selectionLabels.cancelSelection}\n </Button>\n {selection.selectionSummary && !isMobile && (\n <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n {selection.selectionSummary}\n </Typography>\n )}\n </>\n ) : (\n <TooltipProvider>\n <TooltipRoot delayDuration={200}>\n <TooltipTrigger asChild>\n <div>\n <Button\n variant=\"text\"\n size=\"sm\"\n StartIcon={SelectionAll}\n onClick={selection.onSelectionStart}\n disabled={selection.isSelectionDisabled}\n >\n {selectionLabels.startSelection}\n </Button>\n </div>\n </TooltipTrigger>\n {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n )}\n </TooltipRoot>\n </TooltipProvider>\n )}\n </div>\n )}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {showFiltersButton && (\n <PopoverRoot>\n <PopoverTrigger asChild>\n <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n {showBadge && (\n <Badge\n count={activeFiltersCount}\n color=\"primary\"\n ping={false}\n className=\"absolute -top-1 -right-1\"\n />\n )}\n {filtersButtonLabel}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"center\"\n className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n >\n <div className=\"flex flex-col gap-4\">\n {isMobile && primaryFilters}\n {secondaryFilters}\n </div>\n </PopoverContent>\n </PopoverRoot>\n )}\n {showColumnVisibilityControls && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n {columnVisibilityLabels.button}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuCheckboxItem\n key={'all-columns'}\n className=\"capitalize\"\n checked={table.getAllColumns().every((column) => column.getIsVisible())}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) =>\n table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n }\n >\n {columnVisibilityLabels.selectAll}\n </DropdownMenuCheckboxItem>\n <DropdownMenuSeparator className=\"bg-neutral-100\" />\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide() && column.id !== 'select')\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.columnDef.header?.toString()}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.js CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { CalendarBlank, X } from '@phosphor-icons/react';
+import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank';
+import { X } from '@phosphor-icons/react/dist/ssr/X';
 import { format } from 'date-fns';
 import * as React from 'react';
 import { Button, buttonVariants } from '../Button/Button.js';

package/dist/components/DatePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarBlank, X } from '@phosphor-icons/react'\nimport { format as formatFn, Locale } from 'date-fns'\nimport * as React from 'react'\nimport { PropsBase, PropsRangeRequired, PropsSingleRequired } from 'react-day-picker'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Calendar } from '../Calendar'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { useLocale } from '@/components/DatePicker/hooks/useLocale'\nimport {\n formatOutputDate,\n formatOutputRange,\n InputDate,\n InputRange,\n parseInputDate,\n parseInputRange,\n ValueFormat,\n} from '@/lib/dateUtils'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\nexport type SupportedLocaleString = 'enUS' \| 'es' \| 'pt' \| 'enGB' \| 'de' \| 'it'\n\nexport type IsoDateRange = {\n from?: string\n to?: string\n}\n\nexport type DateRange = {\n from?: Date\n to?: Date\n}\n\nexport type DatePickerOutput<Variant extends 'single' \| 'range', Format extends ValueFormat> = Variant extends 'single'\n ? Format extends 'date'\n ? Date \| null\n : string \| null\n : Format extends 'date'\n ? DateRange \| null\n : IsoDateRange \| null\n\nexport type DatePickerInput<V extends 'single' \| 'range'> = V extends 'single'\n ? Date \| string \| null\n : { from?: Date \| string; to?: Date \| string } \| null\n\nexport type DatePickerProps<V extends 'single' \| 'range' = 'single', F extends ValueFormat = 'iso'> = {\n /*\n Placeholder text displayed when no date is selected\n * @default 'Pick a date' for single mode, 'Pick a date range' for range mode\n /\n readonly placeholder?: string\n\n /\n Format string to use when displaying the selected date in the button\n * @default 'MMM d, yyyy'\n /\n readonly displayFormat?: string\n\n /\n ClassName for the button\n /\n readonly buttonClassName?: string\n\n /\n Whether to allow the user to show the year switcher menu\n * @default true for single mode, false for range mode\n /\n readonly showYearSwitcher?: boolean\n\n /\n Initial value for the date picker\n * Accepts both Date objects and ISO strings regardless of valueFormat setting\n /\n readonly initialValue?: DatePickerInput<V>\n\n /\n Current value for the date picker\n * Accepts both Date objects and ISO strings regardless of valueFormat setting\n /\n readonly value?: DatePickerInput<V>\n\n /\n Determines if the picker should close after a selection\n * @default true for single mode, false for range mode\n /\n readonly closeOnSelect?: boolean\n\n /\n Determines the format of the value provided to the onChange callback\n * - 'iso' (default): onChange receives ISO string(s) ('yyyy-MM-dd') or empty string for cleared values\n * - 'date': onChange receives JavaScript Date object(s) or null for cleared values\n \n Note: The component accepts both Date objects and ISO strings for value/initialValue\n * regardless of this setting. Empty values are sent as null (date format) or '' (iso format)\n * instead of undefined to work properly with React Hook Form.\n * @default 'iso'\n /\n readonly valueFormat?: F\n\n /\n Callback when date or date range changes\n /\n readonly onChange?: (value: DatePickerOutput<V, F>) => void\n\n /\n DatePicker mode - single date or date range\n * @default 'single'\n /\n readonly variant?: V\n\n /\n The locale to use for formatting dates and determining the start of the week.\n * Can be a string identifier for supported locales ('enUS', 'es', 'pt', 'enGB', 'de', 'it', 'fr')\n * or a Locale object from date-fns/locale for other languages.\n * @default 'enUS'\n /\n readonly locale?: SupportedLocaleString \| Locale\n\n /\n Callback function executed when the clear button is clicked.\n * When provided, an X button will appear on hover to clear the selected date.\n /\n readonly onClear?: boolean \| (() => void)\n\n /\n Weather the picker is inside a modal (needed for pointer events to work at mobile)\n /\n modal?: boolean\n\n /\n Container element to position the popover relative to.\n * @default document.body\n */\n container?: HTMLElement\n} & Omit<PropsBase, 'mode' \| 'selected' \| 'onSelect' \| 'locale'>\n\nfunction DatePicker<V extends 'single' \| 'range' = 'single', F extends ValueFormat = 'iso'>({\n variant = 'single' as V,\n placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n valueFormat = 'iso' as F,\n initialValue: initialValueProp,\n value: valueProp,\n onChange,\n buttonClassName,\n displayFormat = 'MMM d, yyyy',\n closeOnSelect = variant === 'single',\n showYearSwitcher = variant === 'single',\n locale: localeProp = 'enUS',\n defaultMonth,\n onClear,\n modal = false,\n container,\n ...rest\n}: DatePickerProps<V, F>) {\n const [isOpen, setIsOpen] = React.useState(false)\n const [isHovered, setIsHovered] = React.useState(false)\n const [isClicked, setIsClicked] = React.useState(false)\n const isMobile = useIsMobile()\n const calendarRef = React.useRef<HTMLDivElement>(null)\n\n const resolvedLocale = useLocale(localeProp)\n\n const [internalSingleDate, setInternalSingleDate] = React.useState<Date \| undefined>(() => {\n if (variant === 'single') {\n return parseInputDate(initialValueProp as InputDate)\n }\n return undefined\n })\n\n const [internalDateRange, setInternalDateRange] = React.useState<DateRange \| undefined>(() => {\n if (variant === 'range') {\n return parseInputRange(initialValueProp as InputRange)\n }\n return undefined\n })\n\n React.useEffect(() => {\n const handleWindowMouseUp = () => setIsClicked(false)\n window.addEventListener('mouseup', handleWindowMouseUp)\n return () => window.removeEventListener('mouseup', handleWindowMouseUp)\n }, [])\n\n React.useEffect(() => {\n if (variant === 'single') {\n const newDate = parseInputDate(valueProp as InputDate)\n setInternalSingleDate(newDate)\n } else {\n const newRange = parseInputRange(valueProp as InputRange)\n setInternalDateRange(newRange)\n }\n }, [valueProp, variant])\n\n React.useEffect(() => {\n if (isOpen && isMobile && calendarRef.current) {\n const timeoutId = setTimeout(() => {\n const calendarElement = calendarRef.current?.querySelector('[id=\"calendar\"]') as HTMLElement \| null\n\n calendarElement?.focus()\n }, 100)\n\n return () => clearTimeout(timeoutId)\n }\n }, [isOpen, isMobile])\n\n const singleDate = internalSingleDate\n const dateRange = internalDateRange\n\n const getEmptyValue = React.useCallback((): DatePickerOutput<V, F> => {\n if (variant === 'single') {\n return (valueFormat === 'date' ? null : '') as DatePickerOutput<V, F>\n } else {\n return (valueFormat === 'date' ? null : { from: '', to: '' }) as DatePickerOutput<V, F>\n }\n }, [variant, valueFormat])\n\n const handleSelect = React.useCallback(\n (selectedDate: Date \| DateRange \| undefined) => {\n if (variant === 'single') {\n const date = selectedDate as Date \| undefined\n\n setInternalSingleDate(date)\n\n if (onChange) {\n if (date) {\n const output = valueFormat === 'date' ? date : formatOutputDate(date, 'iso')\n onChange(output as DatePickerOutput<V, F>)\n } else {\n onChange(getEmptyValue())\n }\n }\n\n if (closeOnSelect) {\n setIsOpen(false)\n }\n } else {\n const range = selectedDate as DateRange \| undefined\n setInternalDateRange(range)\n if (onChange) {\n if (range) {\n const output = valueFormat === 'date' ? range : formatOutputRange(range, 'iso')\n onChange(output as DatePickerOutput<V, F>)\n } else {\n onChange(getEmptyValue())\n }\n }\n }\n },\n [variant, valueFormat, onChange, closeOnSelect, getEmptyValue],\n )\n\n const handleClear = React.useCallback(\n (event: React.MouseEvent) => {\n if (isMobile) return\n\n event.preventDefault()\n event.stopPropagation()\n\n if (variant === 'single') {\n setInternalSingleDate(undefined)\n } else {\n setInternalDateRange(undefined)\n }\n\n if (onChange) {\n onChange(getEmptyValue())\n }\n\n if (typeof onClear === 'function') {\n onClear()\n }\n },\n [variant, onChange, onClear, getEmptyValue, isMobile],\n )\n\n const formatForDisplay = () => {\n const formatOptions = { locale: resolvedLocale }\n if (variant === 'single') {\n return singleDate ? formatFn(singleDate, displayFormat, formatOptions) : placeholder\n }\n\n if (!dateRange) return placeholder\n const fromStr = dateRange.from ? formatFn(dateRange.from, displayFormat, formatOptions) : '...'\n const toStr = dateRange.to ? formatFn(dateRange.to, displayFormat, formatOptions) : '...'\n if (!dateRange.from && !dateRange.to) return placeholder\n if (!dateRange.from) return `... - ${toStr}`\n if (!dateRange.to) return `${fromStr} - ...`\n return `${fromStr} - ${toStr}`\n }\n\n const renderClearIcon = (showClearIcon: boolean) => {\n if (!showClearIcon) return null\n const clearIconClassName =\n 'pointer-events-none absolute right-4 z-10 flex h-full w-10 items-center justify-end rounded-r-lg bg-gradient-to-l from-60% via-80% to-transparent'\n\n return (\n <>\n <div\n className={cn(\n clearIconClassName,\n 'from-neutral-50 via-neutral-50/80',\n isHovered ? 'opacity-100' : 'opacity-0',\n )}\n />\n <div\n className={cn(\n clearIconClassName,\n 'from-neutral-100 via-neutral-100/80',\n isClicked ? 'opacity-100' : 'opacity-0',\n )}\n />\n <div className=\"absolute right-4 z-20 flex h-full w-10 items-center justify-end\">\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'h-4 w-4 shrink-0 cursor-pointer opacity-100 transition-opacity duration-150 hover:opacity-70',\n )}\n onClick={handleClear}\n />\n </div>\n </>\n )\n }\n\n const calendarProps = React.useMemo(() => {\n const baseProps = {\n defaultMonth: (variant === 'single' ? singleDate : dateRange?.from) ?? defaultMonth,\n locale: resolvedLocale,\n initialFocus: true,\n ...rest,\n } as PropsBase\n\n if (variant === 'single') {\n return {\n ...baseProps,\n mode: 'single' as const,\n selected: singleDate,\n onSelect: (date: Date \| undefined) => handleSelect(date),\n } as PropsSingleRequired\n }\n\n return {\n ...baseProps,\n mode: 'range' as const,\n selected: dateRange,\n onSelect: (range: DateRange \| undefined) => handleSelect(range),\n numberOfMonths: rest.numberOfMonths ?? 2,\n } as PropsRangeRequired\n }, [variant, rest, singleDate, dateRange, handleSelect, resolvedLocale, defaultMonth])\n\n const hasValue = variant === 'single' ? singleDate : dateRange\n const showClearButton = onClear && hasValue && isHovered\n\n return (\n <PopoverRoot open={isOpen} onOpenChange={setIsOpen} modal={modal}>\n <PopoverTrigger asChild>\n <Button\n id={rest.id}\n variant=\"ghost\"\n className={cn(\n 'relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity',\n !hasValue && 'text-muted-foreground',\n buttonVariants({ variant: 'input', size: 'lg' }),\n buttonClassName,\n )}\n disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n onMouseEnter={() => !isMobile && setIsHovered(true)}\n onMouseLeave={() => !isMobile && setIsHovered(false)}\n onMouseDown={() => !isMobile && setIsClicked(true)}\n >\n <div className=\"flex items-center justify-center gap-2\">\n <CalendarBlank className={cn('h-4 w-4 shrink-0 transition-opacity duration-150')} />\n <span className=\"w-full text-center\">{formatForDisplay()}</span>\n {onClear && hasValue && renderClearIcon(showClearButton ?? false)}\n </div>\n </Button>\n </PopoverTrigger>\n <PopoverContent container={container} className=\"w-auto p-0\" align=\"center\" ref={calendarRef}>\n <Calendar\n {...calendarProps}\n className=\"border-0\"\n showYearSwitcher={variant === 'single' ? showYearSwitcher : false}\n />\n </PopoverContent>\n </PopoverRoot>\n )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2IA;AAA4F;AAChF;AAC2C;AACvC;AACA;AACP;AACP;AACA;AACgB;AACY;AACG;AACV;AACrB;AACA;AACQ;AACR;AAEF;AACE;AACA;AACA;AACA;AACA;AAEA;AAEA;AACE;AACE;AAAmD;AAErD;AAAO;AAGT;AACE;AACE;AAAqD;AAEvD;AAAO;AAGT;AACE;AACA;AACA;AAAsE;AAGxE;AACE;AACE;AACA;AAA6B;AAE7B;AACA;AAA6B;AAC/B;AAGF;AACE;AACE;AACE;AAEA;AAAuB;AAGzB;AAAmC;AACrC;AAGF;AACA;AAEA;AACE;AACE;AAAwC;AAExC;AAA2D;AAC7D;AAGF;AAA2B;AAEvB;AACE;AAEA;AAEA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AAGF;AACE;AAAe;AACjB;AAEA;AACA;AACA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AACF;AACF;AACF;AAC6D;AAG/D;AAA0B;AAEtB;AAEA;AACA;AAEA;AACE;AAA+B;AAE/B;AAA8B;AAGhC;AACE;AAAwB;AAG1B;AACE;AAAQ;AACV;AACF;AACoD;AAGtD;AACE;AACA;AACE;AAAyE;AAG3E;AACA;AACA;AACA;AACA;AACA;AACA;AAA4B;AAG9B;AACE;AACA;AAGA;AAEI;AAAA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AAEE;AAAC;AAAA;AACa;AACD;AACT;AACF;AACS;AAAA;AAEb;AACF;AAIJ;AACE;AAAkB;AACuD;AAC/D;AACM;AACX;AAGL;AACE;AAAO;AACF;AACG;AACI;AAC6C;AACzD;AAGF;AAAO;AACF;AACG;AACI;AACoD;AACvB;AACzC;AAGF;AACA;AAEA;AAEI;AACE;AAAC;AAAA;AACU;AACD;AACG;AACT;AACa;AACkC;AAC/C;AACF;AAC+D;AACb;AACC;AACF;AAG/C;AAAkF;AACzB;AACO;AAClE;AAAA;AAEJ;AAEE;AAAC;AAAA;AACK;AACM;AACkD;AAAA;AAEhE;AAGN;AAEA;;"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { format as formatFn, Locale } from 'date-fns'\nimport * as React from 'react'\nimport { PropsBase, PropsRangeRequired, PropsSingleRequired } from 'react-day-picker'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Calendar } from '../Calendar'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { useLocale } from '@/components/DatePicker/hooks/useLocale'\nimport {\n formatOutputDate,\n formatOutputRange,\n InputDate,\n InputRange,\n parseInputDate,\n parseInputRange,\n ValueFormat,\n} from '@/lib/dateUtils'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\nexport type SupportedLocaleString = 'enUS' \| 'es' \| 'pt' \| 'enGB' \| 'de' \| 'it'\n\nexport type IsoDateRange = {\n from?: string\n to?: string\n}\n\nexport type DateRange = {\n from?: Date\n to?: Date\n}\n\nexport type DatePickerOutput<Variant extends 'single' \| 'range', Format extends ValueFormat> = Variant extends 'single'\n ? Format extends 'date'\n ? Date \| null\n : string \| null\n : Format extends 'date'\n ? DateRange \| null\n : IsoDateRange \| null\n\nexport type DatePickerInput<V extends 'single' \| 'range'> = V extends 'single'\n ? Date \| string \| null\n : { from?: Date \| string; to?: Date \| string } \| null\n\nexport type DatePickerProps<V extends 'single' \| 'range' = 'single', F extends ValueFormat = 'iso'> = {\n /*\n Placeholder text displayed when no date is selected\n * @default 'Pick a date' for single mode, 'Pick a date range' for range mode\n /\n readonly placeholder?: string\n\n /\n Format string to use when displaying the selected date in the button\n * @default 'MMM d, yyyy'\n /\n readonly displayFormat?: string\n\n /\n ClassName for the button\n /\n readonly buttonClassName?: string\n\n /\n Whether to allow the user to show the year switcher menu\n * @default true for single mode, false for range mode\n /\n readonly showYearSwitcher?: boolean\n\n /\n Initial value for the date picker\n * Accepts both Date objects and ISO strings regardless of valueFormat setting\n /\n readonly initialValue?: DatePickerInput<V>\n\n /\n Current value for the date picker\n * Accepts both Date objects and ISO strings regardless of valueFormat setting\n /\n readonly value?: DatePickerInput<V>\n\n /\n Determines if the picker should close after a selection\n * @default true for single mode, false for range mode\n /\n readonly closeOnSelect?: boolean\n\n /\n Determines the format of the value provided to the onChange callback\n * - 'iso' (default): onChange receives ISO string(s) ('yyyy-MM-dd') or empty string for cleared values\n * - 'date': onChange receives JavaScript Date object(s) or null for cleared values\n \n Note: The component accepts both Date objects and ISO strings for value/initialValue\n * regardless of this setting. Empty values are sent as null (date format) or '' (iso format)\n * instead of undefined to work properly with React Hook Form.\n * @default 'iso'\n /\n readonly valueFormat?: F\n\n /\n Callback when date or date range changes\n /\n readonly onChange?: (value: DatePickerOutput<V, F>) => void\n\n /\n DatePicker mode - single date or date range\n * @default 'single'\n /\n readonly variant?: V\n\n /\n The locale to use for formatting dates and determining the start of the week.\n * Can be a string identifier for supported locales ('enUS', 'es', 'pt', 'enGB', 'de', 'it', 'fr')\n * or a Locale object from date-fns/locale for other languages.\n * @default 'enUS'\n /\n readonly locale?: SupportedLocaleString \| Locale\n\n /\n Callback function executed when the clear button is clicked.\n * When provided, an X button will appear on hover to clear the selected date.\n /\n readonly onClear?: boolean \| (() => void)\n\n /\n Weather the picker is inside a modal (needed for pointer events to work at mobile)\n /\n modal?: boolean\n\n /\n Container element to position the popover relative to.\n * @default document.body\n */\n container?: HTMLElement\n} & Omit<PropsBase, 'mode' \| 'selected' \| 'onSelect' \| 'locale'>\n\nfunction DatePicker<V extends 'single' \| 'range' = 'single', F extends ValueFormat = 'iso'>({\n variant = 'single' as V,\n placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n valueFormat = 'iso' as F,\n initialValue: initialValueProp,\n value: valueProp,\n onChange,\n buttonClassName,\n displayFormat = 'MMM d, yyyy',\n closeOnSelect = variant === 'single',\n showYearSwitcher = variant === 'single',\n locale: localeProp = 'enUS',\n defaultMonth,\n onClear,\n modal = false,\n container,\n ...rest\n}: DatePickerProps<V, F>) {\n const [isOpen, setIsOpen] = React.useState(false)\n const [isHovered, setIsHovered] = React.useState(false)\n const [isClicked, setIsClicked] = React.useState(false)\n const isMobile = useIsMobile()\n const calendarRef = React.useRef<HTMLDivElement>(null)\n\n const resolvedLocale = useLocale(localeProp)\n\n const [internalSingleDate, setInternalSingleDate] = React.useState<Date \| undefined>(() => {\n if (variant === 'single') {\n return parseInputDate(initialValueProp as InputDate)\n }\n return undefined\n })\n\n const [internalDateRange, setInternalDateRange] = React.useState<DateRange \| undefined>(() => {\n if (variant === 'range') {\n return parseInputRange(initialValueProp as InputRange)\n }\n return undefined\n })\n\n React.useEffect(() => {\n const handleWindowMouseUp = () => setIsClicked(false)\n window.addEventListener('mouseup', handleWindowMouseUp)\n return () => window.removeEventListener('mouseup', handleWindowMouseUp)\n }, [])\n\n React.useEffect(() => {\n if (variant === 'single') {\n const newDate = parseInputDate(valueProp as InputDate)\n setInternalSingleDate(newDate)\n } else {\n const newRange = parseInputRange(valueProp as InputRange)\n setInternalDateRange(newRange)\n }\n }, [valueProp, variant])\n\n React.useEffect(() => {\n if (isOpen && isMobile && calendarRef.current) {\n const timeoutId = setTimeout(() => {\n const calendarElement = calendarRef.current?.querySelector('[id=\"calendar\"]') as HTMLElement \| null\n\n calendarElement?.focus()\n }, 100)\n\n return () => clearTimeout(timeoutId)\n }\n }, [isOpen, isMobile])\n\n const singleDate = internalSingleDate\n const dateRange = internalDateRange\n\n const getEmptyValue = React.useCallback((): DatePickerOutput<V, F> => {\n if (variant === 'single') {\n return (valueFormat === 'date' ? null : '') as DatePickerOutput<V, F>\n } else {\n return (valueFormat === 'date' ? null : { from: '', to: '' }) as DatePickerOutput<V, F>\n }\n }, [variant, valueFormat])\n\n const handleSelect = React.useCallback(\n (selectedDate: Date \| DateRange \| undefined) => {\n if (variant === 'single') {\n const date = selectedDate as Date \| undefined\n\n setInternalSingleDate(date)\n\n if (onChange) {\n if (date) {\n const output = valueFormat === 'date' ? date : formatOutputDate(date, 'iso')\n onChange(output as DatePickerOutput<V, F>)\n } else {\n onChange(getEmptyValue())\n }\n }\n\n if (closeOnSelect) {\n setIsOpen(false)\n }\n } else {\n const range = selectedDate as DateRange \| undefined\n setInternalDateRange(range)\n if (onChange) {\n if (range) {\n const output = valueFormat === 'date' ? range : formatOutputRange(range, 'iso')\n onChange(output as DatePickerOutput<V, F>)\n } else {\n onChange(getEmptyValue())\n }\n }\n }\n },\n [variant, valueFormat, onChange, closeOnSelect, getEmptyValue],\n )\n\n const handleClear = React.useCallback(\n (event: React.MouseEvent) => {\n if (isMobile) return\n\n event.preventDefault()\n event.stopPropagation()\n\n if (variant === 'single') {\n setInternalSingleDate(undefined)\n } else {\n setInternalDateRange(undefined)\n }\n\n if (onChange) {\n onChange(getEmptyValue())\n }\n\n if (typeof onClear === 'function') {\n onClear()\n }\n },\n [variant, onChange, onClear, getEmptyValue, isMobile],\n )\n\n const formatForDisplay = () => {\n const formatOptions = { locale: resolvedLocale }\n if (variant === 'single') {\n return singleDate ? formatFn(singleDate, displayFormat, formatOptions) : placeholder\n }\n\n if (!dateRange) return placeholder\n const fromStr = dateRange.from ? formatFn(dateRange.from, displayFormat, formatOptions) : '...'\n const toStr = dateRange.to ? formatFn(dateRange.to, displayFormat, formatOptions) : '...'\n if (!dateRange.from && !dateRange.to) return placeholder\n if (!dateRange.from) return `... - ${toStr}`\n if (!dateRange.to) return `${fromStr} - ...`\n return `${fromStr} - ${toStr}`\n }\n\n const renderClearIcon = (showClearIcon: boolean) => {\n if (!showClearIcon) return null\n const clearIconClassName =\n 'pointer-events-none absolute right-4 z-10 flex h-full w-10 items-center justify-end rounded-r-lg bg-gradient-to-l from-60% via-80% to-transparent'\n\n return (\n <>\n <div\n className={cn(\n clearIconClassName,\n 'from-neutral-50 via-neutral-50/80',\n isHovered ? 'opacity-100' : 'opacity-0',\n )}\n />\n <div\n className={cn(\n clearIconClassName,\n 'from-neutral-100 via-neutral-100/80',\n isClicked ? 'opacity-100' : 'opacity-0',\n )}\n />\n <div className=\"absolute right-4 z-20 flex h-full w-10 items-center justify-end\">\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'h-4 w-4 shrink-0 cursor-pointer opacity-100 transition-opacity duration-150 hover:opacity-70',\n )}\n onClick={handleClear}\n />\n </div>\n </>\n )\n }\n\n const calendarProps = React.useMemo(() => {\n const baseProps = {\n defaultMonth: (variant === 'single' ? singleDate : dateRange?.from) ?? defaultMonth,\n locale: resolvedLocale,\n initialFocus: true,\n ...rest,\n } as PropsBase\n\n if (variant === 'single') {\n return {\n ...baseProps,\n mode: 'single' as const,\n selected: singleDate,\n onSelect: (date: Date \| undefined) => handleSelect(date),\n } as PropsSingleRequired\n }\n\n return {\n ...baseProps,\n mode: 'range' as const,\n selected: dateRange,\n onSelect: (range: DateRange \| undefined) => handleSelect(range),\n numberOfMonths: rest.numberOfMonths ?? 2,\n } as PropsRangeRequired\n }, [variant, rest, singleDate, dateRange, handleSelect, resolvedLocale, defaultMonth])\n\n const hasValue = variant === 'single' ? singleDate : dateRange\n const showClearButton = onClear && hasValue && isHovered\n\n return (\n <PopoverRoot open={isOpen} onOpenChange={setIsOpen} modal={modal}>\n <PopoverTrigger asChild>\n <Button\n id={rest.id}\n variant=\"ghost\"\n className={cn(\n 'relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity',\n !hasValue && 'text-muted-foreground',\n buttonVariants({ variant: 'input', size: 'lg' }),\n buttonClassName,\n )}\n disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n onMouseEnter={() => !isMobile && setIsHovered(true)}\n onMouseLeave={() => !isMobile && setIsHovered(false)}\n onMouseDown={() => !isMobile && setIsClicked(true)}\n >\n <div className=\"flex items-center justify-center gap-2\">\n <CalendarBlank className={cn('h-4 w-4 shrink-0 transition-opacity duration-150')} />\n <span className=\"w-full text-center\">{formatForDisplay()}</span>\n {onClear && hasValue && renderClearIcon(showClearButton ?? false)}\n </div>\n </Button>\n </PopoverTrigger>\n <PopoverContent container={container} className=\"w-auto p-0\" align=\"center\" ref={calendarRef}>\n <Calendar\n {...calendarProps}\n className=\"border-0\"\n showYearSwitcher={variant === 'single' ? showYearSwitcher : false}\n />\n </PopoverContent>\n </PopoverRoot>\n )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4IA;AAA4F;AAChF;AAC2C;AACvC;AACA;AACP;AACP;AACA;AACgB;AACY;AACG;AACV;AACrB;AACA;AACQ;AACR;AAEF;AACE;AACA;AACA;AACA;AACA;AAEA;AAEA;AACE;AACE;AAAmD;AAErD;AAAO;AAGT;AACE;AACE;AAAqD;AAEvD;AAAO;AAGT;AACE;AACA;AACA;AAAsE;AAGxE;AACE;AACE;AACA;AAA6B;AAE7B;AACA;AAA6B;AAC/B;AAGF;AACE;AACE;AACE;AAEA;AAAuB;AAGzB;AAAmC;AACrC;AAGF;AACA;AAEA;AACE;AACE;AAAwC;AAExC;AAA2D;AAC7D;AAGF;AAA2B;AAEvB;AACE;AAEA;AAEA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AAGF;AACE;AAAe;AACjB;AAEA;AACA;AACA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AACF;AACF;AACF;AAC6D;AAG/D;AAA0B;AAEtB;AAEA;AACA;AAEA;AACE;AAA+B;AAE/B;AAA8B;AAGhC;AACE;AAAwB;AAG1B;AACE;AAAQ;AACV;AACF;AACoD;AAGtD;AACE;AACA;AACE;AAAyE;AAG3E;AACA;AACA;AACA;AACA;AACA;AACA;AAA4B;AAG9B;AACE;AACA;AAGA;AAEI;AAAA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AAEE;AAAC;AAAA;AACa;AACD;AACT;AACF;AACS;AAAA;AAEb;AACF;AAIJ;AACE;AAAkB;AACuD;AAC/D;AACM;AACX;AAGL;AACE;AAAO;AACF;AACG;AACI;AAC6C;AACzD;AAGF;AAAO;AACF;AACG;AACI;AACoD;AACvB;AACzC;AAGF;AACA;AAEA;AAEI;AACE;AAAC;AAAA;AACU;AACD;AACG;AACT;AACa;AACkC;AAC/C;AACF;AAC+D;AACb;AACC;AACF;AAG/C;AAAkF;AACzB;AACO;AAClE;AAAA;AAEJ;AAEE;AAAC;AAAA;AACK;AACM;AACkD;AAAA;AAEhE;AAGN;AAEA;;"}

package/dist/components/Dialog/Dialog.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { X } from '@phosphor-icons/react';
+import { X } from '@phosphor-icons/react/dist/ssr/X';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';

package/dist/components/Dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n closable?: boolean\n container?: HTMLElement \| null\n}\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',\n className,\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, DialogContentProps>(\n ({ className, children, closable = true, container, ...props }, ref) => (\n <DialogPortal container={container}>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-background-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n className,\n )}\n onPointerDownOutside={(e) => {\n if (!closable) {\n e.preventDefault()\n }\n }}\n onEscapeKeyDown={(e) => {\n if (!closable) {\n e.preventDefault()\n }\n }}\n {...props}\n >\n {children}\n {closable ? (\n <DialogPrimitive.Close className=\"data-[state=open]:text-muted-foreground ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\">\n <X size={24} weight=\"bold\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n ) : null}\n </DialogPrimitive.Content>\n </DialogPortal>\n ),\n)\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg leading-none font-semibold tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react/dist/ssr/X'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n closable?: boolean\n container?: HTMLElement \| null\n}\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',\n className,\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, DialogContentProps>(\n ({ className, children, closable = true, container, ...props }, ref) => (\n <DialogPortal container={container}>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-background-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',\n className,\n )}\n onPointerDownOutside={(e) => {\n if (!closable) {\n e.preventDefault()\n }\n }}\n onEscapeKeyDown={(e) => {\n if (!closable) {\n e.preventDefault()\n }\n }}\n {...props}\n >\n {children}\n {closable ? (\n <DialogPrimitive.Close className=\"data-[state=open]:text-muted-foreground ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\">\n <X size={24} weight=\"bold\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n ) : null}\n </DialogPrimitive.Content>\n </DialogPortal>\n ),\n)\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg leading-none font-semibold tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/InlineMultiSelect/InlineMultiSelect.js CHANGED Viewed

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { X, CaretUpDown, Check } from '@phosphor-icons/react';
+import { CaretUpDown } from '@phosphor-icons/react/dist/ssr/CaretUpDown';
+import { Check } from '@phosphor-icons/react/dist/ssr/Check';
+import { X } from '@phosphor-icons/react/dist/ssr/X';
 import * as React from 'react';
 import { Button, buttonVariants } from '../Button/Button.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';

package/dist/components/InlineMultiSelect/InlineMultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineMultiSelect.js","sources":["../../../src/components/InlineMultiSelect/InlineMultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown, Check, X } from '@phosphor-icons/react'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/** Represents a selectable option in the InlineMultiSelect /\ntype Option = { value: string; label: string }\n\n/* Props for the InlineMultiSelect component /\nexport type InlineMultiSelectProps = {\n /* Array of options to display in the select /\n options: Array<Option>\n /* Currently selected values (controlled) /\n value?: Array<string>\n /* Callback fired when selection changes /\n onChange?: (value: Array<string>) => void\n /* Form field state from react-hook-form /\n fieldState?: ControllerFieldState\n /* Default selected values (uncontrolled) /\n defaultValue?: Array<string>\n /* Placeholder text when no items are selected /\n placeholder?: string\n /* Text to show when no options match the search /\n notFoundText?: string\n /* Placeholder for the search input /\n commandInputPlaceholder?: string\n /* Maximum number of items that can be selected /\n max?: number\n /* Additional CSS classes /\n className?: string\n /* Whether the component is in a loading state /\n loading?: boolean\n /* Message to show when in loading state /\n loadingPlaceholder?: string\n /* Whether the component is in a modal /\n modal?: boolean\n /* Whether to close the dropdown when an option is selected. Defaults to false for multi-select. /\n closeOnSelect?: boolean\n}\n\n/\n InlineMultiSelect Component\n \n A controlled multi-select component that displays selected items inline with search functionality.\n * Supports keyboard navigation, maximum selection limit, and custom styling.\n */\nexport const InlineMultiSelect = ({\n options,\n value,\n onChange,\n defaultValue = [],\n placeholder,\n notFoundText,\n commandInputPlaceholder,\n max,\n className,\n fieldState,\n loading = false,\n modal = false,\n loadingPlaceholder = 'Cargando...',\n closeOnSelect = false,\n}: InlineMultiSelectProps) => {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const [open, setOpen] = React.useState(false)\n const [inputValue, setInputValue] = React.useState('')\n\n const isControlled = value !== undefined\n\n const [internalSelected, setInternalSelected] = React.useState<Array<string>>(() => defaultValue)\n\n const selectedValues = isControlled ? value! : internalSelected\n const selected = React.useMemo(\n () => options.filter((option) => selectedValues.includes(option.value)),\n [options, selectedValues],\n )\n\n const [visibleItems, setVisibleItems] = React.useState<Array<Option>>([])\n const [hiddenCount, setHiddenCount] = React.useState(0)\n\n React.useEffect(() => {\n const maxVisibleItems = 2\n const visibleCount = Math.min(selected.length, maxVisibleItems)\n setVisibleItems(selected.slice(0, visibleCount))\n setHiddenCount(selected.length - visibleCount)\n }, [selected])\n\n const handleSelectionChange = (newSelected: Array<string>) => {\n if (!isControlled) {\n setInternalSelected(newSelected)\n }\n onChange?.(newSelected)\n }\n\n const removeItem = (itemToRemove?: Option) => {\n const newValues = itemToRemove\n ? selectedValues.filter((val) => val !== itemToRemove.value)\n : selectedValues.slice(0, -1)\n handleSelectionChange(newValues)\n }\n\n const handleUnselect = (item: Option, event: React.MouseEvent \| React.KeyboardEvent) => {\n event.stopPropagation()\n event.preventDefault()\n removeItem(item)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const input = inputRef.current\n if (input) {\n if ((event.key === 'Backspace' \|\| event.key === 'Delete') && input.value === '') {\n removeItem()\n }\n if (event.key === 'Escape') {\n input.blur()\n }\n }\n }\n\n return (\n <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n <Command onKeyDown={handleKeyDown}>\n <PopoverTrigger asChild>\n <Button\n variant=\"ghost\"\n aria-expanded={open}\n className={cn(\n 'w-full justify-between bg-[#fff] pr-2 pl-2',\n fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : '',\n buttonVariants({ variant: 'ghost', size: 'lg' }),\n className,\n )}\n >\n <div ref={containerRef} className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2\">\n <div className=\"flex items-center whitespace-nowrap\">\n {selected.length > 0 ? (\n <>\n {visibleItems.map((item) => (\n <div key={item.value} className=\"bg-muted flex items-center gap-1 rounded px-1 py-0.5\">\n <span className=\"text-sm\">{item.label}</span>\n <span\n role=\"button\"\n tabIndex={0}\n onClick={(event) => handleUnselect(item, event)}\n onKeyDown={(event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n handleUnselect(item, event)\n }\n }}\n className=\"hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full\"\n >\n <X className=\"text-muted-foreground h-3 w-3\" />\n </span>\n </div>\n ))}\n {hiddenCount > 0 && <span className=\"text-muted-foreground text-sm\">+{hiddenCount}</span>}\n </>\n ) : (\n <span className=\"text-muted-foreground\">{placeholder}</span>\n )}\n </div>\n </div>\n <CaretUpDown className=\"h-4 w-4 opacity-50\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"px-0 py-0\">\n <CommandInput\n placeholder={commandInputPlaceholder ?? 'Search...'}\n disabled={loading}\n value={inputValue}\n onValueChange={setInputValue}\n />\n <CommandList>\n {loading ? (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n {loadingPlaceholder}\n </div>\n ) : (\n <>\n <CommandEmpty>{notFoundText ?? 'Options not found'}</CommandEmpty>\n {open && (\n <CommandGroup>\n {options.map((item) => {\n const isSelected = selectedValues.includes(item.value)\n return (\n <CommandItem\n key={item.value}\n onMouseDown={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n onSelect={() => {\n if (isSelected) {\n handleSelectionChange(selectedValues.filter((val) => val !== item.value))\n } else {\n if (max && selectedValues.length >= max) return\n handleSelectionChange([...selectedValues, item.value])\n setInputValue('')\n }\n\n if (closeOnSelect) {\n setOpen(false)\n }\n }}\n >\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n {isSelected ? <Check className=\"h-4 w-4\" /> : <div className=\"h-4 w-4\" />}\n </div>\n <div>{item.label}</div>\n </div>\n </CommandItem>\n )\n })}\n </CommandGroup>\n )}\n </>\n )}\n </CommandList>\n </PopoverContent>\n </Command>\n </PopoverRoot>\n )\n}\n"],"names":[],"mappings":"~~;;;;;;;;;AAqDO~~;AAA2B;AAChC;AACA;AACA;AACgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACU;AACF;AACa;AAEvB;AACE;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AAAuB;AACiD;AAC9C;AAG1B;AACA;AAEA;AACE;AACA;AACA;AACA;AAA6C;AAG/C;AACE;AACE;AAA+B;AAEjC;AAAsB;AAGxB;AACE;AAGA;AAA+B;AAGjC;AACE;AACA;AACA;AAAe;AAGjB;AACE;AACA;AACE;AACE;AAAW;AAEb;AACE;AAAW;AACb;AACF;AAGF;AAGM;AACE;AAAC;AAAA;AACS;AACO;AACJ;AACT;AACyE;AAC1B;AAC/C;AACF;AAEA;AAIS;AAEG;AAAsC;AACtC;AAAC;AAAA;AACM;AACK;AACoC;AAE5C;AACE;AAA0B;AAC5B;AACF;AACU;AAEmC;AAAA;AAC/C;AAEH;AACmE;AAAA;AAAE;AAAY;AAM1F;AAC4C;AAAA;AAAA;AAEhD;AAEE;AAAA;AAAC;AAAA;AACyC;AAC9B;AACH;AACQ;AAAA;AACjB;AAQM;AAAmD;AAI7C;AACA;AACE;AAAC;AAAA;AAGG;AACA;AAAsB;AACxB;AAEE;AACE;AAAwE;AAExE;AACA;AACA;AAAgB;AAGlB;AACE;AAAa;AACf;AACF;AAGE;AAEA;AACiB;AACnB;AAAA;AAxBU;AAyBZ;AAGN;AAIR;AACF;AAIR;;"}
1	+ {"version":3,"file":"InlineMultiSelect.js","sources":["../../../src/components/InlineMultiSelect/InlineMultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown } from '@phosphor-icons/react/dist/ssr/CaretUpDown'\nimport { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/** Represents a selectable option in the InlineMultiSelect /\ntype Option = { value: string; label: string }\n\n/* Props for the InlineMultiSelect component /\nexport type InlineMultiSelectProps = {\n /* Array of options to display in the select /\n options: Array<Option>\n /* Currently selected values (controlled) /\n value?: Array<string>\n /* Callback fired when selection changes /\n onChange?: (value: Array<string>) => void\n /* Form field state from react-hook-form /\n fieldState?: ControllerFieldState\n /* Default selected values (uncontrolled) /\n defaultValue?: Array<string>\n /* Placeholder text when no items are selected /\n placeholder?: string\n /* Text to show when no options match the search /\n notFoundText?: string\n /* Placeholder for the search input /\n commandInputPlaceholder?: string\n /* Maximum number of items that can be selected /\n max?: number\n /* Additional CSS classes /\n className?: string\n /* Whether the component is in a loading state /\n loading?: boolean\n /* Message to show when in loading state /\n loadingPlaceholder?: string\n /* Whether the component is in a modal /\n modal?: boolean\n /* Whether to close the dropdown when an option is selected. Defaults to false for multi-select. /\n closeOnSelect?: boolean\n}\n\n/\n InlineMultiSelect Component\n \n A controlled multi-select component that displays selected items inline with search functionality.\n * Supports keyboard navigation, maximum selection limit, and custom styling.\n */\nexport const InlineMultiSelect = ({\n options,\n value,\n onChange,\n defaultValue = [],\n placeholder,\n notFoundText,\n commandInputPlaceholder,\n max,\n className,\n fieldState,\n loading = false,\n modal = false,\n loadingPlaceholder = 'Cargando...',\n closeOnSelect = false,\n}: InlineMultiSelectProps) => {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const [open, setOpen] = React.useState(false)\n const [inputValue, setInputValue] = React.useState('')\n\n const isControlled = value !== undefined\n\n const [internalSelected, setInternalSelected] = React.useState<Array<string>>(() => defaultValue)\n\n const selectedValues = isControlled ? value! : internalSelected\n const selected = React.useMemo(\n () => options.filter((option) => selectedValues.includes(option.value)),\n [options, selectedValues],\n )\n\n const [visibleItems, setVisibleItems] = React.useState<Array<Option>>([])\n const [hiddenCount, setHiddenCount] = React.useState(0)\n\n React.useEffect(() => {\n const maxVisibleItems = 2\n const visibleCount = Math.min(selected.length, maxVisibleItems)\n setVisibleItems(selected.slice(0, visibleCount))\n setHiddenCount(selected.length - visibleCount)\n }, [selected])\n\n const handleSelectionChange = (newSelected: Array<string>) => {\n if (!isControlled) {\n setInternalSelected(newSelected)\n }\n onChange?.(newSelected)\n }\n\n const removeItem = (itemToRemove?: Option) => {\n const newValues = itemToRemove\n ? selectedValues.filter((val) => val !== itemToRemove.value)\n : selectedValues.slice(0, -1)\n handleSelectionChange(newValues)\n }\n\n const handleUnselect = (item: Option, event: React.MouseEvent \| React.KeyboardEvent) => {\n event.stopPropagation()\n event.preventDefault()\n removeItem(item)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const input = inputRef.current\n if (input) {\n if ((event.key === 'Backspace' \|\| event.key === 'Delete') && input.value === '') {\n removeItem()\n }\n if (event.key === 'Escape') {\n input.blur()\n }\n }\n }\n\n return (\n <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n <Command onKeyDown={handleKeyDown}>\n <PopoverTrigger asChild>\n <Button\n variant=\"ghost\"\n aria-expanded={open}\n className={cn(\n 'w-full justify-between bg-[#fff] pr-2 pl-2',\n fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : '',\n buttonVariants({ variant: 'ghost', size: 'lg' }),\n className,\n )}\n >\n <div ref={containerRef} className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2\">\n <div className=\"flex items-center whitespace-nowrap\">\n {selected.length > 0 ? (\n <>\n {visibleItems.map((item) => (\n <div key={item.value} className=\"bg-muted flex items-center gap-1 rounded px-1 py-0.5\">\n <span className=\"text-sm\">{item.label}</span>\n <span\n role=\"button\"\n tabIndex={0}\n onClick={(event) => handleUnselect(item, event)}\n onKeyDown={(event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n handleUnselect(item, event)\n }\n }}\n className=\"hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full\"\n >\n <X className=\"text-muted-foreground h-3 w-3\" />\n </span>\n </div>\n ))}\n {hiddenCount > 0 && <span className=\"text-muted-foreground text-sm\">+{hiddenCount}</span>}\n </>\n ) : (\n <span className=\"text-muted-foreground\">{placeholder}</span>\n )}\n </div>\n </div>\n <CaretUpDown className=\"h-4 w-4 opacity-50\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"px-0 py-0\">\n <CommandInput\n placeholder={commandInputPlaceholder ?? 'Search...'}\n disabled={loading}\n value={inputValue}\n onValueChange={setInputValue}\n />\n <CommandList>\n {loading ? (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n {loadingPlaceholder}\n </div>\n ) : (\n <>\n <CommandEmpty>{notFoundText ?? 'Options not found'}</CommandEmpty>\n {open && (\n <CommandGroup>\n {options.map((item) => {\n const isSelected = selectedValues.includes(item.value)\n return (\n <CommandItem\n key={item.value}\n onMouseDown={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n onSelect={() => {\n if (isSelected) {\n handleSelectionChange(selectedValues.filter((val) => val !== item.value))\n } else {\n if (max && selectedValues.length >= max) return\n handleSelectionChange([...selectedValues, item.value])\n setInputValue('')\n }\n\n if (closeOnSelect) {\n setOpen(false)\n }\n }}\n >\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n {isSelected ? <Check className=\"h-4 w-4\" /> : <div className=\"h-4 w-4\" />}\n </div>\n <div>{item.label}</div>\n </div>\n </CommandItem>\n )\n })}\n </CommandGroup>\n )}\n </>\n )}\n </CommandList>\n </PopoverContent>\n </Command>\n </PopoverRoot>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuDO;AAA2B;AAChC;AACA;AACA;AACgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACU;AACF;AACa;AAEvB;AACE;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AAAuB;AACiD;AAC9C;AAG1B;AACA;AAEA;AACE;AACA;AACA;AACA;AAA6C;AAG/C;AACE;AACE;AAA+B;AAEjC;AAAsB;AAGxB;AACE;AAGA;AAA+B;AAGjC;AACE;AACA;AACA;AAAe;AAGjB;AACE;AACA;AACE;AACE;AAAW;AAEb;AACE;AAAW;AACb;AACF;AAGF;AAGM;AACE;AAAC;AAAA;AACS;AACO;AACJ;AACT;AACyE;AAC1B;AAC/C;AACF;AAEA;AAIS;AAEG;AAAsC;AACtC;AAAC;AAAA;AACM;AACK;AACoC;AAE5C;AACE;AAA0B;AAC5B;AACF;AACU;AAEmC;AAAA;AAC/C;AAEH;AACmE;AAAA;AAAE;AAAY;AAM1F;AAC4C;AAAA;AAAA;AAEhD;AAEE;AAAA;AAAC;AAAA;AACyC;AAC9B;AACH;AACQ;AAAA;AACjB;AAQM;AAAmD;AAI7C;AACA;AACE;AAAC;AAAA;AAGG;AACA;AAAsB;AACxB;AAEE;AACE;AAAwE;AAExE;AACA;AACA;AAAgB;AAGlB;AACE;AAAa;AACf;AACF;AAGE;AAEA;AACiB;AACnB;AAAA;AAxBU;AAyBZ;AAGN;AAIR;AACF;AAIR;;"}

package/dist/components/Input/Input.js CHANGED Viewed

@@ -1,6 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Minus, X, Plus } from '@phosphor-icons/react';
-import { EyeSlash, Eye, WarningCircle } from '@phosphor-icons/react/dist/ssr';
+import { Eye } from '@phosphor-icons/react/dist/ssr/Eye';
+import { EyeSlash } from '@phosphor-icons/react/dist/ssr/EyeSlash';
+import { Minus } from '@phosphor-icons/react/dist/ssr/Minus';
+import { Plus } from '@phosphor-icons/react/dist/ssr/Plus';
+import { WarningCircle } from '@phosphor-icons/react/dist/ssr/WarningCircle';
+import { X } from '@phosphor-icons/react/dist/ssr/X';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';

package/dist/components/Input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { Minus, Plus, X } from '@phosphor-icons/react'\nimport { Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport type InputProps = {\n htmlType?: 'text' \| 'tel' \| 'email' \| 'number' \| 'password' \| 'url'\n startContent?: React.ReactElement\n endContent?: React.ReactElement\n groupText?: string\n disabled?: boolean\n error?: boolean \| string\n stepControls?: boolean\n inputClassName?: string\n /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the input. */\n onClear?: boolean \| (() => void)\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n htmlType = 'text',\n placeholder,\n startContent,\n endContent,\n groupText,\n disabled,\n error,\n stepControls,\n value: controlledValue,\n onChange: controlledOnChange,\n inputClassName,\n onClear = true,\n ...props\n },\n ref,\n ) => {\n const isHtmlTypePassword = htmlType === 'password'\n const isHtmlTypeNumber = htmlType === 'number'\n const hasStepControls = stepControls && isHtmlTypeNumber\n\n const [type, setType] = React.useState(htmlType)\n const [internalValue, setInternalValue] = React.useState(controlledValue)\n const [isHovered, setIsHovered] = React.useState(false)\n\n React.useEffect(() => {\n setInternalValue(controlledValue)\n }, [controlledValue])\n\n const toggleType = () => {\n setType(type === 'password' ? 'text' : 'password')\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setInternalValue(event.target.value)\n if (controlledOnChange) {\n controlledOnChange(event)\n }\n }\n\n const handleStepChange = (increment: number) => {\n const currentValue = Number(internalValue ?? 0)\n const newValue = currentValue + increment\n if (newValue >= 0) {\n const event = {\n target: { value: newValue.toString() },\n } as React.ChangeEvent<HTMLInputElement>\n handleChange(event)\n }\n }\n\n const handleClear = () => {\n const event = {\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>\n handleChange(event)\n\n if (typeof onClear === 'function') {\n onClear()\n }\n }\n\n const renderPasswordEye = () => {\n if (!isHtmlTypePassword) return null\n\n return (\n <button\n type=\"button\"\n className=\"flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-neutral-50\"\n onClick={() => toggleType()}\n >\n {type === 'password' ? (\n <EyeSlash size={20} data-testid=\"password-eye-closed\" />\n ) : (\n <Eye size={20} data-testid=\"password-eye-open\" />\n )}\n </button>\n )\n }\n\n const renderErrorIcon = () => {\n if (isHtmlTypePassword \|\| !error \|\| hasStepControls) return null\n return (\n <div>\n <WarningCircle\n data-testid=\"exclaim-icon\"\n className={cn(\n 'text-error-500 transition-opacity duration-150',\n showClearIcon ? 'opacity-0' : 'opacity-100',\n )}\n size={18}\n />\n </div>\n )\n }\n\n const renderStepControlsIncrement = () => {\n if (!hasStepControls) return null\n return (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={() => handleStepChange(1)}\n className=\"p-2\"\n aria-label=\"Increment\"\n >\n <Plus data-testid=\"increment-button\" />\n </button>\n )\n }\n\n const renderEndContent = () => {\n if (isHtmlTypePassword \|\| error \|\| hasStepControls \|\| !endContent) return null\n return (\n <div\n className={cn(\n 'text-neutral-300 transition-opacity duration-150',\n showClearIcon ? 'opacity-0' : 'opacity-100',\n )}\n >\n {endContent}\n </div>\n )\n }\n\n const renderClearIcon = () => {\n if (disabled \|\| hasStepControls \|\| isHtmlTypePassword \|\| !onClear) return null\n\n return (\n <div\n className={cn(\n 'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n !endContent && !error\n ? 'bg-gradient-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150'\n : 'bg-transparent',\n showClearIcon ? 'opacity-100' : 'opacity-0',\n )}\n >\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n )}\n onClick={handleClear}\n />\n </div>\n )\n }\n\n const renderStartContent = () => {\n if (!startContent) return null\n return <div className=\"text-neutral-300\">{startContent}</div>\n }\n\n const renderStepControlsDecrement = () => {\n if (!hasStepControls) return null\n return (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={() => handleStepChange(-1)}\n className=\"p-2\"\n aria-label=\"Decrement\"\n >\n <Minus data-testid=\"decrement-button\" />\n </button>\n )\n }\n\n const hasValue = Boolean(internalValue && String(internalValue).trim() !== '')\n const showClearIcon = onClear && hasValue && isHovered && !disabled && !isHtmlTypePassword && !hasStepControls\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <div className=\"flex w-full items-center\">\n {groupText && (\n <div\n className={cn(\n 'flex h-12 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pr-2 pl-4 text-neutral-300',\n )}\n >\n {groupText}\n </div>\n )}\n <div\n className={cn(\n 'relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n groupText && 'rounded-l-none',\n disabled && 'bg-neutral-50',\n error && 'border-error-400 focus-within:border-error-700',\n className,\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {renderStartContent()}\n {renderStepControlsDecrement()}\n <input\n type={type}\n className={cn(\n 'w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n hasStepControls && 'text-center',\n inputClassName,\n )}\n ref={ref}\n onChange={handleChange}\n placeholder={placeholder}\n disabled={disabled}\n value={internalValue}\n onKeyDown={(event) => {\n if (isHtmlTypeNumber && (event.key === 'e' \|\| event.key === 'E' \|\| event.key === '-')) {\n event.preventDefault()\n }\n }}\n {...props}\n />\n {renderPasswordEye()}\n {renderClearIcon()}\n {renderErrorIcon()}\n {renderStepControlsIncrement()}\n {renderEndContent()}\n </div>\n </div>\n {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n </div>\n )\n },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { Eye } from '@phosphor-icons/react/dist/ssr/Eye'\nimport { EyeSlash } from '@phosphor-icons/react/dist/ssr/EyeSlash'\nimport { Minus } from '@phosphor-icons/react/dist/ssr/Minus'\nimport { Plus } from '@phosphor-icons/react/dist/ssr/Plus'\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr/WarningCircle'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport type InputProps = {\n htmlType?: 'text' \| 'tel' \| 'email' \| 'number' \| 'password' \| 'url'\n startContent?: React.ReactElement\n endContent?: React.ReactElement\n groupText?: string\n disabled?: boolean\n error?: boolean \| string\n stepControls?: boolean\n inputClassName?: string\n /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the input. */\n onClear?: boolean \| (() => void)\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n htmlType = 'text',\n placeholder,\n startContent,\n endContent,\n groupText,\n disabled,\n error,\n stepControls,\n value: controlledValue,\n onChange: controlledOnChange,\n inputClassName,\n onClear = true,\n ...props\n },\n ref,\n ) => {\n const isHtmlTypePassword = htmlType === 'password'\n const isHtmlTypeNumber = htmlType === 'number'\n const hasStepControls = stepControls && isHtmlTypeNumber\n\n const [type, setType] = React.useState(htmlType)\n const [internalValue, setInternalValue] = React.useState(controlledValue)\n const [isHovered, setIsHovered] = React.useState(false)\n\n React.useEffect(() => {\n setInternalValue(controlledValue)\n }, [controlledValue])\n\n const toggleType = () => {\n setType(type === 'password' ? 'text' : 'password')\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setInternalValue(event.target.value)\n if (controlledOnChange) {\n controlledOnChange(event)\n }\n }\n\n const handleStepChange = (increment: number) => {\n const currentValue = Number(internalValue ?? 0)\n const newValue = currentValue + increment\n if (newValue >= 0) {\n const event = {\n target: { value: newValue.toString() },\n } as React.ChangeEvent<HTMLInputElement>\n handleChange(event)\n }\n }\n\n const handleClear = () => {\n const event = {\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>\n handleChange(event)\n\n if (typeof onClear === 'function') {\n onClear()\n }\n }\n\n const renderPasswordEye = () => {\n if (!isHtmlTypePassword) return null\n\n return (\n <button\n type=\"button\"\n className=\"flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-neutral-50\"\n onClick={() => toggleType()}\n >\n {type === 'password' ? (\n <EyeSlash size={20} data-testid=\"password-eye-closed\" />\n ) : (\n <Eye size={20} data-testid=\"password-eye-open\" />\n )}\n </button>\n )\n }\n\n const renderErrorIcon = () => {\n if (isHtmlTypePassword \|\| !error \|\| hasStepControls) return null\n return (\n <div>\n <WarningCircle\n data-testid=\"exclaim-icon\"\n className={cn(\n 'text-error-500 transition-opacity duration-150',\n showClearIcon ? 'opacity-0' : 'opacity-100',\n )}\n size={18}\n />\n </div>\n )\n }\n\n const renderStepControlsIncrement = () => {\n if (!hasStepControls) return null\n return (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={() => handleStepChange(1)}\n className=\"p-2\"\n aria-label=\"Increment\"\n >\n <Plus data-testid=\"increment-button\" />\n </button>\n )\n }\n\n const renderEndContent = () => {\n if (isHtmlTypePassword \|\| error \|\| hasStepControls \|\| !endContent) return null\n return (\n <div\n className={cn(\n 'text-neutral-300 transition-opacity duration-150',\n showClearIcon ? 'opacity-0' : 'opacity-100',\n )}\n >\n {endContent}\n </div>\n )\n }\n\n const renderClearIcon = () => {\n if (disabled \|\| hasStepControls \|\| isHtmlTypePassword \|\| !onClear) return null\n\n return (\n <div\n className={cn(\n 'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n !endContent && !error\n ? 'bg-gradient-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150'\n : 'bg-transparent',\n showClearIcon ? 'opacity-100' : 'opacity-0',\n )}\n >\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n )}\n onClick={handleClear}\n />\n </div>\n )\n }\n\n const renderStartContent = () => {\n if (!startContent) return null\n return <div className=\"text-neutral-300\">{startContent}</div>\n }\n\n const renderStepControlsDecrement = () => {\n if (!hasStepControls) return null\n return (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={() => handleStepChange(-1)}\n className=\"p-2\"\n aria-label=\"Decrement\"\n >\n <Minus data-testid=\"decrement-button\" />\n </button>\n )\n }\n\n const hasValue = Boolean(internalValue && String(internalValue).trim() !== '')\n const showClearIcon = onClear && hasValue && isHovered && !disabled && !isHtmlTypePassword && !hasStepControls\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <div className=\"flex w-full items-center\">\n {groupText && (\n <div\n className={cn(\n 'flex h-12 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pr-2 pl-4 text-neutral-300',\n )}\n >\n {groupText}\n </div>\n )}\n <div\n className={cn(\n 'relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n groupText && 'rounded-l-none',\n disabled && 'bg-neutral-50',\n error && 'border-error-400 focus-within:border-error-700',\n className,\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {renderStartContent()}\n {renderStepControlsDecrement()}\n <input\n type={type}\n className={cn(\n 'w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n hasStepControls && 'text-center',\n inputClassName,\n )}\n ref={ref}\n onChange={handleChange}\n placeholder={placeholder}\n disabled={disabled}\n value={internalValue}\n onKeyDown={(event) => {\n if (isHtmlTypeNumber && (event.key === 'e' \|\| event.key === 'E' \|\| event.key === '-')) {\n event.preventDefault()\n }\n }}\n {...props}\n />\n {renderPasswordEye()}\n {renderClearIcon()}\n {renderErrorIcon()}\n {renderStepControlsIncrement()}\n {renderEndContent()}\n </div>\n </div>\n {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n </div>\n )\n },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":[],"mappings":"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"}

package/dist/components/LazyDatePicker/LazyDatePicker.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { CalendarBlank } from '@phosphor-icons/react';
+import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank';
 import { useState } from 'react';
 import { cn } from '../../lib/utils.js';

package/dist/components/LazyDatePicker/LazyDatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LazyDatePicker.js","sources":["../../../src/components/LazyDatePicker/LazyDatePicker.tsx"],"sourcesContent":["import { CalendarBlank } from '@phosphor-icons/react'\nimport type { ComponentType } from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport type { DatePickerInput, DatePickerOutput, DatePickerProps } from '../DatePicker/DatePicker'\n\nimport { ValueFormat } from '@/lib/dateUtils'\n\nfunction LazyDatePicker<V extends 'single' \| 'range' = 'single', F extends ValueFormat = 'iso'>(\n props: DatePickerProps<V, F>,\n initialValue?: DatePickerInput<V>,\n value?: DatePickerInput<V>,\n onChange?: (value: DatePickerOutput<V, F>) => void,\n) {\n const [DatePickerComponent, setDatePickerComponent] = useState<ComponentType<DatePickerProps<V, F>> \| null>(null)\n\n const loadDatePicker = async () => {\n if (!DatePickerComponent) {\n const { DatePicker } = await import('../DatePicker/DatePicker')\n setDatePickerComponent(() => DatePicker)\n }\n }\n\n const PlaceHolderButton = () => {\n return (\n <button\n type=\"button\"\n onMouseEnter={loadDatePicker}\n onFocus={loadDatePicker}\n onTouchStart={loadDatePicker}\n className={cn(\n 'flex h-12 w-full items-center justify-center gap-2 rounded-md border border-neutral-200 bg-white px-6 text-neutral-950 hover:bg-neutral-50 focus-visible:border-neutral-950 focus-visible:ring-0',\n props.buttonClassName,\n )}\n aria-label={props.placeholder ?? 'Open date picker'}\n >\n <CalendarBlank size={16} aria-hidden=\"true\" className=\"h-4 w-4 shrink-0 transition-opacity duration-150\" />\n <span className=\"text-center tracking-[0.08px]\">{props.placeholder}</span>\n </button>\n )\n }\n\n return DatePickerComponent ? (\n <DatePickerComponent onChange={onChange} initialValue={initialValue} value={value} {...props} />\n ) : (\n <PlaceHolderButton />\n )\n}\n\nexport { LazyDatePicker }\n"],"names":[],"mappings":";;;;;AASA,SAAS,cAAA,CACP,KAAA,EACA,YAAA,EACA,KAAA,EACA,QAAA,EACA;AACA,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAAsD,IAAI,CAAA;AAEhH,EAAA,MAAM,iBAAiB,YAAY;AACjC,IAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,MAAA,MAAM,EAAE,UAAA,EAAW,GAAI,MAAM,OAAO,6BAA0B,CAAA;AAC9D,MAAA,sBAAA,CAAuB,MAAM,UAAU,CAAA;AAAA;AACzC,GACF;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAc,cAAA;AAAA,QACd,OAAA,EAAS,cAAA;AAAA,QACT,YAAA,EAAc,cAAA;AAAA,QACd,SAAA,EAAW,EAAA;AAAA,UACT,kMAAA;AAAA,UACA,KAAA,CAAM;AAAA,SACR;AAAA,QACA,YAAA,EAAY,MAAM,WAAA,IAAe,kBAAA;AAAA,QAEjC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAc,IAAA,EAAM,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,WAAU,kDAAA,EAAmD,CAAA;AAAA,0BACzG,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAAA,EAAiC,gBAAM,WAAA,EAAY;AAAA;AAAA;AAAA,KACrE;AAAA,GAEJ;AAEA,EAAA,OAAO,mBAAA,mBACL,GAAA,CAAC,mBAAA,EAAA,EAAoB,QAAA,EAAoB,YAAA,EAA4B,OAAe,GAAG,KAAA,EAAO,CAAA,mBAE9F,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAEvB;;;;"}
1	+ {"version":3,"file":"LazyDatePicker.js","sources":["../../../src/components/LazyDatePicker/LazyDatePicker.tsx"],"sourcesContent":["import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport type { ComponentType } from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport type { DatePickerInput, DatePickerOutput, DatePickerProps } from '../DatePicker/DatePicker'\n\nimport { ValueFormat } from '@/lib/dateUtils'\n\nfunction LazyDatePicker<V extends 'single' \| 'range' = 'single', F extends ValueFormat = 'iso'>(\n props: DatePickerProps<V, F>,\n initialValue?: DatePickerInput<V>,\n value?: DatePickerInput<V>,\n onChange?: (value: DatePickerOutput<V, F>) => void,\n) {\n const [DatePickerComponent, setDatePickerComponent] = useState<ComponentType<DatePickerProps<V, F>> \| null>(null)\n\n const loadDatePicker = async () => {\n if (!DatePickerComponent) {\n const { DatePicker } = await import('../DatePicker/DatePicker')\n setDatePickerComponent(() => DatePicker)\n }\n }\n\n const PlaceHolderButton = () => {\n return (\n <button\n type=\"button\"\n onMouseEnter={loadDatePicker}\n onFocus={loadDatePicker}\n onTouchStart={loadDatePicker}\n className={cn(\n 'flex h-12 w-full items-center justify-center gap-2 rounded-md border border-neutral-200 bg-white px-6 text-neutral-950 hover:bg-neutral-50 focus-visible:border-neutral-950 focus-visible:ring-0',\n props.buttonClassName,\n )}\n aria-label={props.placeholder ?? 'Open date picker'}\n >\n <CalendarBlank size={16} aria-hidden=\"true\" className=\"h-4 w-4 shrink-0 transition-opacity duration-150\" />\n <span className=\"text-center tracking-[0.08px]\">{props.placeholder}</span>\n </button>\n )\n }\n\n return DatePickerComponent ? (\n <DatePickerComponent onChange={onChange} initialValue={initialValue} value={value} {...props} />\n ) : (\n <PlaceHolderButton />\n )\n}\n\nexport { LazyDatePicker }\n"],"names":[],"mappings":";;;;;AASA,SAAS,cAAA,CACP,KAAA,EACA,YAAA,EACA,KAAA,EACA,QAAA,EACA;AACA,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAAsD,IAAI,CAAA;AAEhH,EAAA,MAAM,iBAAiB,YAAY;AACjC,IAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,MAAA,MAAM,EAAE,UAAA,EAAW,GAAI,MAAM,OAAO,6BAA0B,CAAA;AAC9D,MAAA,sBAAA,CAAuB,MAAM,UAAU,CAAA;AAAA;AACzC,GACF;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAc,cAAA;AAAA,QACd,OAAA,EAAS,cAAA;AAAA,QACT,YAAA,EAAc,cAAA;AAAA,QACd,SAAA,EAAW,EAAA;AAAA,UACT,kMAAA;AAAA,UACA,KAAA,CAAM;AAAA,SACR;AAAA,QACA,YAAA,EAAY,MAAM,WAAA,IAAe,kBAAA;AAAA,QAEjC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAc,IAAA,EAAM,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,WAAU,kDAAA,EAAmD,CAAA;AAAA,0BACzG,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAAA,EAAiC,gBAAM,WAAA,EAAY;AAAA;AAAA;AAAA,KACrE;AAAA,GAEJ;AAEA,EAAA,OAAO,mBAAA,mBACL,GAAA,CAAC,mBAAA,EAAA,EAAoB,QAAA,EAAoB,YAAA,EAA4B,OAAe,GAAG,KAAA,EAAO,CAAA,mBAE9F,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAEvB;;;;"}

package/dist/components/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { CaretUpDown, Check } from '@phosphor-icons/react';
+import { CaretUpDown } from '@phosphor-icons/react/dist/ssr/CaretUpDown';
+import { Check } from '@phosphor-icons/react/dist/ssr/Check';
 import * as React from 'react';
 import { Button, buttonVariants } from '../Button/Button.js';
 import { Chip } from '../Chip/Chip.js';

package/dist/components/MultiSelect/MultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown, Check } from '@phosphor-icons/react'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Chip } from '../Chip'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/*\n Represents a selectable option in the MultiSelect component\n /\ntype Option = {\n /* Unique identifier for the option /\n value: string\n /* Display text for the option /\n label: string\n}\n\nexport type MultiSelectProps = {\n /\n Array of options to display in the select menu\n /\n options: Array<Option>\n\n /\n Props to be passed to the individual Chip components\n /\n chipProps?: React.ComponentProps<typeof Chip>\n\n /\n Callback fired when selected values change\n * @param value Array of selected option values\n /\n onChange?: (value: Array<string>) => void\n\n /\n Form field state from react-hook-form\n /\n fieldState?: ControllerFieldState\n\n /\n Initially selected option values\n /\n defaultValue?: Array<string>\n\n /\n Text shown in the select button when no option is selected\n * @default \"Select your options...\"\n /\n placeholder?: string\n\n /\n Text shown when no options match the search query\n * @default \"Options not found\"\n /\n notFoundText?: string\n\n /\n Placeholder text for the search input\n * @default \"Search...\"\n /\n commandInputPlaceholder?: string\n\n /\n Maximum number of items that can be selected\n * Shows a counter chip when specified\n /\n max?: number\n\n /\n Additional class names for the select button component\n /\n className?: string\n\n /\n Unique identifier for the select button component\n /\n id?: string\n}\n\n/\n A multi-select component with search functionality and chip display for selected items.\n * Supports keyboard navigation, search filtering, and maximum selection limit.\n \n @example\n * // Basic usage\n * <MultiSelect\n * options={[\n * { value: '1', label: 'Option 1' },\n * { value: '2', label: 'Option 2' }\n * ]}\n * onChange={(values) => console.log(values)}\n * />\n \n // With maximum selection limit\n * <MultiSelect\n * options={options}\n * max={3}\n * placeholder=\"Select up to 3 options\"\n * />\n \n // With custom chip styling\n * <MultiSelect\n * options={options}\n * chipProps={{ variant: 'primary' }}\n * />\n */\nexport const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(\n (\n {\n options,\n onChange,\n chipProps,\n defaultValue,\n placeholder = 'Select your options...',\n notFoundText = 'Options not found',\n fieldState,\n commandInputPlaceholder = 'Search...',\n max,\n className,\n id,\n },\n _ref,\n ) => {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [open, setOpen] = React.useState(false)\n const [selected, setSelected] = React.useState<MultiSelectProps['options']>(\n options.filter((option) => defaultValue?.includes(option.value) ?? []),\n )\n const [inputValue, setInputValue] = React.useState('')\n\n const handleUnselect = React.useCallback((item: Option) => {\n setSelected((prev) => prev.filter((s) => s.value !== item.value))\n }, [])\n\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n const input = inputRef.current\n if (input) {\n if (e.key === 'Delete' \|\| e.key === 'Backspace') {\n if (input.value === '') {\n setSelected((prev) => {\n const newSelected = [...prev]\n newSelected.pop()\n return newSelected\n })\n }\n }\n\n if (e.key === 'Escape') {\n input.blur()\n }\n }\n }, [])\n\n React.useEffect(() => {\n onChange?.(selected.map((item) => item.value))\n }, [selected])\n\n return (\n <PopoverRoot open={open} onOpenChange={setOpen}>\n <Command onKeyDown={handleKeyDown}>\n <PopoverTrigger asChild>\n <Button\n id={id}\n variant=\"ghost\"\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n `w-full justify-between bg-white ${\n fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : ''\n }`,\n buttonVariants({ variant: 'ghost', size: 'lg' }),\n className,\n )}\n >\n {placeholder}\n <CaretUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"px-0 py-0\">\n <CommandInput\n placeholder={commandInputPlaceholder}\n ref={inputRef}\n value={inputValue}\n onValueChange={setInputValue}\n >\n {max && (\n <Chip\n variant={selected.length >= max ? 'primary' : 'default'}\n size=\"sm\"\n className=\"my-1 whitespace-nowrap\"\n >\n {selected.length} / {max}\n </Chip>\n )}\n </CommandInput>\n\n <CommandList>\n <CommandEmpty>{notFoundText}</CommandEmpty>\n {open && options.length > 0 && (\n <CommandGroup>\n {options.map((item) => (\n <CommandItem\n key={`item-${item.value}`}\n onMouseDown={(e) => {\n e.preventDefault()\n e.stopPropagation()\n }}\n onSelect={(value) => {\n const isSelected = selected.find((s) => s.label === value)\n if (isSelected) {\n handleUnselect(isSelected)\n } else if (!max \|\| selected.length < max) {\n setInputValue('')\n setSelected((prev) => [...prev, item])\n }\n }}\n className=\"cursor-pointer\"\n >\n <div className=\"flex\">\n <div className=\"mr-2\">\n {selected.find((s) => s.value === item.value) ? (\n <Check className=\"h-4 w-4\" />\n ) : (\n <div className=\"h-4 w-4\" />\n )}\n </div>\n <div>{item.label}</div>\n </div>\n </CommandItem>\n ))}\n </CommandGroup>\n )}\n </CommandList>\n </PopoverContent>\n {selected.length > 0 && (\n <div className=\"flex flex-wrap gap-2 pt-2\">\n {selected.map((item) => (\n <Chip key={item.value} {...chipProps} className=\"gap-2 pr-1\" onRemove={() => handleUnselect(item)}>\n {item.label}\n </Chip>\n ))}\n </div>\n )}\n </Command>\n </PopoverRoot>\n )\n },\n)\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":[],"mappings":"~~;;;;;;;;;;AAgHO~~;AAA0B;AAE7B;AACE;AACA;AACA;AACA;AACc;AACC;AACf;AAC0B;AAC1B;AACA;AACA;AAIF;AACA;AACA;AAAsC;AACiC;AAEvE;AAEA;AACE;AAAgE;AAGlE;AACE;AACA;AACE;AACE;AACE;AACE;AACA;AACA;AAAO;AACR;AACH;AAGF;AACE;AAAW;AACb;AACF;AAGF;AACE;AAA6C;AAG/C;AAGM;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACU;AACJ;AAGT;AAC+C;AAC/C;AACF;AAEC;AAAA;AACyD;AAAA;AAAA;AAE9D;AAEE;AAAA;AAAC;AAAA;AACc;AACR;AACE;AACQ;AAGb;AAAC;AAAA;AAC+C;AACzC;AACK;AAET;AAAS;AAAO;AAAI;AAAA;AAAA;AACvB;AAAA;AAEJ;AAGE;AAA4B;AAItB;AAAC;AAAA;AAGG;AACA;AAAkB;AACpB;AAEE;AACA;AACE;AAAyB;AAEzB;AACA;AAAqC;AACvC;AACF;AACU;AAGR;AAMA;AACiB;AACnB;AAAA;AAzBuB;AA4B7B;AAEJ;AACF;AAQE;AAGN;AAGN;AAEA;;"}
1	+ {"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown } from '@phosphor-icons/react/dist/ssr/CaretUpDown'\nimport { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Chip } from '../Chip'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/*\n Represents a selectable option in the MultiSelect component\n /\ntype Option = {\n /* Unique identifier for the option /\n value: string\n /* Display text for the option /\n label: string\n}\n\nexport type MultiSelectProps = {\n /\n Array of options to display in the select menu\n /\n options: Array<Option>\n\n /\n Props to be passed to the individual Chip components\n /\n chipProps?: React.ComponentProps<typeof Chip>\n\n /\n Callback fired when selected values change\n * @param value Array of selected option values\n /\n onChange?: (value: Array<string>) => void\n\n /\n Form field state from react-hook-form\n /\n fieldState?: ControllerFieldState\n\n /\n Initially selected option values\n /\n defaultValue?: Array<string>\n\n /\n Text shown in the select button when no option is selected\n * @default \"Select your options...\"\n /\n placeholder?: string\n\n /\n Text shown when no options match the search query\n * @default \"Options not found\"\n /\n notFoundText?: string\n\n /\n Placeholder text for the search input\n * @default \"Search...\"\n /\n commandInputPlaceholder?: string\n\n /\n Maximum number of items that can be selected\n * Shows a counter chip when specified\n /\n max?: number\n\n /\n Additional class names for the select button component\n /\n className?: string\n\n /\n Unique identifier for the select button component\n /\n id?: string\n}\n\n/\n A multi-select component with search functionality and chip display for selected items.\n * Supports keyboard navigation, search filtering, and maximum selection limit.\n \n @example\n * // Basic usage\n * <MultiSelect\n * options={[\n * { value: '1', label: 'Option 1' },\n * { value: '2', label: 'Option 2' }\n * ]}\n * onChange={(values) => console.log(values)}\n * />\n \n // With maximum selection limit\n * <MultiSelect\n * options={options}\n * max={3}\n * placeholder=\"Select up to 3 options\"\n * />\n \n // With custom chip styling\n * <MultiSelect\n * options={options}\n * chipProps={{ variant: 'primary' }}\n * />\n */\nexport const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(\n (\n {\n options,\n onChange,\n chipProps,\n defaultValue,\n placeholder = 'Select your options...',\n notFoundText = 'Options not found',\n fieldState,\n commandInputPlaceholder = 'Search...',\n max,\n className,\n id,\n },\n _ref,\n ) => {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [open, setOpen] = React.useState(false)\n const [selected, setSelected] = React.useState<MultiSelectProps['options']>(\n options.filter((option) => defaultValue?.includes(option.value) ?? []),\n )\n const [inputValue, setInputValue] = React.useState('')\n\n const handleUnselect = React.useCallback((item: Option) => {\n setSelected((prev) => prev.filter((s) => s.value !== item.value))\n }, [])\n\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n const input = inputRef.current\n if (input) {\n if (e.key === 'Delete' \|\| e.key === 'Backspace') {\n if (input.value === '') {\n setSelected((prev) => {\n const newSelected = [...prev]\n newSelected.pop()\n return newSelected\n })\n }\n }\n\n if (e.key === 'Escape') {\n input.blur()\n }\n }\n }, [])\n\n React.useEffect(() => {\n onChange?.(selected.map((item) => item.value))\n }, [selected])\n\n return (\n <PopoverRoot open={open} onOpenChange={setOpen}>\n <Command onKeyDown={handleKeyDown}>\n <PopoverTrigger asChild>\n <Button\n id={id}\n variant=\"ghost\"\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n `w-full justify-between bg-white ${\n fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : ''\n }`,\n buttonVariants({ variant: 'ghost', size: 'lg' }),\n className,\n )}\n >\n {placeholder}\n <CaretUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"px-0 py-0\">\n <CommandInput\n placeholder={commandInputPlaceholder}\n ref={inputRef}\n value={inputValue}\n onValueChange={setInputValue}\n >\n {max && (\n <Chip\n variant={selected.length >= max ? 'primary' : 'default'}\n size=\"sm\"\n className=\"my-1 whitespace-nowrap\"\n >\n {selected.length} / {max}\n </Chip>\n )}\n </CommandInput>\n\n <CommandList>\n <CommandEmpty>{notFoundText}</CommandEmpty>\n {open && options.length > 0 && (\n <CommandGroup>\n {options.map((item) => (\n <CommandItem\n key={`item-${item.value}`}\n onMouseDown={(e) => {\n e.preventDefault()\n e.stopPropagation()\n }}\n onSelect={(value) => {\n const isSelected = selected.find((s) => s.label === value)\n if (isSelected) {\n handleUnselect(isSelected)\n } else if (!max \|\| selected.length < max) {\n setInputValue('')\n setSelected((prev) => [...prev, item])\n }\n }}\n className=\"cursor-pointer\"\n >\n <div className=\"flex\">\n <div className=\"mr-2\">\n {selected.find((s) => s.value === item.value) ? (\n <Check className=\"h-4 w-4\" />\n ) : (\n <div className=\"h-4 w-4\" />\n )}\n </div>\n <div>{item.label}</div>\n </div>\n </CommandItem>\n ))}\n </CommandGroup>\n )}\n </CommandList>\n </PopoverContent>\n {selected.length > 0 && (\n <div className=\"flex flex-wrap gap-2 pt-2\">\n {selected.map((item) => (\n <Chip key={item.value} {...chipProps} className=\"gap-2 pr-1\" onRemove={() => handleUnselect(item)}>\n {item.label}\n </Chip>\n ))}\n </div>\n )}\n </Command>\n </PopoverRoot>\n )\n },\n)\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":[],"mappings":";;;;;;;;;;;AAiHO;AAA0B;AAE7B;AACE;AACA;AACA;AACA;AACc;AACC;AACf;AAC0B;AAC1B;AACA;AACA;AAIF;AACA;AACA;AAAsC;AACiC;AAEvE;AAEA;AACE;AAAgE;AAGlE;AACE;AACA;AACE;AACE;AACE;AACE;AACA;AACA;AAAO;AACR;AACH;AAGF;AACE;AAAW;AACb;AACF;AAGF;AACE;AAA6C;AAG/C;AAGM;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACU;AACJ;AAGT;AAC+C;AAC/C;AACF;AAEC;AAAA;AACyD;AAAA;AAAA;AAE9D;AAEE;AAAA;AAAC;AAAA;AACc;AACR;AACE;AACQ;AAGb;AAAC;AAAA;AAC+C;AACzC;AACK;AAET;AAAS;AAAO;AAAI;AAAA;AAAA;AACvB;AAAA;AAEJ;AAGE;AAA4B;AAItB;AAAC;AAAA;AAGG;AACA;AAAkB;AACpB;AAEE;AACA;AACE;AAAyB;AAEzB;AACA;AAAqC;AACvC;AACF;AACU;AAGR;AAMA;AACiB;AACnB;AAAA;AAzBuB;AA4B7B;AAEJ;AACF;AAQE;AAGN;AAGN;AAEA;;"}

package/dist/components/RadioGroup/RadioGroup.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { Check } from '@phosphor-icons/react';
+import { Check } from '@phosphor-icons/react/dist/ssr/Check';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';

package/dist/components/RadioGroup/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n 'border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n <Check className=\"h-3 w-3 text-current\" weight=\"bold\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,UAAA,GAAa,MAAM,UAAA,CAGvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAO,GAAA,CAAC,mBAAA,CAAoB,IAAA,EAApB,EAAyB,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAChG,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;AAElD,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4PAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,SAAA,EAApB,EAA8B,SAAA,EAAU,kCAAA,EACvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sBAAA,EAAuB,MAAA,EAAO,MAAA,EAAO,CAAA,EACxD;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,cAAA,CAAe,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;;;;"}
1	+ {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n 'border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n <Check className=\"h-3 w-3 text-current\" weight=\"bold\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,UAAA,GAAa,MAAM,UAAA,CAGvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAO,GAAA,CAAC,mBAAA,CAAoB,IAAA,EAApB,EAAyB,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAChG,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;AAElD,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4PAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,SAAA,EAApB,EAA8B,SAAA,EAAU,kCAAA,EACvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sBAAA,EAAuB,MAAA,EAAO,MAAA,EAAO,CAAA,EACxD;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,cAAA,CAAe,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;;;;"}

package/dist/components/Sidebar/Sidebar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Sidebar } from '@phosphor-icons/react';
+import { SidebarSimple } from '@phosphor-icons/react/dist/ssr/SidebarSimple';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
@@ -171,7 +171,7 @@ const SidebarTrigger = React.forwardRef(
           toggleSidebar();
         },
         ...props,
-        StartIcon: Sidebar,
+        StartIcon: SidebarSimple,
         children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       }
     );