@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/tree-view.cjs

@@ -0,0 +1,450 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tree_view_exports = {};
+__export(tree_view_exports, {
+  TreeView: () => TreeView
+});
+module.exports = __toCommonJS(tree_view_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_focus_ring = require("../utils/focus-ring.cjs");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      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",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function FileIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      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",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+      ]
+    }
+  );
+}
+function FolderIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      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",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" })
+    }
+  );
+}
+function FolderOpenIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      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",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" })
+    }
+  );
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function MinusIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" })
+    }
+  );
+}
+const TreeContext = (0, import_react.createContext)({
+  expanded: /* @__PURE__ */ new Set(),
+  toggleExpand: () => {
+  },
+  checkable: false,
+  checkedSet: /* @__PURE__ */ new Set(),
+  toggleCheck: () => {
+  },
+  getCheckState: () => "unchecked",
+  showLines: true,
+  showIcons: true,
+  shouldReduce: false
+});
+function _collectLeafIds(node) {
+  if (!node.children || node.children.length === 0) {
+    return [node.id];
+  }
+  return node.children.flatMap(_collectLeafIds);
+}
+function collectAllIds(node) {
+  const ids = [node.id];
+  if (node.children) {
+    for (const child of node.children) {
+      ids.push(...collectAllIds(child));
+    }
+  }
+  return ids;
+}
+function TreeItem({ node, depth }) {
+  const {
+    expanded,
+    toggleExpand,
+    checkable,
+    checkedSet: _checkedSet,
+    toggleCheck,
+    getCheckState,
+    onNodeSelect,
+    selectedId,
+    showLines,
+    showIcons,
+    shouldReduce
+  } = (0, import_react.useContext)(TreeContext);
+  const hasChildren = Boolean(node.children && node.children.length > 0);
+  const isExpanded = expanded.has(node.id);
+  const isSelected = selectedId === node.id;
+  const checkState = checkable ? getCheckState(node) : "unchecked";
+  const handleToggle = (0, import_react.useCallback)(() => {
+    if (node.disabled) return;
+    if (hasChildren) {
+      toggleExpand(node.id);
+    }
+    onNodeSelect?.(node.id);
+  }, [node.id, node.disabled, hasChildren, toggleExpand, onNodeSelect]);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (node.disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleToggle();
+      }
+      if (e.key === "ArrowRight" && hasChildren && !isExpanded) {
+        e.preventDefault();
+        toggleExpand(node.id);
+      }
+      if (e.key === "ArrowLeft" && hasChildren && isExpanded) {
+        e.preventDefault();
+        toggleExpand(node.id);
+      }
+    },
+    [
+      node.id,
+      node.disabled,
+      hasChildren,
+      isExpanded,
+      handleToggle,
+      toggleExpand
+    ]
+  );
+  const handleCheckClick = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      if (node.disabled) return;
+      toggleCheck(node.id);
+    },
+    [node.id, node.disabled, toggleCheck]
+  );
+  let iconNode = null;
+  if (node.icon) {
+    iconNode = node.icon;
+  } else if (showIcons) {
+    if (hasChildren) {
+      iconNode = isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderOpenIcon, { className: "size-4 text-muted-foreground shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderIcon, { className: "size-4 text-muted-foreground shrink-0" });
+    } else {
+      iconNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileIcon, { className: "size-4 text-muted-foreground shrink-0" });
+    }
+  }
+  const motionTransition = shouldReduce ? { duration: 0.01 } : {
+    duration: 0.2,
+    ease: [0.25, 0.1, 0.25, 1]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "li",
+    {
+      role: "treeitem",
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-selected": isSelected,
+      "aria-disabled": node.disabled || void 0,
+      "data-ds": "",
+      "data-ds-component": "tree-item",
+      ...isSelected ? { "data-ds-selected": "" } : {},
+      ...node.disabled ? { "data-ds-disabled": "" } : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_cn.cn)(
+              "group/item flex items-center gap-1.5 py-1 px-1.5 rounded-md cursor-pointer select-none",
+              "text-sm text-foreground transition-colors duration-fast",
+              "hover:bg-muted/50",
+              isSelected && "bg-muted text-foreground",
+              node.disabled && "opacity-50 pointer-events-none",
+              import_focus_ring.focusRingClasses
+            ),
+            style: { paddingLeft: `${depth * 16 + 4}px` },
+            onClick: handleToggle,
+            onKeyDown: handleKeyDown,
+            tabIndex: node.disabled ? -1 : 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex size-4 items-center justify-center shrink-0", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ChevronRightIcon,
+                {
+                  className: (0, import_cn.cn)(
+                    "size-3.5 text-muted-foreground transition-transform duration-fast",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ) }),
+              checkable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCheckClick,
+                  className: (0, import_cn.cn)(
+                    "inline-flex size-4 shrink-0 items-center justify-center rounded-[3px] border border-border",
+                    "transition-colors duration-fast",
+                    checkState === "checked" && "bg-primary border-primary text-primary-foreground",
+                    checkState === "indeterminate" && "bg-primary border-primary text-primary-foreground",
+                    import_focus_ring.focusRingClasses
+                  ),
+                  "aria-checked": checkState === "checked" ? true : checkState === "indeterminate" ? "mixed" : false,
+                  "aria-label": `Select ${node.label}`,
+                  tabIndex: -1,
+                  children: [
+                    checkState === "checked" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { className: "size-3" }),
+                    checkState === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MinusIcon, { className: "size-3" })
+                  ]
+                }
+              ),
+              iconNode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", children: iconNode }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: node.label })
+            ]
+          }
+        ),
+        hasChildren && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.ul,
+          {
+            role: "group",
+            initial: { height: 0, opacity: 0, overflow: "hidden" },
+            animate: {
+              height: "auto",
+              opacity: 1,
+              overflow: "hidden",
+              transitionEnd: { overflow: "visible" }
+            },
+            exit: { height: 0, opacity: 0, overflow: "hidden" },
+            transition: motionTransition,
+            className: (0, import_cn.cn)(
+              "relative list-none",
+              showLines && "before:absolute before:left-[calc(var(--tree-indent))] before:top-0 before:bottom-2 before:w-px before:bg-border"
+            ),
+            style: {
+              "--tree-indent": `${(depth + 1) * 16 + 10}px`
+            },
+            children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeItem, { node: child, depth: depth + 1 }, child.id))
+          }
+        ) })
+      ]
+    }
+  );
+}
+const TreeView = (0, import_react.forwardRef)(
+  function TreeView2({
+    items,
+    defaultExpanded = [],
+    expanded: expandedProp,
+    onExpandedChange,
+    checkable = false,
+    defaultChecked = [],
+    checked: checkedProp,
+    onCheckedChange,
+    onNodeSelect,
+    selectedId,
+    showLines = true,
+    showIcons = true,
+    className
+  }, ref) {
+    const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+    const [internalExpanded, setInternalExpanded] = (0, import_react.useState)(
+      () => new Set(defaultExpanded)
+    );
+    const expanded = expandedProp ? new Set(expandedProp) : internalExpanded;
+    const toggleExpand = (0, import_react.useCallback)(
+      (id) => {
+        const next = new Set(expanded);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        if (!expandedProp) {
+          setInternalExpanded(next);
+        }
+        onExpandedChange?.(Array.from(next));
+      },
+      [expanded, expandedProp, onExpandedChange]
+    );
+    const [internalChecked, setInternalChecked] = (0, import_react.useState)(
+      () => new Set(defaultChecked)
+    );
+    const checkedSet = checkedProp ? new Set(checkedProp) : internalChecked;
+    const toggleCheck = (0, import_react.useCallback)(
+      (id) => {
+        function findNode(nodes) {
+          for (const n of nodes) {
+            if (n.id === id) return n;
+            if (n.children) {
+              const found = findNode(n.children);
+              if (found) return found;
+            }
+          }
+          return null;
+        }
+        const node = findNode(items);
+        if (!node) return;
+        const next = new Set(checkedSet);
+        const allIds = collectAllIds(node);
+        const allChecked = allIds.every((nid) => next.has(nid));
+        for (const nid of allIds) {
+          if (allChecked) {
+            next.delete(nid);
+          } else {
+            next.add(nid);
+          }
+        }
+        if (!checkedProp) {
+          setInternalChecked(next);
+        }
+        onCheckedChange?.(Array.from(next));
+      },
+      [items, checkedSet, checkedProp, onCheckedChange]
+    );
+    const getCheckState = (0, import_react.useCallback)(
+      (node) => {
+        const allIds = collectAllIds(node);
+        const checkedCount = allIds.filter((id) => checkedSet.has(id)).length;
+        if (checkedCount === 0) return "unchecked";
+        if (checkedCount === allIds.length) return "checked";
+        return "indeterminate";
+      },
+      [checkedSet]
+    );
+    const ctx = (0, import_react.useMemo)(
+      () => ({
+        expanded,
+        toggleExpand,
+        checkable,
+        checkedSet,
+        toggleCheck,
+        getCheckState,
+        onNodeSelect,
+        selectedId,
+        showLines,
+        showIcons,
+        shouldReduce
+      }),
+      [
+        expanded,
+        toggleExpand,
+        checkable,
+        checkedSet,
+        toggleCheck,
+        getCheckState,
+        onNodeSelect,
+        selectedId,
+        showLines,
+        showIcons,
+        shouldReduce
+      ]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref,
+        className: (0, import_cn.cn)("list-none text-sm", className),
+        "data-ds": "",
+        "data-ds-component": "tree-view",
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeItem, { node: item, depth: 0 }, item.id))
+      }
+    ) });
+  }
+);
+TreeView.displayName = "TreeView";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TreeView
+});

