@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/tree-view.js

@@ -0,0 +1,300 @@
+"use client";
+import { jsx as n, jsxs as u, Fragment as v } from "react/jsx-runtime";
+import { ark as f } from "@ark-ui/react/factory";
+import { useTreeViewContext as b, TreeView as s, createTreeCollection as N } from "@ark-ui/react/tree-view";
+import { ChevronRightIcon as T, CheckIcon as V, MinusIcon as I, FileIcon as C, FolderIcon as k, FolderOpenIcon as _ } from "lucide-react";
+import x from "react";
+import { tv as y } from "tailwind-variants";
+import { cn as a } from "../lib/cn.js";
+import { checkboxVariants as B } from "./checkbox.js";
+const J = b, K = (e) => N({
+  nodeToValue: (t) => t.id,
+  nodeToString: (t) => t.name,
+  ...e
+}), h = x.createContext(null);
+h.displayName = "TreeViewContext";
+const Q = (e) => {
+  const {
+    fileIcons: t,
+    lazyMount: r = !0,
+    unmountOnExit: o = !0,
+    className: i,
+    slot: c,
+    ...d
+  } = e;
+  return /* @__PURE__ */ n(h.Provider, { value: { fileIcons: t }, children: /* @__PURE__ */ n(
+    s.Root,
+    {
+      className: a(
+        "[--indentation:--spacing(4)] [--item-gap:--spacing(2)]",
+        "[--padding-block:--spacing(1.5)] [--padding-inline:--spacing(3)]",
+        "[--icon-size:--spacing(4)]",
+        "w-full",
+        "flex flex-col gap-2",
+        "text-foreground",
+        i
+      ),
+      lazyMount: r,
+      unmountOnExit: o,
+      ...d,
+      "data-slot": c ?? "tree-view"
+    }
+  ) });
+}, U = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.Label,
+    {
+      className: a(
+        "select-none font-medium text-foreground text-sm",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-label"
+    }
+  );
+}, W = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.Tree,
+    {
+      className: a(
+        "flex flex-col text-sm",
+        "[&_svg]:size-(--icon-size) [&_svg]:shrink-0",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-tree"
+    }
+  );
+}, X = (e) => /* @__PURE__ */ n(s.NodeProvider, { ...e }), Y = ({ slot: e, ...t }) => /* @__PURE__ */ n(
+  s.Branch,
+  {
+    className: a("relative"),
+    ...t,
+    "data-slot": e ?? "tree-view-branch"
+  }
+), w = y({
+  base: [
+    "peer",
+    "relative my-px",
+    "flex items-center gap-(--item-gap)",
+    "min-h-8 w-full",
+    "py-(--padding-block) ps-[calc(var(--padding-inline)+var(--indentation)*(var(--depth)-1)+var(--icon-size)*(var(--depth)-1)*0.5)] pe-(--padding-inline)",
+    "bg-transparent",
+    "select-none text-start font-inherit text-muted-foreground",
+    "rounded-md border-none",
+    "cursor-pointer",
+    "hover:bg-muted hover:text-foreground",
+    "outline-none focus-visible:outline-2 focus-visible:outline-ring focus-visible:-outline-offset-2",
+    "data-selected:bg-accent data-selected:text-accent-foreground",
+    "data-focus:bg-muted data-focus:text-foreground",
+    "data-disabled:opacity-64 data-disabled:grayscale",
+    "[&_svg]:size-4 [&_svg]:shrink-0"
+  ]
+}), Z = (e) => {
+  const { icon: t, expandedIcon: r, className: o, children: i, slot: c, ...d } = e;
+  return /* @__PURE__ */ u(
+    s.BranchControl,
+    {
+      className: a(w(), o),
+      ...d,
+      "data-slot": c ?? "tree-view-branch-control",
+      children: [
+        /* @__PURE__ */ n(F, {}),
+        /* @__PURE__ */ n(z, { expandedIcon: r, icon: t, children: i })
+      ]
+    }
+  );
+}, z = (e) => {
+  const {
+    icon: t,
+    expandedIcon: r,
+    className: o,
+    children: i,
+    slot: c,
+    ...d
+  } = e;
+  return /* @__PURE__ */ n(s.NodeContext, { children: (l) => /* @__PURE__ */ n(v, { children: l.renaming ? /* @__PURE__ */ n(g, {}) : /* @__PURE__ */ u(
+    s.BranchText,
+    {
+      className: a(
+        "flex flex-1 items-center gap-(--item-gap)",
+        "overflow-hidden text-ellipsis whitespace-nowrap",
+        o
+      ),
+      ...d,
+      "data-slot": c ?? "tree-view-branch-title",
+      children: [
+        t !== null && !l.expanded && /* @__PURE__ */ n(p, { children: t ? /* @__PURE__ */ n(t, {}) : /* @__PURE__ */ n(k, {}) }),
+        r !== null && l.expanded && /* @__PURE__ */ n(p, { children: r ? /* @__PURE__ */ n(r, {}) : /* @__PURE__ */ n(_, {}) }),
+        i
+      ]
+    }
+  ) }) });
+}, F = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.BranchIndicator,
+    {
+      className: a(
+        "inline-flex shrink-0 items-center justify-center",
+        "text-muted-foreground",
+        "origin-center transition-transform duration-150",
+        "data-[state=open]:rotate-90",
+        "[&_svg]:size-3.5 [&_svg]:shrink-0",
+        "motion-reduce:transition-none!",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-branch-indicator",
+      children: /* @__PURE__ */ n(T, {})
+    }
+  );
+}, S = (e) => {
+  const { className: t, children: r, slot: o, ...i } = e;
+  return /* @__PURE__ */ u(
+    s.BranchContent,
+    {
+      className: a(
+        "relative overflow-hidden",
+        "data-[state=open]:animate-[expand_150ms_ease-out]",
+        "data-[state=closed]:animate-[collapse_150ms_ease-out]",
+        "motion-reduce:animate-none!",
+        t
+      ),
+      ...i,
+      "data-slot": o ?? "tree-view-branch-content",
+      children: [
+        /* @__PURE__ */ n(R, {}),
+        r
+      ]
+    }
+  );
+}, R = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.BranchIndentGuide,
+    {
+      className: a(
+        "absolute z-1",
+        "h-full w-px",
+        "bg-border",
+        "inset-s-[calc(var(--padding-inline)+var(--indentation)*(var(--depth)-1)+var(--icon-size)*0.5*var(--depth))]",
+        "pointer-events-none",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-branch-indent-guide"
+    }
+  );
+}, ee = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.Item,
+    {
+      className: a(w(), t),
+      ...o,
+      "data-slot": r ?? "tree-view-item"
+    }
+  );
+}, te = (e) => {
+  const { icon: t = C, className: r, children: o, ...i } = e, { fileIcons: c } = j(), d = (l) => {
+    const m = L(l);
+    return (m ? c == null ? void 0 : c[m] : void 0) ?? t;
+  };
+  return /* @__PURE__ */ n(s.NodeContext, { children: (l) => {
+    const m = d(l.value);
+    return /* @__PURE__ */ u(v, { children: [
+      /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, {}) }),
+      l.renaming ? /* @__PURE__ */ n(g, {}) : /* @__PURE__ */ n(E, { ...i, children: o })
+    ] });
+  } });
+}, p = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    f.span,
+    {
+      className: a(
+        "in-[[data-slot=tree-view-item]:has([data-slot=tree-view-checkbox])]:hidden",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-item-icon"
+    }
+  );
+}, E = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.ItemText,
+    {
+      className: a(
+        "flex flex-1 items-center gap-(--item-gap)",
+        "text-ellipsis whitespace-nowrap",
+        "overflow-hidden",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-item-title"
+    }
+  );
+}, ne = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.NodeCheckbox,
+    {
+      className: a(B(), "[&_svg]:size-3!", t),
+      ...o,
+      "data-slot": r ?? "tree-view-checkbox",
+      children: /* @__PURE__ */ n(s.NodeCheckboxIndicator, { indeterminate: /* @__PURE__ */ n(I, {}), children: /* @__PURE__ */ n(V, {}) })
+    }
+  );
+}, g = (e) => {
+  const { className: t, slot: r, ...o } = e;
+  return /* @__PURE__ */ n(
+    s.NodeRenameInput,
+    {
+      className: a(
+        "h-full min-w-0",
+        "flex-1",
+        "-my-px px-2 py-0",
+        "text-sm",
+        "border-primary bg-popover text-foreground",
+        "rounded-md border",
+        "selection:bg-primary/20 selection:text-foreground",
+        "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+        t
+      ),
+      ...o,
+      "data-slot": r ?? "tree-view-node-rename-input"
+    }
+  );
+}, j = () => {
+  const e = x.useContext(h);
+  if (!e)
+    throw new Error(
+      "useTreeViewContext must be used within a TreeViewProvider"
+    );
+  return e;
+}, re = (e) => ({ ...e }), L = (e) => {
+  var r;
+  const t = e.includes(".") ? (r = e.split(".").at(-1)) == null ? void 0 : r.toLowerCase() : null;
+  return t ? `.${t}` : null;
+};
+export {
+  Q as TreeView,
+  Y as TreeViewBranch,
+  S as TreeViewBranchContent,
+  F as TreeViewBranchIndicator,
+  Z as TreeViewBranchItem,
+  ne as TreeViewCheckbox,
+  ee as TreeViewContent,
+  te as TreeViewItem,
+  U as TreeViewLabel,
+  X as TreeViewNode,
+  W as TreeViewTree,
+  re as createFileIcons,
+  K as createTreeCollection,
+  J as useTreeView
+};
+//# sourceMappingURL=tree-view.js.map

