@ai-matrx/design-system 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -0,0 +1,1299 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Badge: () => Badge,
+  BasicInput: () => BasicInput,
+  BottomSheet: () => BottomSheet,
+  BottomSheetBody: () => BottomSheetBody,
+  BottomSheetFooter: () => BottomSheetFooter,
+  BottomSheetHeader: () => BottomSheetHeader,
+  Button: () => Button,
+  DEFAULT_SCORE_THRESHOLDS: () => DEFAULT_SCORE_THRESHOLDS,
+  EditableLabel: () => EditableLabel,
+  EnterInput: () => EnterInput,
+  Input: () => Input,
+  InputWithPrefix: () => InputWithPrefix,
+  Label: () => Label,
+  OverflowToolbar: () => OverflowToolbar,
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
+  PortalContainerProvider: () => PortalContainerProvider,
+  RadixDialogModalProvider: () => RadixDialogModalProvider,
+  ScoreRing: () => ScoreRing,
+  SegmentedControl: () => SegmentedControl,
+  Separator: () => Separator,
+  Sheet: () => Sheet,
+  SheetClose: () => SheetClose,
+  SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
+  SheetFooter: () => SheetFooter,
+  SheetHeader: () => SheetHeader,
+  SheetOverlay: () => SheetOverlay,
+  SheetPortal: () => SheetPortal,
+  SheetTitle: () => SheetTitle,
+  SheetTrigger: () => SheetTrigger,
+  Skeleton: () => Skeleton,
+  TabbedBottomSheet: () => TabbedBottomSheet,
+  badgeVariants: () => badgeVariants,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  scoreAccentBgClasses: () => scoreAccentBgClasses,
+  scoreRingColorClasses: () => scoreRingColorClasses,
+  sheetVariants: () => sheetVariants,
+  usePortalContainer: () => usePortalContainer,
+  useRadixDialogModal: () => useRadixDialogModal,
+  useScrollFade: () => useScrollFade
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/badge.tsx
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/badge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/15 text-primary",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive/15 text-destructive",
+        outline: "border-border text-foreground",
+        success: "border-transparent bg-success/15 text-success",
+        warning: "border-transparent bg-warning/15 text-warning",
+        info: "border-blue-200 bg-blue-100 text-blue-800",
+        error: "border-transparent bg-red-500/15 text-red-700 dark:text-red-400",
+        neutral: "border-border bg-muted text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/bottom-sheet.tsx
+var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
+var React2 = __toESM(require("react"), 1);
+var import_vaul = require("vaul");
+
+// src/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function lucideProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function Loader2Icon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function ChevronLeftIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+}
+function MoreHorizontalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] });
+}
+function Cross2Icon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+
+// src/radix-dialog-modal-context.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RadixDialogModalContext = React.createContext(true);
+function RadixDialogModalProvider({
+  children,
+  modal
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialogModalContext.Provider, { value: modal, children });
+}
+function useRadixDialogModal() {
+  return React.useContext(RadixDialogModalContext);
+}
+
+// src/bottom-sheet.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DrawerRoot = ({
+  children,
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialogModalProvider, { modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  import_vaul.Drawer.Root,
+  {
+    modal: true,
+    shouldScaleBackground,
+    ...props,
+    children
+  }
+) });
+DrawerRoot.displayName = "DrawerRoot";
+var DrawerContentPrimitive = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul.Drawer.Content, { ...props, ref, "aria-modal": "true" }));
+DrawerContentPrimitive.displayName = "DrawerContentPrimitive";
+function BottomSheet({
+  open,
+  onOpenChange,
+  title = "Bottom Sheet",
+  size = "adaptive",
+  surface = "glass",
+  contentClassName,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerRoot, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_vaul.Drawer.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_vaul.Drawer.Overlay,
+      {
+        className: cn("fixed inset-0 z-50 bg-black/80", "fixed inset-0 z-50"),
+        style: { background: "rgba(0, 0, 0, 0.08)" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      DrawerContentPrimitive,
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex flex-col rounded-t-2xl overflow-hidden",
+          size === "full" ? "h-[92dvh]" : "min-h-[60dvh] max-h-[90dvh]",
+          surface === "solid" && "border border-b-0 border-border bg-background shadow-2xl",
+          contentClassName
+        ),
+        style: surface === "glass" ? {
+          background: "var(--matrx-glass-bg)",
+          backdropFilter: "blur(20px) saturate(180%)",
+          WebkitBackdropFilter: "blur(20px) saturate(180%)",
+          border: "1px solid var(--matrx-glass-border-color)",
+          borderBottom: "none"
+        } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_visually_hidden.VisuallyHidden, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul.Drawer.Title, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul.Drawer.Description, { children: "Bottom sheet panel." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-auto mt-3 mb-1 h-1.5 w-10 rounded-full bg-muted-foreground/30 flex-shrink-0" }),
+          children
+        ]
+      }
+    )
+  ] }) });
+}
+function BottomSheetHeader({
+  title,
+  showBack = false,
+  onBack,
+  trailing
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center px-2 pt-1 pb-2 flex-shrink-0 min-h-[44px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-w-[44px] flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: onBack,
+        className: cn(
+          "h-8 w-8 rounded-full matrx-glass-thin-border flex items-center justify-center transition-all active:scale-95",
+          showBack ? "opacity-100" : "opacity-0 pointer-events-none"
+        ),
+        "aria-hidden": !showBack,
+        tabIndex: showBack ? 0 : -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronLeftIcon, { className: "h-4 w-4 text-foreground" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[17px] font-semibold flex-1 text-center truncate", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-w-[44px] flex items-center justify-end", children: trailing })
+  ] });
+}
+function BottomSheetBody({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: cn(
+        // min-h-0 is load-bearing: without it a flex child's min-height:auto
+        // floors it at content height and the body grows instead of scrolling.
+        "min-h-0 flex-1 overflow-y-auto overscroll-contain pb-safe",
+        className
+      ),
+      children
+    }
+  );
+}
+function BottomSheetFooter({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex-shrink-0 px-4 py-3 pb-safe border-t border-white/[0.06]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        subtle: "border border-transparent bg-muted/50 text-foreground hover:border-border hover:bg-muted"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-6",
+        icon: "h-9 w-9",
+        "icon-sm": "h-7 w-7"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/editable-label.tsx
+var import_react = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function EditableLabel({
+  value,
+  onCommit,
+  commitMode = "optimistic",
+  validate,
+  emptyFallback,
+  maxLength = 120,
+  activation = "click",
+  editing: editingProp,
+  onEditingChange,
+  selectOnEdit = true,
+  placeholder,
+  ariaLabel = "Name",
+  truncate = true,
+  className,
+  displayClassName,
+  inputClassName
+}) {
+  const controlled = activation === "controlled";
+  const [internalEditing, setInternalEditing] = (0, import_react.useState)(false);
+  const editing = controlled ? !!editingProp : internalEditing;
+  const [draft, setDraft] = (0, import_react.useState)(value);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!editing) setDraft(value);
+  }, [value, editing]);
+  (0, import_react.useEffect)(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      if (selectOnEdit) inputRef.current.select();
+    }
+  }, [editing, selectOnEdit]);
+  const setEditing = (0, import_react.useCallback)(
+    (next) => {
+      if (controlled) {
+        onEditingChange?.(next);
+      } else {
+        setInternalEditing(next);
+        onEditingChange?.(next);
+      }
+    },
+    [controlled, onEditingChange]
+  );
+  const startEdit = (0, import_react.useCallback)(() => {
+    setDraft(value);
+    setError(null);
+    setEditing(true);
+  }, [value, setEditing]);
+  const cancel = (0, import_react.useCallback)(() => {
+    setDraft(value);
+    setError(null);
+    setBusy(false);
+    setEditing(false);
+  }, [value, setEditing]);
+  const commit = (0, import_react.useCallback)(() => {
+    if (busy) return;
+    const trimmed = draft.trim();
+    const next = trimmed || emptyFallback;
+    if (next === void 0) {
+      cancel();
+      return;
+    }
+    const validationError = validate?.(next) ?? null;
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+    if (next === value) {
+      setEditing(false);
+      setError(null);
+      return;
+    }
+    if (commitMode === "await") {
+      const result2 = onCommit(next);
+      if (result2 instanceof Promise) {
+        setBusy(true);
+        result2.then(() => {
+          setBusy(false);
+          setEditing(false);
+        }).catch(() => {
+          setBusy(false);
+        });
+        return;
+      }
+      setEditing(false);
+      return;
+    }
+    setEditing(false);
+    setError(null);
+    const result = onCommit(next);
+    if (result instanceof Promise) result.catch(() => {
+    });
+  }, [
+    busy,
+    draft,
+    emptyFallback,
+    validate,
+    value,
+    commitMode,
+    onCommit,
+    cancel,
+    setEditing
+  ]);
+  if (editing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: draft,
+          disabled: busy,
+          placeholder,
+          onChange: (e) => {
+            setDraft(e.target.value);
+            if (error) setError(null);
+          },
+          onBlur: commit,
+          onClick: (e) => e.stopPropagation(),
+          onDoubleClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              commit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              cancel();
+            } else if (e.key === " ") {
+              e.stopPropagation();
+            }
+          },
+          maxLength,
+          "aria-label": ariaLabel,
+          "aria-invalid": error ? true : void 0,
+          className: cn(
+            "w-full min-w-0 rounded-sm bg-transparent px-1 outline-none",
+            "text-base md:text-sm",
+            "focus:bg-background focus:ring-1 focus:ring-ring",
+            busy && "opacity-60",
+            inputClassName
+          )
+        }
+      ),
+      busy && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+    ] });
+  }
+  if (controlled) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: activation === "click" ? (e) => {
+        e.stopPropagation();
+        startEdit();
+      } : void 0,
+      onDoubleClick: activation === "doubleClick" ? (e) => {
+        e.stopPropagation();
+        startEdit();
+      } : void 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          startEdit();
+        }
+      },
+      title: activation === "doubleClick" ? "Double-click to rename" : "Click to rename",
+      "aria-label": `Rename ${ariaLabel.toLowerCase()}: ${value}`,
+      className: cn(
+        "min-w-0 max-w-full rounded-sm px-1 text-left transition-colors",
+        "hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        truncate && "block truncate",
+        className,
+        displayClassName
+      ),
+      children: value || placeholder || ""
+    }
+  );
+}
+
+// src/input.tsx
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var getVariantStyles = (variant = "default") => {
+  const baseStyles = `flex h-10 w-full border border-border bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
+    file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600
+    focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-600
+    disabled:cursor-not-allowed disabled:opacity-50
+    dark:shadow-[0px_0px_1px_1px_var(--neutral-700)]
+    transition duration-400
+    [&:-webkit-autofill]:bg-background [&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill]:[caret-color:currentColor]
+    dark:[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] dark:[&:-webkit-autofill]:[-webkit-text-fill-color:white]
+    [&:-webkit-autofill:hover]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:focus]:shadow-[0_0_0_1000px_hsl(var(--background))_inset]`;
+  switch (variant) {
+    case "destructive":
+      return `${baseStyles} bg-destructive text-destructive-foreground`;
+    case "outline":
+      return `${baseStyles} border-2`;
+    case "secondary":
+      return `${baseStyles} bg-secondary text-secondary-foreground`;
+    case "ghost":
+      return `${baseStyles} bg-transparent shadow-none`;
+    case "link":
+      return `${baseStyles} bg-transparent underline-offset-4 hover:underline`;
+    case "primary":
+      return `${baseStyles} bg-primary text-primary-foreground`;
+    default:
+      return baseStyles;
+  }
+};
+var Input = React4.forwardRef(
+  ({ className, type, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        type,
+        className: cn(getVariantStyles(variant), className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var EnterInput = React4.forwardRef(
+  ({ onEnter, ...props }, ref) => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && onEnter) {
+        e.preventDefault();
+        onEnter();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Input,
+      {
+        ...props,
+        ref,
+        onKeyDown: (e) => {
+          handleKeyDown(e);
+          if (props.onKeyDown) {
+            props.onKeyDown(e);
+          }
+        }
+      }
+    );
+  }
+);
+EnterInput.displayName = "EnterInput";
+var BasicInput = React4.forwardRef(
+  // `variant` is accepted (prop-compatible with Input) but intentionally
+  // unused — and destructured so it never leaks onto the DOM element.
+  ({ className, type, variant: _variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+BasicInput.displayName = "BasicInput";
+var InputWithPrefix = React4.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Input,
+      {
+        ref,
+        className: cn(prefix && "pl-10", className),
+        ...props
+      }
+    )
+  ] });
+});
+InputWithPrefix.displayName = "InputWithPrefix";
+
+// src/label.tsx
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/overflow-toolbar.tsx
+var import_react2 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var GAP_PX = 6;
+var TONE = {
+  default: "border border-border bg-background hover:bg-accent text-foreground",
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  destructive: "border border-destructive/40 text-destructive hover:bg-destructive/10"
+};
+function ToolbarButton({
+  action,
+  enableTooltip = false,
+  renderTooltip
+}) {
+  const tone = action.tone ?? "default";
+  const Icon = action.running ? Loader2Icon : action.icon;
+  const showLabel = !action.hideLabel || action.running && action.runningLabel;
+  const text = action.running && action.runningLabel ? action.runningLabel : action.label;
+  const className = cn(
+    "inline-flex items-center gap-1 h-7 rounded-md text-[11px] font-medium transition-colors whitespace-nowrap",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    action.hideLabel && !action.running ? "w-7 justify-center px-0" : "px-2",
+    TONE[tone]
+  );
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Icon,
+      {
+        className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
+      }
+    ),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: text })
+  ] });
+  const control = action.href && !action.disabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "a",
+    {
+      href: action.href,
+      target: action.target,
+      rel: action.target === "_blank" ? "noopener noreferrer" : void 0,
+      className,
+      "aria-label": action.label,
+      children: inner
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: action.onSelect,
+      disabled: action.disabled,
+      className,
+      "aria-label": action.label,
+      children: inner
+    }
+  );
+  if (enableTooltip && action.hideLabel && renderTooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: renderTooltip(control, action.label) });
+  }
+  return control;
+}
+function OverflowTrigger({ ariaLabel }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-haspopup": "menu",
+      title: "More actions",
+      className: cn(
+        "inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
+        "border border-border bg-background hover:bg-accent text-foreground"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+    }
+  );
+}
+function OverflowToolbar({
+  actions,
+  leading,
+  overflowAriaLabel = "More actions",
+  className,
+  renderOverflowMenu,
+  renderTooltip
+}) {
+  const visibleActions = (0, import_react2.useMemo)(
+    () => actions.filter((a) => !a.hidden),
+    [actions]
+  );
+  const containerRef = (0, import_react2.useRef)(null);
+  const ghostRef = (0, import_react2.useRef)(null);
+  const leadingRef = (0, import_react2.useRef)(null);
+  const [visibleCount, setVisibleCount] = (0, import_react2.useState)(visibleActions.length);
+  const signature = visibleActions.map(
+    (a) => `${a.id}:${a.hideLabel ? 1 : 0}:${a.running ? 1 : 0}:${a.runningLabel ?? ""}:${a.label}`
+  ).join("|");
+  (0, import_react2.useLayoutEffect)(() => {
+    const container = containerRef.current;
+    const ghost = ghostRef.current;
+    if (!container || !ghost) return void 0;
+    const compute = () => {
+      const available = container.clientWidth;
+      const n = visibleActions.length;
+      const children = Array.from(ghost.children);
+      const hasLeading = leading != null;
+      const leadingW = hasLeading ? leadingRef.current?.offsetWidth ?? 0 : 0;
+      const itemW = (i) => children[i]?.offsetWidth ?? 0;
+      const kebabW = children[n]?.offsetWidth ?? 28;
+      const base = leadingW + (hasLeading && n > 0 ? GAP_PX : 0);
+      let totalAll = base;
+      for (let i = 0; i < n; i++) totalAll += itemW(i) + (i > 0 ? GAP_PX : 0);
+      if (totalAll <= available) {
+        setVisibleCount(n);
+        return;
+      }
+      let used = base;
+      let count = 0;
+      for (let i = 0; i < n; i++) {
+        const add = itemW(i) + (count > 0 ? GAP_PX : 0);
+        if (used + add + GAP_PX + kebabW <= available) {
+          used += add;
+          count += 1;
+        } else break;
+      }
+      setVisibleCount(count);
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [signature, leading != null]);
+  const shown = visibleActions.slice(0, visibleCount);
+  const hidden = visibleActions.slice(visibleCount);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        ref: ghostRef,
+        "aria-hidden": true,
+        className: "pointer-events-none absolute left-0 top-0 flex items-center gap-1.5 opacity-0",
+        children: [
+          visibleActions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
+      leading != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ToolbarButton,
+        {
+          action: a,
+          enableTooltip: true,
+          renderTooltip
+        },
+        a.id
+      )),
+      hidden.length > 0 && renderOverflowMenu({
+        actions: hidden,
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+      })
+    ] })
+  ] });
+}
+
+// src/popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var React8 = __toESM(require("react"), 1);
+
+// src/portal-container.tsx
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PortalContainerContext = React7.createContext(
+  void 0
+);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(explicit) {
+  const injected = React7.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/popover.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React8.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        className: cn(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/score-ring.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DEFAULT_SCORE_THRESHOLDS = {
+  good: 75,
+  warning: 50
+};
+function scoreRingColorClasses(pct, thresholds = DEFAULT_SCORE_THRESHOLDS) {
+  if (pct === null) return "text-muted-foreground";
+  if (pct >= thresholds.good) return "text-green-500";
+  if (pct >= thresholds.warning) return "text-orange-500";
+  return "text-red-500";
+}
+function scoreAccentBgClasses(pct, thresholds = DEFAULT_SCORE_THRESHOLDS) {
+  if (pct === null) return "bg-muted-foreground/30";
+  if (pct >= thresholds.good) return "bg-green-500";
+  if (pct >= thresholds.warning) return "bg-orange-500";
+  return "bg-red-500";
+}
+function ScoreRing({
+  pct,
+  size = 112,
+  strokeWidth = 8,
+  label,
+  valueClassName,
+  className,
+  thresholds = DEFAULT_SCORE_THRESHOLDS,
+  suffix = "%"
+}) {
+  const radius = 50 - strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+  const boundedPct = pct === null ? 0 : Math.max(0, Math.min(100, pct));
+  const dashOffset = circumference * (1 - boundedPct / 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex shrink-0 items-center justify-center",
+        className
+      ),
+      style: { width: size, height: size },
+      role: "img",
+      "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: radius,
+              className: "stroke-muted",
+              strokeWidth,
+              fill: "none"
+            }
+          ),
+          pct !== null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: radius,
+              className: cn(
+                "transition-[stroke-dashoffset] duration-700 ease-out",
+                scoreRingColorClasses(pct, thresholds)
+              ),
+              stroke: "currentColor",
+              strokeWidth,
+              strokeLinecap: "round",
+              fill: "none",
+              strokeDasharray: circumference,
+              strokeDashoffset: dashOffset
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: cn(
+                "font-bold tabular-nums text-foreground",
+                valueClassName ?? "text-2xl"
+              ),
+              children: pct === null ? "\u2014" : `${pct}${suffix}`
+            }
+          ),
+          label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/segmented-control.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SegmentedControl({
+  value,
+  onValueChange,
+  data,
+  name: _name,
+  className,
+  fullWidth = false,
+  size = "md"
+}) {
+  const sizeClasses = {
+    sm: "h-7 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-10 text-base"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: cn(
+        "inline-flex p-0.5 bg-muted rounded-md",
+        fullWidth && "w-full",
+        className
+      ),
+      role: "tablist",
+      children: data.map((option) => {
+        const isActive = value === option.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            disabled: option.disabled,
+            onClick: () => onValueChange(option.value),
+            className: cn(
+              "relative flex items-center justify-center rounded-[0.2rem] px-3 py-1.5 transition-all",
+              sizeClasses[size],
+              fullWidth && "flex-1",
+              isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+              option.disabled && "opacity-50 cursor-not-allowed"
+            ),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+// src/separator.tsx
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Separator = React9.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/sheet.tsx
+var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react_tree = require("@ai-matrx/kit/react-tree");
+var import_class_variance_authority3 = require("class-variance-authority");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SheetContentBase = React10.forwardRef(({ ...props }, ref) => {
+  const isModal = useRadixDialogModal();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    SheetPrimitive.Content,
+    {
+      ...props,
+      ref,
+      "aria-modal": isModal || void 0
+    }
+  );
+});
+SheetContentBase.displayName = "SheetContentBase";
+var Sheet = React10.forwardRef(({ children, ...props }, _ref) => {
+  const modal = props.modal ?? true;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetPrimitive.Root, { ...props, modal, children }) });
+});
+Sheet.displayName = "Sheet";
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = (0, import_class_variance_authority3.cva)(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        center: "inset-0 m-auto max-h-full max-w-full border rounded-lg data-[state=closed]:fade-out data-[state=open]:fade-in"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+var SheetContent = React10.forwardRef(
+  ({
+    side = "right",
+    className,
+    children,
+    hideCloseButton = false,
+    hideOverlay = false,
+    overlayClassName,
+    ...props
+  }, ref) => {
+    const hasDescription = (0, import_react_tree.treeContainsComponent)(children, SheetDescription) || (0, import_react_tree.treeContainsComponent)(children, SheetPrimitive.Description);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SheetPortal, { children: [
+      !hideOverlay && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        SheetContentBase,
+        {
+          ref,
+          className: cn(sheetVariants({ side }), className),
+          ...hasDescription ? {} : { "aria-describedby": void 0 },
+          ...props,
+          children: [
+            !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Cross2Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sr-only", children: "Close" })
+            ] }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+// src/skeleton.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-primary/10", className),
+      ...props
+    }
+  );
+}
+
+// src/tabbed-bottom-sheet.tsx
+var import_react3 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TabbedBottomSheet({
+  open,
+  onOpenChange,
+  title,
+  tabs
+}) {
+  const [selectedTabId, setSelectedTabId] = (0, import_react3.useState)(null);
+  const [wasOpen, setWasOpen] = (0, import_react3.useState)(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setSelectedTabId(null);
+  }
+  const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    BottomSheet,
+    {
+      open,
+      onOpenChange,
+      title,
+      size: "full",
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          BottomSheetHeader,
+          {
+            title: selectedTab ? selectedTab.label : title,
+            showBack: !!selectedTab,
+            onBack: () => setSelectedTabId(null)
+          }
+        ),
+        selectedTab ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BottomSheetBody, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+          const Icon = tab.icon;
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSelectedTabId(tab.id),
+              className: "flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-muted/60 active:bg-muted",
+              children: [
+                Icon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                tab.trailing,
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+              ]
+            }
+          ) }, tab.id);
+        }) }) })
+      ] })
+    }
+  );
+}
+
+// src/use-scroll-fade.ts
+var import_react4 = require("react");
+var EPSILON = 2;
+function useScrollFade() {
+  const [state, setState] = (0, import_react4.useState)({
+    top: false,
+    bottom: false
+  });
+  const nodeRef = (0, import_react4.useRef)(null);
+  const cleanupRef = (0, import_react4.useRef)(null);
+  const measure = (0, import_react4.useCallback)(() => {
+    const el = nodeRef.current;
+    if (!el) return;
+    const overflowing = el.scrollHeight - el.clientHeight > EPSILON;
+    const next = {
+      top: overflowing && el.scrollTop > EPSILON,
+      bottom: overflowing && el.scrollTop + el.clientHeight < el.scrollHeight - EPSILON
+    };
+    setState(
+      (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
+    );
+  }, []);
+  const ref = (0, import_react4.useCallback)(
+    (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+      nodeRef.current = node;
+      if (!node) return;
+      node.addEventListener("scroll", measure, { passive: true });
+      const ro = new ResizeObserver(measure);
+      ro.observe(node);
+      const mo = new MutationObserver(measure);
+      mo.observe(node, { childList: true, subtree: true });
+      cleanupRef.current = () => {
+        node.removeEventListener("scroll", measure);
+        ro.disconnect();
+        mo.disconnect();
+      };
+      requestAnimationFrame(measure);
+    },
+    [measure]
+  );
+  (0, import_react4.useEffect)(() => () => cleanupRef.current?.(), []);
+  return {
+    ref,
+    state,
+    fadeProps: {
+      "data-fade-top": state.top ? "" : void 0,
+      "data-fade-bottom": state.bottom ? "" : void 0,
+      className: "matrx-scroll-fade"
+    }
+  };
+}
+//# sourceMappingURL=index.cjs.map