@tradalab/lyra 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# @tradalab/lyra
+
+> Tradalab's UI kit — shadcn (`radix-lyra` style) primitives, composed
+> components, and an app shell for **React 19 / Next 16 / Tailwind v4**.
+
+ESM-only. Extracted from Tradalab's foundation kit so every company app shares
+the same component surface.
+
+## Install
+
+```bash
+pnpm add @tradalab/lyra
+# peers: react ^19, react-dom ^19  (next ^16 only if you use /shell)
+```
+
+The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
+
+```css
+/* app/globals.css */
+@import "@tradalab/lyra/styles.css";
+```
+
+## Subpaths
+
+| Subpath | Exports | Boundary |
+|---|---|---|
+| `@tradalab/lyra/utils` | `cn` | server-safe |
+| `@tradalab/lyra/hooks` | `useMobile` | client |
+| `@tradalab/lyra/ui` | ~30 shadcn primitives + `AccountMenu` | client |
+| `@tradalab/lyra/shell` | `AppShell`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
+| `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
+
+Client subpaths carry a build-injected `"use client"`; import them inside a
+client tree or pass via `children` — don't import them into a Server Component's
+own module.
+
+```tsx
+import { Button, Card, CardHeader } from "@tradalab/lyra/ui"
+import { AppShell, NavItem } from "@tradalab/lyra/shell"
+```
+
+## Develop
+
+```bash
+make install            # pnpm install
+make build              # tsup + inject-use-client + verify-build-output
+make verify             # typecheck + lint + test
+make ui-add <name>      # scaffold a shadcn primitive, adapt, rebuild barrel
+make ui-sync            # re-adapt every primitive + rebuild barrel
+```
+
+**Layout** — `src/<layer>/` with a barrel `index.ts`; one tsup entry per
+subpath; ESM-only to `dist/`. **Layers** (enforced by `eslint-plugin-boundaries`):
+`utils`/`hooks` (foundation) → `ui` → `shell`. No upward imports.
+
+**`"use client"` is not in source** — it is injected onto the client entry
+artifacts post-build by `scripts/inject-use-client.mjs`, then asserted by
+`scripts/verify-build-output.mjs`. `scripts/sync-ui.mjs` adapts shadcn-CLI
+output to repo conventions.
+
+**Release** — `pnpm publish --no-git-checks` (the `prepublishOnly` hook builds
+first). Published to the npm public registry.

package/dist/blocks/index.d.ts

@@ -0,0 +1,128 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import { Slot, Label } from 'radix-ui';
+import { LucideIcon } from 'lucide-react';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string | undefined;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof Label.Root>): React.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
+
+type PanelItemType = {
+    key: string;
+    label: string;
+    icon?: LucideIcon;
+    danger?: boolean;
+    hasError?: boolean;
+    content: ReactNode;
+};
+declare function Panel({ name, items, enable_url }: {
+    name?: string;
+    items: PanelItemType[];
+    enable_url?: boolean;
+}): React.JSX.Element | null;
+interface PanelItemProps {
+    children: ReactNode;
+    active?: boolean;
+    icon?: LucideIcon;
+    danger?: boolean;
+    hasError?: boolean;
+    onClick?: () => void;
+}
+interface PanelCardProps {
+    title: string;
+    description?: string;
+    hint?: string;
+    action?: ReactNode;
+    children?: ReactNode;
+}
+declare function PanelCard({ title, description, hint, action, children }: PanelCardProps): React.JSX.Element;
+
+type ConfirmOptions = {
+    title: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+};
+
+type Props = {
+    options: ConfirmOptions;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+declare function ConfirmDialog({ options, onConfirm, onCancel }: Props): React.JSX.Element;
+
+type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+declare const ConfirmContext: React.Context<ConfirmFn | null>;
+declare function ConfirmProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+
+declare const useConfirm: () => ConfirmFn;
+
+type TreeProviderProps = {
+    children: ReactNode;
+    defaultExpandedIds?: string[];
+    showLines?: boolean;
+    showIcons?: boolean;
+    selectable?: boolean;
+    multiSelect?: boolean;
+    selectedIds?: string[];
+    onSelectionChange?: (selectedIds: string[]) => void;
+    expandedIds?: Set<string>;
+    onExpandedChange?: (expandedIds: Set<string>) => void;
+    indent?: number;
+    animateExpand?: boolean;
+    className?: string;
+};
+declare const TreeProvider: ({ children, defaultExpandedIds, showLines, showIcons, selectable, multiSelect, selectedIds, onSelectionChange, indent, animateExpand, className, expandedIds, onExpandedChange, }: TreeProviderProps) => React.JSX.Element;
+type TreeViewProps = HTMLAttributes<HTMLDivElement>;
+declare const TreeView: ({ className, children, ...props }: TreeViewProps) => React.JSX.Element;
+type TreeNodeProps = HTMLAttributes<HTMLDivElement> & {
+    nodeId?: string;
+    level?: number;
+    isLast?: boolean;
+    parentPath?: boolean[];
+    children?: ReactNode;
+};
+declare const TreeNode: ({ nodeId: providedNodeId, level, isLast, parentPath, children, className, onClick: _onClick, ...props }: TreeNodeProps) => React.JSX.Element;
+type TreeNodeTriggerProps = HTMLAttributes<HTMLDivElement> & {
+    expandOnClick?: boolean;
+};
+declare const TreeNodeTrigger: ({ children, className, onClick, expandOnClick, ...props }: TreeNodeTriggerProps) => React.JSX.Element;
+declare const TreeLines: () => React.JSX.Element | null;
+type TreeNodeContentProps = HTMLAttributes<HTMLDivElement> & {
+    hasChildren?: boolean;
+};
+declare const TreeNodeContent: ({ children, hasChildren, className, ...props }: TreeNodeContentProps) => React.JSX.Element | null;
+type TreeExpanderProps = HTMLAttributes<HTMLDivElement> & {
+    hasChildren?: boolean;
+};
+declare const TreeExpander: ({ hasChildren, className, onClick, ...props }: TreeExpanderProps) => React.JSX.Element;
+type TreeIconProps = HTMLAttributes<HTMLDivElement> & {
+    icon?: ReactNode;
+    hasChildren?: boolean;
+};
+declare const TreeIcon: ({ icon, hasChildren, className, ...props }: TreeIconProps) => React.JSX.Element | null;
+type TreeLabelProps = HTMLAttributes<HTMLSpanElement>;
+declare const TreeLabel: ({ className, ...props }: TreeLabelProps) => React.JSX.Element;
+
+export { ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Panel, PanelCard, type PanelCardProps, type PanelItemProps, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, useConfirm, useFormField };

package/dist/blocks/index.js

@@ -0,0 +1,421 @@
+"use client";
+import { Label, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Dialog, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from '../chunk-BEAQYKGM.js';
+import { Button } from '../chunk-KFQOYZ64.js';
+import { cn } from '../chunk-XH55BHUU.js';
+import * as React from 'react';
+import { createContext, useMemo, useState, useEffect, useContext, useCallback, useId } from 'react';
+import { Slot } from 'radix-ui';
+import { FormProvider, Controller, useFormContext } from 'react-hook-form';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ChevronRight, FolderOpen, Folder, File } from 'lucide-react';
+
+var Form = FormProvider;
+var FormFieldContext = React.createContext(null);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext || {};
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React.createContext(null);
+function FormItem({ className, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props });
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot.Root,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-muted-foreground text-sm", className), ...props });
+}
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-sm", className), ...props, children: body });
+}
+function Panel({ name, items, enable_url }) {
+  const router = useRouter();
+  const params = useSearchParams();
+  const defaultKey = items[0]?.key;
+  const panelKey = useMemo(() => `panel${name ? "-" + name : ""}`, [name]);
+  const panelFromUrl = useMemo(() => {
+    if (!enable_url) return defaultKey;
+    return params.get(panelKey) ?? defaultKey;
+  }, [enable_url, params, defaultKey, panelKey]);
+  const [active, setActive] = useState(panelFromUrl);
+  useEffect(() => {
+    if (!enable_url) return;
+    setActive(panelFromUrl);
+  }, [panelFromUrl, enable_url]);
+  const current = items.find((s) => s.key === active) ?? items[0];
+  if (!current) return null;
+  const navigate = (key) => {
+    if (key === active) return;
+    setActive(key);
+    if (!enable_url) return;
+    router.replace(`?${panelKey}=${key}`, { scroll: false });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 h-full min-h-0 flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-lg bg-muted p-1", children: items?.map((s) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => navigate(s.key),
+        className: cn(
+          "rounded-md px-3 py-1.5 text-sm transition-all",
+          active === s.key ? "bg-background text-foreground shadow-sm" : s.danger ? "text-destructive" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: /* @__PURE__ */ jsxs("span", { className: "relative flex items-center gap-2", children: [
+          s.icon && /* @__PURE__ */ jsx(s.icon, { className: "h-4 w-4" }),
+          s.label,
+          s.hasError && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 flex h-2 w-2 rounded-full bg-destructive" })
+        ] })
+      },
+      s.key
+    )) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-[240px_1fr] flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx("aside", { className: "hidden space-y-1 lg:block overflow-y-auto min-h-0 pr-1 [overflow:overlay]", children: items?.map((s) => /* @__PURE__ */ jsx(PanelItem, { active: active === s.key, icon: s.icon, danger: s.danger, hasError: s.hasError, onClick: () => navigate(s.key), children: s.label }, s.key)) }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-6 overflow-y-auto min-h-0 pr-1 [overflow:overlay]", children: current.content })
+    ] })
+  ] });
+}
+function PanelItem({ children, active, icon: Icon, danger, hasError, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick,
+      className: cn(
+        "cursor-pointer rounded-md px-3 py-2 text-sm transition-colors flex items-center justify-between",
+        active ? "bg-muted font-medium" : danger ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
+          children
+        ] }),
+        hasError && /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-destructive" })
+      ]
+    }
+  );
+}
+function PanelCard({ title, description, hint, action, children }) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn({ "pb-3": hint || action }), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
+      description && /* @__PURE__ */ jsx(CardDescription, { className: "max-w-2xl", children: description })
+    ] }),
+    children && /* @__PURE__ */ jsx(CardContent, { children }),
+    (hint || action) && /* @__PURE__ */ jsxs(CardFooter, { className: "flex items-center justify-between border-t !pt-3 !pb-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: hint }),
+      action
+    ] })
+  ] });
+}
+function ConfirmDialog({ options, onConfirm, onCancel }) {
+  return /* @__PURE__ */ jsxs(Dialog, { open: true, onOpenChange: (val) => !val && onCancel(), children: [
+    /* @__PURE__ */ jsx(DialogOverlay, { className: "fixed inset-0 bg-white/10" }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: cn("fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", "p-4 w-[400px]", "focus:outline-none"), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-sm font-medium", children: options.title }),
+      options.description && /* @__PURE__ */ jsx(DialogDescription, { className: "mt-2 text-sm text-muted-foreground", children: options.description }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onCancel, children: options.cancelText ?? "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onConfirm, className: cn(options.danger && "bg-red-600 hover:bg-red-700 text-white"), children: options.confirmText ?? "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+var ConfirmContext = createContext(null);
+function ConfirmProvider({ children }) {
+  const [state, setState] = useState(null);
+  const confirm = (options) => new Promise((resolve) => setState({ options, resolve }));
+  const close = (result) => {
+    state?.resolve(result);
+    setState(null);
+  };
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: confirm, children: [
+    children,
+    state && /* @__PURE__ */ jsx(ConfirmDialog, { options: state.options, onConfirm: () => close(true), onCancel: () => close(false) })
+  ] });
+}
+var useConfirm = () => {
+  const ctx = useContext(ConfirmContext);
+  if (!ctx) {
+    throw new Error("useConfirm must be used inside ConfirmProvider");
+  }
+  return ctx;
+};
+var TreeContext = createContext(void 0);
+var useTree = () => {
+  const context = useContext(TreeContext);
+  if (!context) {
+    throw new Error("Tree components must be used within a TreeProvider");
+  }
+  return context;
+};
+var TreeNodeContext = createContext(void 0);
+var useTreeNode = () => {
+  const context = useContext(TreeNodeContext);
+  if (!context) {
+    throw new Error("TreeNode components must be used within a TreeNode");
+  }
+  return context;
+};
+var TreeProvider = ({
+  children,
+  defaultExpandedIds = [],
+  showLines = true,
+  showIcons = true,
+  selectable = true,
+  multiSelect = false,
+  selectedIds,
+  onSelectionChange,
+  indent = 20,
+  animateExpand = true,
+  className,
+  expandedIds,
+  onExpandedChange
+}) => {
+  const [internalExpandedIds, setInternalExpandedIds] = useState(new Set(defaultExpandedIds));
+  const [internalSelectedIds, setInternalSelectedIds] = useState(selectedIds ?? []);
+  const isControlledSelected = selectedIds !== void 0 && onSelectionChange !== void 0;
+  const currentSelectedIds = isControlledSelected ? selectedIds : internalSelectedIds;
+  const isControlledExpanded = expandedIds !== void 0 && onExpandedChange !== void 0;
+  const currentExpandedIds = isControlledExpanded ? expandedIds : internalExpandedIds;
+  const toggleExpanded = useCallback(
+    (nodeId) => {
+      const newSet = new Set(currentExpandedIds);
+      if (newSet.has(nodeId)) {
+        newSet.delete(nodeId);
+      } else {
+        newSet.add(nodeId);
+      }
+      if (isControlledExpanded) {
+        onExpandedChange?.(newSet);
+      } else {
+        setInternalExpandedIds(newSet);
+      }
+    },
+    [currentExpandedIds, isControlledExpanded, onExpandedChange]
+  );
+  const handleSelection = useCallback(
+    (nodeId, ctrlKey = false) => {
+      if (!selectable) {
+        return;
+      }
+      let newSelection;
+      if (multiSelect && ctrlKey) {
+        newSelection = currentSelectedIds.includes(nodeId) ? currentSelectedIds.filter((id) => id !== nodeId) : [...currentSelectedIds, nodeId];
+      } else {
+        newSelection = currentSelectedIds.includes(nodeId) ? [] : [nodeId];
+      }
+      if (isControlledSelected) {
+        onSelectionChange?.(newSelection);
+      } else {
+        setInternalSelectedIds(newSelection);
+      }
+    },
+    [selectable, multiSelect, currentSelectedIds, isControlledSelected, onSelectionChange]
+  );
+  return /* @__PURE__ */ jsx(
+    TreeContext.Provider,
+    {
+      value: {
+        expandedIds: currentExpandedIds,
+        selectedIds: currentSelectedIds,
+        toggleExpanded,
+        handleSelection,
+        showLines,
+        showIcons,
+        selectable,
+        multiSelect,
+        indent,
+        animateExpand
+      },
+      children: /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children })
+    }
+  );
+};
+var TreeView = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("p-2", className), ...props, children });
+var TreeNode = ({ nodeId: providedNodeId, level = 0, isLast = false, parentPath = [], children, className, onClick: _onClick, ...props }) => {
+  const generatedId = useId();
+  const nodeId = providedNodeId ?? generatedId;
+  const currentPath = level === 0 ? [] : [...parentPath];
+  if (level > 0 && parentPath.length < level - 1) {
+    while (currentPath.length < level - 1) {
+      currentPath.push(false);
+    }
+  }
+  if (level > 0) {
+    currentPath[level - 1] = isLast;
+  }
+  return /* @__PURE__ */ jsx(
+    TreeNodeContext.Provider,
+    {
+      value: {
+        nodeId,
+        level,
+        isLast,
+        parentPath: currentPath
+      },
+      children: /* @__PURE__ */ jsx("div", { className: cn("select-none", className), ...props, children })
+    }
+  );
+};
+var TreeNodeTrigger = ({ children, className, onClick, expandOnClick = false, ...props }) => {
+  const { selectedIds, handleSelection, toggleExpanded, indent } = useTree();
+  const { nodeId, level } = useTreeNode();
+  const isSelected = selectedIds.includes(nodeId);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative mx-1 flex cursor-pointer items-center rounded-md px-3 transition-all duration-200",
+        "hover:bg-accent/50",
+        isSelected && "bg-accent/80",
+        className
+      ),
+      style: { paddingLeft: level * (indent ?? 0) + 8, paddingTop: "var(--tree-item-py)", paddingBottom: "var(--tree-item-py)" },
+      onClick: (e) => {
+        handleSelection(nodeId, e.ctrlKey || e.metaKey);
+        if (expandOnClick) toggleExpanded(nodeId);
+        onClick?.(e);
+      },
+      onDoubleClick: (e) => {
+        if (e.ctrlKey || e.metaKey) return;
+        toggleExpanded(nodeId);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TreeLines, {}),
+        children
+      ]
+    }
+  );
+};
+var TreeLines = () => {
+  const { showLines, indent } = useTree();
+  const { level, isLast, parentPath } = useTreeNode();
+  if (!showLines || level === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute top-0 bottom-0 left-0", children: [
+    Array.from({ length: level }, (_, index) => {
+      const shouldHideLine = parentPath[index] === true;
+      if (shouldHideLine && index === level - 1) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-0 bottom-0 border-border/40 border-l",
+          style: {
+            left: index * (indent ?? 0) + 12,
+            display: shouldHideLine ? "none" : "block"
+          }
+        },
+        index.toString()
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-1/2 border-border/40 border-t",
+        style: {
+          left: (level - 1) * (indent ?? 0) + 12,
+          width: (indent ?? 0) - 4,
+          transform: "translateY(-1px)"
+        }
+      }
+    ),
+    isLast && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-0 border-border/40 border-l",
+        style: {
+          left: (level - 1) * (indent ?? 0) + 12,
+          height: "50%"
+        }
+      }
+    )
+  ] });
+};
+var TreeNodeContent = ({ children, hasChildren = false, className, ...props }) => {
+  const { expandedIds } = useTree();
+  const { nodeId } = useTreeNode();
+  const isExpanded = expandedIds.has(nodeId);
+  if (!hasChildren || !isExpanded) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className, ...props, children });
+};
+var TreeExpander = ({ hasChildren = false, className, onClick, ...props }) => {
+  const { expandedIds, toggleExpanded } = useTree();
+  const { nodeId } = useTreeNode();
+  const isExpanded = expandedIds.has(nodeId);
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsx("div", { className: "mr-1 h-4 w-4" });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("mr-1 flex h-4 w-4 items-center justify-center transition-transform duration-150", isExpanded && "rotate-90", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleExpanded(nodeId);
+        onClick?.(e);
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
+    }
+  );
+};
+var TreeIcon = ({ icon, hasChildren = false, className, ...props }) => {
+  const { showIcons, expandedIds } = useTree();
+  const { nodeId } = useTreeNode();
+  const isExpanded = expandedIds.has(nodeId);
+  if (!showIcons) {
+    return null;
+  }
+  const getDefaultIcon = () => hasChildren ? isExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Folder, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(File, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center text-muted-foreground transition-transform", className), ...props, children: icon || getDefaultIcon() });
+};
+var TreeLabel = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("font flex-1 truncate text-sm", className), ...props });
+
+export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, useConfirm, useFormField };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map