@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-feedback-dialog.js

@@ -0,0 +1,275 @@
+import {
+  createDialog
+} from "./chunk-VK3EQ34F.js";
+import {
+  cn,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-feedback-dialog/dist/index.js
+import * as React from "react";
+
+// ../feedback-dialog/dist/index.js
+function createFeedbackDialog(props = {}) {
+  const {
+    open: controlledOpen,
+    onOpenChange,
+    onSubmit,
+    type = "general"
+  } = props;
+  const dialog = createDialog({
+    open: controlledOpen,
+    onOpenChange,
+    modal: true
+  });
+  let isSubmitting = false;
+  let isSubmitted = false;
+  const formState = {
+    comment: "",
+    email: "",
+    honeypot: ""
+  };
+  const feedbackId = generateId("rfr-feedback");
+  function setField(field, value) {
+    formState[field] = value;
+  }
+  async function submit() {
+    if (formState.honeypot) {
+      return;
+    }
+    if (!formState.comment.trim()) {
+      return;
+    }
+    isSubmitting = true;
+    const data = {
+      comment: formState.comment,
+      type,
+      ...formState.email ? { email: formState.email } : {}
+    };
+    try {
+      await onSubmit?.(data);
+      isSubmitting = false;
+      isSubmitted = true;
+    } catch {
+      isSubmitting = false;
+    }
+  }
+  function reset() {
+    formState.comment = "";
+    formState.email = "";
+    formState.honeypot = "";
+    isSubmitting = false;
+    isSubmitted = false;
+  }
+  const ariaProps = {
+    role: "dialog",
+    "aria-modal": true,
+    "aria-labelledby": `${feedbackId}-title`,
+    "aria-describedby": `${feedbackId}-desc`,
+    id: feedbackId
+  };
+  return {
+    get state() {
+      return {
+        get open() {
+          return dialog.state.open;
+        },
+        get isSubmitting() {
+          return isSubmitting;
+        },
+        get isSubmitted() {
+          return isSubmitted;
+        }
+      };
+    },
+    dialogProps: dialog,
+    formState,
+    setField,
+    submit,
+    reset,
+    ariaProps
+  };
+}
+var feedbackDialogVariants = cva({
+  base: "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background p-6 shadow-lg",
+  variants: {
+    type: {
+      text: "max-w-md",
+      video: "max-w-lg",
+      general: "max-w-md"
+    }
+  },
+  defaultVariants: {
+    type: "general"
+  }
+});
+
+// ../react-feedback-dialog/dist/index.js
+function FeedbackDialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  onSubmit,
+  type = "general",
+  className,
+  children
+}) {
+  const [open, setOpen] = React.useState(controlledOpen ?? defaultOpen);
+  const [comment, setComment] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [honeypot, setHoneypot] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : open;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const apiRef = React.useRef(null);
+  if (apiRef.current === null) {
+    apiRef.current = createFeedbackDialog({ open: isOpen, onOpenChange: handleOpenChange, onSubmit, type });
+  }
+  const handleSubmit = React.useCallback(async () => {
+    if (honeypot) return;
+    if (!comment.trim()) return;
+    setIsSubmitting(true);
+    const data = {
+      comment,
+      type,
+      ...email ? { email } : {}
+    };
+    try {
+      await onSubmit?.(data);
+      setIsSubmitting(false);
+      setIsSubmitted(true);
+    } catch {
+      setIsSubmitting(false);
+    }
+  }, [comment, email, honeypot, type, onSubmit]);
+  const handleReset = React.useCallback(() => {
+    setComment("");
+    setEmail("");
+    setHoneypot("");
+    setIsSubmitting(false);
+    setIsSubmitted(false);
+  }, []);
+  const api = apiRef.current;
+  const trigger = React.isValidElement(children) ? (() => {
+    const child = children;
+    const childOnClick = child.props.onClick;
+    const childRef = child.ref;
+    return React.cloneElement(child, {
+      onClick: (e) => {
+        childOnClick?.(e);
+        if (!e.defaultPrevented) handleOpenChange(true);
+      },
+      ref: (node) => {
+        if (typeof childRef === "function") childRef(node);
+        else if (childRef) childRef.current = node;
+      }
+    });
+  })() : children;
+  if (isSubmitted) {
+    return React.createElement(
+      React.Fragment,
+      null,
+      trigger,
+      React.createElement(
+        "div",
+        {
+          className: cn(feedbackDialogVariants({ type }), className),
+          ...api.ariaProps,
+          "data-state": "submitted"
+        },
+        React.createElement("p", { "data-testid": "success-message" }, "Thank you for your feedback!"),
+        React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              handleReset();
+              handleOpenChange(false);
+            }
+          },
+          "Close"
+        )
+      )
+    );
+  }
+  return React.createElement(
+    React.Fragment,
+    null,
+    trigger,
+    isOpen ? React.createElement(
+      "div",
+      {
+        className: cn(feedbackDialogVariants({ type }), className),
+        ...api.ariaProps,
+        "data-state": "open"
+      },
+      React.createElement("h2", { id: `${api.ariaProps.id}-title` }, "Send Feedback"),
+      React.createElement("textarea", {
+        "aria-label": "Feedback comment",
+        value: comment,
+        onChange: (e) => setComment(e.target.value),
+        placeholder: "Your feedback...",
+        disabled: isSubmitting
+      }),
+      React.createElement("input", {
+        type: "email",
+        "aria-label": "Email",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        placeholder: "Email (optional)",
+        disabled: isSubmitting
+      }),
+      // Honeypot field — hidden from real users
+      React.createElement("input", {
+        type: "text",
+        "aria-hidden": true,
+        tabIndex: -1,
+        style: { position: "absolute", left: "-9999px" },
+        value: honeypot,
+        onChange: (e) => setHoneypot(e.target.value),
+        autoComplete: "off",
+        name: "website"
+      }),
+      React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: handleSubmit,
+          disabled: isSubmitting || !comment.trim()
+        },
+        isSubmitting ? "Submitting..." : "Submit"
+      )
+    ) : null
+  );
+}
+var FeedbackButton = React.forwardRef(
+  function FeedbackButton2({ children, ...props }, ref) {
+    return React.createElement(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Send feedback",
+        ...props
+      },
+      children ?? "Feedback"
+    );
+  }
+);
+export {
+  FeedbackButton,
+  FeedbackDialog,
+  feedbackDialogVariants
+};
+//# sourceMappingURL=react-feedback-dialog.js.map

