@knkcs/anker 0.0.1

package/dist/components/index.js

@@ -0,0 +1,982 @@
+import { Skeleton } from '../chunk-FGKGX4UF.js';
+import { Tooltip } from '../chunk-QSCNXHMU.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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React2, { createContext as createContext$1, Children, useCallback, useContext } from 'react';
+import { Ellipsis, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, X, ChevronDown, Check } from 'lucide-react';
+import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+
+var Card = ({
+  ref,
+  maxW = "full",
+  title,
+  header,
+  footer,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Card$1.Root,
+    {
+      ref,
+      bg: "bg-surface",
+      w: "full",
+      height: "full",
+      maxW,
+      margin: "0 auto",
+      overflow: "hidden",
+      ...props,
+      children: [
+        (header || title) && /* @__PURE__ */ jsx(Card$1.Header, { children: header ?? /* @__PURE__ */ jsx(Heading, { size: "md", children: title }) }),
+        /* @__PURE__ */ jsx(Card$1.Body, { overflow: "hidden", children }),
+        footer && /* @__PURE__ */ jsx(Card$1.Footer, { children: footer })
+      ]
+    }
+  );
+};
+Card.displayName = "Card";
+var CardList = ({
+  children,
+  headers,
+  hasComponentLeft,
+  hasMenu,
+  columnCount = 12,
+  emptyState
+}) => {
+  const colSpan = Math.floor(columnCount / headers.length);
+  const isEmpty = Children.count(children) === 0;
+  return /* @__PURE__ */ jsxs(Box, { role: "grid", "aria-colcount": headers.length, children: [
+    /* @__PURE__ */ jsxs(Flex, { pb: 2, px: hasComponentLeft ? 0 : 6, children: [
+      hasComponentLeft && /* @__PURE__ */ jsx(Box, { minWidth: 75, px: 6 }),
+      /* @__PURE__ */ jsx(
+        Grid,
+        {
+          w: "100%",
+          templateRows: "repeat(1, 1fr)",
+          templateColumns: `repeat(${columnCount}, 1fr)`,
+          gap: 4,
+          fontWeight: "semibold",
+          color: "muted",
+          children: headers.map((header) => /* @__PURE__ */ jsx(GridItem, { colSpan, role: "columnheader", children: header }, header))
+        }
+      ),
+      hasMenu && /* @__PURE__ */ jsx(Box, { minWidth: "80px", px: 6 })
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "3", children: isEmpty && emptyState ? emptyState : children })
+  ] });
+};
+CardList.displayName = "CardList";
+var CardListData = ({
+  children,
+  ...restProps
+}) => {
+  const textContent = typeof children === "string" || typeof children === "number" ? String(children) : null;
+  return /* @__PURE__ */ jsx(Tooltip, { content: textContent ?? "", disabled: !textContent, children: /* @__PURE__ */ jsx(Text, { lineClamp: 1, color: "muted", ...restProps, children }) });
+};
+CardListData.displayName = "CardListData";
+var CardListItem = ({
+  isActive,
+  handleItemClick,
+  handleItemDoubleClick,
+  menuItems,
+  componentLeft,
+  children,
+  columnCount = 12
+}) => {
+  const colSpan = Math.floor(columnCount / Children.count(children));
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      role: "row",
+      boxShadow: isActive ? "0 0 0 2px var(--chakra-colors-accent)" : "sm",
+      bg: "bg-surface",
+      borderRadius: "lg",
+      alignItems: "stretch",
+      overflow: "hidden",
+      transition: "all 200ms ease",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            width: "100%",
+            transition: "all 200ms ease",
+            _hover: { bg: "bg-subtle", cursor: "pointer" },
+            alignItems: "stretch",
+            overflow: "hidden",
+            onClick: handleItemClick,
+            onDoubleClick: handleItemDoubleClick,
+            children: [
+              componentLeft && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  width: 75,
+                  px: 6,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  children: componentLeft
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Grid,
+                {
+                  px: componentLeft === void 0 ? 6 : 0,
+                  py: 4,
+                  width: "100%",
+                  templateRows: "repeat(1, 1fr)",
+                  templateColumns: `repeat(${columnCount}, 1fr)`,
+                  gap: 4,
+                  children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(
+                    GridItem,
+                    {
+                      colSpan,
+                      display: "flex",
+                      alignItems: "center",
+                      children: child
+                    },
+                    index
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        menuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [
+          /* @__PURE__ */ jsx(
+            Menu.Trigger,
+            {
+              width: "80px",
+              px: 6,
+              display: "flex",
+              bg: "accent",
+              color: "on-accent",
+              alignItems: "center",
+              justifyContent: "center",
+              _hover: { opacity: 0.9 },
+              children: /* @__PURE__ */ jsx(Ellipsis, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: menuItems.map((menuItem) => /* @__PURE__ */ jsxs(
+            Menu.Item,
+            {
+              onClick: menuItem.onClick,
+              color: menuItem.color,
+              value: menuItem.value ?? menuItem.label,
+              children: [
+                menuItem.icon,
+                menuItem.label
+              ]
+            },
+            menuItem.label
+          )) }) }) })
+        ] })
+      ]
+    }
+  );
+};
+CardListItem.displayName = "CardListItem";
+var Pagination = (props) => {
+  const {
+    page,
+    total,
+    pageSize = 10,
+    onPageChange,
+    maxVisiblePages = 5,
+    previousLabel = "Previous page",
+    nextLabel = "Next page"
+  } = 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: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        "aria-label": previousLabel,
+        disabled: currentPage <= 1,
+        onClick: () => onPageChange(currentPage - 1),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+      }
+    ),
+    pages.map(
+      (p) => p === "ellipsis-start" || p === "ellipsis-end" ? /* @__PURE__ */ jsx(Text, { px: 2, color: "muted", fontSize: "sm", children: "\u2026" }, p) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: p === currentPage ? "solid" : "ghost",
+          colorPalette: p === currentPage ? "primary" : void 0,
+          size: "sm",
+          minW: "36px",
+          onClick: () => onPageChange(p),
+          "aria-current": p === currentPage ? "page" : void 0,
+          children: p
+        },
+        p
+      )
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        "aria-label": nextLabel,
+        disabled: currentPage >= totalPages,
+        onClick: () => onPageChange(currentPage + 1),
+        children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+      }
+    )
+  ] });
+};
+Pagination.displayName = "Pagination";
+function getVisiblePages(current, total, max) {
+  if (total <= max) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  const half = Math.floor((max - 2) / 2);
+  let start = Math.max(2, current - half);
+  let end = Math.min(total - 1, current + half);
+  if (current - half <= 2) {
+    end = Math.min(total - 1, max - 1);
+  }
+  if (current + half >= total - 1) {
+    start = Math.max(2, total - max + 2);
+  }
+  pages.push(1);
+  if (start > 2) pages.push("ellipsis-start");
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (end < total - 1) pages.push("ellipsis-end");
+  pages.push(total);
+  return pages;
+}
+var LOADING_ROW_COUNT = 5;
+function DataTableInner(props) {
+  const {
+    columns,
+    data,
+    selectable = false,
+    rowSelection,
+    onRowSelectionChange,
+    sorting,
+    onSortingChange,
+    onRowClick,
+    loading = false,
+    emptyState,
+    total,
+    page,
+    pageSize,
+    onPageChange,
+    variant = "line"
+  } = 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 table = useReactTable({
+    data,
+    columns: allColumns,
+    state: {
+      ...sorting !== void 0 ? { sorting } : {},
+      ...rowSelection !== void 0 ? { rowSelection } : {}
+    },
+    onSortingChange,
+    onRowSelectionChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection: selectable,
+    manualSorting: onSortingChange !== void 0
+  });
+  const hasPagination = total !== void 0 && page !== void 0 && pageSize !== void 0 && onPageChange !== void 0;
+  const isEmpty = !loading && data.length === 0;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsx(Box, { overflowX: "auto", children: /* @__PURE__ */ jsxs(Table.Root, { variant, children: [
+      /* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
+        const canSort = header.column.getCanSort();
+        const sorted = header.column.getIsSorted();
+        return /* @__PURE__ */ jsx(
+          Table.ColumnHeader,
+          {
+            cursor: canSort ? "pointer" : void 0,
+            onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+            "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : canSort ? "none" : void 0,
+            userSelect: canSort ? "none" : void 0,
+            children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
+              header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ),
+              canSort && sorted === "asc" && /* @__PURE__ */ jsx(ArrowUp, { size: 14, "aria-hidden": "true" }),
+              canSort && sorted === "desc" && /* @__PURE__ */ jsx(ArrowDown, { size: 14, "aria-hidden": "true" }),
+              canSort && !sorted && /* @__PURE__ */ jsx(ArrowUpDown, { size: 14, "aria-hidden": "true" })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsxs(Table.Body, { children: [
+        loading && Array.from({ length: LOADING_ROW_COUNT }).map((_, rowIdx) => /* @__PURE__ */ jsx(Table.Row, { "aria-hidden": "true", children: allColumns.map((_2, colIdx) => /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Skeleton, { height: "4", borderRadius: "sm" }) }, `loading-cell-${String(colIdx)}`)) }, `loading-${String(rowIdx)}`)),
+        !loading && table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+          Table.Row,
+          {
+            "data-selected": row.getIsSelected() || void 0,
+            cursor: onRowClick ? "pointer" : void 0,
+            onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Cell, { children: flexRender(
+              cell.column.columnDef.cell,
+              cell.getContext()
+            ) }, cell.id))
+          },
+          row.id
+        )),
+        isEmpty && /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(
+          Table.Cell,
+          {
+            colSpan: allColumns.length,
+            textAlign: "center",
+            py: 8,
+            children: emptyState ?? /* @__PURE__ */ jsx(Text, { color: "muted", fontSize: "sm", children: "No data available" })
+          }
+        ) })
+      ] })
+    ] }) }),
+    hasPagination && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page,
+        total,
+        pageSize,
+        onPageChange
+      }
+    ) })
+  ] });
+}
+var DataTable = DataTableInner;
+DataTable.displayName = "DataTable";
+var DrawerRoot = ({
+  children,
+  title,
+  footerText,
+  saveLabel = "Save",
+  closeLabel = "Close",
+  saveButtonDisabled = false,
+  loading = false,
+  additionalButtons,
+  onSave,
+  open,
+  onClose,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    Drawer.Root,
+    {
+      ...rest,
+      open,
+      onOpenChange: (details) => {
+        if (!details.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Portal, { children: [
+        /* @__PURE__ */ jsx(Drawer.Backdrop, {}),
+        /* @__PURE__ */ jsx(Drawer.Positioner, { children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+          /* @__PURE__ */ jsx(Drawer.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              position: "absolute",
+              top: 2,
+              insetInlineEnd: 2,
+              "aria-label": closeLabel,
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Drawer.Header,
+            {
+              bg: "bg-surface",
+              borderBottom: "1px solid",
+              borderColor: "border",
+              children: /* @__PURE__ */ jsx(Drawer.Title, { children: title })
+            }
+          ),
+          /* @__PURE__ */ jsx(Drawer.Body, { children }),
+          /* @__PURE__ */ jsxs(
+            Drawer.Footer,
+            {
+              fontSize: "sm",
+              bg: "bg-subtle",
+              borderTop: "1px solid",
+              borderColor: "border",
+              children: [
+                footerText,
+                /* @__PURE__ */ jsx(Spacer, {}),
+                /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+                  additionalButtons,
+                  onSave && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "solid",
+                      colorPalette: "primary",
+                      onClick: onSave,
+                      disabled: saveButtonDisabled || loading,
+                      loading,
+                      children: saveLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+};
+DrawerRoot.displayName = "DrawerRoot";
+var FactBox = (props) => {
+  const {
+    name,
+    actions,
+    collapsible = true,
+    collapseLabel = "Collapse",
+    expandLabel = "Expand",
+    ...rest
+  } = props;
+  const [show, setShow] = React2.useState(true);
+  const handleToggle = () => {
+    setShow(!show);
+  };
+  return /* @__PURE__ */ jsxs(Box, { w: "full", children: [
+    collapsible ? /* @__PURE__ */ jsx(
+      Flex,
+      {
+        flexDirection: "column",
+        mx: "auto",
+        borderBottom: "1px solid",
+        borderColor: "border",
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: { md: "flex" },
+            alignItems: { md: "center" },
+            justifyContent: { md: "space-between" },
+            children: [
+              /* @__PURE__ */ jsx(Box, { minW: 0, flex: "1 1 0%", children: /* @__PURE__ */ jsxs(HStack, { children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    "aria-label": show ? collapseLabel : expandLabel,
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      handleToggle();
+                    },
+                    children: show ? /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+                  }
+                ),
+                typeof name === "string" ? /* @__PURE__ */ jsx(Text, { children: name }) : name
+              ] }) }),
+              actions ? /* @__PURE__ */ jsx(Flex, { flexShrink: 0, marginInlineStart: { md: 4 }, children: /* @__PURE__ */ jsx(ButtonGroup, { children: actions.map(
+                (action) => action.type === "button" ? /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    "aria-label": action.ariaLabel,
+                    size: "md",
+                    variant: "ghost",
+                    onClick: action.onClick,
+                    children: action.icon
+                  },
+                  action.id
+                ) : /* @__PURE__ */ jsxs(Menu.Root, { children: [
+                  /* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      "aria-label": action.ariaLabel,
+                      size: "md",
+                      variant: "ghost",
+                      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,
+                    {
+                      onSelect: item.onSelect,
+                      "aria-label": item.ariaLabel,
+                      value: `action-${item.id}`,
+                      children: [
+                        item.icon,
+                        item.ariaLabel
+                      ]
+                    },
+                    item.id
+                  )) }) }) })
+                ] }, action.id)
+              ) }) }) : null
+            ]
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Collapsible.Root, { open: show, children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Card, { ...rest, children: rest.children }) }) })
+  ] });
+};
+FactBox.displayName = "FactBox";
+var LabeledSwitch = ({
+  ref,
+  ...props
+}) => {
+  const { name, label, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Text, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { children: label }) }),
+    /* @__PURE__ */ jsx(Switch, { id: name, ref, ...rest })
+  ] });
+};
+LabeledSwitch.displayName = "LabeledSwitch";
+var Modal = ({
+  open,
+  onClose,
+  header,
+  children,
+  footer,
+  size = "xl",
+  closeLabel = "Close",
+  saveLabel = "Save",
+  cancelLabel = "Cancel",
+  onSave,
+  saveDisabled = false,
+  loading = false,
+  ...rest
+}) => {
+  const defaultFooter = onSave ? /* @__PURE__ */ jsxs(Flex, { gap: 3, justify: "flex-end", w: "full", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: cancelLabel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "solid",
+        colorPalette: "primary",
+        onClick: onSave,
+        disabled: saveDisabled || loading,
+        loading,
+        children: saveLabel
+      }
+    )
+  ] }) : null;
+  const footerContent = footer !== void 0 ? footer : defaultFooter;
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      ...rest,
+      open,
+      size,
+      onOpenChange: (details) => {
+        if (!details.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Portal, { children: [
+        /* @__PURE__ */ jsx(Dialog.Backdrop, {}),
+        /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+          /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+            header,
+            /* @__PURE__ */ jsx(Spacer, {}),
+            /* @__PURE__ */ jsx(Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": closeLabel, children: /* @__PURE__ */ jsx(X, { size: 16 }) }) })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(Dialog.Body, { children }),
+          footerContent && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(Dialog.Footer, { children: footerContent })
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+};
+Modal.displayName = "Modal";
+var [StepperProvider, useStepperContext] = createContext({
+  name: "StepperContext",
+  errorMessage: "useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`"
+});
+function useStepper(props) {
+  const { step, onChange } = props;
+  const [activeIndex, setIndex] = React2.useState(-1);
+  const stepsRef = React2.useRef([]);
+  const registerStep = React2.useCallback((name) => {
+    const newSteps = [...stepsRef.current];
+    if (newSteps.indexOf(name) === -1) {
+      newSteps.push(name);
+    }
+    stepsRef.current = newSteps;
+  }, []);
+  const unregisterStep = React2.useCallback((name) => {
+    stepsRef.current = stepsRef.current.filter((step2) => step2 !== name);
+  }, []);
+  const setStep = useCallback((name) => {
+    const i = stepsRef.current.indexOf(name);
+    if (i !== -1) {
+      setIndex(i);
+    }
+  }, []);
+  const nextStep = () => {
+    setIndex(activeIndex + 1);
+  };
+  const prevStep = () => {
+    setIndex(activeIndex - 1);
+  };
+  React2.useEffect(() => {
+    if (typeof step === "string") {
+      setStep(step);
+    } else if (typeof step === "number") {
+      setIndex(step);
+    } else if (activeIndex === -1) {
+      setIndex(0);
+    }
+  }, [step, activeIndex, setStep]);
+  React2.useEffect(() => {
+    onChange?.(activeIndex);
+  }, [activeIndex, onChange]);
+  const context = {
+    stepsRef,
+    activeStep: stepsRef.current[activeIndex],
+    activeIndex,
+    isFirstStep: activeIndex === 0,
+    isLastStep: activeIndex === stepsRef.current.length - 1,
+    isCompleted: activeIndex >= stepsRef.current.length,
+    setIndex,
+    setStep,
+    nextStep,
+    prevStep,
+    registerStep,
+    unregisterStep
+  };
+  return context;
+}
+function useStep(props) {
+  const { name, isActive, isCompleted } = props;
+  const { registerStep, unregisterStep, activeStep } = useStepperContext();
+  React2.useEffect(() => {
+    if (!name) {
+      return;
+    }
+    registerStep(name);
+    return () => {
+      unregisterStep(name);
+    };
+  }, [name, registerStep, unregisterStep]);
+  return {
+    isActive: name ? activeStep === name : isActive,
+    isCompleted
+  };
+}
+function useStepperPrevButton({ label = "Back" } = {}) {
+  const { isFirstStep, prevStep } = useStepperContext();
+  return {
+    disabled: isFirstStep,
+    onClick: prevStep,
+    children: label
+  };
+}
+function useStepperNextButton({
+  label = "Next",
+  submitLabel = "Submit"
+} = {}) {
+  const { isLastStep, isCompleted, nextStep } = useStepperContext();
+  return {
+    disabled: isCompleted,
+    onClick: nextStep,
+    children: isLastStep ? submitLabel : label
+  };
+}
+function getChildOfType(children, type) {
+  return React2.Children.toArray(children).find(
+    (item) => item.type === type
+  );
+}
+function getChildrenOfType(children, type) {
+  return React2.Children.toArray(children).filter(
+    (item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
+  );
+}
+var dataAttr = (condition) => condition ? "" : void 0;
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+var StylesContext = createContext$1({});
+var useStyles = () => useContext(StylesContext);
+var Stepper = ({
+  ref,
+  ...props
+}) => {
+  const { orientation, children, ...containerProps } = props;
+  return /* @__PURE__ */ jsx(StepperContainer, { ref, orientation, ...containerProps, children: /* @__PURE__ */ jsx(StepperSteps, { orientation, children }) });
+};
+var StepperContainer = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    orientation = "horizontal",
+    variant,
+    size,
+    onChange,
+    ...rest
+  } = props;
+  const context = useStepper(props);
+  const recipe = useSlotRecipe({ key: "stepper" });
+  const styles = recipe({ variant, size, orientation });
+  return /* @__PURE__ */ jsx(StylesContext.Provider, { value: styles, children: /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      ref,
+      css: styles.container,
+      ...rest,
+      className: cx("stepper", props.className),
+      children
+    }
+  ) }) });
+};
+var StepperSteps = (props) => {
+  const {
+    children,
+    orientation = "horizontal",
+    stepComponent,
+    ...rest
+  } = props;
+  const styles = useStyles();
+  const { activeIndex } = useStepperContext();
+  const isVertical = orientation === "vertical";
+  const Step = stepComponent || StepperStep;
+  const steps = getChildrenOfType(children, Step);
+  const elements = steps.reduce((memo, step, i, arr) => {
+    memo.push(
+      /* @__PURE__ */ jsx(
+        Step,
+        {
+          ...step.props,
+          icon: step.props.icon || i + 1,
+          isActive: activeIndex === i,
+          isCompleted: step.props.isCompleted || activeIndex > i
+        },
+        step.key
+      )
+    );
+    if (isVertical) {
+      memo.push(
+        /* @__PURE__ */ jsx(StepperContent, { open: activeIndex === i, children: step.props.children }, `content-${step.key}`)
+      );
+    }
+    if (i < arr.length - 1) {
+      memo.push(
+        /* @__PURE__ */ jsx(
+          StepperSeparator,
+          {
+            isActive: i < activeIndex
+          },
+          `separator-${step.key}`
+        )
+      );
+    }
+    return memo;
+  }, []);
+  const completed = getChildOfType(children, StepperCompleted);
+  const content = activeIndex >= steps.length ? completed : !isVertical ? /* @__PURE__ */ jsx(StepperContent, { children: steps[activeIndex]?.props?.children }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      chakra.div,
+      {
+        css: styles.steps,
+        ...rest,
+        className: cx("stepper__steps", props.className),
+        children: elements
+      }
+    ),
+    content
+  ] });
+};
+StepperSteps.displayName = "StepperSteps";
+var StepperContent = (props) => {
+  const { children, open = true, ...rest } = props;
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      css: styles.content,
+      ...rest,
+      className: cx("stepper__content", props.className),
+      children: /* @__PURE__ */ jsx(Collapsible.Root, { open, children: /* @__PURE__ */ jsx(Collapsible.Content, { children }) })
+    }
+  );
+};
+StepperContent.displayName = "StepperContent";
+var StepperIcon = (props) => {
+  const { icon, isActive, isCompleted, className, ...rest } = props;
+  const styles = useStyles();
+  const content = isCompleted ? /* @__PURE__ */ jsx(Check, { size: 14 }) : icon;
+  return /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      css: styles.icon,
+      ...rest,
+      className: cx("stepper__icon", className),
+      "data-active": dataAttr(isActive),
+      children: content
+    }
+  );
+};
+StepperIcon.displayName = "StepperIcon";
+var StepperStep = (props) => {
+  const { title, icon, isActive, isCompleted, ...rest } = props;
+  const step = useStep(props);
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxs(
+    chakra.div,
+    {
+      ...rest,
+      css: styles.step,
+      "data-active": dataAttr(step.isActive),
+      "data-completed": dataAttr(step.isCompleted),
+      "aria-current": step.isActive ? "step" : void 0,
+      className: cx("stepper__step", props.className),
+      children: [
+        /* @__PURE__ */ jsx(StepperIcon, { icon, isActive, isCompleted }),
+        title && /* @__PURE__ */ jsx(StepperStepTitle, { children: title })
+      ]
+    }
+  );
+};
+StepperStep.displayName = "StepperStep";
+var StepperSeparator = (props) => {
+  const { isActive, ...rest } = props;
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      ...rest,
+      "data-active": dataAttr(isActive),
+      className: cx("stepper__separator", props.className),
+      css: styles.separator
+    }
+  );
+};
+StepperSeparator.displayName = "StepperSeparator";
+var StepperStepTitle = (props) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(
+    chakra.p,
+    {
+      ...props,
+      css: styles.title,
+      className: cx("stepper__title", props.className)
+    }
+  );
+};
+StepperStepTitle.displayName = "StepperStepTitle";
+var StepperCompleted = (props) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      css: styles.completed,
+      ...props,
+      className: cx("stepper__completed", props.className)
+    }
+  );
+};
+StepperCompleted.displayName = "StepperCompleted";
+var TimelineRoot = Timeline.Root;
+TimelineRoot.displayName = "TimelineRoot";
+var TimelineItem = Timeline.Item;
+TimelineItem.displayName = "TimelineItem";
+var TimelineConnector = Timeline.Connector;
+TimelineConnector.displayName = "TimelineConnector";
+var TimelineSeparator = Timeline.Separator;
+TimelineSeparator.displayName = "TimelineSeparator";
+var TimelineIndicator = Timeline.Indicator;
+TimelineIndicator.displayName = "TimelineIndicator";
+var TimelineContent = Timeline.Content;
+TimelineContent.displayName = "TimelineContent";
+var TimelineTitle = Timeline.Title;
+TimelineTitle.displayName = "TimelineTitle";
+var TimelineDescription = Timeline.Description;
+TimelineDescription.displayName = "TimelineDescription";
+var TreeViewRoot = TreeView.Root;
+TreeViewRoot.displayName = "TreeViewRoot";
+var TreeViewTree = TreeView.Tree;
+TreeViewTree.displayName = "TreeViewTree";
+var TreeViewBranch = TreeView.Branch;
+TreeViewBranch.displayName = "TreeViewBranch";
+var TreeViewBranchContent = TreeView.BranchContent;
+TreeViewBranchContent.displayName = "TreeViewBranchContent";
+var TreeViewBranchControl = TreeView.BranchControl;
+TreeViewBranchControl.displayName = "TreeViewBranchControl";
+var TreeViewBranchTrigger = TreeView.BranchTrigger;
+TreeViewBranchTrigger.displayName = "TreeViewBranchTrigger";
+var TreeViewBranchText = TreeView.BranchText;
+TreeViewBranchText.displayName = "TreeViewBranchText";
+var TreeViewBranchIndicator = TreeView.BranchIndicator;
+TreeViewBranchIndicator.displayName = "TreeViewBranchIndicator";
+var TreeViewItem = TreeView.Item;
+TreeViewItem.displayName = "TreeViewItem";
+var TreeViewItemText = TreeView.ItemText;
+TreeViewItemText.displayName = "TreeViewItemText";
+var TreeViewItemIndicator = TreeView.ItemIndicator;
+TreeViewItemIndicator.displayName = "TreeViewItemIndicator";
+var TreeViewNode = TreeView.Node;
+var TreeViewLabel = TreeView.Label;
+TreeViewLabel.displayName = "TreeViewLabel";
+var Widget = ({
+  heading,
+  subHeading,
+  icon,
+  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(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Text, { fontWeight: "semibold", children: heading }),
+        /* @__PURE__ */ jsx(Box, { color: "subtle", children: icon })
+      ] }),
+      subHeading && /* @__PURE__ */ jsx(Text, { fontWeight: "medium", fontSize: "xs", color: "muted", children: subHeading })
+    ] }),
+    children
+  ] }) });
+};
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map