@clasing/ui 2.9.1 → 2.9.3

package/dist/components/skeleton.js

@@ -1,14 +1,4 @@
-import { j as n, c as s } from "../index-C_XDkVGm.js";
-function o({ className: e, ...t }) {
-  return /* @__PURE__ */ n.jsx(
-    "div",
-    {
-      "data-slot": "skeleton",
-      className: s("bg-accent animate-pulse rounded-md", e),
-      ...t
-    }
-  );
-}
+import { S as r } from "../skeleton-DcjuJ5_d.js";
 export {
-  o as Skeleton
+  r as Skeleton
 };

package/dist/components/tabs.d.ts

@@ -0,0 +1,13 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const tabsListVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
+}
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };

package/dist/components/tabs.js

@@ -0,0 +1,81 @@
+import { j as o, c as i } from "../index-C_XDkVGm.js";
+import * as a from "@radix-ui/react-tabs";
+import { cva as n } from "class-variance-authority";
+import * as r from "react";
+const m = r.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ o.jsx(
+  a.Root,
+  {
+    ref: e,
+    "data-slot": "tabs",
+    className: i("flex flex-col gap-2", t),
+    ...s
+  }
+));
+m.displayName = a.Root.displayName;
+const l = n(
+  `
+    inline-flex items-center justify-center gap-1 rounded-lg bg-muted p-1
+    text-muted-foreground
+  `,
+  {
+    variants: {
+      size: {
+        sm: "h-8",
+        md: "h-10",
+        lg: "h-12"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), c = r.forwardRef(({ className: t, size: s, ...e }, d) => /* @__PURE__ */ o.jsx(
+  a.List,
+  {
+    ref: d,
+    "data-slot": "tabs-list",
+    className: i(l({ size: s }), t),
+    ...e
+  }
+));
+c.displayName = a.List.displayName;
+const p = n(
+  `
+    inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5
+    label-md font-medium whitespace-nowrap focusable-item
+    transition-[color,background-color,box-shadow]
+    disabled:pointer-events-none disabled:opacity-50
+    data-[state=active]:bg-background data-[state=active]:text-foreground
+    data-[state=active]:shadow-xs
+    [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+  `,
+  {
+    variants: {}
+  }
+), f = r.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ o.jsx(
+  a.Trigger,
+  {
+    ref: e,
+    "data-slot": "tabs-trigger",
+    className: i(p(), t),
+    ...s
+  }
+));
+f.displayName = a.Trigger.displayName;
+const g = r.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ o.jsx(
+  a.Content,
+  {
+    ref: e,
+    "data-slot": "tabs-content",
+    className: i("mt-3 focusable-item", t),
+    ...s
+  }
+));
+g.displayName = a.Content.displayName;
+export {
+  m as Tabs,
+  g as TabsContent,
+  c as TabsList,
+  f as TabsTrigger,
+  l as tabsListVariants
+};

package/dist/components/tree.d.ts

@@ -0,0 +1,37 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+type TreeContextProps = {
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    expandedIds: Set<string>;
+    toggleExpanded: (id: string) => void;
+    expandOnSelect: boolean;
+    registerItem: (id: string, element: HTMLElement) => void;
+    unregisterItem: (id: string) => void;
+    focusedId: string | null;
+    setFocusedId: (id: string | null) => void;
+    getVisibleItems: () => string[];
+};
+declare function useTree(): TreeContextProps;
+declare const treeItemTriggerVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TreeProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    defaultExpandedIds?: string[];
+    expandOnSelect?: boolean;
+}
+declare function Tree({ selectedId, onSelect, defaultExpandedIds, expandOnSelect, className, children, ...props }: TreeProps): import("react/jsx-runtime").JSX.Element;
+interface TreeItemProps extends React.ComponentProps<'div'> {
+    value: string;
+    disabled?: boolean;
+}
+declare function TreeItem({ value, disabled, className, children, ...props }: TreeItemProps): import("react/jsx-runtime").JSX.Element;
+interface TreeItemTriggerProps extends React.ComponentProps<'div'>, VariantProps<typeof treeItemTriggerVariants> {
+}
+declare function TreeItemTrigger({ className, children, ...props }: TreeItemTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface TreeItemContentProps extends React.ComponentProps<'div'> {
+}
+declare function TreeItemContent({ className, children, ...props }: TreeItemContentProps): import("react/jsx-runtime").JSX.Element | null;
+export { Tree, TreeItem, TreeItemContent, TreeItemTrigger, useTree };

package/dist/components/tree.js

@@ -0,0 +1,312 @@
+import { j as p, c as C } from "../index-C_XDkVGm.js";
+import { CaretRightIcon as M } from "@phosphor-icons/react";
+import { cva as q } from "class-variance-authority";
+import * as N from "react";
+import { createContext as _, useState as S, useRef as H, useCallback as m, useMemo as K, use as A } from "react";
+const V = _(null), R = _(null);
+function z() {
+  const e = A(V);
+  if (!e)
+    throw new Error("useTree must be used within a Tree component.");
+  return e;
+}
+function F() {
+  const e = A(R);
+  if (!e)
+    throw new Error("useTreeItem must be used within a TreeItem component.");
+  return e;
+}
+const L = q(
+  [
+    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 paragraph-sm",
+    "focusable-item",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"
+  ],
+  {
+    variants: {
+      isSelected: {
+        true: "bg-primary/10 font-medium text-primary",
+        false: `
+          text-foreground
+          hover:bg-muted
+        `
+      }
+    },
+    defaultVariants: {
+      isSelected: !1
+    }
+  }
+);
+function G({
+  selectedId: e = null,
+  onSelect: i,
+  defaultExpandedIds: g = [],
+  expandOnSelect: s = !0,
+  className: n,
+  children: l,
+  ...I
+}) {
+  const [c, f] = S(
+    () => new Set(g)
+  ), [d, E] = S(null), u = H(/* @__PURE__ */ new Map()), b = m((t) => {
+    f((o) => {
+      const r = new Set(o);
+      return r.has(t) ? r.delete(t) : r.add(t), r;
+    });
+  }, []), v = m((t, o) => {
+    u.current.set(t, o);
+  }, []), D = m((t) => {
+    u.current.delete(t);
+  }, []), x = m(() => {
+    const t = u.current;
+    return t.size === 0 ? [] : Array.from(
+      document.querySelectorAll('[role="treeitem"]')
+    ).filter((r) => t.has(r.dataset.treeitemId ?? "")).map((r) => r.dataset.treeitemId ?? "").filter(Boolean);
+  }, []), T = m(
+    (t) => {
+      const o = x();
+      if (o.length === 0) return;
+      const r = d ?? e, j = r ? o.indexOf(r) : -1, w = (a) => {
+        E(a);
+        const y = u.current.get(a), k = y?.querySelector(
+          '[role="button"]'
+        );
+        k ? k.focus() : y?.focus();
+      };
+      switch (t.key) {
+        case "ArrowDown": {
+          t.preventDefault();
+          const a = Math.min(j + 1, o.length - 1);
+          w(o[a]);
+          break;
+        }
+        case "ArrowUp": {
+          t.preventDefault();
+          const a = Math.max(j - 1, 0);
+          w(o[a]);
+          break;
+        }
+        case "ArrowRight": {
+          if (t.preventDefault(), r)
+            if (!c.has(r))
+              f((a) => /* @__PURE__ */ new Set([...a, r]));
+            else {
+              const a = j + 1;
+              a < o.length && w(o[a]);
+            }
+          break;
+        }
+        case "ArrowLeft": {
+          if (t.preventDefault(), r)
+            if (c.has(r))
+              f((a) => {
+                const y = new Set(a);
+                return y.delete(r), y;
+              });
+            else {
+              const k = u.current.get(r)?.closest('[role="group"]')?.closest('[role="treeitem"]')?.dataset.treeitemId;
+              k && w(k);
+            }
+          break;
+        }
+        case "Home": {
+          t.preventDefault(), o.length > 0 && w(o[0]);
+          break;
+        }
+        case "End": {
+          t.preventDefault(), o.length > 0 && w(o[o.length - 1]);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          t.preventDefault(), r && (i?.(r), s && b(r));
+          break;
+        }
+      }
+    },
+    [
+      d,
+      e,
+      c,
+      x,
+      i,
+      s,
+      b
+    ]
+  ), h = K(
+    () => ({
+      selectedId: e,
+      onSelect: i ?? (() => {
+      }),
+      expandedIds: c,
+      toggleExpanded: b,
+      expandOnSelect: s,
+      registerItem: v,
+      unregisterItem: D,
+      focusedId: d,
+      setFocusedId: E,
+      getVisibleItems: x
+    }),
+    [
+      e,
+      i,
+      c,
+      b,
+      s,
+      v,
+      D,
+      d,
+      E,
+      x
+    ]
+  );
+  return /* @__PURE__ */ p.jsx(V, { value: h, children: /* @__PURE__ */ p.jsx(
+    "div",
+    {
+      "data-slot": "tree",
+      role: "tree",
+      "aria-label": "File tree",
+      className: C(
+        "flex flex-col gap-0.5",
+        // Focus ring for keyboard navigation
+        `
+            focus:ring-2 focus:ring-ring-default focus:ring-offset-1
+            focus:outline-hidden
+          `,
+        `
+            focus-visible:ring-2 focus-visible:ring-ring-default
+            focus-visible:ring-offset-1 focus-visible:outline-hidden
+          `,
+        n
+      ),
+      onKeyDown: T,
+      tabIndex: 0,
+      ...I,
+      children: l
+    }
+  ) });
+}
+function J({
+  value: e,
+  disabled: i = !1,
+  className: g,
+  children: s,
+  ...n
+}) {
+  const l = z(), I = A(R), c = I ? I.level + 1 : 1, f = l.expandedIds.has(e), d = l.selectedId === e, E = l.focusedId === e, [u, b] = S(!1), v = H(null);
+  N.useEffect(() => {
+    const h = v.current;
+    if (h)
+      return l.registerItem(e, h), () => l.unregisterItem(e);
+  }, [e, l]);
+  const D = m(
+    (h) => {
+      const t = v.current?.closest('[role="tree"]');
+      t && t.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: h.key,
+          code: h.code,
+          bubbles: !0,
+          cancelable: !0
+        })
+      );
+    },
+    []
+  ), x = K(
+    () => ({ value: e, isExpanded: f, isSelected: d, hasChildren: u, level: c, disabled: i }),
+    [e, f, d, u, c, i]
+  ), T = K(
+    () => ({ ...x, _setHasChildren: b }),
+    [x]
+  );
+  return /* @__PURE__ */ p.jsx(R, { value: T, children: /* @__PURE__ */ p.jsx(
+    "div",
+    {
+      ref: v,
+      "data-slot": "tree-item",
+      "data-treeitem-id": e,
+      role: "treeitem",
+      "aria-expanded": u ? f : void 0,
+      "aria-selected": d,
+      "aria-level": c,
+      "aria-disabled": i || void 0,
+      tabIndex: E || l.focusedId === null && d ? 0 : -1,
+      "data-state": f ? "open" : "closed",
+      "data-selected": d ? "true" : "false",
+      "data-disabled": i ? "true" : void 0,
+      className: C("outline-none", g),
+      onKeyDown: D,
+      ...n,
+      children: s
+    }
+  ) });
+}
+function P({
+  className: e,
+  children: i,
+  ...g
+}) {
+  const s = z(), n = F(), l = m(() => {
+    n.disabled || (s.onSelect(n.value), s.setFocusedId(n.value), n.hasChildren && s.expandOnSelect && s.toggleExpanded(n.value));
+  }, [n, s]), I = m(
+    (c) => {
+      n.disabled || (c.key === "Enter" || c.key === " ") && (c.preventDefault(), l());
+    },
+    [n.disabled, l]
+  );
+  return /* @__PURE__ */ p.jsxs(
+    "div",
+    {
+      "data-slot": "tree-item-trigger",
+      role: "button",
+      tabIndex: n.disabled ? -1 : 0,
+      "aria-disabled": n.disabled || void 0,
+      className: C(
+        L({ isSelected: n.isSelected }),
+        e
+      ),
+      style: { paddingLeft: `${(n.level - 1) * 16 + 8}px` },
+      onClick: l,
+      onKeyDown: I,
+      ...g,
+      children: [
+        n.hasChildren ? /* @__PURE__ */ p.jsx(
+          M,
+          {
+            className: C(
+              "size-4 shrink-0 transition-transform duration-200",
+              n.isExpanded && "rotate-90"
+            ),
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ p.jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true" }),
+        i
+      ]
+    }
+  );
+}
+function Q({
+  className: e,
+  children: i,
+  ...g
+}) {
+  const s = F();
+  return N.useEffect(() => (s._setHasChildren?.(!0), () => s._setHasChildren?.(!1)), [s]), s.isExpanded ? /* @__PURE__ */ p.jsx(
+    "div",
+    {
+      "data-slot": "tree-item-content",
+      role: "group",
+      className: C("flex flex-col gap-0.5", e),
+      ...g,
+      children: i
+    }
+  ) : null;
+}
+export {
+  G as Tree,
+  J as TreeItem,
+  Q as TreeItemContent,
+  P as TreeItemTrigger,
+  z as useTree
+};