@knkcs/anker 0.0.3 → 0.0.5

package/dist/components/index.js

@@ -1,15 +1,101 @@
-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 as HStack$1, Checkbox, Table, Drawer, Spacer, ButtonGroup, Collapsible, Dialog, Separator, useSlotRecipe, chakra } from '@chakra-ui/react';
-export { createTreeCollection } from '@chakra-ui/react';
+import { Collapsible, Skeleton, Separator, Checkbox as Checkbox$1 } from '../chunk-TXGJ7BNX.js';
+import { formatRelativeDateTime, StatusBadge } from '../chunk-NQN6LXYU.js';
+import { Tooltip, MenuRoot, MenuTrigger, MenuContent, MenuItem, Table } from '../chunk-2QFOWHTU.js';
+import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
+import { text_input_default } from '../chunk-OU6H3KU4.js';
+import { Button, IconButton } from '../chunk-SJ6YXNZW.js';
+import { Box, Flex, HStack, Text, Heading, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
+import { X, Ellipsis, Plus, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-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 { createContext, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
+export { createTreeCollection } from '@chakra-ui/react';
+import React2, { createContext as createContext$1, Children, useState, useMemo, useRef, useEffect, useCallback, useContext } from 'react';
 import dayjs from 'dayjs';
+import { Link as Link$1 } from 'react-router-dom';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
+var BulkAction = ({
+  label,
+  icon,
+  onClick,
+  colorPalette,
+  disabled,
+  loading
+}) => /* @__PURE__ */ jsxs(
+  Button,
+  {
+    size: "sm",
+    onClick,
+    colorPalette,
+    disabled,
+    loading,
+    children: [
+      icon,
+      label
+    ]
+  }
+);
+BulkAction.displayName = "BulkActionBar.Action";
+var BulkPopoverAction = ({
+  label,
+  icon,
+  children,
+  disabled
+}) => /* @__PURE__ */ jsxs(Popover, { children: [
+  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "sm", disabled, children: [
+    icon,
+    label
+  ] }) }),
+  /* @__PURE__ */ jsx(PopoverContent, { children })
+] });
+BulkPopoverAction.displayName = "BulkActionBar.PopoverAction";
+var BulkActionBar = ({
+  selectedCount,
+  onClear,
+  visible,
+  position = "fixed",
+  children,
+  countLabel
+}) => {
+  const isVisible = visible ?? selectedCount > 0;
+  const label = countLabel ? countLabel(selectedCount) : `${selectedCount} items selected`;
+  return /* @__PURE__ */ jsx(Collapsible.Root, { open: isVisible, children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      position,
+      bottom: 0,
+      insetInline: 0,
+      zIndex: "sticky",
+      bg: "bg.surface",
+      borderTopWidth: "1px",
+      borderColor: "border",
+      shadow: "lg",
+      px: 4,
+      py: 3,
+      align: "center",
+      justify: "space-between",
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { fontWeight: "medium", fontSize: "sm", children: label }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Clear selection",
+              size: "sm",
+              variant: "ghost",
+              onClick: onClear,
+              children: /* @__PURE__ */ jsx(X, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(HStack, { gap: 2, children })
+      ]
+    }
+  ) }) });
+};
+BulkActionBar.displayName = "BulkActionBar";
+BulkActionBar.Action = BulkAction;
+BulkActionBar.PopoverAction = BulkPopoverAction;
 var Card = ({
   ref,
   maxW = "full",
@@ -190,6 +276,119 @@ var CardListItem = ({
   );
 };
 CardListItem.displayName = "CardListItem";
+function ChipPickerInner(props) {
+  const {
+    assigned,
+    available,
+    onAdd,
+    onRemove,
+    getItemId,
+    getItemLabel,
+    getItemColor,
+    addLabel = "Add",
+    emptyLabel = "None",
+    searchable = false,
+    disabled = false
+  } = props;
+  const [search, setSearch] = useState("");
+  const assignedIds = new Set(assigned.map(getItemId));
+  const unassigned = available.filter(
+    (item) => !assignedIds.has(getItemId(item))
+  );
+  const filteredUnassigned = searchable && search.trim() ? unassigned.filter(
+    (item) => getItemLabel(item).toLowerCase().includes(search.toLowerCase())
+  ) : unassigned;
+  return /* @__PURE__ */ jsxs(Flex, { wrap: "wrap", gap: 2, align: "center", children: [
+    assigned.length === 0 && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.muted", children: emptyLabel }),
+    assigned.map((item) => {
+      const id = getItemId(item);
+      const label = getItemLabel(item);
+      const color = getItemColor?.(item);
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          borderRadius: "full",
+          px: 3,
+          py: 1,
+          fontSize: "sm",
+          display: "inline-flex",
+          align: "center",
+          gap: 1,
+          bg: color ? `${color}33` : "bg.muted",
+          color: color ?? "fg.default",
+          children: [
+            /* @__PURE__ */ jsx(Text, { as: "span", lineHeight: "1", children: label }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  lineHeight: 1,
+                  padding: 0,
+                  border: "none",
+                  background: "transparent",
+                  color: "inherit"
+                },
+                "aria-label": `Remove ${label}`,
+                onClick: () => onRemove(item),
+                children: /* @__PURE__ */ jsx(X, { size: 12 })
+              }
+            )
+          ]
+        },
+        id
+      );
+    }),
+    unassigned.length > 0 && !disabled && /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": addLabel,
+          minWidth: "44px",
+          minHeight: "44px",
+          children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { portalled: true, children: /* @__PURE__ */ jsxs(PopoverBody, { children: [
+        searchable && /* @__PURE__ */ jsx(
+          text_input_default,
+          {
+            placeholder: "Search...",
+            size: "sm",
+            mb: 2,
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ),
+        filteredUnassigned.map((item) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            px: 2,
+            py: 1.5,
+            rounded: "md",
+            cursor: "pointer",
+            fontSize: "sm",
+            _hover: { bg: "bg.subtle" },
+            onClick: () => {
+              onAdd(item);
+              setSearch("");
+            },
+            children: getItemLabel(item)
+          },
+          getItemId(item)
+        )),
+        filteredUnassigned.length === 0 && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.muted", px: 2, py: 1.5, children: "No results" })
+      ] }) })
+    ] })
+  ] });
+}
+var ChipPicker = ChipPickerInner;
+ChipPicker.displayName = "ChipPicker";
 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,
