@nocoo/basalt 2.1.8 → 3.0.0

package/dist/components/context-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-cards.js","names":["ContextCards","vm","useContextCardsViewModel","chunks","totalCount","id","useId","loading","cn","className","title","Badge","LayerCard","SkeletonLine","error","onRetry","Button","chunk","TextAlignStart","FileText","ExternalLink"],"sources":["../../src/components/context-cards.tsx"],"sourcesContent":["import { ExternalLink, FileText, TextAlignStart } from \"lucide-react\";\nimport { useId } from \"react\";\nimport type { ContextChunk } from \"../models/context-cards\";\nimport { cn } from \"../utils/cn\";\nimport { useContextCardsViewModel } from \"../viewmodels/use-context-cards\";\nimport { Badge } from \"./badge\";\nimport { Button } from \"./button\";\nimport { LayerCard } from \"./layer-card\";\nimport { SkeletonLine } from \"./skeleton-line\";\n\nexport type { ContextChunk } from \"../models/context-cards\";\n\nexport interface ContextCardsProps {\n\t/** Retrieved chunks with stable IDs and caller-owned source metadata. */\n\tchunks: readonly ContextChunk[];\n\t/** Heading for the chunk list. @default \"All chunks\" */\n\ttitle?: string;\n\t/** Total available chunks, when displaying a subset. Never smaller than the visible count. */\n\ttotalCount?: number;\n\tloading?: boolean;\n\terror?: string;\n\tonRetry?: () => void;\n\tclassName?: string;\n}\n\nexport function ContextCards({\n\tchunks,\n\ttitle = \"All chunks\",\n\ttotalCount,\n\tloading = false,\n\terror,\n\tonRetry,\n\tclassName,\n}: ContextCardsProps) {\n\tconst vm = useContextCardsViewModel(chunks, totalCount);\n\tconst id = useId();\n\treturn (\n\t\t<section\n\t\t\taria-labelledby={id}\n\t\t\taria-busy={loading || undefined}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-ui min-w-0 space-y-basalt-content-gap leading-[var(--basalt-line-body)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<header className=\"flex items-center gap-basalt-content-gap\">\n\t\t\t\t<h3 id={id} className=\"text-basalt-code font-medium\">\n\t\t\t\t\t{title}\n\t\t\t\t</h3>\n\t\t\t\t<Badge variant=\"secondary\" className=\"tabular-nums leading-[var(--basalt-line-compact)]\">\n\t\t\t\t\t{vm.count}\n\t\t\t\t</Badge>\n\t\t\t</header>\n\t\t\t{loading ? (\n\t\t\t\t<LayerCard padding=\"sm\">\n\t\t\t\t\t<div role=\"status\" aria-label=\"Loading context\" className=\"space-y-basalt-space-lg\">\n\t\t\t\t\t\t<SkeletonLine />\n\t\t\t\t\t\t<SkeletonLine />\n\t\t\t\t\t\t<SkeletonLine />\n\t\t\t\t\t</div>\n\t\t\t\t</LayerCard>\n\t\t\t) : error ? (\n\t\t\t\t<LayerCard padding=\"sm\">\n\t\t\t\t\t<p role=\"alert\" className=\"text-basalt-base text-basalt-danger\">\n\t\t\t\t\t\t{error}\n\t\t\t\t\t</p>\n\t\t\t\t\t{onRetry && (\n\t\t\t\t\t\t<Button size=\"sm\" variant=\"outline\" className=\"mt-basalt-space-lg\" onClick={onRetry}>\n\t\t\t\t\t\t\tTry again\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t</LayerCard>\n\t\t\t) : vm.chunks.length === 0 ? (\n\t\t\t\t<p\n\t\t\t\t\trole=\"status\"\n\t\t\t\t\tclassName=\"py-basalt-space-lg text-basalt-base text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\tNo context retrieved\n\t\t\t\t</p>\n\t\t\t) : (\n\t\t\t\t<ul className=\"space-y-basalt-content-gap\">\n\t\t\t\t\t{vm.chunks.map((chunk) => (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tkey={chunk.id}\n\t\t\t\t\t\t\tclassName=\"basalt-agent-reveal\"\n\t\t\t\t\t\t\tstyle={{ animationDelay: `${chunk.delay}ms`, animationFillMode: \"both\" }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LayerCard padding=\"none\" className=\"min-w-0 overflow-hidden\">\n\t\t\t\t\t\t\t\t<div className=\"flex flex-wrap items-center justify-between gap-basalt-control-gap border-b border-basalt-border px-basalt-panel-x py-basalt-panel-y\">\n\t\t\t\t\t\t\t\t\t<h4 className=\"inline-flex min-w-0 items-center gap-basalt-row-gap text-basalt-code leading-[var(--basalt-line-body)] font-medium\">\n\t\t\t\t\t\t\t\t\t\t<TextAlignStart\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"break-words\">{chunk.title}</span>\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 text-basalt-sm tabular-nums text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{chunk.characters.toLocaleString(\"en-US\")} characters\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p className=\"whitespace-pre-wrap break-words px-basalt-panel-x py-basalt-panel-y text-basalt-code leading-[var(--basalt-line-body)] text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{chunk.body}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className=\"flex min-w-0 px-basalt-panel-x pb-basalt-panel-y\">\n\t\t\t\t\t\t\t\t\t{chunk.href ? (\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={chunk.href}\n\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex max-w-full items-center gap-basalt-control-gap py-basalt-space-xs text-basalt-sm text-basalt-foreground outline-hidden hover:bg-basalt-hover focus-visible:ring-2 focus-visible:ring-basalt-ring\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FileText\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 font-mono text-basalt-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t{chunk.source.type}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"truncate\" title={chunk.source.name}>\n\t\t\t\t\t\t\t\t\t\t\t\t{chunk.source.name}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex max-w-full items-center gap-basalt-control-gap py-basalt-space-xs text-basalt-sm\">\n\t\t\t\t\t\t\t\t\t\t\t<FileText\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 font-mono text-basalt-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t{chunk.source.type}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"truncate\" title={chunk.source.name}>\n\t\t\t\t\t\t\t\t\t\t\t\t{chunk.source.name}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</LayerCard>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</section>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/context-menu.d.ts