package/dist/simples/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.js","sources":["../../src/simples/tree-view.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport {\n  TreeView as ArkTreeView,\n  createTreeCollection as arkCreateTreeCollection,\n  type TreeCollection as arkTreeCollection,\n  useTreeViewContext as useArkTreeViewContext,\n} from \"@ark-ui/react/tree-view\";\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  FileIcon,\n  FolderIcon,\n  FolderOpenIcon,\n  MinusIcon,\n} from \"lucide-react\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { checkboxVariants } from \"./checkbox\";\n\nexport const useTreeView = useArkTreeViewContext;\n\nexport interface TreeNodeType<T = unknown> {\n  children?: TreeNodeType<T>[] | undefined;\n  expandedIcon?: React.JSX.ElementType | null;\n  icon?: React.JSX.ElementType | null;\n  id: string;\n  name: string;\n}\n\nexport const createTreeCollection = <T extends TreeNodeType>(\n  options: Parameters<typeof arkCreateTreeCollection<T>>[0]\n) =>\n  arkCreateTreeCollection<T>({\n    nodeToValue: (node) => node.id,\n    nodeToString: (node) => node.name,\n    ...options,\n  });\n\nexport type TreeCollection = arkTreeCollection;\n\ninterface TreeViewContextProps {\n  /**\n   * Custom extension icons\n   */\n  fileIcons?: Record<string, React.JSX.ElementType | null>;\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextProps | null>(null);\nTreeViewContext.displayName = \"TreeViewContext\";\n\ninterface TreeViewProps\n  extends ArkTreeView.RootComponentProps,\n    TreeViewContextProps {}\n\nexport const TreeView: ArkTreeView.RootComponent<TreeViewProps> = (props) => {\n  const {\n    fileIcons,\n    lazyMount = true,\n    unmountOnExit = true,\n    className,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <TreeViewContext.Provider value={{ fileIcons }}>\n      <ArkTreeView.Root\n        className={cn(\n          \"[--indentation:--spacing(4)] [--item-gap:--spacing(2)]\",\n          \"[--padding-block:--spacing(1.5)] [--padding-inline:--spacing(3)]\",\n          \"[--icon-size:--spacing(4)]\",\n          \"w-full\",\n          \"flex flex-col gap-2\",\n          \"text-foreground\",\n          className\n        )}\n        lazyMount={lazyMount}\n        unmountOnExit={unmountOnExit}\n        {...rest}\n        data-slot={slot ?? \"tree-view\"}\n      />\n    </TreeViewContext.Provider>\n  );\n};\n\nexport const TreeViewLabel = (\n  props: React.ComponentProps<typeof ArkTreeView.Label>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.Label\n      className={cn(\n        \"select-none font-medium text-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-label\"}\n    />\n  );\n};\n\nexport const TreeViewTree = (\n  props: React.ComponentProps<typeof ArkTreeView.Tree>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.Tree\n      className={cn(\n        \"flex flex-col text-sm\",\n        \"[&_svg]:size-(--icon-size) [&_svg]:shrink-0\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-tree\"}\n    />\n  );\n};\n\nexport interface NodeProviderProps<T extends TreeNodeType = TreeNodeType>\n  extends ArkTreeView.NodeProviderProps<T> {}\n\nexport const TreeViewNode = <T extends TreeNodeType>(\n  props: NodeProviderProps<T>\n) => <ArkTreeView.NodeProvider {...props} />;\n\nexport const TreeViewBranch = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkTreeView.Branch>\n) => (\n  <ArkTreeView.Branch\n    className={cn(\"relative\")}\n    {...rest}\n    data-slot={slot ?? \"tree-view-branch\"}\n  />\n);\n\nconst treeViewControlVariants = tv({\n  base: [\n    \"peer\",\n    \"relative my-px\",\n    \"flex items-center gap-(--item-gap)\",\n    \"min-h-8 w-full\",\n    \"py-(--padding-block) ps-[calc(var(--padding-inline)+var(--indentation)*(var(--depth)-1)+var(--icon-size)*(var(--depth)-1)*0.5)] pe-(--padding-inline)\",\n    \"bg-transparent\",\n    \"select-none text-start font-inherit text-muted-foreground\",\n    \"rounded-md border-none\",\n    \"cursor-pointer\",\n    \"hover:bg-muted hover:text-foreground\",\n    \"outline-none focus-visible:outline-2 focus-visible:outline-ring focus-visible:-outline-offset-2\",\n    \"data-selected:bg-accent data-selected:text-accent-foreground\",\n    \"data-focus:bg-muted data-focus:text-foreground\",\n    \"data-disabled:opacity-64 data-disabled:grayscale\",\n    \"[&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n});\n\ninterface TreeViewBranchItemProps\n  extends React.ComponentProps<typeof ArkTreeView.BranchControl>,\n    Pick<TreeViewBranchTitleProps, \"icon\" | \"expandedIcon\"> {}\n\nexport const TreeViewBranchItem = (props: TreeViewBranchItemProps) => {\n  const { icon, expandedIcon, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.BranchControl\n      className={cn(treeViewControlVariants(), className)}\n      {...rest}\n      data-slot={slot ?? \"tree-view-branch-control\"}\n    >\n      <TreeViewBranchIndicator />\n      <TreeViewBranchTitle expandedIcon={expandedIcon} icon={icon}>\n        {children}\n      </TreeViewBranchTitle>\n    </ArkTreeView.BranchControl>\n  );\n};\n\ninterface TreeViewBranchTitleProps\n  extends React.ComponentProps<typeof ArkTreeView.BranchText> {\n  /**\n   * Custom expanded icon\n   *\n   * @default <FolderOpenIcon />\n   */\n  expandedIcon?: React.JSX.ElementType | null;\n  /**\n   * Custom icon\n   *\n   * @default <FolderIcon />\n   */\n  icon?: React.JSX.ElementType | null;\n}\n\nconst TreeViewBranchTitle = (props: TreeViewBranchTitleProps) => {\n  const {\n    icon: Icon,\n    expandedIcon: ExpandedIcon,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkTreeView.NodeContext>\n      {(nodeState) => (\n        <>\n          {nodeState.renaming ? (\n            <TreeViewNodeInput />\n          ) : (\n            <ArkTreeView.BranchText\n              className={cn(\n                \"flex flex-1 items-center gap-(--item-gap)\",\n                \"overflow-hidden text-ellipsis whitespace-nowrap\",\n                className\n              )}\n              {...rest}\n              data-slot={slot ?? \"tree-view-branch-title\"}\n            >\n              {Icon !== null && !nodeState.expanded && (\n                <TreeViewItemIcon>\n                  {Icon ? <Icon /> : <FolderIcon />}\n                </TreeViewItemIcon>\n              )}\n              {ExpandedIcon !== null && nodeState.expanded && (\n                <TreeViewItemIcon>\n                  {ExpandedIcon ? <ExpandedIcon /> : <FolderOpenIcon />}\n                </TreeViewItemIcon>\n              )}\n              {children}\n            </ArkTreeView.BranchText>\n          )}\n        </>\n      )}\n    </ArkTreeView.NodeContext>\n  );\n};\n\nexport const TreeViewBranchIndicator = (\n  props: React.ComponentProps<typeof ArkTreeView.BranchIndicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.BranchIndicator\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center\",\n        \"text-muted-foreground\",\n        \"origin-center transition-transform duration-150\",\n        \"data-[state=open]:rotate-90\",\n        \"[&_svg]:size-3.5 [&_svg]:shrink-0\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-branch-indicator\"}\n    >\n      <ChevronRightIcon />\n    </ArkTreeView.BranchIndicator>\n  );\n};\n\nexport const TreeViewBranchContent = (\n  props: React.ComponentProps<typeof ArkTreeView.BranchContent>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.BranchContent\n      className={cn(\n        \"relative overflow-hidden\",\n        \"data-[state=open]:animate-[expand_150ms_ease-out]\",\n        \"data-[state=closed]:animate-[collapse_150ms_ease-out]\",\n        \"motion-reduce:animate-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-branch-content\"}\n    >\n      <TreeViewBranchIndentGuide />\n\n      {children}\n    </ArkTreeView.BranchContent>\n  );\n};\n\nconst TreeViewBranchIndentGuide = (\n  props: React.ComponentProps<typeof ArkTreeView.BranchIndentGuide>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.BranchIndentGuide\n      className={cn(\n        \"absolute z-1\",\n        \"h-full w-px\",\n        \"bg-border\",\n        \"inset-s-[calc(var(--padding-inline)+var(--indentation)*(var(--depth)-1)+var(--icon-size)*0.5*var(--depth))]\",\n        \"pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-branch-indent-guide\"}\n    />\n  );\n};\n\nexport const TreeViewContent = (\n  props: React.ComponentProps<typeof ArkTreeView.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.Item\n      className={cn(treeViewControlVariants(), className)}\n      {...rest}\n      data-slot={slot ?? \"tree-view-item\"}\n    />\n  );\n};\n\ninterface TreeViewItemProps\n  extends React.ComponentProps<typeof TreeViewItemTitle> {\n  /**\n   * Custom file icon\n   *\n   * @default <FileIcon />\n   */\n  icon?: React.JSX.ElementType;\n}\n\nexport const TreeViewItem = (props: TreeViewItemProps) => {\n  const { icon: Icon = FileIcon, className, children, ...rest } = props;\n\n  const { fileIcons } = _useTreeView();\n\n  const getFileIcon = (value: string): React.JSX.ElementType => {\n    const extension = getFileExtension(value);\n    const resolved = extension ? fileIcons?.[extension] : undefined;\n    return resolved ?? Icon;\n  };\n\n  return (\n    <ArkTreeView.NodeContext>\n      {(nodeState) => {\n        const ResolvedIcon = getFileIcon(nodeState.value);\n\n        return (\n          <>\n            <TreeViewItemIcon>\n              <ResolvedIcon />\n            </TreeViewItemIcon>\n\n            {nodeState.renaming ? (\n              <TreeViewNodeInput />\n            ) : (\n              <TreeViewItemTitle {...rest}>{children}</TreeViewItemTitle>\n            )}\n          </>\n        );\n      }}\n    </ArkTreeView.NodeContext>\n  );\n};\n\nconst TreeViewItemIcon = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"in-[[data-slot=tree-view-item]:has([data-slot=tree-view-checkbox])]:hidden\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-item-icon\"}\n    />\n  );\n};\n\nconst TreeViewItemTitle = (\n  props: React.ComponentProps<typeof ArkTreeView.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.ItemText\n      className={cn(\n        \"flex flex-1 items-center gap-(--item-gap)\",\n        \"text-ellipsis whitespace-nowrap\",\n        \"overflow-hidden\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-item-title\"}\n    />\n  );\n};\n\nexport const TreeViewCheckbox = (\n  props: React.ComponentProps<typeof ArkTreeView.NodeCheckbox>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.NodeCheckbox\n      className={cn(checkboxVariants(), \"[&_svg]:size-3!\", className)}\n      {...rest}\n      data-slot={slot ?? \"tree-view-checkbox\"}\n    >\n      <ArkTreeView.NodeCheckboxIndicator indeterminate={<MinusIcon />}>\n        <CheckIcon />\n      </ArkTreeView.NodeCheckboxIndicator>\n    </ArkTreeView.NodeCheckbox>\n  );\n};\n\nconst TreeViewNodeInput = (\n  props: React.ComponentProps<typeof ArkTreeView.NodeRenameInput>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTreeView.NodeRenameInput\n      className={cn(\n        \"h-full min-w-0\",\n        \"flex-1\",\n        \"-my-px px-2 py-0\",\n        \"text-sm\",\n        \"border-primary bg-popover text-foreground\",\n        \"rounded-md border\",\n        \"selection:bg-primary/20 selection:text-foreground\",\n        \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tree-view-node-rename-input\"}\n    />\n  );\n};\n\nconst _useTreeView = () => {\n  const context = React.useContext(TreeViewContext);\n\n  if (!context) {\n    throw new Error(\n      \"useTreeViewContext must be used within a TreeViewProvider\"\n    );\n  }\n\n  return context;\n};\n\ntype CreateFileIconsArgs = Record<`.${string}`, React.JSX.ElementType | null>;\n\nexport const createFileIcons = (args: CreateFileIconsArgs) => ({ ...args });\n\nconst getFileExtension = (file: string) => {\n  const name = file.includes(\".\")\n    ? file.split(\".\").at(-1)?.toLowerCase()\n    : null;\n\n  return name ? `.${name}` : null;\n};\n"],"names":["TreeViewContext"],"mappings":";;;;;;;;;AAsBO;AAasB;AACG;AACC;AAE/B;AAYFA;AAMO;AACL;AAAM;AACJ;AACY;AACI;AAChB;AACA;AACG;AAGL;AAEI;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACA;AACI;AACe;AAAA;AAI3B;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAYE;AAAa;AAAZ;AACyB;AACpB;AACe;AACrB;AAGiC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEJ;AAOE;AAEA;AACE;AAAa;AAAZ;AACmD;AAC9C;AACe;AAEnB;AAAyB;AAGzB;AAAA;AAAA;AAGN;AAmBE;AAAM;AACE;AACQ;AACd;AACA;AACA;AACG;AAGL;AAOU;AAAa;AAAZ;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAGC;AAKA;AAED;AAAA;AAAA;AAOf;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAED;AAAA;AAGxB;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAEnB;AAA2B;AAE1B;AAAA;AAAA;AAGP;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AACmD;AAC9C;AACe;AAAA;AAGzB;AAaE;AAKE;AAEA;AAAmB;AAGrB;AAGM;AAEA;AAEI;AAEA;AAKyC;AAE3C;AAKV;AAGE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AAC+D;AAC1D;AACe;AAInB;AAAA;AAGN;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAU;AACR;AAIJ;AACF;;AAOE;AAIA;AACF;;;;;;;;;;;;;;;;;"}