@devalok/shilp-sutra 0.8.3 → 0.9.0

package/dist/_chunks/tooltip.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import * as d from "react";
+import { aO as r, aP as n, aQ as m, aR as l, aS as o } from "./primitives.js";
+import { c as f } from "./utils.js";
+const T = r, u = n, b = m, p = d.forwardRef(({ className: a, sideOffset: e = 4, ...s }, i) => t(l, { children: t(o, { ref: i, sideOffset: e, className: f("z-tooltip overflow-hidden rounded-ds-md bg-text-primary px-ds-04 py-ds-02b text-ds-sm text-text-inverse shadow-02 duration-fast-02 ease-productive-entrance animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", a), ...s }) }));
+p.displayName = o.displayName;
+export {
+  T,
+  u as a,
+  b,
+  p as c
+};

package/dist/_chunks/tree-view.js

@@ -0,0 +1,304 @@
+"use client";
+import { jsxs as I, jsx as c } from "react/jsx-runtime";
+import * as l from "react";
+import { useState as V, useCallback as P } from "react";
+import { c as D } from "./utils.js";
+import { IconChevronRight as q } from "@tabler/icons-react";
+import { C as M } from "./checkbox.js";
+function z(r = {}) {
+  const { defaultExpanded: m, defaultSelected: n, multiSelect: d, onSelect: h, onExpand: a } = r, [g, x] = V(
+    new Set(m ?? [])
+  ), [y, E] = V(
+    new Set(n ?? [])
+  ), s = P(
+    (t) => {
+      x((i) => {
+        const f = new Set(i);
+        return f.has(t) ? f.delete(t) : f.add(t), a == null || a(Array.from(f)), f;
+      });
+    },
+    [a]
+  ), u = P(
+    (t, i) => {
+      E((f) => {
+        let p;
+        return d && (i != null && i.ctrlKey) ? (p = new Set(f), p.has(t) ? p.delete(t) : p.add(t)) : p = /* @__PURE__ */ new Set([t]), h == null || h(Array.from(p)), p;
+      });
+    },
+    [d, h]
+  );
+  return {
+    expanded: g,
+    selected: y,
+    toggle: s,
+    select: u,
+    isExpanded: (t) => g.has(t),
+    isSelected: (t) => y.has(t),
+    expandAll: (t) => x(new Set(t)),
+    collapseAll: () => x(/* @__PURE__ */ new Set())
+  };
+}
+const K = l.forwardRef(
+  ({
+    itemId: r,
+    label: m,
+    icon: n,
+    secondaryLabel: d,
+    actions: h,
+    disabled: a = !1,
+    children: g,
+    depth: x = 0,
+    className: y
+  }, E) => {
+    const s = G(), u = l.Children.count(g) > 0, t = s.tree.isExpanded(r), i = s.tree.isSelected(r), f = (e) => {
+      a || s.tree.select(r, e);
+    }, p = (e) => {
+      e.stopPropagation(), !a && s.tree.toggle(r);
+    }, k = (e) => {
+      a || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), s.tree.select(r)), e.key === "ArrowRight" && u && !t && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(r)), e.key === "ArrowLeft" && u && t && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(r)));
+    }, N = l.useMemo(() => {
+      if (!s.checkboxes || !u)
+        return { checked: i, indeterminate: !1 };
+      const e = [], w = (C) => {
+        l.Children.forEach(C, (b) => {
+          l.isValidElement(b) && b.props.itemId && (e.push(b.props.itemId), b.props.children && w(b.props.children));
+        });
+      };
+      w(g);
+      const S = e.filter(
+        (C) => s.tree.isSelected(C)
+      ).length;
+      return S === 0 && !i ? { checked: !1, indeterminate: !1 } : S === e.length ? { checked: !0, indeterminate: !1 } : { checked: !1, indeterminate: !0 };
+    }, [s.checkboxes, u, g, i, s.tree]);
+    return /* @__PURE__ */ I(
+      "li",
+      {
+        ref: E,
+        role: "treeitem",
+        "aria-expanded": u ? t : void 0,
+        "aria-selected": i,
+        "aria-level": x + 1,
+        "aria-disabled": a || void 0,
+        className: "list-none",
+        children: [
+          /* @__PURE__ */ I(
+            "div",
+            {
+              role: "presentation",
+              "data-tree-item": r,
+              tabIndex: a ? -1 : 0,
+              onClick: f,
+              onKeyDown: k,
+              style: { paddingLeft: x * 20 + 8 },
+              className: D(
+                "flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01",
+                "hover:bg-layer-02",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+                i && "bg-interactive-selected text-text-interactive",
+                a && "opacity-[0.38] cursor-not-allowed pointer-events-none",
+                y
+              ),
+              children: [
+                u ? /* @__PURE__ */ c(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    "aria-hidden": "true",
+                    onClick: p,
+                    className: "flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer",
+                    children: /* @__PURE__ */ c(
+                      q,
+                      {
+                        size: 16,
+                        className: D(
+                          "transition-transform duration-moderate-02",
+                          t && "rotate-90"
+                        )
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ c("span", { className: "inline-block w-4 shrink-0", "aria-hidden": "true" }),
+                s.checkboxes && /* @__PURE__ */ c(
+                  M,
+                  {
+                    checked: N.checked,
+                    indeterminate: N.indeterminate,
+                    disabled: a,
+                    tabIndex: -1,
+                    onClick: (e) => e.stopPropagation(),
+                    onCheckedChange: () => {
+                      a || s.tree.select(r);
+                    },
+                    className: "shrink-0"
+                  }
+                ),
+                n && /* @__PURE__ */ c("span", { className: "flex shrink-0 items-center text-icon-secondary", children: n }),
+                /* @__PURE__ */ c("span", { className: "truncate text-ds-sm", children: m }),
+                d && /* @__PURE__ */ c("span", { className: "ml-auto truncate text-ds-xs text-text-secondary", children: d }),
+                h && /* @__PURE__ */ c(
+                  "span",
+                  {
+                    className: "ml-auto flex shrink-0 items-center gap-ds-01",
+                    onClick: (e) => e.stopPropagation(),
+                    role: "presentation",
+                    children: h
+                  }
+                )
+              ]
+            }
+          ),
+          u && /* @__PURE__ */ c(
+            "div",
+            {
+              role: "group",
+              className: D(
+                "grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard",
+                t ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ c("ul", { role: "group", className: "overflow-hidden m-0 p-0", children: l.Children.map(g, (e) => l.isValidElement(e) ? l.cloneElement(e, {
+                depth: x + 1
+              }) : e) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+K.displayName = "TreeItem";
+const j = l.createContext(null);
+function G() {
+  const r = l.useContext(j);
+  if (!r)
+    throw new Error("TreeItem must be used within a <TreeView>");
+  return r;
+}
+function L(r, m = 0) {
+  return r.map((n) => /* @__PURE__ */ c(
+    K,
+    {
+      itemId: n.id,
+      label: n.label,
+      icon: n.icon,
+      disabled: n.disabled,
+      depth: m,
+      children: n.children && n.children.length > 0 ? L(n.children, m + 1) : void 0
+    },
+    n.id
+  ));
+}
+function H(r) {
+  return Array.from(
+    r.querySelectorAll("[data-tree-item]")
+  ).filter((m) => {
+    let n = m.parentElement;
+    for (; n && n !== r; ) {
+      if (n.getAttribute("role") === "group") {
+        const d = n.parentElement;
+        if (d && d.classList.contains("grid-rows-[0fr]"))
+          return !1;
+      }
+      n = n.parentElement;
+    }
+    return !0;
+  });
+}
+const U = l.forwardRef(
+  ({
+    items: r,
+    defaultExpanded: m,
+    defaultSelected: n,
+    multiSelect: d = !1,
+    checkboxes: h = !1,
+    onSelect: a,
+    onExpand: g,
+    className: x,
+    children: y
+  }, E) => {
+    const s = z({
+      defaultExpanded: m,
+      defaultSelected: n,
+      multiSelect: d,
+      onSelect: a,
+      onExpand: g
+    }), u = l.useRef(null), t = E ?? u, i = (k) => {
+      var S, C, b;
+      const N = t.current;
+      if (!N) return;
+      const e = H(N), w = e.findIndex(
+        (o) => o === document.activeElement
+      );
+      switch (k.key) {
+        case "ArrowDown": {
+          k.preventDefault();
+          const o = e[w + 1];
+          o == null || o.focus();
+          break;
+        }
+        case "ArrowUp": {
+          k.preventDefault();
+          const o = e[w - 1];
+          o == null || o.focus();
+          break;
+        }
+        case "ArrowRight": {
+          const o = e[w];
+          if (o) {
+            const A = o.getAttribute("data-tree-item");
+            if (A && s.isExpanded(A)) {
+              k.preventDefault();
+              const v = e[w + 1];
+              v == null || v.focus();
+            }
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          const o = e[w];
+          if (o) {
+            const A = o.getAttribute("data-tree-item"), v = o.closest('[role="treeitem"]'), R = (S = v == null ? void 0 : v.parentElement) == null ? void 0 : S.closest(
+              '[role="treeitem"]'
+            );
+            if (A && !s.isExpanded(A) && R) {
+              k.preventDefault();
+              const T = R.querySelector(
+                "[data-tree-item]"
+              );
+              T == null || T.focus();
+            }
+          }
+          break;
+        }
+        case "Home": {
+          k.preventDefault(), (C = e[0]) == null || C.focus();
+          break;
+        }
+        case "End": {
+          k.preventDefault(), (b = e[e.length - 1]) == null || b.focus();
+          break;
+        }
+      }
+    }, f = l.useMemo(
+      () => ({ tree: s, checkboxes: h }),
+      [s, h]
+    ), p = r ? L(r) : y;
+    return /* @__PURE__ */ c(j.Provider, { value: f, children: /* @__PURE__ */ c(
+      "ul",
+      {
+        ref: t,
+        role: "tree",
+        "aria-multiselectable": d || void 0,
+        onKeyDown: i,
+        className: D("m-0 list-none p-0", x),
+        children: p
+      }
+    ) });
+  }
+);
+U.displayName = "TreeView";
+export {
+  K as T,
+  U as a,
+  z as u
+};