@@ -257,7 +456,7 @@ var ColorSwatchCell = ({ value }) => {
   if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
   return /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
     /* @__PURE__ */ jsx(
-      Box$1,
+      Box,
       {
         width: "1rem",
         height: "1rem",
@@ -315,6 +514,81 @@ var DateCell = ({
   return /* @__PURE__ */ jsx("span", { children: formatted });
 };
 DateCell.displayName = "DateCell";
+var LinkCell = ({ to, label }) => {
+  if (to == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  return /* @__PURE__ */ jsx(Link, { color: "accent", asChild: true, children: /* @__PURE__ */ jsx(
+    Link$1,
+    {
+      to,
+      onClick: (e) => e.stopPropagation(),
+      children: label || to
+    }
+  ) });
+};
+LinkCell.displayName = "LinkCell";
+var MenuCell = ({
+  actions,
+  menuThreshold = 1,
+  menuIcon: MenuIcon = Ellipsis,
+  triggerLabel = "Actions"
+}) => {
+  if (actions.length === 0) return null;
+  const useMenu = actions.length > menuThreshold;
+  if (useMenu) {
+    return /* @__PURE__ */ jsxs(MenuRoot, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": triggerLabel,
+          size: "sm",
+          variant: "ghost",
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx(MenuIcon, { size: 16 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuContent, { children: actions.map((action) => /* @__PURE__ */ jsxs(
+        MenuItem,
+        {
+          value: action.label,
+          onClick: action.onClick,
+          disabled: action.disabled,
+          colorPalette: action.colorPalette,
+          children: [
+            action.icon && /* @__PURE__ */ jsx(action.icon, { size: 16 }),
+            action.label
+          ]
+        },
+        action.label
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(HStack, { gap: 1, onClick: (e) => e.stopPropagation(), children: actions.map(
+    (action) => action.icon ? /* @__PURE__ */ jsx(Tooltip, { content: action.label, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "aria-label": action.label,
+        size: "sm",
+        variant: "ghost",
+        colorPalette: action.colorPalette,
+        onClick: action.onClick,
+        disabled: action.disabled,
+        children: /* @__PURE__ */ jsx(action.icon, { size: 16 })
+      }
+    ) }, action.label) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "ghost",
+        colorPalette: action.colorPalette,
+        onClick: action.onClick,
+        disabled: action.disabled,
+        children: action.label
+      },
+      action.label
+    )
+  ) });
+};
+MenuCell.displayName = "MenuCell";
 var NumberCell = ({ value, locale }) => {
   if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
   const num = Number(value);
@@ -340,7 +614,7 @@ var StatusBadgeCell = ({
   if (detail) {
     return /* @__PURE__ */ jsxs(VStack, { align: "start", gap: 0.5, children: [
       badge,
-      /* @__PURE__ */ jsx(Text$1, { fontSize: "xs", color: detailColor, children: detail })
+      /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: detailColor, children: detail })
     ] });
   }
   return badge;
@@ -404,7 +678,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$1, { gap: 1, children: [
+  return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -689,7 +963,6 @@ var DrawerRoot = ({
                     {
                       size: "sm",
                       variant: "solid",
-                      colorPalette: "primary",
                       onClick: onSave,
                       disabled: saveButtonDisabled || loading,
                       loading,
@@ -734,7 +1007,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$1, { children: [
+              /* @__PURE__ */ jsx(Box, { minW: 0, flex: "1 1 0%", children: /* @__PURE__ */ jsxs(HStack, { children: [
                 /* @__PURE__ */ jsx(
                   IconButton,
                   {
@@ -795,6 +1068,199 @@ var FactBox = (props) => {
   ] });
 };
 FactBox.displayName = "FactBox";
+function InlineCreatableListInner(props) {
+  const {
+    items,
+    activeIds = [],
+    onToggle,
+    onCreate,
+    getItemId,
+    getItemLabel,
+    getItemColor,
+    variant = "wrap",
+    createPlaceholder = "New item...",
+    createLabel = "New item",
+    createIcon = /* @__PURE__ */ jsx(Plus, { size: 14 }),
+    emptyText = "No items",
+    disabled = false
+  } = props;
+  const [isCreating, setIsCreating] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (isCreating) {
+      inputRef.current?.focus();
+    }
+  }, [isCreating]);
+  const activeIdSet = new Set(activeIds);
+  const handleSubmit = async (value) => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      setIsCreating(false);
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await onCreate?.(trimmed);
+      setIsCreating(false);
+    } catch {
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit(e.target.value);
+    } else if (e.key === "Escape") {
+      setIsCreating(false);
+    }
+  };
+  const handleBlur = (e) => {
+    const value = e.target.value.trim();
+    if (value) {
+      handleSubmit(value);
+    } else {
+      setIsCreating(false);
+    }
+  };
+  const wrapItemBaseStyle = {
+    borderRadius: "6px",
+    paddingInline: "12px",
+    paddingBlock: "4px",
+    fontSize: "0.875rem",
+    cursor: "pointer",
+    transition: "all 0.15s",
+    border: "none",
+    lineHeight: 1.5
+  };
+  const listItemBaseStyle = {
+    paddingInline: "8px",
+    paddingBlock: "6px",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    transition: "all 0.15s",
+    border: "none",
+    textAlign: "start",
+    width: "100%",
+    display: "block"
+  };
+  const disabledStyle = disabled ? { opacity: 0.5, cursor: "not-allowed" } : {};
+  const renderWrapItems = () => items.map((item) => {
+    const id = getItemId(item);
+    const label = getItemLabel(item);
+    const color = getItemColor?.(item);
+    const isActive = activeIdSet.has(id);
+    let bgStyle;
+    let colorStyle;
+    if (isActive) {
+      bgStyle = color ? `${color}33` : "var(--chakra-colors-primary-subtle)";
+      colorStyle = color ?? "var(--chakra-colors-primary-fg)";
+    } else {
+      bgStyle = "var(--chakra-colors-bg-muted)";
+      colorStyle = "var(--chakra-colors-fg-default)";
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "button",
+        rounded: "md",
+        px: 3,
+        py: 1,
+        fontSize: "sm",
+        cursor: disabled ? "not-allowed" : "pointer",
+        transition: "all 0.15s",
+        opacity: disabled ? 0.5 : 1,
+        style: {
+          ...wrapItemBaseStyle,
+          ...disabledStyle,
+          background: bgStyle,
+          color: colorStyle
+        },
+        onClick: !disabled ? () => onToggle?.(id) : void 0,
+        children: label
+      },
+      id
+    );
+  });
+  const renderListItems = () => items.map((item) => {
+    const id = getItemId(item);
+    const label = getItemLabel(item);
+    const isActive = activeIdSet.has(id);
+    const bgStyle = isActive ? "var(--chakra-colors-primary-subtle)" : "transparent";
+    const colorStyle = isActive ? "var(--chakra-colors-primary-fg)" : "var(--chakra-colors-fg-default)";
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "button",
+        px: 2,
+        py: 1.5,
+        rounded: "md",
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontSize: "sm",
+        opacity: disabled ? 0.5 : 1,
+        _hover: { bg: isActive ? "primary.subtle" : "bg.subtle" },
+        style: {
+          ...listItemBaseStyle,
+          ...disabledStyle,
+          background: bgStyle,
+          color: colorStyle
+        },
+        onClick: !disabled ? () => onToggle?.(id) : void 0,
+        children: label
+      },
+      id
+    );
+  });
+  const showEmpty = items.length === 0 && !isCreating;
+  const showCreateLink = !!onCreate && !isCreating && !disabled;
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    variant === "wrap" ? /* @__PURE__ */ jsxs(Flex, { wrap: "wrap", gap: 2, children: [
+      showEmpty && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.muted", children: emptyText }),
+      renderWrapItems()
+    ] }) : /* @__PURE__ */ jsxs(Stack, { gap: 0, children: [
+      showEmpty && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.muted", px: 2, py: 1.5, children: emptyText }),
+      renderListItems()
+    ] }),
+    showCreateLink && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4px",
+          cursor: "pointer",
+          fontSize: "0.875rem",
+          color: "var(--chakra-colors-fg-muted)",
+          marginBlockStart: items.length > 0 ? "8px" : "4px",
+          border: "none",
+          background: "transparent",
+          padding: 0
+        },
+        onClick: () => setIsCreating(true),
+        children: [
+          createIcon,
+          /* @__PURE__ */ jsx("span", { children: createLabel })
+        ]
+      }
+    ),
+    isCreating && /* @__PURE__ */ jsx(Box, { mt: items.length > 0 ? 2 : 1, children: /* @__PURE__ */ jsx(
+      text_input_default,
+      {
+        ref: inputRef,
+        size: "sm",
+        placeholder: createPlaceholder,
+        disabled: isSubmitting,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur
+      }
+    ) })
+  ] });
+}
+var InlineCreatableList = InlineCreatableListInner;
+InlineCreatableList.displayName = "InlineCreatableList";
 var LabeledSwitch = ({
   ref,
   ...props
@@ -827,7 +1293,6 @@ var Modal = ({
       Button,
       {
         variant: "solid",
-        colorPalette: "primary",
         onClick: onSave,
         disabled: saveDisabled || loading,
         loading,
@@ -867,6 +1332,147 @@ var Modal = ({
   );
 };
 Modal.displayName = "Modal";
+var SelectableCardThumbnail = ({
+  height = "160px",
+  children
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    h: height,
+    overflow: "hidden",
+    bg: "bg.subtle",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children
+  }
+);
+SelectableCardThumbnail.displayName = "SelectableCard.Thumbnail";
+var SelectableCardBody = ({ children }) => /* @__PURE__ */ jsx(Box, { p: 3, children });
+SelectableCardBody.displayName = "SelectableCard.Body";
+var SelectableCardFooter = ({ children }) => /* @__PURE__ */ jsx(
+  Flex,
+  {
+    p: 3,
+    borderTopWidth: "1px",
+    borderColor: "border",
+    justify: "space-between",
+    align: "center",
+    children
+  }
+);
+SelectableCardFooter.displayName = "SelectableCard.Footer";
+var SelectableCard = ({
+  selected,
+  selectionVisible,
+  onSelect,
+  onClick,
+  disabled,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { role: "group", position: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        rounded: "lg",
+        overflow: "hidden",
+        borderWidth: "1px",
+        borderColor: "border",
+        bg: "bg.surface",
+        cursor: onClick ? "pointer" : void 0,
+        onClick: disabled ? void 0 : onClick,
+        outline: selected ? "2px solid" : void 0,
+        outlineColor: selected ? "accent" : void 0,
+        outlineOffset: selected ? "-2px" : void 0,
+        opacity: disabled ? 0.5 : void 0,
+        transition: "all 0.2s",
+        _hover: { shadow: "md" },
+        children
+      }
+    ),
+    onSelect && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        top: 2,
+        insetInlineStart: 2,
+        zIndex: 1,
+        opacity: selected || selectionVisible ? 1 : 0,
+        _groupHover: { opacity: 1 },
+        transition: "opacity 0.15s",
+        children: /* @__PURE__ */ jsx(
+          Checkbox$1,
+          {
+            checked: selected,
+            onCheckedChange: () => onSelect(),
+            onClick: (e) => e.stopPropagation(),
+            size: "sm"
+          }
+        )
+      }
+    )
+  ] });
+};
+SelectableCard.displayName = "SelectableCard";
+SelectableCard.Thumbnail = SelectableCardThumbnail;
+SelectableCard.Body = SelectableCardBody;
+SelectableCard.Footer = SelectableCardFooter;
+var SidebarSection = ({
+  label,
+  children,
+  actionIcon,
+  onAction,
+  editContent,
+  emptyText,
+  defaultEditing
+}) => {
+  const [isEditing, setEditing] = useState(defaultEditing ?? false);
+  const hasActionButton = Boolean(actionIcon && (onAction || editContent));
+  const handleActionClick = () => {
+    if (onAction) {
+      onAction();
+    } else if (editContent) {
+      setEditing((prev) => !prev);
+    }
+  };
+  const resolvedIcon = isEditing && !onAction && editContent ? /* @__PURE__ */ jsx(X, { size: 14 }) : actionIcon;
+  let content;
+  if (typeof children === "function") {
+    content = children({ isEditing, setEditing });
+  } else if (isEditing && editContent) {
+    content = editContent;
+  } else {
+    content = children;
+  }
+  const isEmpty = content === null || content === void 0 || content === "" || content === false;
+  return /* @__PURE__ */ jsxs(Box, { py: 3, children: [
+    /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: "xs",
+          fontWeight: "semibold",
+          color: "fg.muted",
+          textTransform: "uppercase",
+          letterSpacing: "wide",
+          children: label
+        }
+      ),
+      hasActionButton && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": isEditing && !onAction ? "Cancel edit" : label,
+          size: "xs",
+          variant: "ghost",
+          onClick: handleActionClick,
+          children: resolvedIcon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { py: 2, children: isEmpty && emptyText ? /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.subtle", children: emptyText }) : content })
+  ] });
+};
+SidebarSection.displayName = "SidebarSection";
 var [StepperProvider, useStepperContext] = createContext({
   name: "StepperContext",
   errorMessage: "useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`"
@@ -1200,6 +1806,149 @@ var TreeViewNode = TreeView.Node;
 TreeViewNode.displayName = "TreeViewNode";
 var TreeViewLabel = TreeView.Label;
 TreeViewLabel.displayName = "TreeViewLabel";
+function matchesAccept(file, accept) {
+  const tokens = accept.split(",").map((t) => t.trim());
+  for (const token of tokens) {
+    if (token.startsWith(".")) {
+      if (file.name.toLowerCase().endsWith(token.toLowerCase())) {
+        return true;
+      }
+    } else if (token.includes("/*")) {
+      const prefix = token.slice(0, token.indexOf("/*"));
+      if (file.type.startsWith(prefix)) {
+        return true;
+      }
+    } else {
+      if (file.type === token) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+var UploadDropZone = ({
+  onFiles,
+  onError,
+  accept,
+  multiple = true,
+  compact = false,
+  disabled = false,
+  children,
+  maxSize,
+  dragActiveText = "Release to upload",
+  dropHintText = "Drag and drop files here",
+  buttonLabel = "Browse Files"
+}) => {
+  const [isDragActive, setIsDragActive] = useState(false);
+  const inputRef = useRef(null);
+  const processFiles = (fileList) => {
+    const files = Array.from(fileList);
+    const accepted = [];
+    for (const file of files) {
+      if (maxSize !== void 0 && file.size > maxSize) {
+        onError?.({ file, reason: "size" });
+        continue;
+      }
+      if (accept && !matchesAccept(file, accept)) {
+        onError?.({ file, reason: "type" });
+        continue;
+      }
+      accepted.push(file);
+    }
+    if (accepted.length > 0) {
+      onFiles(multiple ? accepted : [accepted[0]]);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragActive(true);
+    }
+  };
+  const handleDragLeave = () => {
+    setIsDragActive(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragActive(false);
+    if (disabled) return;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      processFiles(e.dataTransfer.files);
+    }
+  };
+  const handleInputChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      processFiles(e.target.files);
+    }
+    e.target.value = "";
+  };
+  const handleBrowseClick = () => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  };
+  const defaultContent = isDragActive ? /* @__PURE__ */ jsx(Text, { color: "fg.muted", fontSize: "sm", children: dragActiveText }) : compact ? /* @__PURE__ */ jsxs(HStack, { gap: 3, align: "center", children: [
+    /* @__PURE__ */ jsx(Upload, { size: 24 }),
+    /* @__PURE__ */ jsx(Text, { color: "fg.muted", fontSize: "sm", children: dropHintText }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: handleBrowseClick,
+        disabled,
+        children: buttonLabel
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Stack, { align: "center", gap: 3, children: [
+    /* @__PURE__ */ jsx(Upload, { size: 48 }),
+    /* @__PURE__ */ jsx(Text, { color: "fg.muted", fontSize: "sm", children: dropHintText }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: handleBrowseClick,
+        disabled,
+        children: buttonLabel
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      borderStyle: "dashed",
+      borderWidth: "2px",
+      borderColor: isDragActive ? "accent" : "border",
+      bg: isDragActive ? "bg.accent-subtle" : "bg.subtle",
+      rounded: "lg",
+      textAlign: "center",
+      transition: "all 0.2s",
+      p: compact ? 3 : 6,
+      opacity: disabled ? 0.5 : 1,
+      cursor: disabled ? "not-allowed" : "default",
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            style: { display: "none" },
+            onChange: handleInputChange,
+            disabled
+          }
+        ),
+        children !== void 0 ? children : defaultContent
+      ]
+    }
+  );
+};
+UploadDropZone.displayName = "UploadDropZone";
 var Widget = ({
   heading,
   subHeading,
@@ -1219,6 +1968,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-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 };
+export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, CountCell, DataTable, DateCell, DrawerRoot, FactBox, InlineCreatableList, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, Pagination, SelectableCard, SidebarSection, 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, UploadDropZone, UrlCell, Widget, emptyCellValue, pluralize, truncateText, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map