@@ -145,5 +145,5 @@ export interface ContextMenuPanelProps extends Omit<ContextMenuContentProps, "fo
      */
     forceMount?: true;
 }
-export declare function ContextMenuPanel({ className, ...props }: ContextMenuPanelProps): React.JSX.Element;
+export declare function ContextMenuPanel({ className, ref, ...props }: ContextMenuPanelProps): React.JSX.Element;
 export {};

package/dist/components/context-menu.js

@@ -1,26 +1,30 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { overlayItemClass as t, overlayPanelClass as n } from "./overlay.js";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-context-menu";
+import { useHoverHighlight as r } from "../utils/use-hover-highlight.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-context-menu";
 //#region src/components/context-menu.tsx
-var o = a.Root, s = a.Trigger, c = a.Content, l = r.forwardRef(({ className: n, ...r }, o) => /* @__PURE__ */ i(a.Item, {
-	ref: o,
-	className: t(e("relative outline-hidden focus:bg-basalt-accent data-disabled:pointer-events-none data-disabled:opacity-50", n)),
+var s = o.Root, c = o.Trigger, l = o.Content, u = i.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ a(o.Item, {
+	"data-basalt-hover-item": "",
+	ref: i,
+	className: t(e("relative outline-hidden focus:bg-basalt-hover [.basalt-hover-list_&]:focus:bg-transparent data-disabled:pointer-events-none data-disabled:opacity-50", n)),
 	...r
 }));
-l.displayName = a.Item.displayName;
-function u({ className: t, ...r }) {
-	return /* @__PURE__ */ i(a.Portal, {
-		forceMount: r.forceMount,
-		children: /* @__PURE__ */ i(a.Content, {
-			className: n(e("min-w-40", t)),
-			...r
+u.displayName = o.Item.displayName;
+function d({ className: t, ref: i, ...s }) {
+	let c = r(i);
+	return /* @__PURE__ */ a(o.Portal, {
+		forceMount: s.forceMount,
+		children: /* @__PURE__ */ a(o.Content, {
+			ref: c,
+			className: n(e("basalt-hover-list min-w-basalt-40", t)),
+			...s
 		})
 	});
 }
 //#endregion
-export { o as ContextMenu, c as ContextMenuContent, l as ContextMenuItem, u as ContextMenuPanel, s as ContextMenuTrigger };
+export { s as ContextMenu, l as ContextMenuContent, u as ContextMenuItem, d as ContextMenuPanel, c as ContextMenuTrigger };
 
 //# sourceMappingURL=context-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;\ntype RadixContextMenuTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Trigger\n>;\ntype RadixContextMenuContentProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Content\n>;\ntype RadixContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>;\n\nexport interface ContextMenuProps\n\textends Omit<RadixContextMenuProps, \"open\" | \"onOpenChange\" | \"dir\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the context menu.\n\t * When set to true before pointer trigger interaction, positions at the top-left of the viewport.\n\t */\n\topen?: RadixContextMenuProps[\"open\"];\n\t/**\n\t * Callback invoked when open state changes.\n\t */\n\tonOpenChange?: RadixContextMenuProps[\"onOpenChange\"];\n\t/**\n\t * The reading direction of the context menu.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixContextMenuProps[\"dir\"];\n\t/**\n\t * Whether the context menu is modal, preventing outside interactions.\n\t * @default true\n\t */\n\tmodal?: RadixContextMenuProps[\"modal\"];\n}\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\n\nexport interface ContextMenuTriggerProps\n\textends Omit<RadixContextMenuTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu trigger from opening on right-click.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered span element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLSpanElement and inherits native span attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuTriggerProps[\"asChild\"];\n}\n\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nexport interface ContextMenuContentProps\n\textends Omit<\n\t\tRadixContextMenuContentProps,\n\t\t| \"loop\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation should loop around item boundaries.\n\t * @default false\n\t */\n\tloop?: RadixContextMenuContentProps[\"loop\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixContextMenuContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixContextMenuContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixContextMenuContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixContextMenuContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixContextMenuContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixContextMenuContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixContextMenuContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * Note: Bare ContextMenuContent mounts directly without a built-in Portal wrapper.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixContextMenuContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixContextMenuContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixContextMenuContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixContextMenuContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixContextMenuContentProps[\"onInteractOutside\"];\n}\n\nexport const ContextMenuContent = ContextMenuPrimitive.Content;\n\nexport interface ContextMenuItemProps\n\textends Omit<RadixContextMenuItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu item.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the context menu item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixContextMenuItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixContextMenuItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuItemProps[\"asChild\"];\n}\n\nexport const ContextMenuItem = React.forwardRef<\n\tReact.ElementRef<typeof ContextMenuPrimitive.Item>,\n\tContextMenuItemProps\n>(({ className, ...props }, ref) => (\n\t<ContextMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden focus:bg-basalt-accent data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nexport interface ContextMenuPanelProps\n\textends Omit<ContextMenuContentProps, \"forceMount\">,\n\t\tPick<React.ComponentProps<typeof ContextMenuPrimitive.Content>, \"ref\"> {\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: true;\n}\n\nexport function ContextMenuPanel({ className, ...props }: ContextMenuPanelProps) {\n\treturn (\n\t\t<ContextMenuPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<ContextMenuPrimitive.Content\n\t\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</ContextMenuPrimitive.Portal>\n\t);\n}\n"],"mappings":";;;;;;;AAqCA,IAAa,IAAc,EAAqB,MAiBnC,IAAqB,EAAqB,SA8F1C,IAAqB,EAAqB,SAyB1C,IAAkB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,MAAtB;CACM;CACL,WAAW,EACV,EACC,6GACA,CACD,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAgB,cAAc,EAAqB,KAAK;AAcxD,SAAgB,EAAiB,EAAE,cAAW,GAAG,KAAgC;CAChF,OACC,kBAAC,EAAqB,QAAtB;EAA6B,YAAY,EAAM;EAC9C,UAAA,kBAAC,EAAqB,SAAtB;GACC,WAAW,EAAkB,EAAG,YAAY,CAAS,CAAC;GACtD,GAAI;EACJ,CAAA;CAC2B,CAAA;AAE/B"}
+{"version":3,"file":"context-menu.js","names":["React","ContextMenuPrimitive","ContextMenu","ContextMenuTrigger","ContextMenuContent","ContextMenuItem","props","overlayItemClass","cn","className","ContextMenuPanel","highlightRef","useHoverHighlight","ref","overlayPanelClass"],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;\ntype RadixContextMenuTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Trigger\n>;\ntype RadixContextMenuContentProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Content\n>;\ntype RadixContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>;\n\nexport interface ContextMenuProps\n\textends Omit<RadixContextMenuProps, \"open\" | \"onOpenChange\" | \"dir\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the context menu.\n\t * When set to true before pointer trigger interaction, positions at the top-left of the viewport.\n\t */\n\topen?: RadixContextMenuProps[\"open\"];\n\t/**\n\t * Callback invoked when open state changes.\n\t */\n\tonOpenChange?: RadixContextMenuProps[\"onOpenChange\"];\n\t/**\n\t * The reading direction of the context menu.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixContextMenuProps[\"dir\"];\n\t/**\n\t * Whether the context menu is modal, preventing outside interactions.\n\t * @default true\n\t */\n\tmodal?: RadixContextMenuProps[\"modal\"];\n}\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\n\nexport interface ContextMenuTriggerProps\n\textends Omit<RadixContextMenuTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu trigger from opening on right-click.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered span element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLSpanElement and inherits native span attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuTriggerProps[\"asChild\"];\n}\n\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nexport interface ContextMenuContentProps\n\textends Omit<\n\t\tRadixContextMenuContentProps,\n\t\t| \"loop\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation should loop around item boundaries.\n\t * @default false\n\t */\n\tloop?: RadixContextMenuContentProps[\"loop\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixContextMenuContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixContextMenuContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixContextMenuContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixContextMenuContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixContextMenuContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixContextMenuContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixContextMenuContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * Note: Bare ContextMenuContent mounts directly without a built-in Portal wrapper.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixContextMenuContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixContextMenuContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixContextMenuContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixContextMenuContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixContextMenuContentProps[\"onInteractOutside\"];\n}\n\nexport const ContextMenuContent = ContextMenuPrimitive.Content;\n\nexport interface ContextMenuItemProps\n\textends Omit<RadixContextMenuItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu item.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the context menu item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixContextMenuItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixContextMenuItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuItemProps[\"asChild\"];\n}\n\nexport const ContextMenuItem = React.forwardRef<\n\tReact.ElementRef<typeof ContextMenuPrimitive.Item>,\n\tContextMenuItemProps\n>(({ className, ...props }, ref) => (\n\t<ContextMenuPrimitive.Item\n\t\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden focus:bg-basalt-hover [.basalt-hover-list_&]:focus:bg-transparent data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nexport interface ContextMenuPanelProps\n\textends Omit<ContextMenuContentProps, \"forceMount\">,\n\t\tPick<React.ComponentProps<typeof ContextMenuPrimitive.Content>, \"ref\"> {\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: true;\n}\n\nexport function ContextMenuPanel({ className, ref, ...props }: ContextMenuPanelProps) {\n\tconst highlightRef = useHoverHighlight(ref);\n\treturn (\n\t\t<ContextMenuPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<ContextMenuPrimitive.Content\n\t\t\t\tref={highlightRef}\n\t\t\t\tclassName={overlayPanelClass(cn(\"basalt-hover-list min-w-basalt-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</ContextMenuPrimitive.Portal>\n\t);\n}\n"],"mappings":";;;;;;;;AAsCA,IAAaE,IAAcD,EAAqB,MAiBnCE,IAAqBF,EAAqB,SA8F1CG,IAAqBH,EAAqB,SAyB1CI,IAAkBL,EAAM,YAGlC,EAAE,cAAW,GAAGM,KAAS,MAC3B,kBAACL,EAAqB,MAAtB;CACC,0BAAuB;CAClB;CACL,WAAWM,EACVC,EACC,wJACAC,CACD,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAgB,cAAcL,EAAqB,KAAK;AAcxD,SAAgBS,EAAiB,EAAE,cAAW,QAAK,GAAGJ,KAAgC;CACrF,IAAMK,IAAeC,EAAkBC,CAAG;CAC1C,OACC,kBAACZ,EAAqB,QAAtB;EAA6B,YAAYK,EAAM;EAC9C,UAAA,kBAACL,EAAqB,SAAtB;GACC,KAAKU;GACL,WAAWG,EAAkBN,EAAG,qCAAqCC,CAAS,CAAC;GAC/E,GAAIH;EACJ,CAAA;CAC2B,CAAA;AAE/B"}

package/dist/components/data-table.d.ts

@@ -9,8 +9,10 @@ export type DataTableColumn<T> = {
     headerContent?: ReactNode;
     /** Whether the header changes sorting. @default true */
     sortable?: boolean;
-    /** Width of the header and its column. */
+    /** Preferred and minimum column width; narrow viewports scroll instead of squeezing it. */
     width?: CSSProperties["width"];
+    /** Allow multiline cell content. Default false keeps dense records on one line. */
+    wrap?: boolean;
     /** Classes applied to the header cell. */
     headerClassName?: string;
     /** Classes applied to each data cell. */
@@ -86,6 +88,10 @@ export type DataTableProps<T = unknown> = {
      * Additional classes for the table.
      */
     className?: string;
+    /** Bound the local scroll region; column headers stay visible while scrolling. */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Show display-order row numbers, continuous across pages. @default false */
+    rowNumbers?: boolean;
     /** Controlled sorting. null explicitly disables sorting. */
     sort?: DataTableSort | null;
     /** Initial sorting for uncontrolled usage. @default null */
@@ -111,4 +117,4 @@ export type DataTableProps<T = unknown> = {
     /** ID of additional table instructions or summary. */
     "aria-describedby"?: string;
 };
-export declare function DataTable<T>({ data, columns, filter, loading, empty, selected, defaultSelected, onSelectedChange, multiple, page, defaultPage, pageSize, onPageChange, getRowId, className, sort: controlledSort, defaultSort, onSortChange, manualSorting, manualPagination, manualFiltering, total, error, onRetry, retryLabel, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: DataTableProps<T>): import("react").JSX.Element;
+export declare function DataTable<T>({ data, columns, filter, loading, empty, selected, defaultSelected, onSelectedChange, multiple, page, defaultPage, pageSize, onPageChange, getRowId, className, maxHeight, rowNumbers, sort: controlledSort, defaultSort, onSortChange, manualSorting, manualPagination, manualFiltering, total, error, onRetry, retryLabel, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/data-table.js

@@ -1,16 +1,18 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { Button as t } from "./button.js";
-import { SkeletonLine as n } from "./skeleton-line.js";
-import { Pagination as r } from "./pagination.js";
-import { Table as i, TableBody as a, TableCell as o, TableHead as s, TableHeader as c, TableRow as l } from "./table.js";
-import { useCallback as u, useEffect as d, useLayoutEffect as ee, useMemo as te, useRef as f, useState as p } from "react";
+import { Checkbox as n } from "./checkbox.js";
+import { SkeletonLine as r } from "./skeleton-line.js";
+import { Pagination as i } from "./pagination.js";
+import { Table as a, TableBody as o, TableCell as s, TableHead as c, TableHeader as l, TableRow as u } from "./table.js";
+import { useCallback as d, useEffect as ee, useLayoutEffect as te, useMemo as ne, useRef as f, useState as p } from "react";
+import { ArrowDown as re, ArrowUp as ie, ArrowUpDown as ae } from "lucide-react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/data-table.tsx
 function g(e) {
 	return e === -Infinity ? 0 : typeof e == "bigint" || typeof e == "number" && Number.isFinite(e) ? 1 : e === Infinity ? 2 : typeof e == "number" ? 3 : typeof e == "string" ? 4 : 5;
 }
-function ne(e, t) {
+function oe(e, t) {
 	let n = g(e), r = g(t);
 	if (n !== r) return n - r;
 	if (n === 1) {
@@ -20,7 +22,7 @@ function ne(e, t) {
 	let i = String(e), a = String(t);
 	return i < a ? -1 : +(i > a);
 }
-function re(e, t, n, r) {
+function se(e, t, n, r) {
 	if (e === null) return "prim:null";
 	if (e === void 0) return "prim:undefined";
 	if (typeof e == "symbol") {
@@ -36,7 +38,7 @@ function _(e) {
 function v(e) {
 	return typeof e == "function" || typeof e == "object" && !!e;
 }
-function ie(e, t) {
+function ce(e, t) {
 	if (e.filterValue) return String(e.filterValue(t));
 	if (e.sortValue) return String(e.sortValue(t));
 	let n = e.accessor(t);
@@ -46,15 +48,15 @@ function y(e, t, n, r) {
 	let i = r?.(e, t);
 	return i === void 0 ? v(e) && "id" in e && e.id != null ? String(e.id) : n : i;
 }
-function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe = "No results", selected: S, defaultSelected: C, onSelectedChange: w, multiple: se = !1, page: T, defaultPage: ce = 1, pageSize: E, onPageChange: le, getRowId: D, className: ue, sort: O, defaultSort: de = null, onSortChange: fe, manualSorting: k = !1, manualPagination: A = !1, manualFiltering: j = !1, total: M, error: N, onRetry: P, retryLabel: pe = "Try again", "aria-label": F = "Data table", "aria-describedby": me }) {
-	let [he, ge] = p(de), I = O === void 0 ? he : O, _e = (e) => {
-		O === void 0 && ge(e), fe?.(e);
-	}, [ve, ye] = p(C ?? []), [L, be] = p(ce), R = f(/* @__PURE__ */ new WeakMap()), z = f(0), B = f(/* @__PURE__ */ new WeakMap()), V = f(/* @__PURE__ */ new Map()), H = f(/* @__PURE__ */ new Map()), U = f(/* @__PURE__ */ new Map()), xe = f(/* @__PURE__ */ new Map()), W = ae.trim().toLowerCase(), G = te(() => {
+function b({ data: g, columns: b, filter: le = "", loading: x = !1, empty: ue = "No results", selected: S, defaultSelected: C, onSelectedChange: w, multiple: de = !1, page: T, defaultPage: fe = 1, pageSize: E, onPageChange: D, getRowId: O, className: pe, maxHeight: me, rowNumbers: k = !1, sort: A, defaultSort: he = null, onSortChange: ge, manualSorting: j = !1, manualPagination: M = !1, manualFiltering: N = !1, total: P, error: F, onRetry: I, retryLabel: _e = "Try again", "aria-label": L = "Data table", "aria-describedby": ve }) {
+	let [ye, be] = p(he), R = A === void 0 ? ye : A, xe = (e) => {
+		A === void 0 && be(e), ge?.(e);
+	}, [Se, Ce] = p(C ?? []), [z, we] = p(fe), B = f(/* @__PURE__ */ new WeakMap()), V = f(0), H = f(/* @__PURE__ */ new WeakMap()), U = f(/* @__PURE__ */ new Map()), W = f(/* @__PURE__ */ new Map()), G = f(/* @__PURE__ */ new Map()), Te = f(/* @__PURE__ */ new Map()), K = le.trim().toLowerCase(), q = ne(() => {
 		let e = (e) => {
-			let t = R.current.get(e);
-			return t || (t = `basalt-row-${z.current++}`, R.current.set(e, t)), t;
+			let t = B.current.get(e);
+			return t || (t = `basalt-row-${V.current++}`, B.current.set(e, t)), t;
 		}, t = (e, t) => {
-			let n = D?.(e, t);
+			let n = O?.(e, t);
 			if (n !== void 0) return `get:${n}`;
 			if (v(e) && "id" in e) {
 				let t = e.id;
@@ -81,27 +83,27 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 		for (let e of l) {
 			let t = v(e.row) ? e.row : null;
 			if (!t) continue;
-			let r = B.current.get(t)?.[e.occurrence];
-			r && !n.has(r) && V.current.get(r) === t && (e.key = r, n.add(r));
+			let r = H.current.get(t)?.[e.occurrence];
+			r && !n.has(r) && U.current.get(r) === t && (e.key = r, n.add(r));
 		}
 		let u = l.map(({ row: r, index: i, occurrence: a, key: o }) => {
 			let c = v(r) ? r : null;
 			if (o) return s(r, i, o, c), {
 				row: r,
 				key: o,
-				selectId: y(r, i, o, D)
+				selectId: y(r, i, o, O)
 			};
 			let l = a > 0, u, d = t(r, i);
 			if (d && (u = d), c) {
 				let t = e(c);
 				if (!u) u = l ? `gen:${t}#${a}` : `gen:${t}`;
-				else if (n.has(u) || l) u = (U.current.get(u) ?? []).find((e) => !n.has(e)) ?? (l ? `dup:${t}#${a}` : `dup:${t}`);
+				else if (n.has(u) || l) u = (G.current.get(u) ?? []).find((e) => !n.has(e)) ?? (l ? `dup:${t}#${a}` : `dup:${t}`);
 				else {
-					let e = H.current.get(u);
+					let e = W.current.get(u);
 					e && !n.has(e) && _(e) && (u = e);
 				}
 			}
-			if (u ??= re(r, i, xe.current, z), n.has(u)) {
+			if (u ??= se(r, i, Te.current, V), n.has(u)) {
 				let e = 0, t = `occ:${u}#${e}`;
 				for (; n.has(t);) e += 1, t = `occ:${u}#${e}`;
 				u = t;
@@ -109,16 +111,16 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 			return n.add(u), s(r, i, u, c), {
 				row: r,
 				key: u,
-				selectId: y(r, i, u, D)
+				selectId: y(r, i, u, O)
 			};
-		}), d = W && !j ? u.filter(({ row: e }) => b.some((t) => ie(t, e).toLowerCase().includes(W))) : u;
+		}), d = K && !N ? u.filter(({ row: e }) => b.some((t) => ce(t, e).toLowerCase().includes(K))) : u;
 		return {
 			rows: (() => {
-				if (!I || k) return d;
-				let e = b.find((e) => e.id === I.id);
+				if (!R || j) return d;
+				let e = b.find((e) => e.id === R.id);
 				return e ? [...d].sort((t, n) => {
-					let r = ne(e.sortValue?.(t.row) ?? e.accessor(t.row), e.sortValue?.(n.row) ?? e.accessor(n.row));
-					return I.dir === "asc" ? r : -r;
+					let r = oe(e.sortValue?.(t.row) ?? e.accessor(t.row), e.sortValue?.(n.row) ?? e.accessor(n.row));
+					return R.dir === "asc" ? r : -r;
 				}) : d;
 			})(),
 			assigned: a,
@@ -129,23 +131,23 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 	}, [
 		b,
 		g,
-		D,
-		W,
-		I,
-		j,
-		k
+		O,
+		K,
+		R,
+		N,
+		j
 	]);
+	te(() => {
+		for (let [e, t] of q.assigned) H.current.set(e, t);
+		U.current = q.owner, W.current = q.lastKey, G.current = q.dups;
+	}, [q]);
+	let J = S !== void 0 || C !== void 0 || w !== void 0, Y = S ?? Se, Ee = d((e) => {
+		S === void 0 && Ce(e), w?.(e);
+	}, [w, S]), De = M && P !== void 0 ? Math.max(0, P) : q.rows.length, Oe = E && E > 0 ? Math.max(1, Math.ceil(De / E)) : 1, X = Math.min(Oe, Math.max(1, T ?? z)), Z = d((e) => {
+		T === void 0 && we(e), D?.(e);
+	}, [D, T]), Q = f(null);
 	ee(() => {
-		for (let [e, t] of G.assigned) B.current.set(e, t);
-		V.current = G.owner, H.current = G.lastKey, U.current = G.dups;
-	}, [G]);
-	let K = S !== void 0 || C !== void 0 || w !== void 0, q = S ?? ve, J = u((e) => {
-		S === void 0 && ye(e), w?.(e);
-	}, [w, S]), Se = A && M !== void 0 ? Math.max(0, M) : G.rows.length, Y = E && E > 0 ? Math.max(1, Math.ceil(Se / E)) : 1, X = Math.min(Y, Math.max(1, T ?? L)), Z = u((e) => {
-		T === void 0 && be(e), le?.(e);
-	}, [le, T]), Q = f(null);
-	d(() => {
-		let e = T ?? L;
+		let e = T ?? z;
 		if (e === X || x) {
 			Q.current = null;
 			return;
@@ -154,107 +156,160 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 		Q.current !== t && (Q.current = t, Z(X));
 	}, [
 		T,
-		L,
+		z,
 		X,
 		x,
 		Z
 	]);
-	let Ce = !A && E && E > 0 ? G.rows.slice((X - 1) * E, X * E) : G.rows, $ = b.length + +!!K, we = (e) => {
-		if (se) {
-			J(q.includes(e) ? q.filter((t) => t !== e) : [...q, e]);
+	let ke = !M && E && E > 0 ? q.rows.slice((X - 1) * E, X * E) : q.rows, $ = b.length + +!!J + +!!k, Ae = (e) => {
+		if (de) {
+			Ee(Y.includes(e) ? Y.filter((t) => t !== e) : [...Y, e]);
 			return;
 		}
-		J(q.includes(e) ? [] : [e]);
+		Ee(Y.includes(e) ? [] : [e]);
 	};
 	return /* @__PURE__ */ h("div", {
-		className: "flex min-w-0 flex-col gap-3",
+		className: "flex min-w-0 flex-col gap-basalt-space-lg",
 		children: [/* @__PURE__ */ m("div", {
 			role: "region",
-			"aria-label": `${F} scroll area`,
+			"aria-label": `${L} scroll area`,
 			tabIndex: 0,
-			className: "min-w-0 overflow-x-auto rounded-basalt-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary",
-			children: /* @__PURE__ */ h(i, {
-				className: e("w-full", ue),
-				"aria-label": F,
-				"aria-describedby": me,
+			className: "relative min-w-0 overflow-auto rounded-basalt-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary",
+			style: { maxHeight: me },
+			children: /* @__PURE__ */ h(a, {
+				className: e("w-full", pe),
+				"aria-label": L,
+				"aria-describedby": ve,
 				"aria-busy": x || void 0,
-				children: [/* @__PURE__ */ m(c, { children: /* @__PURE__ */ h(l, { children: [K ? /* @__PURE__ */ m(s, { children: /* @__PURE__ */ m("span", {
-					className: "sr-only",
-					children: "Select"
-				}) }) : null, b.map((e) => /* @__PURE__ */ m(s, {
-					className: e.headerClassName,
-					style: { width: e.width },
-					scope: "col",
-					"aria-sort": e.sortable === !1 ? void 0 : I?.id === e.id ? I.dir === "asc" ? "ascending" : "descending" : "none",
-					children: e.sortable === !1 ? e.headerContent ?? e.header : /* @__PURE__ */ h("button", {
-						type: "button",
-						"aria-label": e.header,
-						className: "appearance-none border-0 bg-transparent p-0 font-inherit text-inherit font-medium cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-basalt-primary",
-						onClick: () => _e(I?.id === e.id && I.dir === "asc" ? {
-							id: e.id,
-							dir: "desc"
-						} : {
-							id: e.id,
-							dir: "asc"
-						}),
-						children: [e.headerContent ?? e.header, I?.id === e.id ? I.dir === "asc" ? " ↑" : " ↓" : ""]
-					})
-				}, e.id))] }) }), /* @__PURE__ */ m(a, { children: x ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
+				"data-basalt-data-table": "",
+				children: [/* @__PURE__ */ m(l, { children: /* @__PURE__ */ h(u, { children: [
+					k && /* @__PURE__ */ h(c, {
+						scope: "col",
+						className: "sticky top-0 z-10 w-basalt-10 min-w-basalt-10 bg-basalt-control text-right",
+						children: [/* @__PURE__ */ m("span", {
+							"aria-hidden": "true",
+							children: "#"
+						}), /* @__PURE__ */ m("span", {
+							className: "sr-only",
+							children: "Row number"
+						})]
+					}),
+					J ? /* @__PURE__ */ m(c, {
+						scope: "col",
+						className: "sticky top-0 z-10 w-basalt-10 min-w-basalt-10 bg-basalt-control text-center",
+						children: /* @__PURE__ */ m("span", {
+							className: "sr-only",
+							children: "Select"
+						})
+					}) : null,
+					b.map((t) => /* @__PURE__ */ m(c, {
+						className: e("sticky top-0 z-10 bg-basalt-control", t.headerClassName),
+						style: {
+							width: t.width,
+							minWidth: t.width
+						},
+						scope: "col",
+						"aria-sort": t.sortable === !1 ? void 0 : R?.id === t.id ? R.dir === "asc" ? "ascending" : "descending" : "none",
+						children: t.sortable === !1 ? /* @__PURE__ */ m("span", {
+							className: "flex items-center gap-basalt-control-gap",
+							children: t.headerContent ?? t.header
+						}) : /* @__PURE__ */ h("button", {
+							type: "button",
+							"aria-label": t.header,
+							className: "group flex w-full cursor-pointer items-center gap-basalt-control-gap rounded-basalt-sm border-0 bg-transparent p-0 text-left font-inherit text-inherit font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary",
+							onClick: () => xe(R?.id === t.id && R.dir === "asc" ? {
+								id: t.id,
+								dir: "desc"
+							} : {
+								id: t.id,
+								dir: "asc"
+							}),
+							children: [/* @__PURE__ */ m("span", {
+								className: "flex min-w-0 items-center gap-basalt-control-gap truncate",
+								children: t.headerContent ?? t.header
+							}), R?.id === t.id ? R.dir === "asc" ? /* @__PURE__ */ m(ie, {
+								"aria-hidden": "true",
+								className: "ml-auto size-basalt-icon-sm shrink-0",
+								strokeWidth: 1.5
+							}) : /* @__PURE__ */ m(re, {
+								"aria-hidden": "true",
+								className: "ml-auto size-basalt-icon-sm shrink-0",
+								strokeWidth: 1.5
+							}) : /* @__PURE__ */ m(ae, {
+								"aria-hidden": "true",
+								className: "ml-auto size-basalt-icon-sm shrink-0 opacity-0 transition-opacity basalt-motion group-hover:opacity-60 group-focus-visible:opacity-60 motion-reduce:transition-none",
+								strokeWidth: 1.5
+							})]
+						})
+					}, t.id))
+				] }) }), /* @__PURE__ */ m(o, { children: x ? /* @__PURE__ */ m(u, { children: /* @__PURE__ */ m(s, {
 					colSpan: $,
 					children: /* @__PURE__ */ h("div", {
 						role: "status",
-						className: "flex flex-col gap-2 py-2",
+						className: "flex flex-col gap-basalt-space-lg py-basalt-space-lg",
 						children: [
 							/* @__PURE__ */ m("span", {
 								className: "sr-only",
 								children: "Loading"
 							}),
-							/* @__PURE__ */ m(n, {}),
-							/* @__PURE__ */ m(n, {}),
-							/* @__PURE__ */ m(n, {})
+							/* @__PURE__ */ m(r, {}),
+							/* @__PURE__ */ m(r, {}),
+							/* @__PURE__ */ m(r, {})
 						]
 					})
-				}) }) : N != null && N !== !1 ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
+				}) }) : F != null && F !== !1 ? /* @__PURE__ */ m(u, { children: /* @__PURE__ */ m(s, {
 					colSpan: $,
 					children: /* @__PURE__ */ h("div", {
 						role: "alert",
-						className: "flex flex-wrap items-center justify-between gap-3 py-6",
-						children: [/* @__PURE__ */ m("div", { children: N }), P ? /* @__PURE__ */ m(t, {
+						className: "flex flex-wrap items-center justify-between gap-basalt-space-lg py-basalt-space-lg",
+						children: [/* @__PURE__ */ m("div", { children: F }), I ? /* @__PURE__ */ m(t, {
 							variant: "outline",
 							size: "sm",
-							onClick: P,
-							children: pe
+							onClick: I,
+							children: _e
 						}) : null]
 					})
-				}) }) : Ce.length === 0 ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
+				}) }) : ke.length === 0 ? /* @__PURE__ */ m(u, { children: /* @__PURE__ */ m(s, {
 					colSpan: $,
 					children: /* @__PURE__ */ m("div", {
 						role: "status",
-						children: oe
+						children: ue
 					})
-				}) }) : Ce.map(({ row: e, key: t, selectId: n }) => {
-					let r = q.includes(n);
-					return /* @__PURE__ */ h(l, {
-						variant: r ? "selected" : "default",
-						"aria-selected": K ? r : void 0,
-						children: [K ? /* @__PURE__ */ m(o, { children: /* @__PURE__ */ m("input", {
-							type: "checkbox",
-							checked: r,
-							"aria-label": `Select ${n}`,
-							onChange: () => we(n)
-						}) }) : null, b.map((t) => {
-							let n = t.accessor(e);
-							return /* @__PURE__ */ m(o, {
-								className: t.cellClassName,
-								children: typeof n == "bigint" ? String(n) : n
-							}, t.id);
-						})]
-					}, t);
+				}) }) : ke.map(({ row: t, key: r, selectId: i }, a) => {
+					let o = Y.includes(i);
+					return /* @__PURE__ */ h(u, {
+						variant: o ? "selected" : "default",
+						"aria-selected": J ? o : void 0,
+						children: [
+							k && /* @__PURE__ */ m(s, {
+								"data-row-number": "",
+								className: "text-right text-basalt-sm tabular-nums text-basalt-muted-foreground",
+								children: (E && E > 0 ? (X - 1) * E : 0) + a + 1
+							}),
+							J ? /* @__PURE__ */ m(s, {
+								className: "text-center",
+								children: /* @__PURE__ */ m(n, {
+									checked: o,
+									"aria-label": `Select ${i}`,
+									onCheckedChange: () => Ae(i),
+									className: "align-middle"
+								})
+							}) : null,
+							b.map((n) => {
+								let r = n.accessor(t);
+								return /* @__PURE__ */ m(s, {
+									className: e(n.wrap ? "whitespace-normal break-words" : "whitespace-nowrap", n.cellClassName),
+									style: { minWidth: n.width },
+									children: typeof r == "bigint" ? String(r) : r
+								}, n.id);
+							})
+						]
+					}, r);
 				}) })]
 			})
-		}), E && E > 0 ? /* @__PURE__ */ m(r, {
+		}), E && E > 0 ? /* @__PURE__ */ m(i, {
 			page: X,
-			pageCount: Y,
+			pageCount: Oe,
 			disabled: x,
 			onPageChange: Z
 		}) : null]