@zentauri-ui/zentauri-components 1.7.6 → 1.7.8

package/dist/ui/tree-view/types.d.ts

@@ -0,0 +1,61 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentType, ReactNode } from "react";
+import type { treeViewVariants } from "./variants";
+export type TreeViewVariantProps = VariantProps<typeof treeViewVariants>;
+export type TreeNode = {
+    /** Stable, unique identifier used for expansion and selection state. */
+    id: string;
+    label: ReactNode;
+    /** Optional leading icon rendered before the label. */
+    icon?: ReactNode;
+    children?: TreeNode[];
+    disabled?: boolean;
+};
+export type TreeViewRenderArgs = {
+    node: TreeNode;
+    depth: number;
+    isExpanded: boolean;
+    isSelected: boolean;
+};
+export type TreeViewBaseProps = TreeViewVariantProps & {
+    data: TreeNode[];
+    /** Uncontrolled set of expanded node ids. */
+    defaultExpanded?: string[];
+    /** Controlled set of expanded node ids. */
+    expanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** Uncontrolled selected node id. */
+    defaultSelected?: string;
+    /** Controlled selected node id. */
+    selected?: string;
+    onSelect?: (node: TreeNode) => void;
+    /** Replace the default label rendering for each node. */
+    renderNode?: (args: TreeViewRenderArgs) => ReactNode;
+    /** Draw vertical indentation guide lines for nested levels. */
+    showGuides?: boolean;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export type TreeViewProps = TreeViewBaseProps;
+export type TreeGroupProps = {
+    open: boolean;
+    level: number;
+    children: ReactNode;
+};
+export type TreeViewCtx = {
+    appearance: NonNullable<TreeViewBaseProps["appearance"]>;
+    size: NonNullable<TreeViewBaseProps["size"]>;
+    showGuides: boolean;
+    GroupComponent: ComponentType<TreeGroupProps>;
+    isExpanded: (id: string) => boolean;
+    toggleExpanded: (id: string) => void;
+    setExpanded: (id: string, open: boolean) => void;
+    selectedId: string | undefined;
+    activeId: string | undefined;
+    selectNode: (node: TreeNode) => void;
+    registerItem: (id: string, el: HTMLDivElement | null) => void;
+    onItemKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    renderNode?: (args: TreeViewRenderArgs) => ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/ui/tree-view/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/types.ts"],"names":[],"mappings":"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"}

package/dist/ui/tree-view/variants.d.ts

@@ -0,0 +1,9 @@
+export declare const treeViewVariants: (props?: ({
+    appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const treeViewItemVariants: (props?: ({
+    appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/ui/tree-view/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/variants.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB;;;8EAS3B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;8EAS/B,CAAC"}

package/dist/ui/tree-view.js

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+var chunkQHEHBC6M_js = require('../chunk-QHEHBC6M.js');
+require('../chunk-ZS5756ZC.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function TreeView(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkQHEHBC6M_js.TreeViewBase, { ...props });
+}
+TreeView.displayName = "TreeView";
+
+Object.defineProperty(exports, "TreeViewBase", {
+  enumerable: true,
+  get: function () { return chunkQHEHBC6M_js.TreeViewBase; }
+});
+Object.defineProperty(exports, "treeViewItemVariants", {
+  enumerable: true,
+  get: function () { return chunkQHEHBC6M_js.treeViewItemVariants; }
+});
+Object.defineProperty(exports, "treeViewVariants", {
+  enumerable: true,
+  get: function () { return chunkQHEHBC6M_js.treeViewVariants; }
+});
+exports.TreeView = TreeView;
+//# sourceMappingURL=tree-view.js.map
+//# sourceMappingURL=tree-view.js.map

package/dist/ui/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/tree-view/tree-view.tsx"],"names":["jsx","TreeViewBase"],"mappings":";;;;;;AAIO,SAAS,SAAS,KAAA,EAAsB;AAC7C,EAAA,uBAAOA,cAAA,CAACC,6BAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"tree-view.js","sourcesContent":["// tree-view.tsx — default static entry (no framer-motion on expand/collapse)\nimport { TreeViewBase } from \"./tree-view-base\";\nimport type { TreeViewProps } from \"./types\";\n\nexport function TreeView(props: TreeViewProps) {\n  return <TreeViewBase {...props} />;\n}\n\nTreeView.displayName = \"TreeView\";\n"]}

package/dist/ui/tree-view.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { TreeViewBase } from '../chunk-GRJFGIZC.mjs';
+export { TreeViewBase, treeViewItemVariants, treeViewVariants } from '../chunk-GRJFGIZC.mjs';
+import '../chunk-4D54YOL6.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function TreeView(props) {
+  return /* @__PURE__ */ jsx(TreeViewBase, { ...props });
+}
+TreeView.displayName = "TreeView";
+
+export { TreeView };
+//# sourceMappingURL=tree-view.mjs.map
+//# sourceMappingURL=tree-view.mjs.map

package/dist/ui/tree-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/tree-view/tree-view.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,SAAS,KAAA,EAAsB;AAC7C,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"tree-view.mjs","sourcesContent":["// tree-view.tsx — default static entry (no framer-motion on expand/collapse)\nimport { TreeViewBase } from \"./tree-view-base\";\nimport type { TreeViewProps } from \"./types\";\n\nexport function TreeView(props: TreeViewProps) {\n  return <TreeViewBase {...props} />;\n}\n\nTreeView.displayName = \"TreeView\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [

package/src/design-system/index.ts

@@ -20,6 +20,7 @@ export * from "./otp-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./progress";
+export * from "./rating";
 export * from "./radio-group";
 export * from "./scroll-area";
 export * from "./select";
@@ -34,4 +35,5 @@ export * from "./toast";
 export * from "./tokens";
 export * from "./toggle";
 export * from "./tooltip";
+export * from "./tree-view";
 export * from "./typography";

package/src/design-system/rating.ts

@@ -0,0 +1,81 @@
+export const zuiRatingRootBase =
+  "grid w-fit gap-2 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiRatingLabelBase =
+  "text-sm font-medium leading-6 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))]";
+
+export const zuiRatingHintBase =
+  "max-w-sm text-xs leading-5 text-[color:var(--zui-rating-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-rating-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
+
+export const zuiRatingGroupBase =
+  "flex w-fit flex-wrap items-center gap-[var(--zui-rating-gap,0.25rem)]";
+
+export const zuiRatingItemBase =
+  "relative inline-grid shrink-0 place-items-center text-[color:var(--zui-rating-empty,oklch(86.9%_0.022_252.894))] transition-transform duration-200 data-[interactive=true]:hover:-translate-y-0.5 dark:text-[color:var(--zui-rating-empty-dark,oklch(37.2%_0.044_257.287))]";
+
+export const zuiRatingIconBase =
+  "pointer-events-none col-start-1 row-start-1 transition-[clip-path,color,transform] duration-200 ease-out";
+
+export const zuiRatingControlBase =
+  "absolute inset-y-0 z-[1] cursor-pointer rounded-md bg-transparent outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-[var(--zui-rating-ring-focus,oklch(54.6%_0.245_262.881_/_0.32))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
+
+export const zuiRatingErrorBase =
+  "text-sm leading-6 text-[color:var(--zui-rating-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-error-fg-dark,oklch(71.2%_0.194_13.428))]";
+
+export const zuiRatingSizes = {
+  sm: "size-5 text-lg",
+  md: "size-7 text-2xl",
+  lg: "size-9 text-3xl",
+} as const;
+
+export const zuiRatingAppearances = {
+  default:
+    "text-[color:var(--zui-rating-default-active,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-default-active-dark,oklch(98.4%_0.003_247.858))]",
+  secondary:
+    "text-[color:var(--zui-rating-secondary-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-secondary-active-dark,oklch(86.9%_0.022_252.894))]",
+  destructive:
+    "text-[color:var(--zui-rating-destructive-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-destructive-active-dark,oklch(71.2%_0.194_13.428))]",
+  outline:
+    "text-[color:var(--zui-rating-outline-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-outline-active-dark,oklch(86.9%_0.022_252.894))]",
+  ghost:
+    "text-[color:var(--zui-rating-ghost-active,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-rating-ghost-active-dark,oklch(92.9%_0.013_255.508))]",
+  glass:
+    "text-[color:var(--zui-rating-glass-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(59,130,246,0.25)] dark:text-[color:var(--zui-rating-glass-active-dark,oklch(78.9%_0.154_211.53))]",
+  emerald:
+    "text-[color:var(--zui-rating-emerald-active,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-rating-emerald-active-dark,oklch(77.7%_0.152_181.912))]",
+  indigo:
+    "text-[color:var(--zui-rating-indigo-active,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-rating-indigo-active-dark,oklch(67.3%_0.182_276.935))]",
+  purple:
+    "text-[color:var(--zui-rating-purple-active,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-rating-purple-active-dark,oklch(71.4%_0.203_305.504))]",
+  pink: "text-[color:var(--zui-rating-pink-active,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-rating-pink-active-dark,oklch(71.8%_0.202_349.761))]",
+  rose: "text-[color:var(--zui-rating-rose-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-rose-active-dark,oklch(71.2%_0.194_13.428))]",
+  sky: "text-[color:var(--zui-rating-sky-active,oklch(62.3%_0.214_259.815))] dark:text-[color:var(--zui-rating-sky-active-dark,oklch(74.6%_0.16_232.661))]",
+  teal: "text-[color:var(--zui-rating-teal-active,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-rating-teal-active-dark,oklch(77.7%_0.152_181.912))]",
+  yellow:
+    "text-[color:var(--zui-rating-yellow-active,oklch(79.5%_0.184_86.047))] dark:text-[color:var(--zui-rating-yellow-active-dark,oklch(85.2%_0.199_91.936))]",
+  orange:
+    "text-[color:var(--zui-rating-orange-active,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-rating-orange-active-dark,oklch(75%_0.183_55.934))]",
+  gray: "text-[color:var(--zui-rating-gray-active,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-rating-gray-active-dark,oklch(70.7%_0.022_261.325))]",
+  amber:
+    "text-[color:var(--zui-rating-amber-active,oklch(76.9%_0.188_70.08))] dark:text-[color:var(--zui-rating-amber-active-dark,oklch(82.8%_0.189_84.429))]",
+  violet:
+    "text-[color:var(--zui-rating-violet-active,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-rating-violet-active-dark,oklch(70.2%_0.183_293.541))]",
+  "gradient-blue":
+    "text-[color:var(--zui-rating-gradient-blue-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(37,99,235,0.28)] dark:text-[color:var(--zui-rating-gradient-blue-active-dark,oklch(70.7%_0.165_254.624))]",
+  "gradient-green":
+    "text-[color:var(--zui-rating-gradient-green-active,oklch(62.7%_0.194_149.214))] drop-shadow-[0_2px_12px_rgba(22,163,74,0.24)] dark:text-[color:var(--zui-rating-gradient-green-active-dark,oklch(79.2%_0.209_151.711))]",
+  "gradient-red":
+    "text-[color:var(--zui-rating-gradient-red-active,oklch(57.7%_0.245_27.325))] drop-shadow-[0_2px_12px_rgba(220,38,38,0.24)] dark:text-[color:var(--zui-rating-gradient-red-active-dark,oklch(70.4%_0.191_22.216))]",
+  "gradient-yellow":
+    "text-[color:var(--zui-rating-gradient-yellow-active,oklch(79.5%_0.184_86.047))] drop-shadow-[0_2px_12px_rgba(234,179,8,0.24)] dark:text-[color:var(--zui-rating-gradient-yellow-active-dark,oklch(85.2%_0.199_91.936))]",
+  "gradient-purple":
+    "text-[color:var(--zui-rating-gradient-purple-active,oklch(62.7%_0.265_303.9))] drop-shadow-[0_2px_12px_rgba(147,51,234,0.24)] dark:text-[color:var(--zui-rating-gradient-purple-active-dark,oklch(71.4%_0.203_305.504))]",
+  "gradient-teal":
+    "text-[color:var(--zui-rating-gradient-teal-active,oklch(60%_0.118_184.704))] drop-shadow-[0_2px_12px_rgba(13,148,136,0.24)] dark:text-[color:var(--zui-rating-gradient-teal-active-dark,oklch(77.7%_0.152_181.912))]",
+  "gradient-indigo":
+    "text-[color:var(--zui-rating-gradient-indigo-active,oklch(51.1%_0.262_276.966))] drop-shadow-[0_2px_12px_rgba(79,70,229,0.24)] dark:text-[color:var(--zui-rating-gradient-indigo-active-dark,oklch(67.3%_0.182_276.935))]",
+  "gradient-pink":
+    "text-[color:var(--zui-rating-gradient-pink-active,oklch(59.2%_0.249_0.584))] drop-shadow-[0_2px_12px_rgba(219,39,119,0.24)] dark:text-[color:var(--zui-rating-gradient-pink-active-dark,oklch(71.8%_0.202_349.761))]",
+  "gradient-orange":
+    "text-[color:var(--zui-rating-gradient-orange-active,oklch(64.6%_0.222_41.116))] drop-shadow-[0_2px_12px_rgba(234,88,12,0.24)] dark:text-[color:var(--zui-rating-gradient-orange-active-dark,oklch(75%_0.183_55.934))]",
+} as const;

package/src/design-system/tree-view.ts

@@ -0,0 +1,113 @@
+export const zuiTreeViewBase =
+  "w-full text-[color:var(--zui-tree-view-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tree-view-fg-dark,oklch(92.9%_0.013_255.508))]";
+
+export const zuiTreeViewAppearances = {
+  default:
+    "rounded-xl border border-[color:var(--zui-tree-view-default-border,#0000001a)] dark:border-[color:var(--zui-tree-view-default-border-dark,#ffffff1a)] p-2",
+  outline:
+    "rounded-xl border border-[color:var(--zui-tree-view-outline-border,#00000026)] dark:border-[color:var(--zui-tree-view-outline-border-dark,#ffffff26)] p-2",
+  ghost: "p-1",
+  card: "rounded-xl border border-[color:var(--zui-tree-view-card-border,#0000001a)] dark:border-[color:var(--zui-tree-view-card-border-dark,#ffffff1a)] bg-[var(--zui-tree-view-card-bg,#0000000d)] dark:bg-[var(--zui-tree-view-card-bg-dark,#00000099)] p-3",
+  separated:
+    "rounded-xl border border-[color:var(--zui-tree-view-separated-border,#0000001a)] dark:border-[color:var(--zui-tree-view-separated-border-dark,#ffffff1a)] bg-[var(--zui-tree-view-separated-bg,oklch(98.4%_0.003_247.858_/_0.4))] dark:bg-[var(--zui-tree-view-separated-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] p-3",
+  sky: "rounded-xl border border-[color:var(--zui-tree-view-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-tree-view-sky-border-dark,oklch(58.8%_0.158_241.966))] p-2",
+  rose: "rounded-xl border border-[color:var(--zui-tree-view-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-tree-view-rose-border-dark,oklch(58.6%_0.253_17.585))] p-2",
+  purple:
+    "rounded-xl border border-[color:var(--zui-tree-view-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-tree-view-purple-border-dark,oklch(55.8%_0.288_302.321))] p-2",
+  pink: "rounded-xl border border-[color:var(--zui-tree-view-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2",
+  orange:
+    "rounded-xl border border-[color:var(--zui-tree-view-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2",
+  yellow:
+    "rounded-xl border border-[color:var(--zui-tree-view-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-tree-view-yellow-border-dark,oklch(68.1%_0.162_75.834))] p-2",
+  teal: "rounded-xl border border-[color:var(--zui-tree-view-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-tree-view-teal-border-dark,oklch(60%_0.118_184.704))] p-2",
+  indigo:
+    "rounded-xl border border-[color:var(--zui-tree-view-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2",
+  emerald:
+    "rounded-xl border border-[color:var(--zui-tree-view-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-tree-view-emerald-border-dark,oklch(59.6%_0.145_163.225))] p-2",
+  "gradient-blue":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-tree-view-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] p-2",
+  "gradient-green":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-tree-view-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] p-2",
+  "gradient-red":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-tree-view-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] p-2",
+  "gradient-yellow":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-tree-view-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] p-2",
+  "gradient-purple":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-tree-view-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] p-2",
+  "gradient-teal":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-tree-view-gradient-teal-border-dark,oklch(60%_0.118_184.704))] p-2",
+  "gradient-indigo":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2",
+  "gradient-pink":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2",
+  "gradient-orange":
+    "rounded-xl border border-[color:var(--zui-tree-view-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2",
+} as const;
+
+export const zuiTreeViewSizes = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+} as const;
+
+export const zuiTreeViewItemBase =
+  "relative flex w-full items-center gap-2 rounded-lg pr-2 text-left font-medium outline-none transition select-none cursor-pointer hover:bg-[var(--zui-tree-view-item-hover,#0000000d)] dark:hover:bg-[var(--zui-tree-view-item-hover-dark,#ffffff0d)] focus-visible:ring-2 focus-visible:ring-[var(--zui-tree-view-ring-focus,#0000004d)] dark:focus-visible:ring-[var(--zui-tree-view-ring-focus-dark,#ffffff4d)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiTreeViewItemSizes = {
+  sm: "py-1 text-xs",
+  md: "py-1.5 text-sm",
+  lg: "py-2 text-base",
+} as const;
+
+export const zuiTreeViewItemAppearances = {
+  default:
+    "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
+  outline:
+    "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
+  ghost:
+    "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
+  card: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#00000014)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff1f)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
+  separated:
+    "data-[selected=true]:bg-[var(--zui-tree-view-selected,#00000014)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff1f)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
+  sky: "data-[selected=true]:bg-[var(--zui-tree-view-sky-selected,oklch(95.1%_0.026_236.824))] dark:data-[selected=true]:bg-[var(--zui-tree-view-sky-selected-dark,oklch(58.8%_0.158_241.966_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-sky-selected-fg,oklch(44.3%_0.11_240.79))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-sky-selected-fg-dark,oklch(82.8%_0.111_230.318))]",
+  rose: "data-[selected=true]:bg-[var(--zui-tree-view-rose-selected,oklch(94.1%_0.03_12.58))] dark:data-[selected=true]:bg-[var(--zui-tree-view-rose-selected-dark,oklch(58.6%_0.253_17.585_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-rose-selected-fg,oklch(45.5%_0.188_13.697))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-rose-selected-fg-dark,oklch(81%_0.117_11.638))]",
+  purple:
+    "data-[selected=true]:bg-[var(--zui-tree-view-purple-selected,oklch(94.6%_0.033_307.174))] dark:data-[selected=true]:bg-[var(--zui-tree-view-purple-selected-dark,oklch(55.8%_0.288_302.321_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-purple-selected-fg,oklch(43.8%_0.218_303.724))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-purple-selected-fg-dark,oklch(82.7%_0.119_306.383))]",
+  pink: "data-[selected=true]:bg-[var(--zui-tree-view-pink-selected,oklch(94.8%_0.028_342.258))] dark:data-[selected=true]:bg-[var(--zui-tree-view-pink-selected-dark,oklch(59.2%_0.249_0.584_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-pink-selected-fg,oklch(45.9%_0.187_3.815))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-pink-selected-fg-dark,oklch(82.3%_0.12_346.018))]",
+  orange:
+    "data-[selected=true]:bg-[var(--zui-tree-view-orange-selected,oklch(95.4%_0.038_75.164))] dark:data-[selected=true]:bg-[var(--zui-tree-view-orange-selected-dark,oklch(64.6%_0.222_41.116_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-orange-selected-fg,oklch(47%_0.157_37.304))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-orange-selected-fg-dark,oklch(83.7%_0.128_66.29))]",
+  yellow:
+    "data-[selected=true]:bg-[var(--zui-tree-view-yellow-selected,oklch(97.3%_0.071_103.193))] dark:data-[selected=true]:bg-[var(--zui-tree-view-yellow-selected-dark,oklch(68.1%_0.162_75.834_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-yellow-selected-fg,oklch(47.6%_0.114_61.907))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-yellow-selected-fg-dark,oklch(90.5%_0.182_98.111))]",
+  teal: "data-[selected=true]:bg-[var(--zui-tree-view-teal-selected,oklch(95.3%_0.051_180.801))] dark:data-[selected=true]:bg-[var(--zui-tree-view-teal-selected-dark,oklch(60%_0.118_184.704_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-teal-selected-fg,oklch(43.7%_0.078_188.216))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-teal-selected-fg-dark,oklch(85.5%_0.138_181.071))]",
+  indigo:
+    "data-[selected=true]:bg-[var(--zui-tree-view-indigo-selected,oklch(93%_0.034_272.788))] dark:data-[selected=true]:bg-[var(--zui-tree-view-indigo-selected-dark,oklch(51.1%_0.262_276.966_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-indigo-selected-fg,oklch(39.8%_0.195_277.366))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-indigo-selected-fg-dark,oklch(78.5%_0.115_274.713))]",
+  emerald:
+    "data-[selected=true]:bg-[var(--zui-tree-view-emerald-selected,oklch(95%_0.052_163.051))] dark:data-[selected=true]:bg-[var(--zui-tree-view-emerald-selected-dark,oklch(59.6%_0.145_163.225_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-emerald-selected-fg,oklch(43.2%_0.095_166.913))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-emerald-selected-fg-dark,oklch(84.5%_0.143_164.978))]",
+  "gradient-blue":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-blue-from,oklch(80.9%_0.105_251.813))] data-[selected=true]:to-[var(--zui-tree-view-gradient-blue-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-green":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-green-from,oklch(87.1%_0.15_154.449))] data-[selected=true]:to-[var(--zui-tree-view-gradient-green-to,oklch(89.7%_0.196_126.665))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-red":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-red-from,oklch(80.8%_0.114_19.571))] data-[selected=true]:to-[var(--zui-tree-view-gradient-red-to,oklch(82.3%_0.12_346.018))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-yellow":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-yellow-from,oklch(90.5%_0.182_98.111))] data-[selected=true]:to-[var(--zui-tree-view-gradient-yellow-to,oklch(83.7%_0.128_66.29))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-purple":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-purple-from,oklch(82.7%_0.119_306.383))] data-[selected=true]:to-[var(--zui-tree-view-gradient-purple-to,oklch(82.3%_0.12_346.018))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-teal":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-teal-from,oklch(85.5%_0.138_181.071))] data-[selected=true]:to-[var(--zui-tree-view-gradient-teal-to,oklch(86.5%_0.127_207.078))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-teal-from-dark,oklch(60%_0.118_184.704))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-indigo":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from,oklch(78.5%_0.115_274.713))] data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-pink":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from,oklch(82.3%_0.12_346.018))] data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to,oklch(81%_0.117_11.638))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  "gradient-orange":
+    "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from,oklch(83.7%_0.128_66.29))] data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to,oklch(80.8%_0.114_19.571))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+} as const;
+
+export const zuiTreeViewChevron =
+  "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-[color:var(--zui-tree-view-chevron,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-chevron-dark,oklch(70.4%_0.04_256.788))] transition-transform duration-200 data-[expanded=true]:rotate-90";
+
+export const zuiTreeViewIcon =
+  "inline-flex shrink-0 items-center justify-center text-[color:var(--zui-tree-view-icon,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-icon-dark,oklch(70.4%_0.04_256.788))]";
+
+export const zuiTreeViewGuide =
+  "border-l border-[color:var(--zui-tree-view-guide,#0000001a)] dark:border-[color:var(--zui-tree-view-guide-dark,#ffffff1a)]";

