@craftzbay/ui 0.10.0 → 0.11.1

package/dist-lib/components/ui/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/ui/ContextMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu';\nimport { Check, ChevronRight, Circle } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/**\n * Right-click (or two-finger tap) menu. Visual surface mirrors DropdownMenu\n * for consistency.\n *\n * @example\n *   <ContextMenu>\n *     <ContextMenuTrigger asChild>\n *       <div className=\"grid h-32 place-items-center rounded-lg border border-border\">\n *         Right-click me\n *       </div>\n *     </ContextMenuTrigger>\n *     <ContextMenuContent>\n *       <ContextMenuItem>Open</ContextMenuItem>\n *       <ContextMenuSeparator />\n *       <ContextMenuItem destructive>Delete</ContextMenuItem>\n *     </ContextMenuContent>\n *   </ContextMenu>\n *\n * @do Mirror DropdownMenu items for the same surface — users expect the same\n *      operations from both.\n * @dont Hide critical actions behind right-click — they must also exist in\n *       a visible button or menu.\n */\nexport const ContextMenu = ContextMenuPrimitive.Root;\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\nexport const ContextMenuGroup = ContextMenuPrimitive.Group;\nexport const ContextMenuPortal = ContextMenuPrimitive.Portal;\nexport const ContextMenuSub = ContextMenuPrimitive.Sub;\nexport const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\nconst itemClasses = cn(\n  'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n  'data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n);\n\nexport const ContextMenuSubTrigger = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>\n>(function ContextMenuSubTrigger({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(itemClasses, 'data-[state=open]:bg-background-muted', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4 text-foreground-subtle\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n});\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\n\nexport const ContextMenuSubContent = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(function ContextMenuSubContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n        'z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuSubContent.displayName = 'ContextMenuSubContent';\n\nexport const ContextMenuContent = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(function ContextMenuContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPortal>\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        className={cn(\n          'z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPortal>\n  );\n});\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport const ContextMenuItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { destructive?: boolean }\n>(function ContextMenuItem({ className, destructive, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemClasses,\n        destructive &&\n          'text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuItem.displayName = 'ContextMenuItem';\n\nexport const ContextMenuCheckboxItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-accent\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n});\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\n\nexport const ContextMenuRadioItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(function ContextMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Circle className=\"size-2 fill-accent text-accent\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n});\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\n\nexport const ContextMenuLabel = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>\n>(function ContextMenuLabel({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Label\n      ref={ref}\n      className={cn('px-2 py-1.5 text-xs font-medium text-foreground-subtle', className)}\n      {...props}\n    />\n  );\n});\nContextMenuLabel.displayName = 'ContextMenuLabel';\n\nexport const ContextMenuSeparator = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(function ContextMenuSeparator({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\n\nexport function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn('ml-auto text-xs tracking-widest text-foreground-subtle font-mono', className)}\n      {...props}\n    />\n  );\n}\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n"],"names":["ContextMenu","ContextMenuPrimitive","ContextMenuTrigger","ContextMenuGroup","ContextMenuPortal","ContextMenuSub","ContextMenuRadioGroup","itemClasses","cn","ContextMenuSubTrigger","forwardRef","className","children","props","ref","jsxs","jsx","ChevronRight","ContextMenuSubContent","ContextMenuContent","ContextMenuItem","destructive","ContextMenuCheckboxItem","Check","ContextMenuRadioItem","Circle","ContextMenuLabel","ContextMenuSeparator","ContextMenuShortcut"],"mappings":";;;;;;AAmCO,MAAMA,IAAcC,EAAqB,MACnCC,IAAqBD,EAAqB,SAC1CE,IAAmBF,EAAqB,OACxCG,IAAoBH,EAAqB,QACzCI,IAAiBJ,EAAqB,KACtCK,IAAwBL,EAAqB,YAEpDM,IAAcC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAwBC,EAGnC,SAA+B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACvE,SACE,gBAAAC;AAAA,IAACd,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN,EAAGD,GAAa,yCAAyCI,CAAS;AAAA,MAC5E,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACD,gBAAAI,EAACC,GAAA,EAAa,WAAU,yCAAwC,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlF,CAAC;AACDR,EAAsB,cAAc;AAE7B,MAAMS,IAAwBR,EAGnC,SAA+B,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,GAAK;AAC7D,SACE,gBAAAE;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN;AAAA,QACT;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAsB,cAAc;AAE7B,MAAMC,IAAqBT,EAGhC,SAA4B,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,GAAK;AAC1D,2BACGV,GAAA,EACC,UAAA,gBAAAY;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDM,EAAmB,cAAc;AAE1B,MAAMC,IAAkBV,EAG7B,SAAyB,EAAE,WAAAC,GAAW,aAAAU,GAAa,GAAGR,EAAA,GAASC,GAAK;AACpE,SACE,gBAAAE;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN;AAAA,QACTD;AAAA,QACAc,KACE;AAAA,QACFV;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDO,EAAgB,cAAc;AAEvB,MAAME,IAA0BZ,EAGrC,SAAiC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACzE,SACE,gBAAAC;AAAA,IAACd,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN,EAAGD,GAAa,QAAQI,CAAS;AAAA,MAC3C,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2DACd,UAAA,gBAAAA,EAACf,EAAqB,eAArB,EACC,UAAA,gBAAAe,EAACO,GAAA,EAAM,WAAU,sBAAqB,eAAW,GAAA,CAAC,GACpD,GACF;AAAA,QACCX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDU,EAAwB,cAAc;AAE/B,MAAME,IAAuBd,EAGlC,SAA8B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACtE,SACE,gBAAAC;AAAA,IAACd,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN,EAAGD,GAAa,QAAQI,CAAS;AAAA,MAC3C,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2DACd,UAAA,gBAAAA,EAACf,EAAqB,eAArB,EACC,UAAA,gBAAAe,EAACS,GAAA,EAAO,WAAU,kCAAiC,eAAW,GAAA,CAAC,GACjE,GACF;AAAA,QACCb;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDY,EAAqB,cAAc;AAE5B,MAAME,IAAmBhB,EAG9B,SAA0B,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,GAAK;AACxD,SACE,gBAAAE;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN,EAAG,0DAA0DG,CAAS;AAAA,MAChF,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDa,EAAiB,cAAc;AAExB,MAAMC,IAAuBjB,EAGlC,SAA8B,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,GAAK;AAC5D,SACE,gBAAAE;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAa;AAAA,MACA,WAAWN,EAAG,6BAA6BG,CAAS;AAAA,MACnD,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDc,EAAqB,cAAc;AAE5B,SAASC,EAAoB,EAAE,WAAAjB,GAAW,GAAGE,KAA0C;AAC5F,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWR,EAAG,oEAAoEG,CAAS;AAAA,MAC1F,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAe,EAAoB,cAAc;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/ui/ContextMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu';\nimport { Check, ChevronRight, Circle } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/**\n * Right-click (or two-finger tap) menu. Visual surface mirrors DropdownMenu\n * for consistency.\n *\n * @example\n *   <ContextMenu>\n *     <ContextMenuTrigger asChild>\n *       <div className=\"grid h-32 place-items-center rounded-lg border border-border\">\n *         Right-click me\n *       </div>\n *     </ContextMenuTrigger>\n *     <ContextMenuContent>\n *       <ContextMenuItem>Open</ContextMenuItem>\n *       <ContextMenuSeparator />\n *       <ContextMenuItem destructive>Delete</ContextMenuItem>\n *     </ContextMenuContent>\n *   </ContextMenu>\n *\n * @do Mirror DropdownMenu items for the same surface — users expect the same\n *      operations from both.\n * @dont Hide critical actions behind right-click — they must also exist in\n *       a visible button or menu.\n */\nexport const ContextMenu = ContextMenuPrimitive.Root;\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\nexport const ContextMenuGroup = ContextMenuPrimitive.Group;\nexport const ContextMenuPortal = ContextMenuPrimitive.Portal;\nexport const ContextMenuSub = ContextMenuPrimitive.Sub;\nexport const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\nconst itemClasses = cn(\n  'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n  'data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  'transition-colors duration-[var(--duration-fast)]',\n);\n\nexport const ContextMenuSubTrigger = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n        itemClasses,\n        'data-[state=open]:bg-background-muted',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"text-foreground-subtle ml-auto size-4\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n});\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\n\nexport const ContextMenuSubContent = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(function ContextMenuSubContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n        'border-border bg-popover text-popover-foreground z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuSubContent.displayName = 'ContextMenuSubContent';\n\nexport const ContextMenuContent = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(function ContextMenuContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPortal>\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        className={cn(\n          'border-border bg-popover text-popover-foreground z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border p-1 shadow-md',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPortal>\n  );\n});\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport const ContextMenuItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean;\n    destructive?: boolean;\n  }\n>(function ContextMenuItem({ className, inset, destructive, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemClasses,\n        inset && 'pl-8',\n        destructive &&\n          'text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuItem.displayName = 'ContextMenuItem';\n\nexport const ContextMenuCheckboxItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      ref={ref}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"text-accent size-4\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n});\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\n\nexport const ContextMenuRadioItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(function ContextMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Circle className=\"fill-accent text-accent size-2\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n});\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\n\nexport const ContextMenuLabel = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }\n>(function ContextMenuLabel({ className, inset, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n        'text-foreground-subtle px-2 py-1.5 text-xs font-medium',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuLabel.displayName = 'ContextMenuLabel';\n\nexport const ContextMenuSeparator = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(function ContextMenuSeparator({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n});\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\n\nexport function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn('text-foreground-subtle ml-auto font-mono text-xs tracking-widest', className)}\n      {...props}\n    />\n  );\n}\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n"],"names":["ContextMenu","ContextMenuPrimitive","ContextMenuTrigger","ContextMenuGroup","ContextMenuPortal","ContextMenuSub","ContextMenuRadioGroup","itemClasses","cn","ContextMenuSubTrigger","forwardRef","className","inset","children","props","ref","jsxs","jsx","ChevronRight","ContextMenuSubContent","ContextMenuContent","ContextMenuItem","destructive","ContextMenuCheckboxItem","Check","ContextMenuRadioItem","Circle","ContextMenuLabel","ContextMenuSeparator","ContextMenuShortcut"],"mappings":"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"}

