@godxjp/ui 9.1.0 → 10.0.0

package/dist/chunk-NXVCI6YB.js

@@ -0,0 +1,453 @@
+import { Command, CommandList, CommandItem, CommandGroup } from './chunk-HTEL5DQI.js';
+import { Input } from './chunk-VOHTRR5X.js';
+import { Button } from './chunk-M4PZNAMV.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { controlTriggerClass } from './chunk-IBK5D2Q6.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown, ChevronUp, ChevronsUpDown, Check, Loader2 } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEBOUNCE_MS = 250;
+function SearchSelect({
+  value = "",
+  onValueChange,
+  options: staticOptions,
+  loadOptions,
+  renderOption,
+  selectedLabel,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  loadingMessage,
+  clearLabel,
+  clearable = true,
+  disabled = false,
+  name,
+  id,
+  className,
+  "data-testid": dataTestId
+}) {
+  const { t } = useTranslation();
+  const reactId = React.useId();
+  const listId = `${reactId}-listbox`;
+  const optionDomId = (optionValue) => `${reactId}-opt-${optionValue}`;
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [debouncedQuery, setDebouncedQuery] = React.useState("");
+  const [loaded, setLoaded] = React.useState([]);
+  const [page, setPage] = React.useState(1);
+  const [hasMore, setHasMore] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [picked, setPicked] = React.useState(null);
+  const reqId = React.useRef(0);
+  const resolvedLoad = React.useMemo(
+    () => loadOptions ?? (async ({ query: search }) => {
+      const needle = search.trim().toLowerCase();
+      const list = staticOptions ?? [];
+      return {
+        options: needle ? list.filter(
+          (option) => option.label.toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle)
+        ) : list,
+        hasMore: false
+      };
+    }),
+    [loadOptions, staticOptions]
+  );
+  React.useEffect(() => {
+    const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
+    return () => window.clearTimeout(handle);
+  }, [query]);
+  const fetchPage = React.useCallback(
+    async (nextPage, search, append) => {
+      const ticket = ++reqId.current;
+      setLoading(true);
+      try {
+        const result = await resolvedLoad({ query: search, page: nextPage });
+        if (ticket !== reqId.current) return;
+        setLoaded((prev) => append ? [...prev, ...result.options] : result.options);
+        setHasMore(Boolean(result.hasMore));
+        setPage(nextPage);
+      } finally {
+        if (ticket === reqId.current) setLoading(false);
+      }
+    },
+    [resolvedLoad]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    setActiveIndex(0);
+    void fetchPage(1, debouncedQuery, false);
+  }, [open, debouncedQuery, fetchPage]);
+  const grouped = React.useMemo(() => {
+    const order = [];
+    const buckets = /* @__PURE__ */ new Map();
+    for (const option of loaded) {
+      const key = option.group ?? "";
+      if (!buckets.has(key)) {
+        buckets.set(key, []);
+        order.push(key);
+      }
+      buckets.get(key).push(option);
+    }
+    let flatIndex = 0;
+    return order.map((key) => ({
+      heading: key || void 0,
+      items: (buckets.get(key) ?? []).map((option) => ({ option, index: flatIndex++ }))
+    }));
+  }, [loaded]);
+  const flatOrdered = React.useMemo(
+    () => grouped.flatMap((group) => group.items.map((entry) => entry.option)),
+    [grouped]
+  );
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.searchSelect.placeholder");
+  const currentLabel = value ? picked?.label ?? selectedLabel ?? resolvedPlaceholder : resolvedPlaceholder;
+  const select = (option) => {
+    if (option.disabled) return;
+    setPicked(option);
+    onValueChange?.(option.value, option);
+    setOpen(false);
+  };
+  const clear = () => {
+    setPicked(null);
+    onValueChange?.("", void 0);
+    setOpen(false);
+  };
+  const onScroll = (event) => {
+    const el = event.currentTarget;
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < 48 && hasMore && !loading) {
+      void fetchPage(page + 1, debouncedQuery, true);
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, Math.max(flatOrdered.length - 1, 0)));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (event.key === "Enter" && flatOrdered[activeIndex]) {
+      event.preventDefault();
+      select(flatOrdered[activeIndex]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
+  const activeOption = flatOrdered[activeIndex];
+  const activeOptionId = activeOption ? optionDomId(activeOption.value) : void 0;
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (!next) setQuery("");
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            id,
+            type: "button",
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            disabled,
+            "data-testid": dataTestId,
+            className: cn("w-full justify-between font-normal", className),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("truncate text-start", !value && "text-muted-foreground"), children: currentLabel }),
+              /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ms-2 size-4 shrink-0 opacity-50", "aria-hidden": "true" })
+            ]
+          }
+        ) }),
+        name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value }) : null,
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            align: "start",
+            sideOffset: 4,
+            collisionPadding: 12,
+            className: "flex max-h-[min(24rem,var(--radix-popover-content-available-height))] w-max max-w-[min(32rem,calc(100vw-1.5rem))] min-w-[var(--radix-popover-trigger-width)] flex-col p-0",
+            children: /* @__PURE__ */ jsxs(Command, { shouldFilter: false, className: "flex min-h-0 flex-col", children: [
+              /* @__PURE__ */ jsx("div", { className: "border-border shrink-0 border-b p-2", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  autoFocus: true,
+                  "aria-controls": listId,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": activeOptionId,
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value),
+                  onKeyDown,
+                  placeholder: searchPlaceholder ?? t("dataEntry.searchSelect.search")
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                CommandList,
+                {
+                  id: listId,
+                  role: "listbox",
+                  className: "min-h-0 flex-1 overflow-y-auto p-1",
+                  onScroll,
+                  children: [
+                    clearable && value ? /* @__PURE__ */ jsx(CommandItem, { value: "", "data-testid": optionTestId("none"), onSelect: clear, children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: clearLabel ?? t("dataEntry.searchSelect.clear") }) }) : null,
+                    grouped.map((group) => {
+                      const rows = group.items.map(({ option, index }) => /* @__PURE__ */ jsxs(
+                        CommandItem,
+                        {
+                          id: optionDomId(option.value),
+                          role: "option",
+                          value: option.value,
+                          "data-testid": optionTestId(option.value),
+                          "aria-selected": activeIndex === index,
+                          disabled: option.disabled,
+                          className: activeIndex === index ? "bg-accent text-accent-foreground" : void 0,
+                          onMouseEnter: () => setActiveIndex(index),
+                          onSelect: () => select(option),
+                          children: [
+                            renderOption ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                              /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: option.label }),
+                              option.sublabel ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: option.sublabel }) : null
+                            ] }),
+                            value === option.value ? /* @__PURE__ */ jsx(Check, { className: "text-primary size-4 shrink-0", "aria-hidden": "true" }) : null
+                          ]
+                        },
+                        option.value
+                      ));
+                      return group.heading ? /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: rows }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: rows }, "__ungrouped");
+                    }),
+                    loading ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2 px-2 py-3 text-sm", children: [
+                      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+                      loadingMessage ?? t("dataEntry.searchSelect.loading")
+                    ] }) : null,
+                    !loading && loaded.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-2 py-6 text-center text-sm", children: emptyMessage ?? t("dataEntry.searchSelect.empty") }) : null
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function isDataSelect(props) {
+  return "options" in props || "loadOptions" in props;
+}
+function Select(props) {
+  if (isDataSelect(props)) {
+    return /* @__PURE__ */ jsx(DataSelect, { ...props });
+  }
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup(props) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue(props) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+var SelectTrigger = React.forwardRef(({ className, children, size = "md", ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "select-trigger",
+    "data-size": size,
+    className: cn(
+      controlTriggerClass,
+      "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-fit gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    "data-slot": "select-scroll-up-button",
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    "data-slot": "select-scroll-down-button",
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    "data-slot": "select-content",
+    className: cn(
+      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+      position === "popper" && "translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          "data-slot": "select-viewport",
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    "data-slot": "select-label",
+    className: cn("px-2 py-1.5 text-sm font-medium", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Item,
+  {
+    ref,
+    "data-slot": "select-item",
+    className: cn(
+      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "select-separator",
+    className: cn("bg-border -mx-1 my-1 h-px", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function groupDataOptions(options) {
+  const order = [];
+  const buckets = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const key = option.group ?? "";
+    if (!buckets.has(key)) {
+      buckets.set(key, []);
+      order.push(key);
+    }
+    buckets.get(key).push(option);
+  }
+  return order.map((key) => ({ heading: key || void 0, items: buckets.get(key) ?? [] }));
+}
+function DataSelect({
+  options = [],
+  loadOptions,
+  showSearch,
+  value = "",
+  onValueChange,
+  renderOption,
+  selectedLabel,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  loadingMessage,
+  clearLabel,
+  clearable,
+  disabled,
+  name,
+  id,
+  className,
+  "data-testid": dataTestId
+}) {
+  const searchable = showSearch ?? Boolean(loadOptions);
+  if (searchable) {
+    return /* @__PURE__ */ jsx(
+      SearchSelect,
+      {
+        value,
+        onValueChange,
+        options,
+        loadOptions,
+        renderOption,
+        selectedLabel,
+        placeholder,
+        searchPlaceholder,
+        emptyMessage,
+        loadingMessage,
+        clearLabel,
+        clearable,
+        disabled,
+        name,
+        id,
+        className,
+        "data-testid": dataTestId
+      }
+    );
+  }
+  const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
+  const renderItem = (option) => /* @__PURE__ */ jsx(
+    SelectItem,
+    {
+      value: option.value,
+      disabled: option.disabled,
+      "data-testid": optionTestId(option.value),
+      children: renderOption ? renderOption(option) : option.label
+    },
+    option.value
+  );
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Root,
+    {
+      "data-slot": "select",
+      value: value || void 0,
+      onValueChange: (next) => onValueChange?.(
+        next,
+        options.find((option) => option.value === next)
+      ),
+      disabled,
+      name,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id, "data-testid": dataTestId, className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: groupDataOptions(options).map(
+          (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
+            /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
+            group.items.map(renderItem)
+          ] }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: group.items.map(renderItem) }, "__ungrouped")
+        ) })
+      ]
+    }
+  );
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/{chunk-JBHXILI4.js → chunk-O6DQZYNI.js}

@@ -1,15 +1,16 @@
-import { Inline, densityClass } from './chunk-TILFZBTE.js';
+import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
+import { Flex, densityClass } from './chunk-INIIF7F7.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-4MMIMZMK.js';
 import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass } from './chunk-IBK5D2Q6.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Layers, Layers2, ArrowUp, ArrowDown, ChevronsUpDown, MoreHorizontal } from 'lucide-react';
 
 function EmptyState({ icon: Icon, title, description, action, className }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn("ui-empty-state", className), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", role: "status", className: cn("ui-empty-state", className), children: [
     Icon && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-6", "aria-hidden": "true" }) }),
     /* @__PURE__ */ jsx("h3", { className: "ui-empty-state-title", children: title }),
     description && /* @__PURE__ */ jsx("p", { className: "ui-empty-state-description", children: description }),
@@ -139,14 +140,10 @@ DataTable.SelectAll = function DataTableSelectAll() {
   const { t } = useTranslation();
   if (!selectable) return null;
   return /* @__PURE__ */ jsx(
-    "input",
+    Checkbox,
     {
-      type: "checkbox",
-      checked: allSelected,
-      ref: (el) => {
-        if (el) el.indeterminate = someSelected;
-      },
-      onChange: toggleSelectAll,
+      checked: allSelected ? true : someSelected ? "indeterminate" : false,
+      onCheckedChange: toggleSelectAll,
       "aria-label": t("dataTable.selectAll")
     }
   );
@@ -190,7 +187,7 @@ DataTable.DensityToggle = function DataTableDensityToggle() {
         setDensity(next);
       },
       "aria-label": t("dataTable.densitySwitch", { density: nextLabel }),
-      children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", children: [
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
         /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
         density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")
       ] })
@@ -227,62 +224,84 @@ DataTable.Content = function DataTableContent() {
       onSortChange(void 0);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", "aria-busy": loading, children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
       selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
-      columns.map((col) => /* @__PURE__ */ jsx(
-        TableHead,
-        {
-          "data-empty": !col.header || void 0,
-          className: cn(
-            col.width,
-            col.align === "right" && "text-right",
-            col.align === "center" && "text-center",
-            col.hiddenOnMobile && "hidden md:table-cell",
-            col.sortable && onSortChange && "cursor-pointer select-none"
-          ),
-          onClick: () => {
-            onHeaderClick(col);
-          },
-          children: /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
-            col.header,
-            col.sortable && onSortChange && (sort?.key === col.key ? sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
-              ChevronsUpDown,
+      columns.map((col) => {
+        const isSortable = !!col.sortable && !!onSortChange;
+        const isActiveSort = isSortable && sort?.key === col.key;
+        const sortIndicator = isSortable ? isActiveSort ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
+        const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+          col.header,
+          sortIndicator
+        ] });
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            "data-empty": !col.header || void 0,
+            "aria-sort": isSortable ? isActiveSort ? sort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+            className: cn(
+              col.width,
+              col.align === "right" && "text-right",
+              col.align === "center" && "text-center",
+              col.hiddenOnMobile && "hidden md:table-cell",
+              isSortable && "select-none"
+            ),
+            children: isSortable ? /* @__PURE__ */ jsx(
+              "button",
               {
-                className: "text-muted-foreground size-3",
-                "aria-hidden": "true"
+                type: "button",
+                className: "ui-data-table-sort-button focus-visible:ring-ring rounded-sm focus-visible:ring-2",
+                onClick: () => {
+                  onHeaderClick(col);
+                },
+                children: label
               }
-            ))
-          ] })
-        },
-        col.key
-      ))
+            ) : label
+          },
+          col.key
+        );
+      })
     ] }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "h-32 text-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataTable.loading") }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") }) }) }) : data.map((row) => {
