@devalok/shilp-sutra 0.55.1 → 0.57.0

package/dist/ui/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from \"@primitives/react-context-menu\"\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\n// ── Internal contexts to thread open state ──\n\nconst ContextMenuOpenContext = React.createContext(false)\nconst ContextMenuSubOpenContext = React.createContext(false)\n\nconst ContextMenu: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>> = ({\n  onOpenChange,\n  ...props\n}) => {\n  const [open, setOpen] = React.useState(false)\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      setOpen(value)\n      onOpenChange?.(value)\n    },\n    [onOpenChange],\n  )\n\n  return (\n    <ContextMenuOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Root onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuOpenContext.Provider>\n  )\n}\nContextMenu.displayName = 'ContextMenu'\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <ContextMenuSubOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuSubOpenContext.Provider>\n  )\n}\nContextMenuSub.displayName = 'ContextMenuSub'\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              \"z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n              className\n            )}\n          >\n            {children}\n          </motion.div>\n        </ContextMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.Portal forceMount>\n          <ContextMenuPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                \"z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n                className\n              )}\n            >\n              {children}\n            </motion.div>\n          </ContextMenuPrimitive.Content>\n        </ContextMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCircle} size=\"sm\" className=\"fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-ds-03 py-ds-02b text-body-md font-semibold text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-ds-01 my-ds-02 h-px bg-surface-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-body-sm text-surface-fg-subtle\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\nexport type ContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from \"@primitives/react-context-menu\"\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\n// ── Internal contexts to thread open state ──\n\nconst ContextMenuOpenContext = React.createContext(false)\nconst ContextMenuSubOpenContext = React.createContext(false)\n\nconst ContextMenu: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>> = ({\n  onOpenChange,\n  ...props\n}) => {\n  const [open, setOpen] = React.useState(false)\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      setOpen(value)\n      onOpenChange?.(value)\n    },\n    [onOpenChange],\n  )\n\n  return (\n    <ContextMenuOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Root onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuOpenContext.Provider>\n  )\n}\nContextMenu.displayName = 'ContextMenu'\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <ContextMenuSubOpenContext.Provider value={open}>\n      <ContextMenuPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </ContextMenuSubOpenContext.Provider>\n  )\n}\nContextMenuSub.displayName = 'ContextMenuSub'\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[state=open]:bg-surface-panel-hover data-[state=open]:text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              \"z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n              className\n            )}\n          >\n            {children}\n          </motion.div>\n        </ContextMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(ContextMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ContextMenuPrimitive.Portal forceMount>\n          <ContextMenuPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                \"z-popover rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating\",\n                className\n              )}\n            >\n              {children}\n            </motion.div>\n          </ContextMenuPrimitive.Content>\n        </ContextMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCircle} size=\"sm\" className=\"fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-ds-03 py-ds-02b text-body-md font-semibold text-surface-fg\",\n      inset && \"pl-ds-07\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-ds-01 my-ds-02 h-px bg-surface-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-body-sm text-surface-fg-subtle\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\nexport type ContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/data-table-body.d.ts

@@ -1,11 +1,13 @@
 import { VirtualItem } from '@tanstack/react-virtual';
 import { default as React } from 'react';