package/dist-lib/components/ui/DataGrid.d.ts

@@ -1,10 +1,17 @@
 import { ReactNode } from 'react';
 export interface DataGridColumn<TRow> {
-    /** Stable key used for visibility, sort, and React lists. */
-    key: string;
+    /**
+     * Stable key used for visibility, sort, and React lists. Autocompletes
+     * row fields; any string is allowed for computed columns (with `cell`).
+     */
+    key: (keyof TRow & string) | (string & {});
     /** Header label. */
     header: ReactNode;
-    /** Render the cell. Defaults to the value at `row[key]`. */
+    /**
+     * Render the cell. Defaults to the value at `row[key]`: `Date` →
+     * `formatDate` (yyyy-MM-dd HH:mm), primitives as-is, other objects via
+     * `String()`.
+     */
     cell?: (row: TRow) => ReactNode;
     /** Cell width — passed to `<col>` so the grid keeps shape during loading. */
     width?: string;
@@ -36,6 +43,12 @@ export interface DataGridProps<TRow extends {
     };
     /** Empty-state node when no rows are visible. */
     emptyState?: ReactNode;
+    /**
+     * Controlled column visibility: `{ [key]: boolean }` (missing = visible).
+     * Omit for internal state. At least one column always stays visible.
+     */
+    columnVisibility?: Record<string, boolean>;
+    onColumnVisibilityChange?: (next: Record<string, boolean>) => void;
     className?: string;
 }
 /**
@@ -63,4 +76,4 @@ export interface DataGridProps<TRow extends {
  */
 export declare function DataGrid<TRow extends {
     id: string | number;
-}>({ columns, rows, loading, sort, onSortChange, filter, emptyState, className, }: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;
+}>({ columns, rows, loading, sort, onSortChange, filter, emptyState, columnVisibility, onColumnVisibilityChange, className, }: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/DataGrid.js

@@ -1,58 +1,72 @@
 "use client";
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { useState as x, useMemo as v } from "react";
+import { useState as M, useMemo as T, isValidElement as G } from "react";
 import { Settings as C } from "../../icons/index.js";
-import { cn as c } from "../../lib/utils.js";
-import { useStrings as N } from "../../hooks/use-strings.js";
-import { DropdownMenu as S, DropdownMenuTrigger as T, DropdownMenuContent as D, DropdownMenuLabel as M, DropdownMenuSeparator as G, DropdownMenuCheckboxItem as H } from "./DropdownMenu.js";
-import { IconButton as j } from "./IconButton.js";
-import { Input as I } from "./Input.js";
-import { Table as R, TableHeader as B, TableRow as o, TableSortHeader as L, TableHead as A, TableBody as K, TableCell as m } from "./Table.js";
-import { Skeleton as P } from "./Skeleton.js";
-function U({
-  columns: h,
-  rows: p,
-  loading: g,
-  sort: b,
+import { cn as j } from "../../lib/utils.js";
+import { formatDate as v } from "../../lib/format.js";
+import { useStrings as I } from "../../hooks/use-strings.js";
+import { DropdownMenu as H, DropdownMenuTrigger as R, DropdownMenuContent as B, DropdownMenuLabel as L, DropdownMenuSeparator as V, DropdownMenuCheckboxItem as A } from "./DropdownMenu.js";
+import { IconButton as E } from "./IconButton.js";
+import { Input as K } from "./Input.js";
+import { Table as P, TableHeader as _, TableRow as m, TableSortHeader as $, TableHead as q, TableBody as z, TableCell as p } from "./Table.js";
+import { Skeleton as F } from "./Skeleton.js";
+function J(t, s) {
+  return t == null || t === "" ? /* @__PURE__ */ r("span", { "aria-label": s, className: "text-foreground-subtle", children: "—" }) : t instanceof Date ? v(t) : typeof t == "object" ? G(t) ? t : String(t) : t;
+}
+function ae({
+  columns: t,
+  rows: s,
+  loading: b,
+  sort: y,
   onSortChange: u,
-  filter: a,
-  emptyState: f,
-  className: y
+  filter: o,
+  emptyState: k,
+  columnVisibility: f,
+  onColumnVisibilityChange: h,
+  className: x
 }) {
-  const n = N(), [s, k] = x({}), t = v(() => h.filter((e) => !s[e.key]), [h, s]), w = () => g ? Array.from({ length: 5 }).map((e, l) => /* @__PURE__ */ r(o, { children: t.map((i) => /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(P, { variant: "text", className: "w-3/4" }) }, i.key)) }, `skel-${l}`)) : p.length === 0 ? /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(m, { colSpan: t.length, className: "h-32 text-center", children: f ?? /* @__PURE__ */ r("span", { className: "text-foreground-subtle", children: n.dataGrid.empty }) }) }) : p.map((e) => /* @__PURE__ */ r(o, { children: t.map((l) => /* @__PURE__ */ r(
-    m,
-    {
-      className: c(l.align === "right" && "text-right tabular"),
-      children: l.cell ? l.cell(e) : e[l.key]
-    },
-    l.key
-  )) }, e.id));
-  return /* @__PURE__ */ d("div", { className: c("flex flex-col gap-3", y), children: [
+  const n = I(), [w, D] = M({}), c = f ?? w, g = (e) => c[e] !== !1, a = T(
+    () => t.filter((e) => c[e.key] !== !1),
+    [t, c]
+  ), N = (e, l) => {
+    if (!l && a.length <= 1) return;
+    const i = { ...c, [e]: l };
+    f === void 0 && D(i), h == null || h(i);
+  }, S = () => b ? Array.from({ length: 5 }).map((e, l) => /* @__PURE__ */ r(m, { children: a.map((i) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(F, { variant: "text", className: "w-3/4" }) }, i.key)) }, `skel-${l}`)) : s.length === 0 ? /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(p, { colSpan: Math.max(1, a.length), className: "h-32 text-center", children: k ?? /* @__PURE__ */ r("span", { className: "text-foreground-subtle", children: n.dataGrid.empty }) }) }) : s.map((e) => /* @__PURE__ */ r(m, { children: a.map((l) => /* @__PURE__ */ r(p, { align: l.align ?? "left", children: l.cell ? l.cell(e) : J(e[l.key], n.dataGrid.emptyCell) }, l.key)) }, e.id));
+  return /* @__PURE__ */ d("div", { className: j("flex flex-col gap-3", x), children: [
     /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2", children: [
-      a ? /* @__PURE__ */ r(
-        I,
+      o ? /* @__PURE__ */ r(
+        K,
         {
           type: "search",
-          placeholder: a.placeholder ?? n.dataGrid.filterPlaceholder,
-          value: a.value,
-          onChange: (e) => a.onChange(e.target.value),
+          placeholder: o.placeholder ?? n.dataGrid.filterPlaceholder,
+          value: o.value,
+          onChange: (e) => o.onChange(e.target.value),
           clearable: !0,
-          onClear: () => a.onChange(""),
-          className: "max-w-sm w-full",
+          onClear: () => o.onChange(""),
+          className: "w-full max-w-sm",
           hideLabel: !0,
           label: n.dataGrid.filterRows
         }
       ) : /* @__PURE__ */ r("div", {}),
-      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ d(S, { children: [
-        /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(j, { "aria-label": n.dataGrid.columnVisibility, icon: /* @__PURE__ */ r(C, {}), variant: "outline" }) }),
-        /* @__PURE__ */ d(D, { children: [
-          /* @__PURE__ */ r(M, { children: n.dataGrid.columns }),
-          /* @__PURE__ */ r(G, {}),
-          h.map((e) => /* @__PURE__ */ r(
-            H,
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ d(H, { children: [
+        /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+          E,
+          {
+            "aria-label": n.dataGrid.columnVisibility,
+            icon: /* @__PURE__ */ r(C, {}),
+            variant: "outline"
+          }
+        ) }),
+        /* @__PURE__ */ d(B, { children: [
+          /* @__PURE__ */ r(L, { children: n.dataGrid.columns }),
+          /* @__PURE__ */ r(V, {}),
+          t.map((e) => /* @__PURE__ */ r(
+            A,
             {
-              checked: !s[e.key],
-              onCheckedChange: (l) => k((i) => ({ ...i, [e.key]: !l })),
+              checked: g(e.key),
+              disabled: g(e.key) && a.length <= 1,
+              onCheckedChange: (l) => N(e.key, l === !0),
               children: e.header
             },
             e.key
@@ -60,25 +74,26 @@ function U({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ r("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ d(R, { children: [
-      /* @__PURE__ */ r("colgroup", { children: t.map((e) => /* @__PURE__ */ r("col", { style: e.width ? { width: e.width } : void 0 }, e.key)) }),
-      /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(o, { children: t.map(
+    /* @__PURE__ */ d(P, { containerClassName: "rounded-lg border border-border", children: [
+      /* @__PURE__ */ r("colgroup", { children: a.map((e) => /* @__PURE__ */ r("col", { style: e.width ? { width: e.width } : void 0 }, e.key)) }),
+      /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(m, { children: a.map(
         (e) => e.sortable && u ? /* @__PURE__ */ r(
-          L,
+          $,
           {
+            align: e.align ?? "left",
             sortKey: e.key,
-            currentSort: b ?? null,
+            currentSort: y ?? null,
             onSortChange: (l, i) => u({ key: l, direction: i }),
             children: e.header
           },
           e.key
-        ) : /* @__PURE__ */ r(A, { className: c(e.align === "right" && "text-right"), children: e.header }, e.key)
+        ) : /* @__PURE__ */ r(q, { align: e.align ?? "left", children: e.header }, e.key)
       ) }) }),
-      /* @__PURE__ */ r(K, { children: w() })
-    ] }) })
+      /* @__PURE__ */ r(z, { children: S() })
+    ] })
   ] });
 }
 export {
-  U as DataGrid
+  ae as DataGrid
 };
 //# sourceMappingURL=DataGrid.js.map

package/dist-lib/components/ui/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","sources":["../../../src/components/ui/DataGrid.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState, type ReactNode } from 'react';\nimport { Settings } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './DropdownMenu';\nimport { IconButton } from './IconButton';\nimport { Input } from './Input';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableSortHeader,\n} from './Table';\nimport { Skeleton } from './Skeleton';\n\nexport interface DataGridColumn<TRow> {\n  /** Stable key used for visibility, sort, and React lists. */\n  key: string;\n  /** Header label. */\n  header: ReactNode;\n  /** Render the cell. Defaults to the value at `row[key]`. */\n  cell?: (row: TRow) => ReactNode;\n  /** Cell width — passed to `<col>` so the grid keeps shape during loading. */\n  width?: string;\n  /** Allow sorting on this column. */\n  sortable?: boolean;\n  /** Right-align numeric / monetary columns. */\n  align?: 'left' | 'right';\n}\n\nexport interface DataGridProps<TRow extends { id: string | number }> {\n  columns: DataGridColumn<TRow>[];\n  rows: TRow[];\n  loading?: boolean;\n  /** Initial sort state. */\n  sort?: { key: string; direction: 'asc' | 'desc' } | null;\n  onSortChange?: (sort: { key: string; direction: 'asc' | 'desc' }) => void;\n  /** Show a filter input row above the grid. */\n  filter?: { value: string; onChange: (q: string) => void; placeholder?: string };\n  /** Empty-state node when no rows are visible. */\n  emptyState?: ReactNode;\n  className?: string;\n}\n\n/**\n * Composite grid built from `Table` + DropdownMenu + Input. Provides\n * column visibility toggle, an inline filter, sortable headers, and\n * loading / empty states.\n *\n * @example\n *   <DataGrid\n *     columns={[\n *       { key: 'name', header: 'Name', sortable: true },\n *       { key: 'status', header: 'Status', cell: r => <Badge tone={...}>{r.status}</Badge> },\n *       { key: 'updatedAt', header: 'Updated', align: 'right' },\n *     ]}\n *     rows={rows}\n *     filter={{ value: q, onChange: setQ }}\n *     sort={sort}\n *     onSortChange={setSort}\n *   />\n *\n * @do Provide a meaningful empty state with a primary action when the grid\n *      starts empty (no items at all, not just filtered out).\n * @dont Render thousands of rows synchronously — virtualise with `@tanstack/react-virtual`\n *       and wrap with this component's headers as a shell.\n */\nexport function DataGrid<TRow extends { id: string | number }>({\n  columns,\n  rows,\n  loading,\n  sort,\n  onSortChange,\n  filter,\n  emptyState,\n  className,\n}: DataGridProps<TRow>) {\n  const strings = useStrings();\n  const [hidden, setHidden] = useState<Record<string, boolean>>({});\n  const visibleColumns = useMemo(() => columns.filter((c) => !hidden[c.key]), [columns, hidden]);\n\n  const renderRows = () => {\n    if (loading) {\n      return Array.from({ length: 5 }).map((_, i) => (\n        <TableRow key={`skel-${i}`}>\n          {visibleColumns.map((c) => (\n            <TableCell key={c.key}>\n              <Skeleton variant=\"text\" className=\"w-3/4\" />\n            </TableCell>\n          ))}\n        </TableRow>\n      ));\n    }\n    if (rows.length === 0) {\n      return (\n        <TableRow>\n          <TableCell colSpan={visibleColumns.length} className=\"h-32 text-center\">\n            {emptyState ?? (\n              <span className=\"text-foreground-subtle\">{strings.dataGrid.empty}</span>\n            )}\n          </TableCell>\n        </TableRow>\n      );\n    }\n    return rows.map((row) => (\n      <TableRow key={row.id}>\n        {visibleColumns.map((c) => (\n          <TableCell\n            key={c.key}\n            className={cn(c.align === 'right' && 'text-right tabular')}\n          >\n            {c.cell ? c.cell(row) : (row as Record<string, unknown>)[c.key] as ReactNode}\n          </TableCell>\n        ))}\n      </TableRow>\n    ));\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-3', className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        {filter ? (\n          <Input\n            type=\"search\"\n            placeholder={filter.placeholder ?? strings.dataGrid.filterPlaceholder}\n            value={filter.value}\n            onChange={(e) => filter.onChange(e.target.value)}\n            clearable\n            onClear={() => filter.onChange('')}\n            className=\"max-w-sm w-full\"\n            hideLabel\n            label={strings.dataGrid.filterRows}\n          />\n        ) : (\n          <div />\n        )}\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <IconButton aria-label={strings.dataGrid.columnVisibility} icon={<Settings />} variant=\"outline\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuLabel>{strings.dataGrid.columns}</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {columns.map((c) => (\n                <DropdownMenuCheckboxItem\n                  key={c.key}\n                  checked={!hidden[c.key]}\n                  onCheckedChange={(v) =>\n                    setHidden((prev) => ({ ...prev, [c.key]: !v }))\n                  }\n                >\n                  {c.header}\n                </DropdownMenuCheckboxItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <div className=\"rounded-lg border border-border overflow-hidden\">\n        <Table>\n          <colgroup>\n            {visibleColumns.map((c) => (\n              <col key={c.key} style={c.width ? { width: c.width } : undefined} />\n            ))}\n          </colgroup>\n          <TableHeader>\n            <TableRow>\n              {visibleColumns.map((c) =>\n                c.sortable && onSortChange ? (\n                  <TableSortHeader\n                    key={c.key}\n                    sortKey={c.key}\n                    currentSort={sort ?? null}\n                    onSortChange={(k, d) => onSortChange({ key: k, direction: d })}\n                  >\n                    {c.header}\n                  </TableSortHeader>\n                ) : (\n                  <TableHead key={c.key} className={cn(c.align === 'right' && 'text-right')}>\n                    {c.header}\n                  </TableHead>\n                ),\n              )}\n            </TableRow>\n          </TableHeader>\n          <TableBody>{renderRows()}</TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataGrid","columns","rows","loading","sort","onSortChange","filter","emptyState","className","strings","useStrings","hidden","setHidden","useState","visibleColumns","useMemo","c","renderRows","_","i","jsx","TableRow","TableCell","Skeleton","row","cn","jsxs","Input","DropdownMenu","DropdownMenuTrigger","IconButton","Settings","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuCheckboxItem","v","prev","Table","TableHeader","TableSortHeader","k","d","TableHead","TableBody"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/ui/DataGrid.tsx"],"sourcesContent":["'use client';\n\nimport { isValidElement, useMemo, useState, type ReactNode } from 'react';\nimport { Settings } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { formatDate } from '@/lib/format';\nimport { useStrings } from '@/hooks/use-strings';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './DropdownMenu';\nimport { IconButton } from './IconButton';\nimport { Input } from './Input';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableSortHeader,\n} from './Table';\nimport { Skeleton } from './Skeleton';\n\nexport interface DataGridColumn<TRow> {\n  /**\n   * Stable key used for visibility, sort, and React lists. Autocompletes\n   * row fields; any string is allowed for computed columns (with `cell`).\n   */\n  key: (keyof TRow & string) | (string & {});\n  /** Header label. */\n  header: ReactNode;\n  /**\n   * Render the cell. Defaults to the value at `row[key]`: `Date` →\n   * `formatDate` (yyyy-MM-dd HH:mm), primitives as-is, other objects via\n   * `String()`.\n   */\n  cell?: (row: TRow) => ReactNode;\n  /** Cell width — passed to `<col>` so the grid keeps shape during loading. */\n  width?: string;\n  /** Allow sorting on this column. */\n  sortable?: boolean;\n  /** Right-align numeric / monetary columns. */\n  align?: 'left' | 'right';\n}\n\nexport interface DataGridProps<TRow extends { id: string | number }> {\n  columns: DataGridColumn<TRow>[];\n  rows: TRow[];\n  loading?: boolean;\n  /** Initial sort state. */\n  sort?: { key: string; direction: 'asc' | 'desc' } | null;\n  onSortChange?: (sort: { key: string; direction: 'asc' | 'desc' }) => void;\n  /** Show a filter input row above the grid. */\n  filter?: { value: string; onChange: (q: string) => void; placeholder?: string };\n  /** Empty-state node when no rows are visible. */\n  emptyState?: ReactNode;\n  /**\n   * Controlled column visibility: `{ [key]: boolean }` (missing = visible).\n   * Omit for internal state. At least one column always stays visible.\n   */\n  columnVisibility?: Record<string, boolean>;\n  onColumnVisibilityChange?: (next: Record<string, boolean>) => void;\n  className?: string;\n}\n\n/** Default cell renderer for `row[key]` when no `cell` is given. */\nfunction renderValue(v: unknown, emptyLabel: string): ReactNode {\n  if (v === null || v === undefined || v === '') {\n    return (\n      <span aria-label={emptyLabel} className=\"text-foreground-subtle\">\n        —\n      </span>\n    );\n  }\n  if (v instanceof Date) return formatDate(v);\n  if (typeof v === 'object') return isValidElement(v) ? v : String(v);\n  return v as ReactNode;\n}\n\n/**\n * Composite grid built from `Table` + DropdownMenu + Input. Provides\n * column visibility toggle, an inline filter, sortable headers, and\n * loading / empty states.\n *\n * @example\n *   <DataGrid\n *     columns={[\n *       { key: 'name', header: 'Name', sortable: true },\n *       { key: 'status', header: 'Status', cell: r => <Badge tone={...}>{r.status}</Badge> },\n *       { key: 'updatedAt', header: 'Updated', align: 'right' },\n *     ]}\n *     rows={rows}\n *     filter={{ value: q, onChange: setQ }}\n *     sort={sort}\n *     onSortChange={setSort}\n *   />\n *\n * @do Provide a meaningful empty state with a primary action when the grid\n *      starts empty (no items at all, not just filtered out).\n * @dont Render thousands of rows synchronously — virtualise with `@tanstack/react-virtual`\n *       and wrap with this component's headers as a shell.\n */\nexport function DataGrid<TRow extends { id: string | number }>({\n  columns,\n  rows,\n  loading,\n  sort,\n  onSortChange,\n  filter,\n  emptyState,\n  columnVisibility,\n  onColumnVisibilityChange,\n  className,\n}: DataGridProps<TRow>) {\n  const strings = useStrings();\n  const [internalVisibility, setInternalVisibility] = useState<Record<string, boolean>>({});\n  const visibility = columnVisibility ?? internalVisibility;\n  const isVisible = (key: string) => visibility[key] !== false;\n  const visibleColumns = useMemo(\n    () => columns.filter((c) => visibility[c.key] !== false),\n    [columns, visibility],\n  );\n  const setColumnVisible = (key: string, visible: boolean) => {\n    // Never let the user hide the last visible column — an empty grid has no\n    // affordance to bring columns back.\n    if (!visible && visibleColumns.length <= 1) return;\n    const next = { ...visibility, [key]: visible };\n    if (columnVisibility === undefined) setInternalVisibility(next);\n    onColumnVisibilityChange?.(next);\n  };\n\n  const renderRows = () => {\n    if (loading) {\n      return Array.from({ length: 5 }).map((_, i) => (\n        <TableRow key={`skel-${i}`}>\n          {visibleColumns.map((c) => (\n            <TableCell key={c.key}>\n              <Skeleton variant=\"text\" className=\"w-3/4\" />\n            </TableCell>\n          ))}\n        </TableRow>\n      ));\n    }\n    if (rows.length === 0) {\n      return (\n        <TableRow>\n          <TableCell colSpan={Math.max(1, visibleColumns.length)} className=\"h-32 text-center\">\n            {emptyState ?? <span className=\"text-foreground-subtle\">{strings.dataGrid.empty}</span>}\n          </TableCell>\n        </TableRow>\n      );\n    }\n    return rows.map((row) => (\n      <TableRow key={row.id}>\n        {visibleColumns.map((c) => (\n          <TableCell key={c.key} align={c.align ?? 'left'}>\n            {c.cell\n              ? c.cell(row)\n              : renderValue((row as Record<string, unknown>)[c.key], strings.dataGrid.emptyCell)}\n          </TableCell>\n        ))}\n      </TableRow>\n    ));\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-3', className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        {filter ? (\n          <Input\n            type=\"search\"\n            placeholder={filter.placeholder ?? strings.dataGrid.filterPlaceholder}\n            value={filter.value}\n            onChange={(e) => filter.onChange(e.target.value)}\n            clearable\n            onClear={() => filter.onChange('')}\n            className=\"w-full max-w-sm\"\n            hideLabel\n            label={strings.dataGrid.filterRows}\n          />\n        ) : (\n          <div />\n        )}\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <IconButton\n                aria-label={strings.dataGrid.columnVisibility}\n                icon={<Settings />}\n                variant=\"outline\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuLabel>{strings.dataGrid.columns}</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {columns.map((c) => (\n                <DropdownMenuCheckboxItem\n                  key={c.key}\n                  checked={isVisible(c.key)}\n                  disabled={isVisible(c.key) && visibleColumns.length <= 1}\n                  onCheckedChange={(v) => setColumnVisible(c.key, v === true)}\n                >\n                  {c.header}\n                </DropdownMenuCheckboxItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <Table containerClassName=\"rounded-lg border border-border\">\n        <colgroup>\n          {visibleColumns.map((c) => (\n            <col key={c.key} style={c.width ? { width: c.width } : undefined} />\n          ))}\n        </colgroup>\n        <TableHeader>\n          <TableRow>\n            {visibleColumns.map((c) =>\n              c.sortable && onSortChange ? (\n                <TableSortHeader\n                  key={c.key}\n                  align={c.align ?? 'left'}\n                  sortKey={c.key}\n                  currentSort={sort ?? null}\n                  onSortChange={(k, d) => onSortChange({ key: k, direction: d })}\n                >\n                  {c.header}\n                </TableSortHeader>\n              ) : (\n                <TableHead key={c.key} align={c.align ?? 'left'}>\n                  {c.header}\n                </TableHead>\n              ),\n            )}\n          </TableRow>\n        </TableHeader>\n        <TableBody>{renderRows()}</TableBody>\n      </Table>\n    </div>\n  );\n}\n"],"names":["renderValue","v","emptyLabel","formatDate","isValidElement","DataGrid","columns","rows","loading","sort","onSortChange","filter","emptyState","columnVisibility","onColumnVisibilityChange","className","strings","useStrings","internalVisibility","setInternalVisibility","useState","visibility","isVisible","key","visibleColumns","useMemo","c","setColumnVisible","visible","next","renderRows","_","i","jsx","TableRow","TableCell","Skeleton","row","cn","jsxs","Input","DropdownMenu","DropdownMenuTrigger","IconButton","Settings","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuCheckboxItem","Table","TableHeader","TableSortHeader","k","d","TableHead","TableBody"],"mappings":"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"}

package/dist-lib/components/ui/DatePicker.js

@@ -1,164 +1,183 @@
 "use client";
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { forwardRef as R, useId as $, useState as M, useMemo as j } from "react";
-import * as l from "@radix-ui/react-popover";
+import { jsx as n, jsxs as $ } from "react/jsx-runtime";
+import { forwardRef as O, useId as R, useState as S, useMemo as F } from "react";
+import * as f from "@radix-ui/react-popover";
 import { Calendar as A } from "../../icons/index.js";
-import { Calendar as v } from "./Calendar.js";
-import { cn as O } from "../../lib/utils.js";
+import { Calendar as D } from "./Calendar.js";
+import { cn as C } from "../../lib/utils.js";
 import { useStrings as w } from "../../hooks/use-strings.js";
-function z(t) {
-  return t.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+function z(t, e) {
+  if (e != null && e.code)
+    return t.toLocaleDateString(e.code, { year: "numeric", month: "short", day: "numeric" });
+  const o = (r) => String(r).padStart(2, "0");
+  return `${t.getFullYear()}-${o(t.getMonth() + 1)}-${o(t.getDate())}`;
 }
-function S(t, e, o) {
-  return j(() => {
-    const n = [];
-    return t && n.push({ before: t }), e && n.push({ after: e }), o && n.push(...Array.isArray(o) ? o : [o]), n.length ? n : void 0;
+function v(t, e, o) {
+  return F(() => {
+    const r = [];
+    return t && r.push({ before: t }), e && r.push({ after: e }), o && r.push(...Array.isArray(o) ? o : [o]), r.length ? r : void 0;
   }, [t, e, o]);
 }
 function B({
   label: t,
   placeholder: e,
   hasValue: o,
-  children: n,
-  error: i,
-  fieldId: c,
-  disabled: f,
-  open: a
+  children: r,
+  error: s,
+  fieldId: i,
+  disabled: g,
+  open: d
 }) {
-  const d = `${c}-error`, g = `${c}-calendar`, s = o ? n : e;
-  return /* @__PURE__ */ b("div", { className: "flex flex-col gap-1.5", children: [
-    t && /* @__PURE__ */ r("label", { htmlFor: c, className: "text-foreground text-sm font-medium", children: t }),
-    /* @__PURE__ */ r(l.Trigger, { asChild: !0, children: /* @__PURE__ */ b(
+  const a = `${i}-error`, p = `${i}-calendar`, c = o ? r : e;
+  return /* @__PURE__ */ $("div", { className: "flex flex-col gap-1.5", children: [
+    t && /* @__PURE__ */ n(
+      "label",
+      {
+        id: `${i}-label`,
+        htmlFor: i,
+        className: "text-foreground text-sm font-medium",
+        children: t
+      }
+    ),
+    /* @__PURE__ */ n(f.Trigger, { asChild: !0, children: /* @__PURE__ */ $(
       "button",
       {
-        id: c,
+        id: i,
         type: "button",
         role: "combobox",
-        "aria-expanded": a,
-        "aria-controls": g,
-        disabled: f,
-        "aria-invalid": !!i || void 0,
-        "aria-describedby": i ? d : void 0,
-        className: O(
-          "bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-sm",
+        "aria-expanded": d,
+        "aria-controls": p,
+        "aria-labelledby": t ? `${i}-label` : void 0,
+        "aria-label": t ? void 0 : e,
+        disabled: g,
+        "aria-invalid": !!s || void 0,
+        "aria-describedby": s ? a : void 0,
+        className: C(
+          "bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-lg md:text-sm",
           "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
           "focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          i ? "border-danger focus-visible:border-danger focus-visible:ring-danger" : "border-border focus-visible:border-accent focus-visible:ring-ring",
+          s ? "border-danger focus-visible:border-danger focus-visible:ring-danger" : "border-border-input focus-visible:border-accent focus-visible:ring-ring",
           !o && "text-foreground-subtle"
         ),
         children: [
-          /* @__PURE__ */ r(A, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }),
-          /* @__PURE__ */ r("span", { className: "truncate", title: typeof s == "string" ? s : void 0, children: s })
+          /* @__PURE__ */ n(A, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }),
+          /* @__PURE__ */ n("span", { className: "truncate", title: typeof c == "string" ? c : void 0, children: c })
         ]
       }
     ) }),
-    i && /* @__PURE__ */ r("p", { id: d, role: "alert", className: "text-danger-text text-xs", children: i })
+    s && /* @__PURE__ */ n("p", { id: a, className: "text-danger-text text-xs", children: s })
   ] });
 }
-const F = R(function({
+const T = O(function({
   value: e,
   onChange: o,
-  label: n,
-  placeholder: i,
-  error: c,
-  disabled: f,
-  fromDate: a,
-  toDate: d,
-  disabledDays: g,
-  formatDate: s = z,
-  locale: x,
+  label: r,
+  placeholder: s,
+  error: i,
+  disabled: g,
+  fromDate: d,
+  toDate: a,
+  disabledDays: p,
+  formatDate: c,
+  locale: h,
   className: P
 }, k) {
-  const N = w(), y = i ?? N.datePicker.pickDate, p = $(), [m, h] = M(!1), C = S(a, d, g);
-  return /* @__PURE__ */ r("div", { ref: k, className: O(P), children: /* @__PURE__ */ b(l.Root, { open: m, onOpenChange: h, children: [
-    /* @__PURE__ */ r(
+  const N = w(), u = c ?? ((m) => z(m, h)), b = s ?? N.datePicker.pickDate, l = R(), [x, y] = S(!1), M = v(d, a, p);
+  return /* @__PURE__ */ n("div", { ref: k, className: C(P), children: /* @__PURE__ */ $(f.Root, { open: x, onOpenChange: y, children: [
+    /* @__PURE__ */ n(
       B,
       {
-        label: n,
-        placeholder: y,
+        label: r,
+        placeholder: b,
         hasValue: !!e,
-        error: c,
-        fieldId: p,
-        disabled: f,
-        open: m,
-        children: e ? s(e) : ""
+        error: i,
+        fieldId: l,
+        disabled: g,
+        open: x,
+        children: e ? u(e) : ""
       }
     ),
-    /* @__PURE__ */ r(l.Portal, { children: /* @__PURE__ */ r(
-      l.Content,
+    /* @__PURE__ */ n(f.Portal, { children: /* @__PURE__ */ n(
+      f.Content,
       {
-        id: `${p}-calendar`,
+        id: `${l}-calendar`,
+        "aria-labelledby": r ? `${l}-label` : void 0,
+        "aria-label": r ? void 0 : b,
         align: "start",
         sideOffset: 4,
-        className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg",
-        children: /* @__PURE__ */ r(
-          v,
+        className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md",
+        children: /* @__PURE__ */ n(
+          D,
           {
             mode: "single",
             selected: e,
-            onSelect: (u) => {
-              o(u ?? void 0), u && h(!1);
+            defaultMonth: e,
+            onSelect: (m) => {
+              o(m ?? void 0), m && y(!1);
             },
-            startMonth: a,
-            endMonth: d,
-            disabled: C,
-            locale: x
+            startMonth: d,
+            endMonth: a,
+            disabled: M,
+            locale: h
           }
         )
       }
     ) })
   ] }) });
 });
-F.displayName = "DatePicker";
-const I = R(
+T.displayName = "DatePicker";
+const L = O(
   function({
     value: e,
     onChange: o,
-    label: n,
-    placeholder: i,
-    error: c,
-    disabled: f,
-    fromDate: a,
-    toDate: d,
-    disabledDays: g,
-    formatDate: s = z,
-    locale: x,
+    label: r,
+    placeholder: s,
+    error: i,
+    disabled: g,
+    fromDate: d,
+    toDate: a,
+    disabledDays: p,
+    formatDate: c,
+    locale: h,
     className: P
   }, k) {
-    const N = w(), y = i ?? N.datePicker.pickRange, p = $(), [m, h] = M(!1), C = !!(e != null && e.from), u = S(a, d, g);
-    return /* @__PURE__ */ r("div", { ref: k, className: O(P), children: /* @__PURE__ */ b(l.Root, { open: m, onOpenChange: h, children: [
-      /* @__PURE__ */ r(
+    const N = w(), u = c ?? ((j) => z(j, h)), b = s ?? N.datePicker.pickRange, l = R(), [x, y] = S(!1), M = !!(e != null && e.from), m = v(d, a, p);
+    return /* @__PURE__ */ n("div", { ref: k, className: C(P), children: /* @__PURE__ */ $(f.Root, { open: x, onOpenChange: y, children: [
+      /* @__PURE__ */ n(
         B,
         {
-          label: n,
-          placeholder: y,
-          hasValue: C,
-          error: c,
-          fieldId: p,
-          disabled: f,
-          open: m,
-          children: e != null && e.from && e.to ? `${s(e.from)} – ${s(e.to)}` : e != null && e.from ? s(e.from) : ""
+          label: r,
+          placeholder: b,
+          hasValue: M,
+          error: i,
+          fieldId: l,
+          disabled: g,
+          open: x,
+          children: e != null && e.from && e.to ? `${u(e.from)} – ${u(e.to)}` : e != null && e.from ? u(e.from) : ""
         }
       ),
-      /* @__PURE__ */ r(l.Portal, { children: /* @__PURE__ */ r(
-        l.Content,
+      /* @__PURE__ */ n(f.Portal, { children: /* @__PURE__ */ n(
+        f.Content,
         {
-          id: `${p}-calendar`,
+          id: `${l}-calendar`,
+          "aria-labelledby": r ? `${l}-label` : void 0,
+          "aria-label": r ? void 0 : b,
           align: "start",
           sideOffset: 4,
-          className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-lg",
-          children: /* @__PURE__ */ r(
-            v,
+          className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md",
+          children: /* @__PURE__ */ n(
+            D,
             {
               mode: "range",
               selected: e,
+              defaultMonth: e == null ? void 0 : e.from,
               onSelect: o,
               numberOfMonths: 2,
-              startMonth: a,
-              endMonth: d,
-              disabled: u,
-              locale: x
+              startMonth: d,
+              endMonth: a,
+              disabled: m,
+              locale: h
             }
           )
         }
@@ -166,9 +185,9 @@ const I = R(
     ] }) });
   }
 );
-I.displayName = "DateRangePicker";
+L.displayName = "DateRangePicker";
 export {
-  F as DatePicker,
-  I as DateRangePicker
+  T as DatePicker,
+  L as DateRangePicker
 };
 //# sourceMappingURL=DatePicker.js.map