package/dist/react-feedback-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../feedback-dialog/src/feedback-dialog.ts", "../../feedback-dialog/src/feedback-dialog.styles.ts", "../../react-feedback-dialog/src/FeedbackDialog.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { createDialog, type DialogAPI } from '@refraction-ui/dialog'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type FeedbackType = 'text' | 'video' | 'general'\n\nexport interface FeedbackDialogProps {\n  /** Whether the dialog is open (controlled) */\n  open?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Callback when feedback is submitted */\n  onSubmit?: (data: FeedbackData) => void | Promise<void>\n  /** Feedback type */\n  type?: FeedbackType\n}\n\nexport interface FeedbackData {\n  comment: string\n  email?: string\n  type: FeedbackType\n  selectedText?: string\n}\n\nexport interface FeedbackFormState {\n  comment: string\n  email: string\n  honeypot: string\n}\n\nexport interface FeedbackDialogState {\n  open: boolean\n  isSubmitting: boolean\n  isSubmitted: boolean\n}\n\nexport interface FeedbackDialogAPI {\n  /** Current state */\n  state: FeedbackDialogState\n  /** Dialog props from the underlying createDialog */\n  dialogProps: DialogAPI\n  /** Form field values */\n  formState: FeedbackFormState\n  /** Set a form field value */\n  setField(field: keyof FeedbackFormState, value: string): void\n  /** Submit the feedback form */\n  submit(): Promise<void>\n  /** Reset form to initial state */\n  reset(): void\n  /** ARIA props for the feedback dialog */\n  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>\n}\n\nexport function createFeedbackDialog(props: FeedbackDialogProps = {}): FeedbackDialogAPI {\n  const {\n    open: controlledOpen,\n    onOpenChange,\n    onSubmit,\n    type = 'general',\n  } = props\n\n  const dialog = createDialog({\n    open: controlledOpen,\n    onOpenChange,\n    modal: true,\n  })\n\n  let isSubmitting = false\n  let isSubmitted = false\n\n  const formState: FeedbackFormState = {\n    comment: '',\n    email: '',\n    honeypot: '',\n  }\n\n  const feedbackId = generateId('rfr-feedback')\n\n  function setField(field: keyof FeedbackFormState, value: string): void {\n    formState[field] = value\n  }\n\n  async function submit(): Promise<void> {\n    // Honeypot check — bots fill this hidden field\n    if (formState.honeypot) {\n      return\n    }\n\n    if (!formState.comment.trim()) {\n      return\n    }\n\n    isSubmitting = true\n\n    const data: FeedbackData = {\n      comment: formState.comment,\n      type,\n      ...(formState.email ? { email: formState.email } : {}),\n    }\n\n    try {\n      await onSubmit?.(data)\n      isSubmitting = false\n      isSubmitted = true\n    } catch {\n      isSubmitting = false\n    }\n  }\n\n  function reset(): void {\n    formState.comment = ''\n    formState.email = ''\n    formState.honeypot = ''\n    isSubmitting = false\n    isSubmitted = false\n  }\n\n  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'dialog',\n    'aria-modal': true,\n    'aria-labelledby': `${feedbackId}-title`,\n    'aria-describedby': `${feedbackId}-desc`,\n    id: feedbackId,\n  }\n\n  return {\n    get state() {\n      return {\n        get open() {\n          return dialog.state.open\n        },\n        get isSubmitting() {\n          return isSubmitting\n        },\n        get isSubmitted() {\n          return isSubmitted\n        },\n      }\n    },\n    dialogProps: dialog,\n    formState,\n    setField,\n    submit,\n    reset,\n    ariaProps,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const feedbackDialogVariants = cva({\n  base: 'fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background p-6 shadow-lg',\n  variants: {\n    type: {\n      text: 'max-w-md',\n      video: 'max-w-lg',\n      general: 'max-w-md',\n    },\n  },\n  defaultVariants: {\n    type: 'general',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createFeedbackDialog,\n  feedbackDialogVariants,\n  type FeedbackDialogProps as CoreProps,\n  type FeedbackData,\n  type FeedbackType,\n} from '@refraction-ui/feedback-dialog'\nimport { cn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// FeedbackDialog\n// ---------------------------------------------------------------------------\n\nexport interface FeedbackDialogProps {\n  open?: boolean\n  /** Initial open state for uncontrolled usage (like Radix `defaultOpen`). */\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  onSubmit?: (data: FeedbackData) => void | Promise<void>\n  type?: FeedbackType\n  className?: string\n  children?: React.ReactNode\n}\n\nexport function FeedbackDialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  onSubmit,\n  type = 'general',\n  className,\n  children,\n}: FeedbackDialogProps) {\n  const [open, setOpen] = React.useState(controlledOpen ?? defaultOpen)\n  const [comment, setComment] = React.useState('')\n  const [email, setEmail] = React.useState('')\n  const [honeypot, setHoneypot] = React.useState('')\n  const [isSubmitting, setIsSubmitting] = React.useState(false)\n  const [isSubmitted, setIsSubmitted] = React.useState(false)\n\n  const isControlled = controlledOpen !== undefined\n  const isOpen = isControlled ? controlledOpen : open\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const apiRef = React.useRef<ReturnType<typeof createFeedbackDialog> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createFeedbackDialog({ open: isOpen, onOpenChange: handleOpenChange, onSubmit, type })\n  }\n\n  const handleSubmit = React.useCallback(async () => {\n    if (honeypot) return\n    if (!comment.trim()) return\n\n    setIsSubmitting(true)\n    const data: FeedbackData = {\n      comment,\n      type,\n      ...(email ? { email } : {}),\n    }\n\n    try {\n      await onSubmit?.(data)\n      setIsSubmitting(false)\n      setIsSubmitted(true)\n    } catch {\n      setIsSubmitting(false)\n    }\n  }, [comment, email, honeypot, type, onSubmit])\n\n  const handleReset = React.useCallback(() => {\n    setComment('')\n    setEmail('')\n    setHoneypot('')\n    setIsSubmitting(false)\n    setIsSubmitted(false)\n  }, [])\n\n  const api = apiRef.current\n\n  // The trigger child stays mounted in every state and opens the dialog on\n  // click (composed with the child's own onClick).\n  const trigger = React.isValidElement(children)\n    ? (() => {\n        const child = children as React.ReactElement<Record<string, unknown>> & {\n          ref?: React.Ref<HTMLButtonElement>\n        }\n        const childOnClick = child.props.onClick as\n          | ((e: React.MouseEvent<HTMLButtonElement>) => void)\n          | undefined\n        const childRef = child.ref\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return React.cloneElement(child, {\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            childOnClick?.(e)\n            if (!e.defaultPrevented) handleOpenChange(true)\n          },\n          ref: (node: HTMLButtonElement | null) => {\n            if (typeof childRef === 'function') childRef(node)\n            else if (childRef) childRef.current = node\n          },\n        } as any)\n      })()\n    : children\n\n  if (isSubmitted) {\n    return React.createElement(\n      React.Fragment,\n      null,\n      trigger,\n      React.createElement(\n        'div',\n        {\n          className: cn(feedbackDialogVariants({ type }), className),\n          ...api.ariaProps,\n          'data-state': 'submitted',\n        },\n        React.createElement('p', { 'data-testid': 'success-message' }, 'Thank you for your feedback!'),\n        React.createElement(\n          'button',\n          {\n            type: 'button',\n            onClick: () => {\n              handleReset()\n              handleOpenChange(false)\n            },\n          },\n          'Close',\n        ),\n      ),\n    )\n  }\n\n  return React.createElement(\n    React.Fragment,\n    null,\n    trigger,\n    isOpen\n      ? React.createElement(\n          'div',\n          {\n            className: cn(feedbackDialogVariants({ type }), className),\n            ...api.ariaProps,\n            'data-state': 'open',\n          },\n    React.createElement('h2', { id: `${api.ariaProps.id}-title` }, 'Send Feedback'),\n    React.createElement('textarea', {\n      'aria-label': 'Feedback comment',\n      value: comment,\n      onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => setComment(e.target.value),\n      placeholder: 'Your feedback...',\n      disabled: isSubmitting,\n    }),\n    React.createElement('input', {\n      type: 'email',\n      'aria-label': 'Email',\n      value: email,\n      onChange: (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value),\n      placeholder: 'Email (optional)',\n      disabled: isSubmitting,\n    }),\n    // Honeypot field — hidden from real users\n    React.createElement('input', {\n      type: 'text',\n      'aria-hidden': true,\n      tabIndex: -1,\n      style: { position: 'absolute', left: '-9999px' },\n      value: honeypot,\n      onChange: (e: React.ChangeEvent<HTMLInputElement>) => setHoneypot(e.target.value),\n      autoComplete: 'off',\n      name: 'website',\n    }),\n    React.createElement(\n      'button',\n      {\n        type: 'button',\n        onClick: handleSubmit,\n        disabled: isSubmitting || !comment.trim(),\n      },\n      isSubmitting ? 'Submitting...' : 'Submit',\n    ),\n      )\n    : null,\n  )\n}\n\n// ---------------------------------------------------------------------------\n// FeedbackButton\n// ---------------------------------------------------------------------------\n\nexport interface FeedbackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode\n}\n\nexport const FeedbackButton = React.forwardRef<HTMLButtonElement, FeedbackButtonProps>(\n  function FeedbackButton({ children, ...props }, ref) {\n    return React.createElement(\n      'button',\n      {\n        ref,\n        type: 'button',\n        'aria-label': 'Send feedback',\n        ...props,\n      },\n      children ?? 'Feedback',\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["FeedbackButton"]
+}

package/dist/react-file-tree.js

@@ -0,0 +1,376 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-file-tree/dist/index.js
+import * as React from "react";
+
+// ../file-tree/dist/index.js
+function arrayEquals(a, b) {
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+function createFileTree(config = {}) {
+  let nodes = config.nodes ?? [];
+  let ariaLabel = config["aria-label"] ?? "File tree";
+  let onExpandedChange = config.onExpandedChange;
+  let onSelectionChange = config.onSelectionChange;
+  let uncontrolledExpanded = config.defaultExpandedIds ?? [];
+  let controlledExpanded = config.expandedIds;
+  let uncontrolledSelected = config.defaultSelectedId ?? null;
+  let controlledSelected = config.selectedId;
+  let focusedId = null;
+  let parentById = /* @__PURE__ */ new Map();
+  let nodeById = /* @__PURE__ */ new Map();
+  function reindex() {
+    parentById = /* @__PURE__ */ new Map();
+    nodeById = /* @__PURE__ */ new Map();
+    const walk = (list, parentId) => {
+      for (const node of list) {
+        nodeById.set(node.id, node);
+        parentById.set(node.id, parentId);
+        if (node.children) walk(node.children, node.id);
+      }
+    };
+    walk(nodes, null);
+  }
+  reindex();
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot = buildSnapshot();
+  let visibleItems = buildVisibleItems();
+  function expandedIds() {
+    return controlledExpanded !== void 0 ? controlledExpanded : uncontrolledExpanded;
+  }
+  function selectedId() {
+    return controlledSelected !== void 0 ? controlledSelected : uncontrolledSelected;
+  }
+  function buildSnapshot() {
+    return {
+      nodes,
+      expandedIds: expandedIds(),
+      selectedId: selectedId(),
+      focusedId
+    };
+  }
+  function buildVisibleItems() {
+    const expanded = new Set(expandedIds());
+    const selected = selectedId();
+    const items = [];
+    const walk = (list, parentId, depth) => {
+      for (const node of list) {
+        const hasChildren = Boolean(node.children && node.children.length > 0);
+        const isExpanded = hasChildren && expanded.has(node.id);
+        items.push({
+          node,
+          parentId,
+          depth,
+          hasChildren,
+          isExpanded,
+          isSelected: node.id === selected,
+          isFocused: node.id === focusedId
+        });
+        if (hasChildren && isExpanded) walk(node.children, node.id, depth + 1);
+      }
+    };
+    walk(nodes, null, 1);
+    return items;
+  }
+  function emit() {
+    snapshot = buildSnapshot();
+    visibleItems = buildVisibleItems();
+    for (const l of listeners) l();
+  }
+  function setExpanded(ids) {
+    if (controlledExpanded === void 0) {
+      if (arrayEquals(uncontrolledExpanded, ids)) return;
+      uncontrolledExpanded = ids;
+    }
+    onExpandedChange?.(ids);
+    emit();
+  }
+  function isExpandable(id) {
+    const node = nodeById.get(id);
+    return Boolean(node && !node.disabled && node.children && node.children.length > 0);
+  }
+  const api = {
+    getState() {
+      return snapshot;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getVisibleItems() {
+      return visibleItems;
+    },
+    isExpanded(id) {
+      return expandedIds().includes(id);
+    },
+    toggle(id) {
+      if (!isExpandable(id)) return;
+      const current = expandedIds();
+      setExpanded(current.includes(id) ? current.filter((v) => v !== id) : [...current, id]);
+    },
+    expand(id) {
+      if (!isExpandable(id)) return;
+      const current = expandedIds();
+      if (current.includes(id)) return;
+      setExpanded([...current, id]);
+    },
+    collapse(id) {
+      const current = expandedIds();
+      if (!current.includes(id)) return;
+      setExpanded(current.filter((v) => v !== id));
+    },
+    select(id) {
+      if (id !== null) {
+        const node = nodeById.get(id);
+        if (!node || node.disabled) return;
+      }
+      if (controlledSelected === void 0) {
+        if (uncontrolledSelected === id) return;
+        uncontrolledSelected = id;
+      }
+      onSelectionChange?.(id);
+      emit();
+    },
+    focus(id) {
+      if (id !== null && !visibleItems.some((i) => i.node.id === id)) return;
+      if (focusedId === id) return;
+      focusedId = id;
+      emit();
+    },
+    handleKey(key) {
+      const items = visibleItems;
+      if (items.length === 0) return;
+      const currentIndex = focusedId ? items.findIndex((i) => i.node.id === focusedId) : -1;
+      switch (key) {
+        case "ArrowDown":
+          api.focus(items[Math.min(currentIndex + 1, items.length - 1)].node.id);
+          return;
+        case "ArrowUp":
+          api.focus(items[Math.max(currentIndex - 1, 0)].node.id);
+          return;
+        case "Home":
+          api.focus(items[0].node.id);
+          return;
+        case "End":
+          api.focus(items[items.length - 1].node.id);
+          return;
+        case "ArrowRight": {
+          const item = currentIndex === -1 ? void 0 : items[currentIndex];
+          if (!item) {
+            api.focus(items[0].node.id);
+            return;
+          }
+          if (!item.hasChildren) return;
+          if (!item.isExpanded) api.expand(item.node.id);
+          else api.focus(items[currentIndex + 1]?.node.id ?? item.node.id);
+          return;
+        }
+        case "ArrowLeft": {
+          const item = currentIndex === -1 ? void 0 : items[currentIndex];
+          if (!item) return;
+          if (item.hasChildren && item.isExpanded) api.collapse(item.node.id);
+          else if (item.parentId) api.focus(item.parentId);
+          return;
+        }
+        case "Enter":
+        case " ": {
+          const item = currentIndex === -1 ? void 0 : items[currentIndex];
+          if (item) api.select(item.node.id);
+          return;
+        }
+        default:
+          return;
+      }
+    },
+    setNodes(nextNodes) {
+      nodes = nextNodes;
+      reindex();
+      emit();
+    },
+    setExpandedIds(ids) {
+      if (controlledExpanded !== void 0 && arrayEquals(controlledExpanded, ids)) return;
+      controlledExpanded = ids;
+      emit();
+    },
+    setSelectedId(id) {
+      if (controlledSelected !== void 0 && controlledSelected === id) return;
+      controlledSelected = id;
+      emit();
+    },
+    setOptions(options) {
+      if (options.onExpandedChange !== void 0) onExpandedChange = options.onExpandedChange;
+      if (options.onSelectionChange !== void 0) onSelectionChange = options.onSelectionChange;
+      if (options["aria-label"] !== void 0) ariaLabel = options["aria-label"];
+    },
+    getTreeAria() {
+      return { role: "tree", "aria-label": ariaLabel };
+    },
+    getItemAria(item) {
+      const aria = {
+        role: "treeitem",
+        "aria-level": item.depth,
+        "aria-selected": item.isSelected
+      };
+      if (item.hasChildren) aria["aria-expanded"] = item.isExpanded;
+      if (item.node.disabled) aria["aria-disabled"] = true;
+      return aria;
+    }
+  };
+  return api;
+}
+var fileTreeVariants = cva({
+  base: "w-full text-sm"
+});
+var fileTreeItemVariants = cva({
+  base: [
+    "flex w-full cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1",
+    "text-sm outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  ].join(" "),
+  variants: {
+    selected: {
+      true: "bg-accent text-accent-foreground",
+      false: "text-foreground hover:bg-muted"
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+var fileTreeGlyphClass = "w-4 shrink-0 text-center text-muted-foreground";
+
+// ../react-file-tree/dist/index.js
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+var HANDLED_KEYS = /* @__PURE__ */ new Set([
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "Enter",
+  " "
+]);
+function TreeItems({ nodes, depth, api, state, firstVisibleId }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => {
+    const hasChildren = Boolean(node.children && node.children.length > 0);
+    const isExpanded = hasChildren && state.expandedIds.includes(node.id);
+    const isSelected = state.selectedId === node.id;
+    const item = {
+      node,
+      parentId: null,
+      // unused by getItemAria; the core tracks real parents
+      depth,
+      hasChildren,
+      isExpanded,
+      isSelected,
+      isFocused: state.focusedId === node.id
+    };
+    const tabbable = state.focusedId === node.id || state.focusedId === null && node.id === firstVisibleId;
+    return /* @__PURE__ */ jsxs("li", { role: "none", className: "list-none", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...api.getItemAria(item),
+          tabIndex: tabbable ? 0 : -1,
+          "data-disabled": node.disabled ? "true" : void 0,
+          style: { paddingLeft: `${(depth - 1) * 12}px` },
+          className: fileTreeItemVariants({ selected: isSelected ? "true" : "false" }),
+          onClick: () => {
+            api.focus(node.id);
+            api.select(node.id);
+            if (hasChildren) api.toggle(node.id);
+          },
+          onFocus: () => api.focus(node.id),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: fileTreeGlyphClass, children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+          ]
+        }
+      ),
+      hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "m-0 p-0", children: /* @__PURE__ */ jsx(
+        TreeItems,
+        {
+          nodes: node.children,
+          depth: depth + 1,
+          api,
+          state,
+          firstVisibleId
+        }
+      ) })
+    ] }, node.id);
+  }) });
+}
+var FileTree = React.forwardRef(
+  function FileTree2({
+    className,
+    nodes = [],
+    expandedIds: controlledExpandedIds,
+    defaultExpandedIds,
+    selectedId: controlledSelectedId,
+    defaultSelectedId,
+    onExpandedChange,
+    onSelectionChange,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) {
+    const apiRef = React.useRef(null);
+    if (apiRef.current === null) {
+      apiRef.current = createFileTree({
+        nodes,
+        expandedIds: controlledExpandedIds,
+        defaultExpandedIds,
+        selectedId: controlledSelectedId,
+        defaultSelectedId,
+        onExpandedChange,
+        onSelectionChange,
+        "aria-label": ariaLabel
+      });
+    }
+    const api = apiRef.current;
+    const state = React.useSyncExternalStore(api.subscribe, api.getState, api.getState);
+    React.useEffect(() => {
+      api.setOptions({ onExpandedChange, onSelectionChange, "aria-label": ariaLabel });
+    });
+    React.useEffect(() => {
+      api.setNodes(nodes);
+    }, [api, nodes]);
+    React.useEffect(() => {
+      if (controlledExpandedIds !== void 0) api.setExpandedIds(controlledExpandedIds);
+    }, [api, controlledExpandedIds]);
+    React.useEffect(() => {
+      if (controlledSelectedId !== void 0) api.setSelectedId(controlledSelectedId);
+    }, [api, controlledSelectedId]);
+    const firstVisibleId = api.getVisibleItems()[0]?.node.id;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(fileTreeVariants(), className), ...props, children: /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ...api.getTreeAria(),
+        className: "m-0 p-0",
+        onKeyDown: (event) => {
+          if (!HANDLED_KEYS.has(event.key)) return;
+          event.preventDefault();
+          api.handleKey(event.key);
+        },
+        children: /* @__PURE__ */ jsx(
+          TreeItems,
+          {
+            nodes: state.nodes,
+            depth: 1,
+            api,
+            state,
+            firstVisibleId
+          }
+        )
+      }
+    ) });
+  }
+);
+export {
+  FileTree
+};
+//# sourceMappingURL=react-file-tree.js.map