@clasing/ui 2.9.1 → 2.9.2

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
+};

package/dist/entries/field.d.ts

@@ -0,0 +1 @@
+export { Field, FieldDescription, FieldGroup, FieldLabel, FieldMessage, } from '@/components/field';

package/dist/entries/pagination.d.ts

@@ -0,0 +1 @@
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from '@/components/pagination';

package/dist/entries/radio-group.d.ts

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from '@/components/radio-group';

package/dist/entries/tabs.d.ts

@@ -0,0 +1 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, } from '@/components/tabs';

package/dist/entries/tree.d.ts

@@ -0,0 +1 @@
+export { Tree, TreeItem, TreeItemTrigger, TreeItemContent, useTree } from '@/components/tree';

package/dist/hooks/useIsMobile.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsMobile(): boolean;
+export declare function useIsTablet(): boolean;

package/dist/{input-D9gqZjs0.js → input-BlcRuIEB.js}

@@ -2,7 +2,7 @@ import { j as r, c as n } from "./index-C_XDkVGm.js";
 import { EyeSlashIcon as f, EyeIcon as m } from "@phosphor-icons/react";
 import { cva as x } from "class-variance-authority";
 import * as g from "react";
-import { B as b } from "./button-DSpGxL2e.js";
+import { B as b } from "./button-CKrOlPSD.js";
 const o = x(
   `
     flex w-full min-w-0 rounded-md border border-input bg-transparent

package/dist/ui.css

@@ -239,55 +239,9 @@
     0px 16px 32px 0px rgba(25, 25, 25, 0.1),
     0px 0px 12px 0px rgba(25, 25, 25, 0.08);
 
-  --animate-fade-in-scale-up: fadeInScaleUp 0.15s ease-out;
-  --animate-fade-out-scale-up: fadeOutScaleUp 0.15s ease-out;
-  --animate-fade-in-scale-down: fadeInScaleDown 0.15s ease-out;
-  --animate-fade-out-scale-down: fadeOutScaleDown 0.15s ease-out;
-
   --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
   --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
   --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-
-  @keyframes fadeInScaleUp {
-    0% {
-      opacity: 0;
-      transform: scale(0.9) translateY(50px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  @keyframes fadeOutScaleUp {
-    0% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0.9) translateY(50px);
-    }
-  }
-  @keyframes fadeInScaleDown {
-    0% {
-      opacity: 0;
-      transform: scale(0.9) translateY(-50px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  @keyframes fadeOutScaleDown {
-    0% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0.9) translateY(-50px);
-    }
-  }
 }
 
 :root {
@@ -326,13 +280,16 @@
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--color-blue-050);
+  --sidebar-accent-foreground: var(--color-blue-500);
   --sidebar-border: var(--border);
   --surface: var(--color-neutral-100);
   --surface-foreground: var(--foreground);
   --code: var(--color-neutral-100);
   --code-foreground: var(--color-neutral-950);
+  --scrollbar: var(--color-neutral-100);
+  --scrollbar-foreground: var(--color-neutral-200);
+  --scrollbar-hover: var(--color-neutral-300);
 }
 
 .dark {
@@ -370,13 +327,16 @@
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--color-blue-900);
+  --sidebar-accent-foreground: var(--color-blue-200);
   --sidebar-border: var(--border);
   --surface: var(--color-neutral-900);
   --surface-foreground: var(--foreground);
   --code: var(--color-neutral-900);
   --code-foreground: var(--color-neutral-100);
+  --scrollbar: var(--color-neutral-800);
+  --scrollbar-foreground: var(--color-neutral-700);
+  --scrollbar-hover: var(--color-neutral-600);
 }
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -713,17 +673,17 @@ input[type='color']::-webkit-color-swatch {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--color-neutral-000);
+  background: var(--scrollbar);
   border-radius: 30px;
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-neutral-100);
+  background-color: var(--scrollbar-foreground);
   border-radius: 14px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-neutral-200);
+  background-color: var(--scrollbar-hover);
 }
 
 @utility active-card {
@@ -731,5 +691,16 @@ input[type='color']::-webkit-color-swatch {
 }
 
 @utility focusable-item {
-  @apply transition-[color,background-color,box-shadow] focus-visible:ring-[2px] focus-visible:ring-ring-default focus-visible:ring-offset-1 focus-visible:outline-hidden;
+  @apply transition-[color,background-color,box-shadow] focus-visible:ring-[2px] focus-visible:ring-ring-default/80 focus-visible:ring-offset-1 focus-visible:outline-hidden;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "type": "module",
   "files": [
     "dist"
@@ -179,6 +179,10 @@
       "import": "./dist/components/table.js",
       "types": "./dist/components/table.d.ts"
     },
+    "./tabs": {
+      "import": "./dist/components/tabs.js",
+      "types": "./dist/components/tabs.d.ts"
+    },
     "./toggle": {
       "import": "./dist/components/toggle.js",
       "types": "./dist/components/toggle.d.ts"
@@ -191,6 +195,22 @@
       "import": "./dist/components/tooltip.js",
       "types": "./dist/components/tooltip.d.ts"
     },
+    "./tree": {
+      "import": "./dist/components/tree.js",
+      "types": "./dist/components/tree.d.ts"
+    },
+    "./radio-group": {
+      "import": "./dist/components/radio-group.js",
+      "types": "./dist/components/radio-group.d.ts"
+    },
+    "./pagination": {
+      "import": "./dist/components/pagination.js",
+      "types": "./dist/components/pagination.d.ts"
+    },
+    "./field": {
+      "import": "./dist/components/field.js",
+      "types": "./dist/components/field.d.ts"
+    },
     "./blocks/interactive-card": {
       "import": "./dist/components/blocks/interactive-card.js",
       "types": "./dist/components/blocks/interactive-card.d.ts"
@@ -240,7 +260,8 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/css": "^0.14.1",
     "@eslint/js": "^9.39.3",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@storybook/addon-docs": "^10.2.15",
     "@storybook/addon-links": "^10.2.15",
     "@storybook/addon-onboarding": "^10.2.15",
@@ -300,13 +321,15 @@
     "@radix-ui/react-navigation-menu": "^1.2.13",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.14",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/forms": "^0.5.7",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
@@ -317,7 +340,7 @@
     "react-resizable-panels": "^3.0.3",
     "recharts": "^3.1.0",
     "sonner": "^2.0.6",
-    "tw-animate-css": "^1.3.5",
+    "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.0.17"
   }