@tensor_1/react 2.0.0

package/dist/components/Tree.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface TreeNodeData {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    children?: TreeNodeData[];
+}
+interface TreeNodeProps {
+    node: TreeNodeData;
+    expanded: Set<string>;
+    selected?: string;
+    onToggle: (id: string) => void;
+    onSelect?: (id: string) => void;
+    level?: number;
+}
+interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' | 'onChange'> {
+    nodes: TreeNodeData[];
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selected?: string;
+    onToggle?: (id: string) => void;
+    onSelect?: (id: string) => void;
+}
+declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
+
+export { Tree, type TreeNodeData, type TreeNodeProps, type TreeProps };

package/dist/components/Tree.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "../cx.js";
+const ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
+function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isExpanded = expanded.has(node.id);
+  return /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "uix-tree__row",
+        "aria-expanded": hasChildren ? isExpanded : void 0,
+        "aria-selected": selected === node.id,
+        onClick: () => {
+          if (hasChildren) onToggle(node.id);
+          onSelect?.(node.id);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ jsx(ChevronIcon, {}) }),
+          node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: node.icon }),
+          node.label
+        ]
+      }
+    ),
+    hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { children: node.children.map((child) => /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        node: child,
+        expanded,
+        selected,
+        onToggle,
+        onSelect,
+        level: level + 1
+      },
+      child.id
+    )) })
+  ] });
+}
+function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const expanded = controlledExpanded ?? internalExpanded;
+  function handleToggle(id) {
+    if (!controlledExpanded) {
+      setInternalExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }
+    onToggle?.(id);
+  }
+  return /* @__PURE__ */ jsx("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      node,
+      expanded,
+      selected,
+      onToggle: handleToggle,
+      onSelect
+    },
+    node.id
+  )) });
+}
+export {
+  Tree
+};

package/dist/cx.d.ts

@@ -0,0 +1,3 @@
+declare function cx(...args: (string | false | null | undefined | 0)[]): string;
+
+export { cx };

package/dist/cx.js

@@ -0,0 +1,6 @@
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
+}
+export {
+  cx
+};

package/dist/hooks/useDialog.d.ts

@@ -0,0 +1,3 @@
+declare function useDialog(open: boolean): React.RefObject<HTMLDialogElement>;
+
+export { useDialog };

package/dist/hooks/useDialog.js

@@ -0,0 +1,21 @@
+"use client";
+import { useRef, useEffect } from "react";
+function useDialog(open) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (open) {
+      if (!el.open) el.showModal();
+    } else {
+      if (el.open) el.close();
+    }
+    return () => {
+      if (el.open) el.close();
+    };
+  }, [open]);
+  return ref;
+}
+export {
+  useDialog
+};