@knkcs/anker 0.0.1 → 0.0.2

package/dist/components/index.js

@@ -1,10 +1,12 @@
-import { Skeleton } from '../chunk-FGKGX4UF.js';
-import { Tooltip } from '../chunk-QSCNXHMU.js';
+import { HStack, Code, Box as Box$1, VStack, Text as Text$1, Link, Skeleton } from '../chunk-7UJ4QEUW.js';
+import { IconButton, formatRelativeDateTime, Button, StatusBadge } from '../chunk-GJTQLZ4O.js';
+import { Tooltip, MenuRoot, MenuTrigger, MenuContent, MenuItem } from '../chunk-NJFF6S77.js';
 import { Switch } from '../chunk-RJPEVNMJ.js';
-import { createContext, Timeline, TreeView, Card as Card$1, Heading, Box, Flex, Grid, GridItem, Text, Menu, Portal, HStack, IconButton, Button, Table, Drawer, Spacer, ButtonGroup, Collapsible, Dialog, Separator, useSlotRecipe, chakra, Checkbox } from '@chakra-ui/react';
+import { createContext, Timeline, TreeView, Card as Card$1, Heading, Box, Flex, Grid, GridItem, Text, Menu, Portal, HStack as HStack$1, Checkbox, Table, Drawer, Spacer, ButtonGroup, Collapsible, Dialog, Separator, useSlotRecipe, chakra } from '@chakra-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React2, { createContext as createContext$1, Children, useCallback, useContext } from 'react';
+import React2, { createContext as createContext$1, Children, useMemo, useCallback, useContext } from 'react';
 import { Ellipsis, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, X, ChevronDown, Check } from 'lucide-react';