package/src/ui/rating/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { Rating } from "./rating";
+export type {
+  RatingIconVariantProps,
+  RatingItemVariantProps,
+  RatingPresetIcon,
+  RatingProps,
+} from "./types";
+export { ratingIconVariants, ratingItemVariants } from "./variants";

package/src/ui/rating/rating.test.tsx

@@ -0,0 +1,139 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Rating } from "./rating";
+
+describe("Rating", () => {
+  it("should expose displayName", () => {
+    expect(Rating.displayName).toBe("Rating");
+  });
+
+  it("should stamp data slots and render the requested number of controls", () => {
+    render(<Rating label="Product score" max={4} />);
+
+    expect(document.querySelector('[data-slot="rating"]')).toBeTruthy();
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+    expect(screen.getAllByRole("radio")).toHaveLength(4);
+  });
+
+  it("should render half-step radio options when allowHalf is enabled", () => {
+    render(<Rating allowHalf label="Product score" max={3} />);
+
+    expect(screen.getAllByRole("radio")).toHaveLength(6);
+    expect(screen.getByLabelText("2.5 of 3")).toBeInTheDocument();
+  });
+
+  it("should support uncontrolled value changes", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Rating label="Product score" onValueChange={onValueChange} />);
+
+    await user.click(screen.getByLabelText("4 of 5"));
+
+    expect(screen.getByLabelText("4 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(onValueChange).toHaveBeenLastCalledWith(4);
+  });
+
+  it("should support controlled state", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Rating label="Product score" value={2} onValueChange={onValueChange} />,
+    );
+
+    await user.click(screen.getByLabelText("5 of 5"));
+
+    expect(screen.getByLabelText("2 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(onValueChange).toHaveBeenLastCalledWith(5);
+  });
+
+  it("should clear the current value when allowClear is enabled", async () => {
+    const user = userEvent.setup();
+    render(<Rating allowClear defaultValue={3} label="Product score" />);
+
+    await user.click(screen.getByLabelText("3 of 5"));
+
+    expect(screen.getByLabelText("1 of 5")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByLabelText("3 of 5")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+  });
+
+  it("should step with arrow keys", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Rating
+        allowHalf
+        defaultValue={2}
+        label="Product score"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    screen.getByLabelText("2 of 5").focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(onValueChange).toHaveBeenLastCalledWith(2.5);
+    expect(screen.getByLabelText("2.5 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(screen.getByLabelText("2.5 of 5")).toHaveFocus();
+  });
+
+  it("should fall back to the star icon for unknown icon preset strings", () => {
+    render(
+      <Rating
+        icon={"unknown" as never}
+        defaultValue={3}
+        label="Product score"
+      />,
+    );
+
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+  });
+
+  it("should not change when disabled", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Rating
+        disabled
+        defaultValue={2}
+        label="Product score"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await user.click(screen.getByLabelText("4 of 5"));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByLabelText("2 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("should render a hidden input when name is provided", () => {
+    render(<Rating defaultValue={3.5} allowHalf label="Score" name="score" />);
+
+    expect(document.querySelector('input[name="score"]')).toHaveValue("3.5");
+  });
+
+  it("should forward ref to the root", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Rating ref={ref} label="Product score" />);
+
+    expect(ref.current?.getAttribute("data-slot")).toBe("rating");
+  });
+});