@knkcs/anker 0.0.1

package/dist/atoms/index.js

@@ -0,0 +1,845 @@
+import { Prose, Avatar } from '../chunk-YXTW5OAJ.js';
+import { Tooltip } from '../chunk-QSCNXHMU.js';
+export { SearchInput, text_input_default as TextInput } from '../chunk-PZCL4M6I.js';
+import { DataList as DataList$1, Text, Box, Icon, IconButton, Circle, useCheckboxGroup, Stack, Clipboard, Input, chakra, HStack, Button, Textarea, Flex, ButtonGroup, Heading, Table, Square, Spinner, Badge } from '@chakra-ui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronRight, ChevronDown, Pencil, Filter as Filter$1, GripVertical, X, Clipboard as Clipboard$1, Check, Link } from 'lucide-react';
+import React, { createContext, memo, useRef, useState, useCallback, useEffect, useMemo, useContext } from 'react';
+import dayjs2 from 'dayjs';
+import calendarPlugin from 'dayjs/plugin/calendar.js';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import utcPlugin from 'dayjs/plugin/utc.js';
+import { Select, chakraComponents } from 'chakra-react-select';
+export { Select as ChakraReactSelect, CreatableSelect, chakraComponents } from 'chakra-react-select';
+import { readableColor } from 'color2k';
+
+var Action = ({
+  ref,
+  cursor,
+  color,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "5px",
+      p: "15px",
+      tabIndex: 0,
+      cursor,
+      transition: "background-color 150ms, color 150ms, opacity 150ms",
+      bg: color,
+      asChild: true,
+      children: /* @__PURE__ */ jsx("button", { type: "button", ref, ...props })
+    }
+  );
+};
+Action.displayName = "Action";
+var Collapse = ({
+  ref,
+  collapseLabel = "Collapse",
+  ...props
+}) => {
+  const { collapsed, ...rest } = props;
+  return /* @__PURE__ */ jsx(Action, { ref, cursor: "pointer", "aria-label": collapseLabel, ...rest, children: /* @__PURE__ */ jsx(Icon, { color: "subtle", children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronDown, {}) }) });
+};
+Collapse.displayName = "Collapse";
+var Edit = ({
+  ref,
+  editLabel = "Edit",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Action, { ref, cursor: "pointer", "aria-label": editLabel, ...props, children: /* @__PURE__ */ jsx(Icon, { color: "subtle", asChild: true, children: /* @__PURE__ */ jsx(Pencil, {}) }) });
+};
+Edit.displayName = "Edit";
+var Filter = ({
+  ref,
+  filterLabel = "Filter",
+  ...props
+}) => {
+  const { activeFilterCount, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+    /* @__PURE__ */ jsx(IconButton, { cursor: "pointer", ref, "aria-label": filterLabel, ...rest, children: /* @__PURE__ */ jsx(Filter$1, {}) }),
+    activeFilterCount && activeFilterCount > 0 ? /* @__PURE__ */ jsx(
+      Circle,
+      {
+        size: "24px",
+        bg: "accent",
+        color: "on-accent",
+        position: "absolute",
+        top: 5,
+        insetInlineEnd: -1.5,
+        children: /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: 800, children: activeFilterCount })
+      }
+    ) : null
+  ] });
+};
+Filter.displayName = "Filter";
+var Handle = ({
+  ref,
+  handleLabel = "Drag to reorder",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Action, { ref, cursor: "grab", "aria-label": handleLabel, ...props, children: /* @__PURE__ */ jsx(Icon, { color: "subtle", asChild: true, children: /* @__PURE__ */ jsx(GripVertical, {}) }) });
+};
+Handle.displayName = "Handle";
+var Remove = ({
+  ref,
+  removeLabel = "Remove",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Action, { ref, "aria-label": removeLabel, ...props, children: /* @__PURE__ */ jsx(Icon, { color: "subtle", asChild: true, children: /* @__PURE__ */ jsx(X, {}) }) });
+};
+Remove.displayName = "Remove";
+var CheckboxCardGroup = (props) => {
+  const { children, defaultValue, value, onValueChange, ...rest } = props;
+  const group = useCheckboxGroup({
+    defaultValue,
+    value,
+    onValueChange
+  });
+  const cards = React.useMemo(
+    () => React.Children.toArray(children).filter(React.isValidElement).map((card) => {
+      return React.cloneElement(card, {
+        checkboxProps: group.getItemProps({
+          value: card.props.value
+        })
+      });
+    }),
+    [children, group]
+  );
+  return /* @__PURE__ */ jsx(Stack, { ...rest, children: cards });
+};
+CheckboxCardGroup.displayName = "CheckboxCardGroup";
+var CheckboxCard = (props) => {
+  const { checkboxProps, children, ...rest } = props;
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      cursor: "pointer",
+      css: {
+        "& .focus-visible + [data-focus]": {
+          boxShadow: "outline",
+          zIndex: 1
+        }
+      },
+      asChild: true,
+      children: /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", "aria-labelledby": id, ...checkboxProps }),
+        /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(Stack, { direction: "row", children: /* @__PURE__ */ jsx(Box, { flex: "1", id, children }) }) })
+      ] })
+    }
+  );
+};
+CheckboxCard.displayName = "CheckboxCard";
+var ClipboardButton = function ClipboardButton2({
+  ref,
+  ...props
+}) {
+  const { label = "Copy", ...rest } = props;
+  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 16 }), children: /* @__PURE__ */ jsx(Clipboard$1, { size: 16 }) }) }) }) });
+};
+ClipboardButton.displayName = "ClipboardButton";
+var ClipboardInput = function ClipboardInput2({
+  ref,
+  ...props
+}) {
+  const { inputProps, label = "Copy", ...rest } = props;
+  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsxs(Clipboard.Control, { children: [
+    /* @__PURE__ */ jsx(Clipboard.Input, { asChild: true, children: /* @__PURE__ */ jsx(Input, { readOnly: true, ...inputProps }) }),
+    /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 16 }), children: /* @__PURE__ */ jsx(Clipboard$1, { size: 16 }) }) }) })
+  ] }) });
+};
+ClipboardInput.displayName = "ClipboardInput";
+var ClipboardLink = function ClipboardLink2({
+  ref,
+  ...props
+}) {
+  const { label = "Copy Link", ...rest } = props;
+  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "xs", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 14 }), children: /* @__PURE__ */ jsx(Link, { size: 14 }) }) }) }) });
+};
+ClipboardLink.displayName = "ClipboardLink";
+dayjs2.extend(utcPlugin);
+function formatDateAndTime(date, format = "full") {
+  let template;
+  switch (format) {
+    case "day":
+      template = "DD MMM YYYY";
+      break;
+    case "weekday":
+      template = "ddd, DD MMM";
+      break;
+    case "time":
+      template = "h:mm A";
+      break;
+    case "fullWithSeconds":
+      template = "ddd, DD MMM YYYY [at] h:mm:ss A";
+      break;
+    default:
+      template = "ddd, DD MMM YYYY [at] h:mm A";
+  }
+  return dayjs2(date).format(template);
+}
+function formatMachineReadableDateTime(date, format = "full") {
+  let template;
+  switch (format) {
+    case "day":
+      template = "YYYY-MM-DD";
+      break;
+    case "weekday":
+      template = "MM-DD";
+      break;
+    case "time":
+      template = "HH:mm:ss.SSS";
+      break;
+    default:
+      template = "YYYY-MM-DDTHH:mm:ss.SSS[Z]";
+  }
+  return dayjs2(date).utc().format(template);
+}
+var formatDate = (date) => {
+  return formatDateAndTime(date, "day");
+};
+var formatTime = (date) => {
+  return formatDateAndTime(date, "time");
+};
+var formatWeekdayDate = (date) => {
+  return formatDateAndTime(date, "weekday");
+};
+dayjs2.extend(utcPlugin);
+dayjs2.extend(relativeTime);
+dayjs2.extend(calendarPlugin);
+function formatRelativeDateTime(date, baseDate = /* @__PURE__ */ new Date()) {
+  return dayjs2(date).from(baseDate);
+}
+function formatRelativeToCurrentWeekDateTime(date, baseDate = /* @__PURE__ */ new Date()) {
+  const isToday = dayjs2(date).isSame(baseDate, "day");
+  if (!isToday) {
+    return dayjs2(date).calendar(baseDate, {
+      sameElse: "DD MMM YYYY"
+    });
+  }
+  return formatRelativeDateTime(date, baseDate);
+}
+dayjs2.extend(utcPlugin);
+dayjs2.extend(relativeTime);
+dayjs2.extend(calendarPlugin);
+var RelativeDateTime = (props) => {
+  const { date, baseDate, isRelativeToCurrentWeek, ...otherProps } = props;
+  const now = /* @__PURE__ */ new Date();
+  const referenceDate = baseDate ?? now;
+  const dayjsDate = dayjs2(date);
+  const machineReadableDate = formatMachineReadableDateTime(date);
+  let relativeDate;
+  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, "day")) {
+    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);
+  } else {
+    relativeDate = formatRelativeDateTime(date, referenceDate);
+  }
+  return /* @__PURE__ */ jsx("time", { dateTime: machineReadableDate, ...otherProps, children: relativeDate });
+};
+var CommentStylesContext = createContext({});
+var useStyles = () => useContext(CommentStylesContext);
+var Comment = (props) => {
+  const {
+    avatar,
+    content,
+    children,
+    author,
+    commentedAt,
+    actions,
+    id,
+    isDeleted,
+    deletedLabel = "This comment has been deleted",
+    ...rest
+  } = props;
+  const styles = {};
+  const headerProps = {
+    author,
+    commentedAt
+  };
+  const footerProps = {
+    actions
+  };
+  return /* @__PURE__ */ jsx(chakra.div, { css: styles.container, "data-id": id, ...rest, children: /* @__PURE__ */ jsxs(CommentStylesContext.Provider, { value: styles, children: [
+    avatar && /* @__PURE__ */ jsx(AvatarSlot, { children: avatar }),
+    (content || isDeleted) && /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+        /* @__PURE__ */ jsx(CommentHeader, { ...headerProps }),
+        /* @__PURE__ */ jsx(
+          Prose,
+          {
+            css: {
+              "& p": {
+                fontSize: "inherit!important"
+              },
+              "& *:first-child": {
+                marginTop: 0
+              },
+              "& *:last-child": {
+                marginBottom: 0
+              }
+            },
+            children: isDeleted ? /* @__PURE__ */ jsx(chakra.span, { css: styles.deletedText, children: deletedLabel }) : content
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(CommentFooter, { ...footerProps })
+    ] }) }),
+    children && /* @__PURE__ */ jsx(Stack, { gap: 4, css: styles.children, children })
+  ] }) });
+};
+Comment.displayName = "Comment";
+var AvatarSlot = ({ children }) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(chakra.div, { css: styles.avatar, children });
+};
+var ContentContainer = ({ children }) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(chakra.div, { css: styles.contentContainer, children });
+};
+var CommentHeader = (props) => {
+  const { author, commentedAt } = props;
+  const shouldRender = !!author || !!commentedAt;
+  return shouldRender ? /* @__PURE__ */ jsxs(HStack, { children: [
+    author && /* @__PURE__ */ jsx(Author, { children: author.name }),
+    commentedAt && /* @__PURE__ */ jsx(RelativeDateTime, { date: commentedAt })
+  ] }) : null;
+};
+var Author = (props) => {
+  const { children } = props;
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx(chakra.span, { css: styles.field, children });
+};
+var CommentFooter = (props) => {
+  const { actions } = props;
+  return /* @__PURE__ */ jsx(HStack, { alignItems: "center", gap: 4, flexWrap: "wrap", children: actions?.map((item, key) => Object.assign({}, item, { key })) });
+};
+var CommentAction = (props) => {
+  return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xs", ...props });
+};
+var CommentReplyBox = ({
+  ref,
+  ...props
+}) => {
+  const {
+    onReply,
+    onCancel,
+    placeholder = "Write a reply...",
+    cancelLabel = "Cancel",
+    replyLabel = "Reply"
+  } = props;
+  const textBoxRef = useRef(null);
+  const mergedRef = (node) => {
+    textBoxRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [value, setValue] = useState("");
+  const handleReply = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!value || !value.trim() || value === "") {
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      await onReply?.(value);
+      setValue("");
+      setIsFocused(false);
+    } catch (e2) {
+      console.error(e2);
+    }
+    setIsSubmitting(false);
+  };
+  const handleCancel = () => {
+    setValue("");
+    setIsFocused(false);
+    onCancel?.();
+  };
+  return /* @__PURE__ */ jsx(Box, { w: "full", onFocus: () => setIsFocused(true), children: /* @__PURE__ */ jsxs("form", { onSubmit: handleReply, children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: String(value),
+        onChange: (e) => setValue(e.target.value),
+        minH: isFocused ? void 0 : "2.5rem",
+        placeholder,
+        ref: mergedRef,
+        onKeyDown: (e) => {
+          if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+            handleReply(e);
+          }
+        },
+        disabled: isSubmitting
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        mt: 2,
+        display: isFocused ? "flex" : "none",
+        justifyContent: "flex-end",
+        children: /* @__PURE__ */ jsxs(ButtonGroup, { marginInlineStart: "auto", size: "sm", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              loading: isSubmitting,
+              onClick: handleCancel,
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "solid", loading: isSubmitting, children: replyLabel })
+        ] })
+      }
+    )
+  ] }) });
+};
+CommentReplyBox.displayName = "CommentReplyBox";
+var DataList = function DataList2({
+  ref,
+  ...props
+}) {
+  const { items, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(DataList$1.Root, { ref, ...rest, children: items ? items.map((item) => /* @__PURE__ */ jsxs(DataList$1.Item, { children: [
+    /* @__PURE__ */ jsx(DataList$1.ItemLabel, { children: item.label }),
+    /* @__PURE__ */ jsx(DataList$1.ItemValue, { children: item.value })
+  ] }, String(item.label))) : children });
+};
+DataList.displayName = "DataList";
+var DataListItem = DataList$1.Item;
+DataListItem.displayName = "DataListItem";
+var DataListItemLabel = DataList$1.ItemLabel;
+DataListItemLabel.displayName = "DataListItemLabel";
+var DataListItemValue = DataList$1.ItemValue;
+DataListItemValue.displayName = "DataListItemValue";
+var datePattern = /^\d{4}-\d{2}-\d{2}$/;
+function toDateString(value) {
+  if (!value) return "";
+  if (datePattern.test(value)) return value;
+  try {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return "";
+    return date.toISOString().slice(0, 10);
+  } catch {
+    return "";
+  }
+}
+var DateInput = ({
+  ref,
+  ...props
+}) => {
+  const { value, minDate, maxDate, onChange, ...rest } = props;
+  const dateValue = value ? toDateString(value) : "";
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "date",
+      value: dateValue,
+      min: minDate,
+      max: maxDate,
+      onChange,
+      ref,
+      ...rest
+    }
+  );
+};
+DateInput.displayName = "DateInput";
+var date_input_default = DateInput;
+var EmptyState = (props) => {
+  const { header, description, icon, actions } = props;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      gap: 4,
+      p: 16,
+      borderRadius: "lg",
+      children: [
+        icon,
+        /* @__PURE__ */ jsx(Heading, { size: "lg", children: header }),
+        description && /* @__PURE__ */ jsx(Text, { color: "muted", fontSize: "sm", children: description }),
+        actions && /* @__PURE__ */ jsx(Stack, { pt: 4, gap: 2, children: actions })
+      ]
+    }
+  );
+};
+EmptyState.displayName = "EmptyState";
+var PersonaStylesContext = createContext({});
+var usePersonaStyles = () => useContext(PersonaStylesContext);
+var Persona = (props) => {
+  const { name, size = "sm", hideDetails, label, interactive } = props;
+  return /* @__PURE__ */ jsxs(PersonaContainer, { interactive, children: [
+    /* @__PURE__ */ jsx(PersonaAvatar, { name, size }),
+    !hideDetails && /* @__PURE__ */ jsx(PersonaDetails, { children: /* @__PURE__ */ jsx(PersonaLabel, { children: label || name }) })
+  ] });
+};
+Persona.displayName = "Persona";
+var PersonaContainer = ({
+  ref,
+  ...props
+}) => {
+  const { children, styles = {}, interactive, ...rest } = props;
+  return /* @__PURE__ */ jsx(PersonaStylesContext.Provider, { value: styles, children: /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      ref,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      ...interactive && {
+        cursor: "pointer",
+        borderRadius: "md",
+        transition: "background-color 150ms",
+        _hover: { bg: "bg-subtle" },
+        px: 2,
+        py: 1
+      },
+      ...rest,
+      children
+    }
+  ) });
+};
+var PersonaAvatar = ({
+  ref,
+  ...props
+}) => {
+  const { name, size, ...rest } = props;
+  return /* @__PURE__ */ jsx(Avatar, { ref, name, size, ...rest });
+};
+var PersonaDetails = ({
+  ref,
+  ...props
+}) => {
+  const { children, ...rest } = props;
+  const styles = usePersonaStyles();
+  return /* @__PURE__ */ jsx(
+    chakra.div,
+    {
+      ref,
+      display: "flex",
+      flexDirection: "column",
+      style: styles.details,
+      ...rest,
+      children
+    }
+  );
+};
+var PersonaLabel = ({
+  ref,
+  ...props
+}) => {
+  const styles = usePersonaStyles();
+  return /* @__PURE__ */ jsx(chakra.span, { ref, style: styles.label, ...props });
+};
+var BaseSingleValue = ({
+  data,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(chakraComponents.SingleValue, { data, ...props, children: /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+    data.avatar && /* @__PURE__ */ jsx(Avatar, { name: data.avatar, size: "xs" }),
+    data.color && /* @__PURE__ */ jsx(Circle, { bg: data.color, size: 5 }),
+    data.icon && data.icon,
+    /* @__PURE__ */ jsx(Text, { children: data.label })
+  ] }) });
+};
+var BaseMultiValue = ({
+  children,
+  ...props
+}) => {
+  const { data } = props;
+  return (
+    // @ts-expect-error -- strict mode: duplicate property
+    /* @__PURE__ */ jsx(chakraComponents.MultiValue, { data, ...props, children: /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+      data.avatar && /* @__PURE__ */ jsx(Avatar, { name: data.avatar, size: "xs" }),
+      data.color && /* @__PURE__ */ jsx(Circle, { bg: data.color, size: 5 }),
+      data.icon && data.icon,
+      /* @__PURE__ */ jsx(Text, { children: data.label })
+    ] }) })
+  );
+};
+var BaseSelectOption = ({
+  data,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(chakraComponents.Option, { data, ...props, children: /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+    data.avatar && /* @__PURE__ */ jsx(Avatar, { name: data.avatar, size: "xs" }),
+    data.color && /* @__PURE__ */ jsx(Circle, { bg: data.color, size: 5 }),
+    data.icon && data.icon,
+    /* @__PURE__ */ jsx(Text, { children: data.label })
+  ] }) });
+};
+var getSelectComponents = (variant, customComponents) => ({
+  ...variant === "link" ? {
+    DropdownIndicator: null,
+    IndicatorSeparator: null
+  } : {},
+  SingleValue: BaseSingleValue,
+  MultiValue: BaseMultiValue,
+  Option: BaseSelectOption,
+  ...customComponents
+});
+var BaseSelect = ({
+  ref,
+  value,
+  onChange,
+  options,
+  isMulti = false,
+  loading = false,
+  disabled = false,
+  isClearable = true,
+  placeholder,
+  menuPortalTarget = document.body,
+  variant = "outline",
+  styles,
+  ...restSelectProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...restSelectProps,
+      ref,
+      value,
+      variant,
+      onChange,
+      options,
+      isMulti,
+      isLoading: loading,
+      isDisabled: disabled,
+      isClearable,
+      placeholder,
+      menuPortalTarget,
+      styles: {
+        menuPortal: (provided) => ({
+          ...provided,
+          zIndex: 1800,
+          pointerEvents: "auto"
+        }),
+        ...styles
+      },
+      getOptionValue: (option) => option.id,
+      getOptionLabel: (option) => option.label,
+      components: getSelectComponents(
+        variant,
+        // @ts-expect-error -- strict mode: argument type
+        restSelectProps.components
+      )
+    }
+  );
+};
+BaseSelect.displayName = "BaseSelect";
+var TableMenuList = ({
+  children,
+  columns,
+  minWidth = "400px",
+  maxWidth = "600px",
+  ...props
+}) => {
+  const { options } = props;
+  const derivedColumns = useMemo(() => {
+    if (columns) return columns;
+    const firstOption = options?.[0];
+    if (!firstOption?.data) {
+      return [{ key: "label", header: "Name" }];
+    }
+    return [
+      { key: "label", header: "Name" },
+      ...Object.keys(firstOption.data).map((key) => ({
+        key,
+        header: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ")
+      }))
+    ];
+  }, [columns, options]);
+  return /* @__PURE__ */ jsx(chakraComponents.MenuList, { ...props, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      overflowX: "auto",
+      minWidth,
+      maxWidth,
+      width: "max-content",
+      children: /* @__PURE__ */ jsxs(Table.Root, { size: "sm", children: [
+        /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsx(Table.Row, { children: derivedColumns.map((col) => /* @__PURE__ */ jsx(
+          Table.ColumnHeader,
+          {
+            width: col.width,
+            whiteSpace: "nowrap",
+            children: col.header
+          },
+          col.key
+        )) }) }),
+        /* @__PURE__ */ jsx(Table.Body, { children })
+      ] })
+    }
+  ) });
+};
+TableMenuList.displayName = "TableMenuList";
+var TableOption = ({
+  data,
+  innerProps,
+  isSelected,
+  isFocused,
+  columns
+}) => {
+  const derivedColumns = useMemo(() => {
+    if (columns) return columns;
+    if (!data.data) {
+      return [{ key: "label", header: "Name" }];
+    }
+    return [
+      { key: "label", header: "Name" },
+      ...Object.keys(data.data).map((key) => ({
+        key,
+        header: key
+      }))
+    ];
+  }, [columns, data.data]);
+  const getCellValue = (col) => {
+    if (col.key === "label") {
+      return data.label;
+    }
+    if (col.key === "id") {
+      return data.id;
+    }
+    if (data.data && col.key in data.data) {
+      const value = data.data[col.key];
+      if (value === null || value === void 0) return "-";
+      return String(value);
+    }
+    return "-";
+  };
+  const { ref: _ref, ...rowProps } = innerProps;
+  return /* @__PURE__ */ jsx(
+    Table.Row,
+    {
+      ...rowProps,
+      _hover: { bg: isFocused ? "bg-muted" : "bg-subtle" },
+      cursor: "pointer",
+      _even: {
+        bg: isSelected ? "primary.subtle" : isFocused ? "bg-muted" : void 0
+      },
+      children: derivedColumns.map((col) => /* @__PURE__ */ jsx(Table.Cell, { width: col.width, whiteSpace: "nowrap", children: getCellValue(col) }, col.key))
+    }
+  );
+};
+TableOption.displayName = "TableOption";
+var createTableMenuComponents = (options) => ({
+  MenuList: (props) => /* @__PURE__ */ jsx(
+    TableMenuList,
+    {
+      ...props,
+      columns: options.columns,
+      minWidth: options.minWidth,
+      maxWidth: options.maxWidth
+    }
+  ),
+  Option: (props) => /* @__PURE__ */ jsx(TableOption, { ...props, columns: options.columns })
+});
+var Stat = (props) => {
+  const { label, value, icon, loading, ...boxProps } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      px: { base: "4", md: "6" },
+      py: { base: "5", md: "6" },
+      bg: "bg-surface",
+      borderRadius: "lg",
+      boxShadow: "sm",
+      ...boxProps,
+      children: /* @__PURE__ */ jsxs(Stack, { gap: { base: "5", md: "6" }, children: [
+        /* @__PURE__ */ jsx(Stack, { direction: "row", justify: "space-between", children: /* @__PURE__ */ jsxs(HStack, { gap: "4", children: [
+          icon && /* @__PURE__ */ jsx(Square, { size: "8", bg: "bg-accent-subtle", borderRadius: "md", children: icon }),
+          /* @__PURE__ */ jsx(Text, { fontWeight: "medium", children: label })
+        ] }) }),
+        /* @__PURE__ */ jsx(Stack, { gap: "4", children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Heading, { size: { base: "sm", md: "md" }, children: value ?? 0 }) })
+      ] })
+    }
+  );
+};
+Stat.displayName = "Stat";
+var StatusBadge = (props) => {
+  const { label, color } = props;
+  const textColor = useMemo(() => {
+    try {
+      return readableColor(color);
+    } catch {
+      return "black";
+    }
+  }, [color]);
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      bg: color,
+      color: textColor,
+      rounded: "base",
+      px: 2,
+      marginInlineStart: 1,
+      children: label
+    }
+  );
+};
+StatusBadge.displayName = "StatusBadge";
+var TextOverflow = memo((props) => {
+  const { children, ...rest } = props;
+  const textElementRef = useRef(null);
+  const [isOverflown, setIsOverflown] = useState(false);
+  const compareSize = useCallback(() => {
+    const element = textElementRef.current;
+    const compare = element ? element.scrollWidth > element.clientWidth || element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight : false;
+    setIsOverflown(compare);
+  }, []);
+  useEffect(() => {
+    compareSize();
+    const element = textElementRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver(compareSize);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [compareSize]);
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, disabled: !isOverflown, children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "div",
+      position: "relative",
+      whiteSpace: isOverflown ? "nowrap" : "normal",
+      ...rest,
+      ref: textElementRef,
+      children
+    }
+  ) });
+});
+TextOverflow.displayName = "TextOverflow";
+var TypeBadge = ({
+  name,
+  colorPalette = "gray",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      rounded: "base",
+      px: 2,
+      marginInlineStart: 1,
+      colorPalette,
+      ...rest,
+      children: name
+    }
+  );
+};
+TypeBadge.displayName = "TypeBadge";
+
+export { Action, BaseSelect, CheckboxCard, CheckboxCardGroup, ClipboardButton, ClipboardInput, ClipboardLink, Collapse, Comment, CommentAction, CommentReplyBox, DataList, DataListItem, DataListItemLabel, DataListItemValue, date_input_default as DateInput, Edit, EmptyState, Filter, Handle, Persona, PersonaAvatar, PersonaContainer, PersonaDetails, PersonaLabel, RelativeDateTime, Remove, Stat, StatusBadge, TableMenuList, TableOption, TextOverflow, TypeBadge, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime, formatTime, formatWeekdayDate };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map