package/dist/components/tree-view.d.cts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TreeNode {
+    /** Unique identifier for this node. */
+    id: string;
+    /** Display label for the node. */
+    label: string;
+    /** Optional icon to render before the label. */
+    icon?: ReactNode;
+    /** Child nodes. If present, the node is treated as a branch (folder). */
+    children?: TreeNode[];
+    /** Whether this node is disabled. */
+    disabled?: boolean;
+}
+type TreeCheckedState = "checked" | "unchecked" | "indeterminate";
+interface TreeViewProps {
+    /** The tree data structure to render. */
+    items: TreeNode[];
+    /** Default expanded node IDs (uncontrolled). */
+    defaultExpanded?: string[];
+    /** Controlled expanded node IDs. */
+    expanded?: string[];
+    /** Callback when expanded state changes. */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** Whether nodes are checkable. @default false */
+    checkable?: boolean;
+    /** Default checked node IDs (uncontrolled). */
+    defaultChecked?: string[];
+    /** Controlled checked node IDs. */
+    checked?: string[];
+    /** Callback when checked state changes. */
+    onCheckedChange?: (checked: string[]) => void;
+    /** Callback when a node is clicked/selected. */
+    onNodeSelect?: (nodeId: string) => void;
+    /** Currently selected node ID (visual highlight). */
+    selectedId?: string;
+    /** Whether to show connector lines. @default true */
+    showLines?: boolean;
+    /** Whether to show default file/folder icons. @default true */
+    showIcons?: boolean;
+    /** Additional CSS classes on the root. */
+    className?: string;
+}
+/**
+ * `TreeView` — an expandable tree structure with checkable nodes.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   {
+ *     id: "src", label: "src",
+ *     children: [
+ *       { id: "app", label: "app.tsx" },
+ *       { id: "index", label: "index.ts" },
+ *     ],
+ *   },
+ *   { id: "readme", label: "README.md" },
+ * ];
+ *
+ * <TreeView items={items} />
+ * <TreeView items={items} checkable onCheckedChange={console.log} />
+ * ```
+ */
+declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLUListElement>>;
+
+export { type TreeCheckedState, type TreeNode, TreeView, type TreeViewProps };