-export declare function DataTableBody<TData>({ loading, skeletonRowCount, noResultsText, emptyState, virtualItems, totalVirtualSize, }: {
+export declare function DataTableBody<TData>({ loading, skeletonRowCount, noResultsText, emptyState, virtualItems, totalVirtualSize, measureRow, }: {
     loading?: boolean;
     skeletonRowCount: number;
     noResultsText?: string;
     emptyState?: React.ReactNode;
     virtualItems?: VirtualItem[];
     totalVirtualSize?: number;
+    /** `virtualizer.measureElement` — attached to each virtual row group */
+    measureRow?: (node: HTMLTableSectionElement | null) => void;
 }): React.JSX.Element;
 //# sourceMappingURL=data-table-body.d.ts.map

package/dist/ui/data-table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-body.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,KAAmD,MAAM,OAAO,CAAA;AA6QvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,EACnC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,qBAmEA"}
+{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-body.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,KAAmD,MAAM,OAAO,CAAA;AA6PvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,EACnC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,GAAG,IAAI,KAAK,IAAI,CAAA;CAC5D,qBAoFA"}

package/dist/ui/data-table-body.js

@@ -5,11 +5,11 @@ import { Skeleton as n } from "./skeleton.js";
 import { getColumnMetaClasses as r, getPinnedCellStyle as i, isColumnEditable as a, useDataTableContext as o } from "./data-table-context.js";
 import { TableBody as s, TableCell as c, TableRow as l } from "./table.js";
 import u, { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { AnimatePresence as _, motion as v, useReducedMotion as y } from "framer-motion";
-import { flexRender as b } from "@tanstack/react-table";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { AnimatePresence as v, motion as y, useReducedMotion as b } from "framer-motion";
+import { flexRender as x } from "@tanstack/react-table";
 //#region src/ui/data-table-body.tsx
-function x({ initialValue: e, onSave: n, onCancel: r }) {
+function S({ initialValue: e, onSave: n, onCancel: r }) {
 	let [i, a] = m(e), o = p(null);
 	f(() => {
 		o.current?.focus(), o.current?.select();
@@ -17,7 +17,7 @@ function x({ initialValue: e, onSave: n, onCancel: r }) {
 	let s = d(() => {
 		n(i);
 	}, [n, i]);
-	return /* @__PURE__ */ h("input", {
+	return /* @__PURE__ */ g("input", {
 		ref: o,
 		type: "text",
 		value: i,
@@ -26,127 +26,128 @@ function x({ initialValue: e, onSave: n, onCancel: r }) {
 		onKeyDown: (e) => {
 			e.key === "Enter" ? (e.preventDefault(), s()) : e.key === "Escape" && (e.preventDefault(), r());
 		},
-		className: t("h-ds-xs-plus w-full rounded-control", "border border-accent-7 bg-surface-raised-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7"),
+		className: t("h-ds-xs-plus w-full rounded-control", "border border-accent-7 bg-surface-panel-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7"),
 		"aria-label": "Edit cell value"
 	});
 }
-function S({ row: e, style: n }) {
-	let { table: s, columnPinningState: u, editable: f, editingCell: p, setEditingCell: m, onCellEdit: g, virtualRows: _, onRowClick: v } = o(), y = d((t) => {
-		v && (t.target.closest("button, a, input, select, textarea, [role=\"checkbox\"]") || v(e.original));
-	}, [v, e.original]), S = e.getVisibleCells();
-	return /* @__PURE__ */ h(l, {
+function C({ row: e }) {
+	let { table: n, columnPinningState: s, editable: u, editingCell: f, setEditingCell: p, onCellEdit: m, onRowClick: h, rowClassName: _ } = o(), v = d((t) => {
+		h && (t.target.closest("button, a, input, select, textarea, [role=\"checkbox\"]") || h(e.original));
+	}, [h, e.original]), y = e.getVisibleCells();
+	return /* @__PURE__ */ g(l, {
 		"data-state": e.getIsSelected() && "selected",
-		style: n,
-		className: t(_ ? "absolute w-full flex" : void 0, v && "cursor-pointer"),
-		onClick: v ? y : void 0,
-		children: S.map((n) => {
-			let o = i(n.column.id, u), l = p?.rowIndex === e.index && p?.columnId === n.column.id;
-			return /* @__PURE__ */ h(c, {
-				className: t(o.className, _ && "flex-1", r(n.column.columnDef.meta)),
-				style: o.style,
+		className: t(h && "cursor-pointer", _?.(e.original)),
+		onClick: h ? v : void 0,
+		children: y.map((o) => {
+			let l = i(o.column.id, s), d = f?.rowIndex === e.index && f?.columnId === o.column.id;
+			return /* @__PURE__ */ g(c, {
+				className: t(l.className, r(o.column.columnDef.meta)),
+				style: l.style,
 				onDoubleClick: () => {
-					a(n.column.id, f, s) && m({
+					a(o.column.id, u, n) && p({
 						rowIndex: e.index,
-						columnId: n.column.id
+						columnId: o.column.id
 					});
 				},
-				children: l ? /* @__PURE__ */ h(x, {
-					initialValue: String(n.getValue() ?? ""),
+				children: d ? /* @__PURE__ */ g(S, {
+					initialValue: String(o.getValue() ?? ""),
 					onSave: (t) => {
-						g?.(e.index, n.column.id, t), m(null);
+						m?.(e.index, o.column.id, t), p(null);
 					},
-					onCancel: () => m(null)
-				}) : b(n.column.columnDef.cell, n.getContext())
-			}, n.id);
+					onCancel: () => p(null)
+				}) : x(o.column.columnDef.cell, o.getContext())
+			}, o.id);
 		})
 	});
 }
-function C({ row: t, style: n }) {
-	let { allColumns: r, expandable: i, renderExpanded: a, virtualRows: s } = o(), u = y();
-	if (!i || !a) return null;
-	let d = t.getIsExpanded();
-	return s ? d ? /* @__PURE__ */ h(l, {
-		style: n,
-		className: "absolute w-full flex",
-		children: /* @__PURE__ */ h(c, {
-			colSpan: r.length,
-			className: "bg-surface-base p-ds-05 flex-1",
-			children: a(t.original)
-		})
-	}) : null : /* @__PURE__ */ h(_, {
+function w({ row: t }) {
+	let { allColumns: n, expandable: r, renderExpanded: i, virtualRows: a } = o(), s = b();
+	if (!r || !i) return null;
+	let u = t.getIsExpanded();
+	return a ? u ? /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g(c, {
+		colSpan: n.length,
+		className: "bg-surface-base p-ds-05",
+		children: i(t.original)
+	}) }) : null : /* @__PURE__ */ g(v, {
 		initial: !1,
-		children: d && /* @__PURE__ */ h(l, {
-			style: n,
-			children: /* @__PURE__ */ h(c, {
-				colSpan: r.length,
-				className: "bg-surface-base p-0",
-				children: /* @__PURE__ */ h(v.div, {
-					className: "overflow-hidden",
-					initial: !u && {
-						height: 0,
-						opacity: 0
-					},
-					animate: {
-						height: "auto",
-						opacity: 1
-					},
-					exit: u ? void 0 : {
-						height: 0,
-						opacity: 0
-					},
-					transition: u ? { duration: 0 } : { ...e.smooth },
-					children: /* @__PURE__ */ h("div", {
-						className: "p-ds-05",
-						children: a(t.original)
-					})
+		children: u && /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g(c, {
+			colSpan: n.length,
+			className: "bg-surface-base p-0",
+			children: /* @__PURE__ */ g(y.div, {
+				className: "overflow-hidden",
+				initial: !s && {
+					height: 0,
+					opacity: 0
+				},
+				animate: {
+					height: "auto",
+					opacity: 1
+				},
+				exit: s ? void 0 : {
+					height: 0,
+					opacity: 0
+				},
+				transition: s ? { duration: 0 } : { ...e.smooth },
+				children: /* @__PURE__ */ g("div", {
+					className: "p-ds-05",
+					children: i(t.original)
 				})
 			})
-		})
+		}) })
 	});
 }
-function w({ rowCount: e }) {
+function T({ rowCount: e }) {
 	let { allColumns: r } = o(), i = r.length, a = [
 		"w-3/4",
 		"w-1/2",
 		"w-2/3",
 		"w-full"
 	];
-	return /* @__PURE__ */ h(s, { children: Array.from({ length: e }, (e, o) => /* @__PURE__ */ h(l, { children: Array.from({ length: i }, (e, i) => /* @__PURE__ */ h(c, { children: (r[i]?.id ?? r[i]?.header) === "_select" ? /* @__PURE__ */ h(n, {
+	return /* @__PURE__ */ g(s, { children: Array.from({ length: e }, (e, o) => /* @__PURE__ */ g(l, { children: Array.from({ length: i }, (e, i) => /* @__PURE__ */ g(c, { children: (r[i]?.id ?? r[i]?.header) === "_select" ? /* @__PURE__ */ g(n, {
 		variant: "text",
 		className: "h-4 w-4",
 		animation: "pulse"
-	}) : /* @__PURE__ */ h(n, {
+	}) : /* @__PURE__ */ g(n, {
 		variant: "text",
 		className: t("h-4", a[i % a.length]),
 		animation: "pulse"
 	}) }, `skeleton-${o}-${i}`)) }, `skeleton-${o}`)) });
 }
-function T({ loading: e, skeletonRowCount: n, noResultsText: r, emptyState: i, virtualItems: a, totalVirtualSize: d }) {
-	let { table: f, allColumns: p, virtualRows: m } = o(), _ = f.getRowModel().rows;
-	return e ? /* @__PURE__ */ h(w, { rowCount: n }) : _.length ? m && a ? /* @__PURE__ */ h(s, {
-		style: {
-			height: `${d}px`,
-			position: "relative"
-		},
-		children: a.map((e) => {
-			let t = _[e.index];
-			return /* @__PURE__ */ h(S, {
-				row: t,
-				style: {
-					position: "absolute",
-					top: 0,
-					left: 0,
-					width: "100%",
-					height: `${e.size}px`,
-					transform: `translateY(${e.start}px)`
-				}
-			}, t.id);
-		})
-	}) : /* @__PURE__ */ h(s, { children: _.map((e) => /* @__PURE__ */ g(u.Fragment, { children: [/* @__PURE__ */ h(S, { row: e }), /* @__PURE__ */ h(C, { row: e })] }, e.id)) }) : /* @__PURE__ */ h(s, { children: /* @__PURE__ */ h(l, { children: /* @__PURE__ */ h(c, {
-		colSpan: p.length,
+function E({ loading: e, skeletonRowCount: n, noResultsText: r, emptyState: i, virtualItems: a, totalVirtualSize: d, measureRow: f }) {
+	let { table: p, allColumns: m, virtualRows: v } = o(), y = p.getRowModel().rows;
+	if (e) return /* @__PURE__ */ g(T, { rowCount: n });
+	if (!y.length) return /* @__PURE__ */ g(s, { children: /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g(c, {
+		colSpan: m.length,
 		className: t("py-ds-07 text-center", !i && "text-surface-fg-subtle"),
 		children: i || r || "No results."
 	}) }) });
+	if (v && a) {
+		let e = a[0], n = a[a.length - 1], r = e ? e.start : 0, i = n ? Math.max(0, (d ?? 0) - n.end) : 0, o = (e) => /* @__PURE__ */ g("tbody", {
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ g("tr", { children: /* @__PURE__ */ g("td", {
+				colSpan: m.length,
+				style: {
+					height: e,
+					padding: 0,
+					border: 0
+				}
+			}) })
+		});
+		return /* @__PURE__ */ _(h, { children: [
+			r > 0 && o(r),
+			a.map((e) => {
+				let n = y[e.index], r = e.index === y.length - 1;
+				return /* @__PURE__ */ _("tbody", {
+					ref: f,
+					"data-index": e.index,
+					className: t(r && "[&_tr:last-child]:border-0"),
+					children: [/* @__PURE__ */ g(C, { row: n }), /* @__PURE__ */ g(w, { row: n })]
+				}, n.id);
+			}),
+			i > 0 && o(i)
+		] });
+	}
+	return /* @__PURE__ */ g(s, { children: y.map((e) => /* @__PURE__ */ _(u.Fragment, { children: [/* @__PURE__ */ g(C, { row: e }), /* @__PURE__ */ g(w, { row: e })] }, e.id)) });
 }
 //#endregion
-export { T as DataTableBody };
+export { E as DataTableBody };

package/dist/ui/data-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.js","names":[],"sources":["../../src/ui/data-table-body.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender,type Row } from '@tanstack/react-table'\nimport { type VirtualItem } from '@tanstack/react-virtual'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  INTERACTIVE_SELECTOR,\n  isColumnEditable,\n  useDataTableContext,\n} from './data-table-context'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { TableBody, TableCell, TableRow } from './table'\n\n// ── CellEditInput ───────────────────────────────────────────────\n\n/**\n * Inline edit input rendered inside a table cell.\n * Auto-focuses, saves on Enter/blur, cancels on Escape.\n */\nfunction CellEditInput({\n  initialValue,\n  onSave,\n  onCancel,\n}: {\n  initialValue: string\n  onSave: (value: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initialValue)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    inputRef.current?.focus()\n    inputRef.current?.select()\n  }, [])\n\n  const handleSave = useCallback(() => {\n    onSave(value)\n  }, [onSave, value])\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={handleSave}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          handleSave()\n        } else if (e.key === 'Escape') {\n          e.preventDefault()\n          onCancel()\n        }\n      }}\n      className={cn(\n        'h-ds-xs-plus w-full rounded-control',\n        'border border-accent-7 bg-surface-raised-hover',\n        'px-ds-02 text-body-sm',\n        'text-surface-fg placeholder:text-surface-fg-subtle',\n        'outline-hidden focus:border-accent-7',\n      )}\n      aria-label=\"Edit cell value\"\n    />\n  )\n}\n\n// ── DataRow ─────────────────────────────────────────────────────\n\n/** Render a single data row (shared between virtual and non-virtual paths) */\nfunction DataTableRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const {\n    table,\n    columnPinningState,\n    editable,\n    editingCell,\n    setEditingCell,\n    onCellEdit,\n    virtualRows,\n    onRowClick,\n  } = useDataTableContext<TData>()\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLTableRowElement>) => {\n      if (!onRowClick) return\n      const target = e.target as HTMLElement\n      if (target.closest(INTERACTIVE_SELECTOR)) return\n      onRowClick(row.original)\n    },\n    [onRowClick, row.original],\n  )\n\n  const visibleCells = row.getVisibleCells()\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && 'selected'}\n      style={style}\n      className={cn(\n        virtualRows ? 'absolute w-full flex' : undefined,\n        onRowClick && 'cursor-pointer',\n      )}\n      onClick={onRowClick ? handleRowClick : undefined}\n    >\n      {visibleCells.map((cell) => {\n        const pinned = getPinnedCellStyle(cell.column.id, columnPinningState)\n        const isEditing =\n          editingCell?.rowIndex === row.index &&\n          editingCell?.columnId === cell.column.id\n\n        return (\n          <TableCell\n            key={cell.id}\n            className={cn(\n              pinned.className,\n              virtualRows && 'flex-1',\n              getColumnMetaClasses(\n                cell.column.columnDef.meta as Record<string, unknown>,\n              ),\n            )}\n            style={pinned.style}\n            onDoubleClick={() => {\n              if (isColumnEditable(cell.column.id, editable, table)) {\n                setEditingCell({\n                  rowIndex: row.index,\n                  columnId: cell.column.id,\n                })\n              }\n            }}\n          >\n            {isEditing ? (\n              <CellEditInput\n                initialValue={String(cell.getValue() ?? '')}\n                onSave={(value) => {\n                  onCellEdit?.(row.index, cell.column.id, value)\n                  setEditingCell(null)\n                }}\n                onCancel={() => setEditingCell(null)}\n              />\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </TableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\n// ── ExpandedRow ─────────────────────────────────────────────────\n\n/** Render expanded content row below the data row */\nfunction DataTableExpandedRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const { allColumns, expandable, renderExpanded, virtualRows } =\n    useDataTableContext<TData>()\n  // Self-guarded (StatFlash pattern) — reveal collapses to an instant swap\n  // without relying on a consumer MotionProvider.\n  const prefersReduced = useReducedMotion()\n\n  if (!expandable || !renderExpanded) return null\n\n  const expanded = row.getIsExpanded()\n\n  // Virtual rows are absolutely positioned with measured heights — a height\n  // animation would fight the virtualizer, so the reveal is instant there.\n  if (virtualRows) {\n    if (!expanded) return null\n    return (\n      <TableRow style={style} className=\"absolute w-full flex\">\n        <TableCell\n          colSpan={allColumns.length}\n          className=\"bg-surface-base p-ds-05 flex-1\"\n        >\n          {renderExpanded(row.original)}\n        </TableCell>\n      </TableRow>\n    )\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {expanded && (\n        <TableRow style={style}>\n          <TableCell\n            colSpan={allColumns.length}\n            // A recess, not a raised layer — surface-raised would vanish on a\n            // card. Padding moves to the inner div so the collapsed state has\n            // zero height.\n            className=\"bg-surface-base p-0\"\n          >\n            <motion.div\n              className=\"overflow-hidden\"\n              initial={prefersReduced ? false : { height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={prefersReduced ? undefined : { height: 0, opacity: 0 }}\n              transition={\n                prefersReduced ? { duration: 0 } : { ...springs.smooth }\n              }\n            >\n              <div className=\"p-ds-05\">{renderExpanded(row.original)}</div>\n            </motion.div>\n          </TableCell>\n        </TableRow>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns } = useDataTableContext()\n  const visibleColumnCount = allColumns.length\n  const skeletonWidths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-full']\n\n  return (\n    <TableBody>\n      {Array.from({ length: rowCount }, (_, rowIdx) => (\n        <TableRow key={`skeleton-${rowIdx}`}>\n          {Array.from({ length: visibleColumnCount }, (_, colIdx) => {\n            const colId = allColumns[colIdx]?.id ?? allColumns[colIdx]?.header\n            const isSelect = colId === '_select'\n            return (\n              <TableCell key={`skeleton-${rowIdx}-${colIdx}`}>\n                {isSelect ? (\n                  <Skeleton\n                    variant=\"text\"\n                    className=\"h-4 w-4\"\n                    animation=\"pulse\"\n                  />\n                ) : (\n                  <Skeleton\n                    variant=\"text\"\n                    className={cn(\n                      'h-4',\n                      skeletonWidths[colIdx % skeletonWidths.length],\n                    )}\n                    animation=\"pulse\"\n                  />\n                )}\n              </TableCell>\n            )\n          })}\n        </TableRow>\n      ))}\n    </TableBody>\n  )\n}\n\n// ── DataTableBody (orchestrates all body rendering) ─────────────\n\nexport function DataTableBody<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n  virtualItems,\n  totalVirtualSize,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n  virtualItems?: VirtualItem[]\n  totalVirtualSize?: number\n}) {\n  const { table, allColumns, virtualRows } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading state: show skeleton rows\n  if (loading) {\n    return <DataTableSkeletonRows rowCount={skeletonRowCount} />\n  }\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            className={cn(\n              'py-ds-07 text-center',\n              !emptyState && 'text-surface-fg-subtle',\n            )}\n          >\n            {emptyState || noResultsText || 'No results.'}\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  if (virtualRows && virtualItems) {\n    return (\n      <TableBody\n        style={{\n          height: `${totalVirtualSize}px`,\n          position: 'relative',\n        }}\n      >\n        {virtualItems.map((virtualRow) => {\n          const row = rows[virtualRow.index]\n          return (\n            <DataTableRow\n              key={row.id}\n              row={row}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: `${virtualRow.size}px`,\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            />\n          )\n        })}\n      </TableBody>\n    )\n  }\n\n  // Standard (non-virtual) rendering\n  return (\n    <TableBody>\n      {rows.map((row) => (\n        <React.Fragment key={row.id}>\n          <DataTableRow row={row} />\n          <DataTableExpandedRow row={row} />\n        </React.Fragment>\n      ))}\n    </TableBody>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table-body.js","names":[],"sources":["../../src/ui/data-table-body.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender,type Row } from '@tanstack/react-table'\nimport { type VirtualItem } from '@tanstack/react-virtual'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  INTERACTIVE_SELECTOR,\n  isColumnEditable,\n  useDataTableContext,\n} from './data-table-context'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { TableBody, TableCell, TableRow } from './table'\n\n// ── CellEditInput ───────────────────────────────────────────────\n\n/**\n * Inline edit input rendered inside a table cell.\n * Auto-focuses, saves on Enter/blur, cancels on Escape.\n */\nfunction CellEditInput({\n  initialValue,\n  onSave,\n  onCancel,\n}: {\n  initialValue: string\n  onSave: (value: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initialValue)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    inputRef.current?.focus()\n    inputRef.current?.select()\n  }, [])\n\n  const handleSave = useCallback(() => {\n    onSave(value)\n  }, [onSave, value])\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={handleSave}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          handleSave()\n        } else if (e.key === 'Escape') {\n          e.preventDefault()\n          onCancel()\n        }\n      }}\n      className={cn(\n        'h-ds-xs-plus w-full rounded-control',\n        'border border-accent-7 bg-surface-panel-hover',\n        'px-ds-02 text-body-sm',\n        'text-surface-fg placeholder:text-surface-fg-subtle',\n        'outline-hidden focus:border-accent-7',\n      )}\n      aria-label=\"Edit cell value\"\n    />\n  )\n}\n\n// ── DataRow ─────────────────────────────────────────────────────\n\n/** Render a single data row (shared between virtual and non-virtual paths) */\nfunction DataTableRow<TData>({ row }: { row: Row<TData> }) {\n  const {\n    table,\n    columnPinningState,\n    editable,\n    editingCell,\n    setEditingCell,\n    onCellEdit,\n    onRowClick,\n    rowClassName,\n  } = useDataTableContext<TData>()\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLTableRowElement>) => {\n      if (!onRowClick) return\n      const target = e.target as HTMLElement\n      if (target.closest(INTERACTIVE_SELECTOR)) return\n      onRowClick(row.original)\n    },\n    [onRowClick, row.original],\n  )\n\n  const visibleCells = row.getVisibleCells()\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && 'selected'}\n      className={cn(\n        onRowClick && 'cursor-pointer',\n        rowClassName?.(row.original),\n      )}\n      onClick={onRowClick ? handleRowClick : undefined}\n    >\n      {visibleCells.map((cell) => {\n        const pinned = getPinnedCellStyle(cell.column.id, columnPinningState)\n        const isEditing =\n          editingCell?.rowIndex === row.index &&\n          editingCell?.columnId === cell.column.id\n\n        return (\n          <TableCell\n            key={cell.id}\n            className={cn(\n              pinned.className,\n              getColumnMetaClasses(\n                cell.column.columnDef.meta as Record<string, unknown>,\n              ),\n            )}\n            style={pinned.style}\n            onDoubleClick={() => {\n              if (isColumnEditable(cell.column.id, editable, table)) {\n                setEditingCell({\n                  rowIndex: row.index,\n                  columnId: cell.column.id,\n                })\n              }\n            }}\n          >\n            {isEditing ? (\n              <CellEditInput\n                initialValue={String(cell.getValue() ?? '')}\n                onSave={(value) => {\n                  onCellEdit?.(row.index, cell.column.id, value)\n                  setEditingCell(null)\n                }}\n                onCancel={() => setEditingCell(null)}\n              />\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </TableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\n// ── ExpandedRow ─────────────────────────────────────────────────\n\n/** Render expanded content row below the data row */\nfunction DataTableExpandedRow<TData>({ row }: { row: Row<TData> }) {\n  const { allColumns, expandable, renderExpanded, virtualRows } =\n    useDataTableContext<TData>()\n  // Self-guarded (StatFlash pattern) — reveal collapses to an instant swap\n  // without relying on a consumer MotionProvider.\n  const prefersReduced = useReducedMotion()\n\n  if (!expandable || !renderExpanded) return null\n\n  const expanded = row.getIsExpanded()\n\n  // In virtual mode the reveal is instant: the row group's height is watched by\n  // the virtualizer's ResizeObserver, and an animating height would fire a\n  // resize on every frame of the spring.\n  if (virtualRows) {\n    if (!expanded) return null\n    return (\n      <TableRow>\n        <TableCell colSpan={allColumns.length} className=\"bg-surface-base p-ds-05\">\n          {renderExpanded(row.original)}\n        </TableCell>\n      </TableRow>\n    )\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {expanded && (\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            // A recess, not a raised layer — surface-panel would vanish on a\n            // card. Padding moves to the inner div so the collapsed state has\n            // zero height.\n            className=\"bg-surface-base p-0\"\n          >\n            <motion.div\n              className=\"overflow-hidden\"\n              initial={prefersReduced ? false : { height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={prefersReduced ? undefined : { height: 0, opacity: 0 }}\n              transition={\n                prefersReduced ? { duration: 0 } : { ...springs.smooth }\n              }\n            >\n              <div className=\"p-ds-05\">{renderExpanded(row.original)}</div>\n            </motion.div>\n          </TableCell>\n        </TableRow>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns } = useDataTableContext()\n  const visibleColumnCount = allColumns.length\n  const skeletonWidths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-full']\n\n  return (\n    <TableBody>\n      {Array.from({ length: rowCount }, (_, rowIdx) => (\n        <TableRow key={`skeleton-${rowIdx}`}>\n          {Array.from({ length: visibleColumnCount }, (_, colIdx) => {\n            const colId = allColumns[colIdx]?.id ?? allColumns[colIdx]?.header\n            const isSelect = colId === '_select'\n            return (\n              <TableCell key={`skeleton-${rowIdx}-${colIdx}`}>\n                {isSelect ? (\n                  <Skeleton\n                    variant=\"text\"\n                    className=\"h-4 w-4\"\n                    animation=\"pulse\"\n                  />\n                ) : (\n                  <Skeleton\n                    variant=\"text\"\n                    className={cn(\n                      'h-4',\n                      skeletonWidths[colIdx % skeletonWidths.length],\n                    )}\n                    animation=\"pulse\"\n                  />\n                )}\n              </TableCell>\n            )\n          })}\n        </TableRow>\n      ))}\n    </TableBody>\n  )\n}\n\n// ── DataTableBody (orchestrates all body rendering) ─────────────\n\nexport function DataTableBody<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n  virtualItems,\n  totalVirtualSize,\n  measureRow,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n  virtualItems?: VirtualItem[]\n  totalVirtualSize?: number\n  /** `virtualizer.measureElement` — attached to each virtual row group */\n  measureRow?: (node: HTMLTableSectionElement | null) => void\n}) {\n  const { table, allColumns, virtualRows } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading state: show skeleton rows\n  if (loading) {\n    return <DataTableSkeletonRows rowCount={skeletonRowCount} />\n  }\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            className={cn(\n              'py-ds-07 text-center',\n              !emptyState && 'text-surface-fg-subtle',\n            )}\n          >\n            {emptyState || noResultsText || 'No results.'}\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  if (virtualRows && virtualItems) {\n    // Each windowed row gets its OWN <tbody> (valid HTML — a table may hold any\n    // number of row groups) carrying `data-index` + the virtualizer's\n    // `measureElement` ref. That group is what gets measured, so a row's height\n    // INCLUDES its expanded detail row and `getTotalSize()` stays truthful.\n    //\n    // Rows stay in normal table flow; the window is positioned by spacer row\n    // groups above and below instead of absolute offsets. Two consequences worth\n    // knowing: an expanded panel can never paint on top of the next row (flow\n    // layout forbids it), and column widths keep tracking <thead> because the\n    // cells are still real table cells.\n    const firstItem = virtualItems[0]\n    const lastItem = virtualItems[virtualItems.length - 1]\n    const padTop = firstItem ? firstItem.start : 0\n    const padBottom = lastItem ? Math.max(0, (totalVirtualSize ?? 0) - lastItem.end) : 0\n    const spacerCell = (height: number) => (\n      <tbody aria-hidden=\"true\">\n        <tr>\n          <td colSpan={allColumns.length} style={{ height, padding: 0, border: 0 }} />\n        </tr>\n      </tbody>\n    )\n\n    return (\n      <>\n        {padTop > 0 && spacerCell(padTop)}\n        {virtualItems.map((virtualRow) => {\n          const row = rows[virtualRow.index]\n          const isLastRow = virtualRow.index === rows.length - 1\n          return (\n            <tbody\n              key={row.id}\n              ref={measureRow}\n              data-index={virtualRow.index}\n              className={cn(isLastRow && '[&_tr:last-child]:border-0')}\n            >\n              <DataTableRow row={row} />\n              <DataTableExpandedRow row={row} />\n            </tbody>\n          )\n        })}\n        {padBottom > 0 && spacerCell(padBottom)}\n      </>\n    )\n  }\n\n  // Standard (non-virtual) rendering\n  return (\n    <TableBody>\n      {rows.map((row) => (\n        <React.Fragment key={row.id}>\n          <DataTableRow row={row} />\n          <DataTableExpandedRow row={row} />\n        </React.Fragment>\n      ))}\n    </TableBody>\n  )\n}\n"],"mappings":"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"}

package/dist/ui/data-table-bulk-actions.d.ts

@@ -1,9 +1,14 @@
 import { Table } from '@tanstack/react-table';
 import { default as React } from 'react';
+import { IconInput } from './lib/icon-input.js';
+/** Where the floating bulk-action bar renders. @default 'bottom' */
+export type BulkActionsPosition = 'bottom' | 'top' | 'inline';
 /** Bulk action definition for the floating action bar */
 export interface BulkAction<TData> {
     label: string;
     onClick: (selectedRows: TData[]) => void;
+    /** Icon rendered before the label — useful for compact/mobile bars. */
+    icon?: IconInput;
     color?: 'accent' | 'error';
     disabled?: boolean;
 }
@@ -11,9 +16,10 @@ export interface BulkAction<TData> {
  * Floating action bar shown when rows are selected.
  * Internal — not exported to consumers.
  */
-export declare function DataTableBulkActions<TData>({ table, selectedRows, bulkActions, }: {
+export declare function DataTableBulkActions<TData>({ table, selectedRows, bulkActions, position, }: {
     table: Table<TData>;
     selectedRows: TData[];
     bulkActions: BulkAction<TData>[];
+    position?: BulkActionsPosition;
 }): React.JSX.Element;
 //# sourceMappingURL=data-table-bulk-actions.d.ts.map

package/dist/ui/data-table-bulk-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-bulk-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,yDAAyD;AACzD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,EAAE,KAAK,EAAE,CAAA;IACrB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;CACjC,qBA0CA"}
+{"version":3,"file":"data-table-bulk-actions.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-bulk-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGjD,oEAAoE;AACpE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE7D,yDAAyD;AACzD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACxC,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAQD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAmB,GACpB,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,EAAE,KAAK,EAAE,CAAA;IACrB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAC/B,qBA0CA"}

package/dist/ui/data-table-bulk-actions.js

@@ -6,33 +6,39 @@ import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { IconX as a } from "@tabler/icons-react";
 //#region src/ui/data-table-bulk-actions.tsx
-function o({ table: o, selectedRows: s, bulkActions: c }) {
+var o = {
+	bottom: "fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-bottom-2",
+	top: "fixed top-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-top-2",
+	inline: "relative animate-in fade-in"
+};
+function s({ table: s, selectedRows: c, bulkActions: l, position: u = "bottom" }) {
 	return /* @__PURE__ */ i("div", {
-		className: e("fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky", "flex items-center gap-ds-04 px-ds-05 py-ds-03", "rounded-overlay bg-surface-overlay shadow-floating", "animate-in slide-in-from-bottom-2"),
+		className: e(o[u], "flex items-center gap-ds-04 px-ds-05 py-ds-03", "rounded-overlay bg-surface-overlay shadow-floating"),
 		role: "toolbar",
 		"aria-label": "Bulk actions",
 		children: [
 			/* @__PURE__ */ i("span", {
 				className: "text-body-sm font-medium text-surface-fg whitespace-nowrap",
-				children: [s.length, " selected"]
+				children: [c.length, " selected"]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "h-5 w-px bg-surface-border",
 				"aria-hidden": "true"
 			}),
-			c.map((e) => /* @__PURE__ */ r(n, {
+			l.map((e) => /* @__PURE__ */ r(n, {
 				size: "sm",
 				variant: e.color === "error" ? "solid" : "outline",
 				color: e.color === "error" ? "error" : void 0,
 				disabled: e.disabled,
-				onClick: () => e.onClick(s),
+				startIcon: e.icon,
+				onClick: () => e.onClick(c),
 				children: e.label
 			}, e.label)),
 			/* @__PURE__ */ r("button", {
 				type: "button",
-				onClick: () => o.resetRowSelection(),
+				onClick: () => s.resetRowSelection(),
 				"aria-label": "Clear selection",
-				className: e("flex items-center justify-center p-ds-01", "rounded-control-inner hover:bg-surface-raised transition-colors", "text-surface-fg-muted hover:text-surface-fg"),
+				className: e("flex items-center justify-center p-ds-01", "rounded-control-inner hover:bg-surface-panel-hover transition-colors", "text-surface-fg-muted hover:text-surface-fg"),
 				children: /* @__PURE__ */ r(t, {
 					icon: a,
 					size: "sm"
@@ -42,4 +48,4 @@ function o({ table: o, selectedRows: s, bulkActions: c }) {
 	});
 }
 //#endregion
-export { o as DataTableBulkActions };
+export { s as DataTableBulkActions };

package/dist/ui/data-table-bulk-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions.js","names":[],"sources":["../../src/ui/data-table-bulk-actions.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/** Bulk action definition for the floating action bar */\nexport interface BulkAction<TData> {\n  label: string\n  onClick: (selectedRows: TData[]) => void\n  color?: 'accent' | 'error'\n  disabled?: boolean\n}\n\n/**\n * Floating action bar shown when rows are selected.\n * Internal — not exported to consumers.\n */\nexport function DataTableBulkActions<TData>({\n  table,\n  selectedRows,\n  bulkActions,\n}: {\n  table: Table<TData>\n  selectedRows: TData[]\n  bulkActions: BulkAction<TData>[]\n}) {\n  return (\n    <div\n      className={cn(\n        'fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky',\n        'flex items-center gap-ds-04 px-ds-05 py-ds-03',\n        'rounded-overlay bg-surface-overlay shadow-floating',\n        'animate-in slide-in-from-bottom-2',\n      )}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n    >\n      <span className=\"text-body-sm font-medium text-surface-fg whitespace-nowrap\">\n        {selectedRows.length} selected\n      </span>\n      <div className=\"h-5 w-px bg-surface-border\" aria-hidden=\"true\" />\n      {bulkActions.map((action) => (\n        <Button\n          key={action.label}\n          size=\"sm\"\n          variant={action.color === 'error' ? 'solid' : 'outline'}\n          color={action.color === 'error' ? 'error' : undefined}\n          disabled={action.disabled}\n          onClick={() => action.onClick(selectedRows)}\n        >\n          {action.label}\n        </Button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={() => table.resetRowSelection()}\n        aria-label=\"Clear selection\"\n        className={cn(\n          'flex items-center justify-center p-ds-01',\n          'rounded-control-inner hover:bg-surface-raised transition-colors',\n          'text-surface-fg-muted hover:text-surface-fg',\n        )}\n      >\n        <Icon icon={IconX} size=\"sm\" />\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,EAA4B,EAC1C,UACA,iBACA,kBAKC;CACD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,qDACA,iDACA,sDACA,mCACF;EACA,MAAK;EACL,cAAW;YARb;GAUE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,QAAO,WACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;IAA6B,eAAY;GAAQ,CAAA;GAC/D,EAAY,KAAK,MAChB,kBAAC,GAAD;IAEE,MAAK;IACL,SAAS,EAAO,UAAU,UAAU,UAAU;IAC9C,OAAO,EAAO,UAAU,UAAU,UAAU,KAAA;IAC5C,UAAU,EAAO;IACjB,eAAe,EAAO,QAAQ,CAAY;cAEzC,EAAO;GACF,GARD,EAAO,KAQN,CACT;GACD,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAM,kBAAkB;IACvC,cAAW;IACX,WAAW,EACT,4CACA,mEACA,6CACF;cAEA,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;IAAM,CAAA;GACxB,CAAA;EACL;;AAET"}
+{"version":3,"file":"data-table-bulk-actions.js","names":[],"sources":["../../src/ui/data-table-bulk-actions.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { cn } from './lib/utils'\n\n/** Where the floating bulk-action bar renders. @default 'bottom' */\nexport type BulkActionsPosition = 'bottom' | 'top' | 'inline'\n\n/** Bulk action definition for the floating action bar */\nexport interface BulkAction<TData> {\n  label: string\n  onClick: (selectedRows: TData[]) => void\n  /** Icon rendered before the label — useful for compact/mobile bars. */\n  icon?: IconInput\n  color?: 'accent' | 'error'\n  disabled?: boolean\n}\n\nconst POSITION_CLASSES: Record<BulkActionsPosition, string> = {\n  bottom: 'fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-bottom-2',\n  top: 'fixed top-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-top-2',\n  inline: 'relative animate-in fade-in',\n}\n\n/**\n * Floating action bar shown when rows are selected.\n * Internal — not exported to consumers.\n */\nexport function DataTableBulkActions<TData>({\n  table,\n  selectedRows,\n  bulkActions,\n  position = 'bottom',\n}: {\n  table: Table<TData>\n  selectedRows: TData[]\n  bulkActions: BulkAction<TData>[]\n  position?: BulkActionsPosition\n}) {\n  return (\n    <div\n      className={cn(\n        POSITION_CLASSES[position],\n        'flex items-center gap-ds-04 px-ds-05 py-ds-03',\n        'rounded-overlay bg-surface-overlay shadow-floating',\n      )}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n    >\n      <span className=\"text-body-sm font-medium text-surface-fg whitespace-nowrap\">\n        {selectedRows.length} selected\n      </span>\n      <div className=\"h-5 w-px bg-surface-border\" aria-hidden=\"true\" />\n      {bulkActions.map((action) => (\n        <Button\n          key={action.label}\n          size=\"sm\"\n          variant={action.color === 'error' ? 'solid' : 'outline'}\n          color={action.color === 'error' ? 'error' : undefined}\n          disabled={action.disabled}\n          startIcon={action.icon}\n          onClick={() => action.onClick(selectedRows)}\n        >\n          {action.label}\n        </Button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={() => table.resetRowSelection()}\n        aria-label=\"Clear selection\"\n        className={cn(\n          'flex items-center justify-center p-ds-01',\n          'rounded-control-inner hover:bg-surface-panel-hover transition-colors',\n          'text-surface-fg-muted hover:text-surface-fg',\n        )}\n      >\n        <Icon icon={IconX} size=\"sm\" />\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAwBA,IAAM,IAAwD;CAC5D,QAAQ;CACR,KAAK;CACL,QAAQ;AACV;AAMA,SAAgB,EAA4B,EAC1C,UACA,iBACA,gBACA,cAAW,YAMV;CACD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAiB,IACjB,iDACA,oDACF;EACA,MAAK;EACL,cAAW;YAPb;GASE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,QAAO,WACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;IAA6B,eAAY;GAAQ,CAAA;GAC/D,EAAY,KAAK,MAChB,kBAAC,GAAD;IAEE,MAAK;IACL,SAAS,EAAO,UAAU,UAAU,UAAU;IAC9C,OAAO,EAAO,UAAU,UAAU,UAAU,KAAA;IAC5C,UAAU,EAAO;IACjB,WAAW,EAAO;IAClB,eAAe,EAAO,QAAQ,CAAY;cAEzC,EAAO;GACF,GATD,EAAO,KASN,CACT;GACD,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAM,kBAAkB;IACvC,cAAW;IACX,WAAW,EACT,4CACA,wEACA,6CACF;cAEA,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;IAAM,CAAA;GACxB,CAAA;EACL;;AAET"}

package/dist/ui/data-table-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-card.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,wBAAgB,cAAc,CAAC,KAAK,EAAE,EACpC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAkHA"}
+{"version":3,"file":"data-table-card.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,wBAAgB,cAAc,CAAC,KAAK,EAAE,EACpC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAyJA"}