+    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "h-32 text-center", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataTable.loading") }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        colSpan: emptyColSpan,
+        className: "ui-data-table-empty",
+        "aria-live": "polite",
+        children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
+      }
+    ) }) : data.map((row) => {
       const id = getRowId(row);
       const isSelected = selected.has(id);
+      const isInteractiveTarget = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem]");
       return /* @__PURE__ */ jsxs(
         TableRow,
         {
           "data-state": isSelected ? "selected" : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
           onClick: (e) => {
             const target = e.target;
-            if (target.closest("button, a, input, select, textarea, [role=menuitem]"))
-              return;
+            if (isInteractiveTarget(target)) return;
             onRowClick?.(row);
           },
+          onKeyDown: onRowClick ? (e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            if (e.target !== e.currentTarget) return;
+            e.preventDefault();
+            onRowClick?.(row);
+          } : void 0,
           className: cn(
             rowPadding,
-            onRowClick && "hover:bg-muted/50 cursor-pointer",
+            onRowClick && "hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
             isSelected && "bg-muted/30"
           ),
           children: [
             selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
-              "input",
+              Checkbox,
               {
-                type: "checkbox",
                 checked: isSelected,
-                onChange: () => {
+                onCheckedChange: () => {
                   toggleSelect(id);
                 },
                 "aria-label": t("dataTable.selectRow", { id }),

package/dist/{chunk-O2OUNXV4.js → chunk-P5KPCT6R.js}

@@ -6,14 +6,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 var cardVariants = cva("group/card border", {
   variants: {
     size: {
-      default: "",
+      md: "",
       compact: ""
     }
   },
-  defaultVariants: { size: "default" }
+  defaultVariants: { size: "md" }
 });
 var Card = React.forwardRef(
-  ({ className, size = "default", accent, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", accent, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,