package/dist/components/tree-view.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TreeNode {
+    /** Unique identifier for this node. */
+    id: string;
+    /** Display label for the node. */
+    label: string;
+    /** Optional icon to render before the label. */
+    icon?: ReactNode;
+    /** Child nodes. If present, the node is treated as a branch (folder). */
+    children?: TreeNode[];
+    /** Whether this node is disabled. */
+    disabled?: boolean;
+}
+type TreeCheckedState = "checked" | "unchecked" | "indeterminate";
+interface TreeViewProps {
+    /** The tree data structure to render. */
+    items: TreeNode[];
+    /** Default expanded node IDs (uncontrolled). */
+    defaultExpanded?: string[];
+    /** Controlled expanded node IDs. */
+    expanded?: string[];
+    /** Callback when expanded state changes. */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** Whether nodes are checkable. @default false */
+    checkable?: boolean;
+    /** Default checked node IDs (uncontrolled). */
+    defaultChecked?: string[];
+    /** Controlled checked node IDs. */
+    checked?: string[];
+    /** Callback when checked state changes. */
+    onCheckedChange?: (checked: string[]) => void;
+    /** Callback when a node is clicked/selected. */
+    onNodeSelect?: (nodeId: string) => void;
+    /** Currently selected node ID (visual highlight). */
+    selectedId?: string;
+    /** Whether to show connector lines. @default true */
+    showLines?: boolean;
+    /** Whether to show default file/folder icons. @default true */
+    showIcons?: boolean;
+    /** Additional CSS classes on the root. */
+    className?: string;
+}
+/**
+ * `TreeView` — an expandable tree structure with checkable nodes.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   {
+ *     id: "src", label: "src",
+ *     children: [
+ *       { id: "app", label: "app.tsx" },
+ *       { id: "index", label: "index.ts" },
+ *     ],
+ *   },
+ *   { id: "readme", label: "README.md" },
+ * ];
+ *
+ * <TreeView items={items} />
+ * <TreeView items={items} checkable onCheckedChange={console.log} />
+ * ```
+ */
+declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLUListElement>>;
+
+export { type TreeCheckedState, type TreeNode, TreeView, type TreeViewProps };