+import dayjs from 'dayjs';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
 var Card = ({
@@ -24,7 +26,7 @@ var Card = ({
       w: "full",
       height: "full",
       maxW,
-      margin: "0 auto",
+      marginInline: "auto",
       overflow: "hidden",
       ...props,
       children: [
@@ -89,7 +91,7 @@ var CardListItem = ({
     Flex,
     {
       role: "row",
-      boxShadow: isActive ? "0 0 0 2px var(--chakra-colors-accent)" : "sm",
+      boxShadow: isActive ? "0 0 0 2px token(colors.accent)" : "sm",
       bg: "bg-surface",
       borderRadius: "lg",
       alignItems: "stretch",
@@ -106,6 +108,16 @@ var CardListItem = ({
             overflow: "hidden",
             onClick: handleItemClick,
             onDoubleClick: handleItemDoubleClick,
+            ...handleItemClick && {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleItemClick();
+                }
+              }
+            },
             children: [
               componentLeft && /* @__PURE__ */ jsx(
                 Box,
@@ -154,6 +166,7 @@ var CardListItem = ({
               alignItems: "center",
               justifyContent: "center",
               _hover: { opacity: 0.9 },
+              "aria-label": "Row actions",
               children: /* @__PURE__ */ jsx(Ellipsis, { size: 20 })
             }
           ),
@@ -176,6 +189,207 @@ var CardListItem = ({
   );
 };
 CardListItem.displayName = "CardListItem";
+var ActionCell = ({ actions }) => {
+  return /* @__PURE__ */ jsx(HStack, { gap: 1, children: actions.map((action) => /* @__PURE__ */ jsx(Tooltip, { content: action.label, children: action.href ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": action.label,
+      size: "sm",
+      variant: action.variant ?? "ghost",
+      colorPalette: action.colorPalette,
+      disabled: action.disabled,
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: action.href,
+          download: action.download,
+          target: action.target,
+          rel: action.target === "_blank" ? "noopener noreferrer" : void 0,
+          children: /* @__PURE__ */ jsx(action.icon, { size: 16 })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": action.label,
+      size: "sm",
+      variant: action.variant ?? "ghost",
+      colorPalette: action.colorPalette,
+      onClick: action.onClick,
+      disabled: action.disabled,
+      children: /* @__PURE__ */ jsx(action.icon, { size: 16 })
+    }
+  ) }, action.label)) });
+};
+ActionCell.displayName = "ActionCell";
+
+// src/components/data-table/cells/cell-utils.ts
+var emptyCellValue = "\u2014";
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, maxLength)}\u2026`;
+}
+function pluralize(count, singular, plural) {
+  return count === 1 ? singular : plural;
+}
+var BooleanCell = ({
+  value,
+  trueLabel = "Yes",
+  falseLabel = "No"
+}) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  return /* @__PURE__ */ jsx("span", { children: value ? trueLabel : falseLabel });
+};
+BooleanCell.displayName = "BooleanCell";
+var CodeCell = ({
+  value,
+  maxLength = 80
+}) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const display = truncateText(value, maxLength);
+  return /* @__PURE__ */ jsx(Code, { title: value, fontSize: "0.85em", children: display });
+};
+CodeCell.displayName = "CodeCell";
+var ColorSwatchCell = ({ value }) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  return /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        width: "1rem",
+        height: "1rem",
+        borderRadius: "full",
+        bg: value,
+        borderWidth: "1px",
+        borderColor: "border",
+        flexShrink: 0
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: value })
+  ] });
+};
+ColorSwatchCell.displayName = "ColorSwatchCell";
+var CountCell = ({
+  value,
+  singular,
+  plural,
+  countFn
+}) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  let count;
+  if (countFn) {
+    count = countFn(value);
+    if (!Number.isFinite(count)) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  } else if (typeof value === "number") {
+    count = value;
+  } else if (Array.isArray(value)) {
+    count = value.length;
+  } else if (typeof value === "object") {
+    count = Object.keys(value).length;
+  } else {
+    return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  }
+  return /* @__PURE__ */ jsxs("span", { children: [
+    count,
+    " ",
+    pluralize(count, singular, plural)
+  ] });
+};
+CountCell.displayName = "CountCell";
+var DateCell = ({
+  value,
+  format = "MMM D, YYYY",
+  showRelative
+}) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const parsed = dayjs(value);
+  if (!parsed.isValid()) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const formatted = parsed.format(format);
+  if (showRelative) {
+    const relative = formatRelativeDateTime(value);
+    return /* @__PURE__ */ jsx(Tooltip, { content: formatted, children: /* @__PURE__ */ jsx("span", { children: relative }) });
+  }
+  return /* @__PURE__ */ jsx("span", { children: formatted });
+};
+DateCell.displayName = "DateCell";
+var NumberCell = ({ value, locale }) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const num = Number(value);
+  const display = Number.isNaN(num) ? String(value) : num.toLocaleString(locale);
+  return /* @__PURE__ */ jsx("span", { children: display });
+};
+NumberCell.displayName = "NumberCell";
+var SlugCell = ({ value }) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  return /* @__PURE__ */ jsx(Code, { children: value });
+};
+SlugCell.displayName = "SlugCell";
+var StatusBadgeCell = ({
+  value,
+  colorMap,
+  fallbackColor = "gray",
+  detail,
+  detailColor = "fg.error"
+}) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const color = colorMap?.[value] ?? fallbackColor;
+  const badge = /* @__PURE__ */ jsx(StatusBadge, { label: value, color });
+  if (detail) {
+    return /* @__PURE__ */ jsxs(VStack, { align: "start", gap: 0.5, children: [
+      badge,
+      /* @__PURE__ */ jsx(Text$1, { fontSize: "xs", color: detailColor, children: detail })
+    ] });
+  }
+  return badge;
+};
+StatusBadgeCell.displayName = "StatusBadgeCell";
+var SwitchCell = ({
+  checked,
+  onChange,
+  disabled,
+  colorPalette = "green",
+  label
+}) => {
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      checked,
+      onCheckedChange: (details) => onChange(!!details.checked),
+      disabled,
+      colorPalette,
+      "aria-label": label,
+      onClick: (e) => e.stopPropagation()
+    }
+  );
+};
+SwitchCell.displayName = "SwitchCell";
+var TruncatedTextCell = ({
+  value,
+  maxLength
+}) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const isTruncated = maxLength != null && value.length > maxLength;
+  const display = isTruncated ? truncateText(value, maxLength) : value;
+  return /* @__PURE__ */ jsx("span", { title: isTruncated ? value : void 0, children: display });
+};
+TruncatedTextCell.displayName = "TruncatedTextCell";
+var UrlCell = ({ value, label }) => {
+  if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: value,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: value,
+      color: "accent",
+      children: label || value
+    }
+  );
+};
+UrlCell.displayName = "UrlCell";
 var Pagination = (props) => {
   const {
     page,
@@ -189,7 +403,7 @@ var Pagination = (props) => {
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = Math.min(Math.max(1, page), totalPages);
   const pages = getVisiblePages(currentPage, totalPages, maxVisiblePages);
-  return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
+  return /* @__PURE__ */ jsxs(HStack$1, { gap: 1, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -270,40 +484,47 @@ function DataTableInner(props) {
     page,
     pageSize,
     onPageChange,
-    variant = "line"
+    variant = "line",
+    getRowId
   } = props;
-  const selectionColumn = {
-    id: "_select",
-    header: ({ table: table2 }) => /* @__PURE__ */ jsxs(
-      Checkbox.Root,
-      {
-        checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
-        onCheckedChange: (details) => table2.toggleAllPageRowsSelected(!!details.checked),
-        "aria-label": "Select all rows",
-        size: "sm",
-        children: [
-          /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
-          /* @__PURE__ */ jsx(Checkbox.Control, {})
-        ]
-      }
-    ),
-    cell: ({ row }) => /* @__PURE__ */ jsxs(
-      Checkbox.Root,
-      {
-        checked: row.getIsSelected(),
-        onCheckedChange: (details) => row.toggleSelected(!!details.checked),
-        "aria-label": `Select row ${String(row.index + 1)}`,
-        size: "sm",
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
-          /* @__PURE__ */ jsx(Checkbox.Control, {})
-        ]
-      }
-    ),
-    enableSorting: false
-  };
-  const allColumns = selectable ? [selectionColumn, ...columns] : columns;
+  const selectionColumn = useMemo(
+    () => ({
+      id: "_select",
+      header: ({ table: table2 }) => /* @__PURE__ */ jsxs(
+        Checkbox.Root,
+        {
+          checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
+          onCheckedChange: (details) => table2.toggleAllPageRowsSelected(!!details.checked),
+          "aria-label": "Select all rows",
+          size: "sm",
+          children: [
+            /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
+            /* @__PURE__ */ jsx(Checkbox.Control, {})
+          ]
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsxs(
+        Checkbox.Root,
+        {
+          checked: row.getIsSelected(),
+          onCheckedChange: (details) => row.toggleSelected(!!details.checked),
+          "aria-label": `Select row ${String(row.index + 1)}`,
+          size: "sm",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
+            /* @__PURE__ */ jsx(Checkbox.Control, {})
+          ]
+        }
+      ),
+      enableSorting: false
+    }),
+    []
+  );
+  const allColumns = useMemo(
+    () => selectable ? [selectionColumn, ...columns] : columns,
+    [selectable, selectionColumn, columns]
+  );
   const table = useReactTable({
     data,
     columns: allColumns,
@@ -314,9 +535,10 @@ function DataTableInner(props) {
     onSortingChange,
     onRowSelectionChange,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    ...onSortingChange === void 0 ? { getSortedRowModel: getSortedRowModel() } : {},
     enableRowSelection: selectable,
-    manualSorting: onSortingChange !== void 0
+    manualSorting: onSortingChange !== void 0,
+    ...getRowId !== void 0 ? { getRowId } : {}
   });
   const hasPagination = total !== void 0 && page !== void 0 && pageSize !== void 0 && onPageChange !== void 0;
   const isEmpty = !loading && data.length === 0;
@@ -332,6 +554,14 @@ function DataTableInner(props) {
             onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
             "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : canSort ? "none" : void 0,
             userSelect: canSort ? "none" : void 0,
+            tabIndex: canSort ? 0 : void 0,
+            role: canSort ? "button" : void 0,
+            onKeyDown: canSort ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                header.column.getToggleSortingHandler()?.(e);
+              }
+            } : void 0,
             children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
               header.isPlaceholder ? null : flexRender(
                 header.column.columnDef.header,
@@ -353,6 +583,14 @@ function DataTableInner(props) {
             "data-selected": row.getIsSelected() || void 0,
             cursor: onRowClick ? "pointer" : void 0,
             onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            role: onRowClick ? "button" : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(row.original);
+              }
+            } : void 0,
             children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Cell, { children: flexRender(
               cell.column.columnDef.cell,
               cell.getContext()
@@ -495,7 +733,7 @@ var FactBox = (props) => {
             alignItems: { md: "center" },
             justifyContent: { md: "space-between" },
             children: [
-              /* @__PURE__ */ jsx(Box, { minW: 0, flex: "1 1 0%", children: /* @__PURE__ */ jsxs(HStack, { children: [
+              /* @__PURE__ */ jsx(Box, { minW: 0, flex: "1 1 0%", children: /* @__PURE__ */ jsxs(HStack$1, { children: [
                 /* @__PURE__ */ jsx(
                   IconButton,
                   {
@@ -522,8 +760,8 @@ var FactBox = (props) => {
                     children: action.icon
                   },
                   action.id
-                ) : /* @__PURE__ */ jsxs(Menu.Root, { children: [
-                  /* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                ) : /* @__PURE__ */ jsxs(MenuRoot, { children: [
+                  /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                     IconButton,
                     {
                       "aria-label": action.ariaLabel,
@@ -532,8 +770,8 @@ var FactBox = (props) => {
                       children: action.icon
                     }
                   ) }),
-                  /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: action.items?.map((item) => /* @__PURE__ */ jsxs(
-                    Menu.Item,
+                  /* @__PURE__ */ jsx(MenuContent, { children: action.items?.map((item) => /* @__PURE__ */ jsxs(
+                    MenuItem,
                     {
                       onSelect: item.onSelect,
                       "aria-label": item.ariaLabel,
@@ -544,7 +782,7 @@ var FactBox = (props) => {
                       ]
                     },
                     item.id
-                  )) }) }) })
+                  )) })
                 ] }, action.id)
               ) }) }) : null
             ]
@@ -743,6 +981,7 @@ var Stepper = ({
   const { orientation, children, ...containerProps } = props;
   return /* @__PURE__ */ jsx(StepperContainer, { ref, orientation, ...containerProps, children: /* @__PURE__ */ jsx(StepperSteps, { orientation, children }) });
 };
+Stepper.displayName = "Stepper";
 var StepperContainer = ({
   ref,
   ...props
@@ -769,6 +1008,7 @@ var StepperContainer = ({
     }
   ) }) });
 };
+StepperContainer.displayName = "StepperContainer";
 var StepperSteps = (props) => {
   const {
     children,
@@ -956,6 +1196,7 @@ TreeViewItemText.displayName = "TreeViewItemText";
 var TreeViewItemIndicator = TreeView.ItemIndicator;
 TreeViewItemIndicator.displayName = "TreeViewItemIndicator";
 var TreeViewNode = TreeView.Node;
+TreeViewNode.displayName = "TreeViewNode";
 var TreeViewLabel = TreeView.Label;
 TreeViewLabel.displayName = "TreeViewLabel";
 var Widget = ({
@@ -965,7 +1206,7 @@ var Widget = ({
   children
 }) => {
   return /* @__PURE__ */ jsx(Card$1.Root, { height: "100%", maxW: "auto", overflow: "hidden", bg: "bg-surface", children: /* @__PURE__ */ jsxs(Card$1.Body, { children: [
-    /* @__PURE__ */ jsxs(Box, { mb: "6", children: [
+    /* @__PURE__ */ jsxs(Box, { marginBlockEnd: "6", children: [
       /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
         /* @__PURE__ */ jsx(Text, { fontWeight: "semibold", children: heading }),
         /* @__PURE__ */ jsx(Box, { color: "subtle", children: icon })
@@ -977,6 +1218,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-export { Card, CardList, CardListData, CardListItem, DataTable, DrawerRoot, FactBox, LabeledSwitch, Modal, Pagination, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, Widget, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, BooleanCell, Card, CardList, CardListData, CardListItem, CodeCell, ColorSwatchCell, CountCell, DataTable, DateCell, DrawerRoot, FactBox, LabeledSwitch, Modal, NumberCell, Pagination, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UrlCell, Widget, emptyCellValue, pluralize, truncateText, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map