@zentauri-ui/zentauri-components 1.7.5 → 1.7.7

package/dist/ui/tree-view/animated/index.d.ts

@@ -0,0 +1,5 @@
+export { TreeViewAnimated } from "./tree-view-animated";
+export type { TreeViewAnimatedProps } from "./types";
+export { treeViewTransitionPresets } from "./animations";
+export type { TreeViewTransition } from "./animations";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/tree-view/animated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { TreeViewAnimatedProps } from "./types";
+export declare function TreeViewAnimated({ transitionVariant, ...props }: TreeViewAnimatedProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeViewAnimated {
+    var displayName: string;
+}
+//# sourceMappingURL=tree-view-animated.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-animated.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/tree-view-animated.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+BrD,wBAAgB,gBAAgB,CAAC,EAC/B,iBAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAMvB;yBATe,gBAAgB"}

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

@@ -0,0 +1,6 @@
+import type { TreeViewBaseProps } from "../types";
+import type { TreeViewTransition } from "./animations";
+export type TreeViewAnimatedProps = TreeViewBaseProps & {
+    transitionVariant?: TreeViewTransition;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG;IACtD,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;CACxC,CAAC"}

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

@@ -0,0 +1,53 @@
+"use client";
+'use strict';
+
+var chunkQHEHBC6M_js = require('../../chunk-QHEHBC6M.js');
+require('../../chunk-ZS5756ZC.js');
+var react = require('react');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/tree-view/animated/animations.ts
+var treeViewTransitionPresets = {
+  none: { duration: 0 },
+  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
+  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] }
+};
+function createAnimatedGroup(transitionVariant) {
+  const transition = treeViewTransitionPresets[transitionVariant];
+  const motionless = transitionVariant === "none";
+  function AnimatedTreeGroup({ open, children }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.ul,
+      {
+        role: "group",
+        "data-slot": "tree-view-group",
+        className: "m-0 list-none overflow-hidden p-0",
+        initial: motionless ? false : { height: 0, opacity: 0 },
+        animate: motionless ? void 0 : { height: "auto", opacity: 1 },
+        exit: motionless ? void 0 : { height: 0, opacity: 0 },
+        transition,
+        children
+      }
+    ) : null });
+  }
+  AnimatedTreeGroup.displayName = "AnimatedTreeGroup";
+  return AnimatedTreeGroup;
+}
+function TreeViewAnimated({
+  transitionVariant = "default",
+  ...props
+}) {
+  const GroupComponent = react.useMemo(
+    () => createAnimatedGroup(transitionVariant),
+    [transitionVariant]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkQHEHBC6M_js.TreeViewBase, { ...props, GroupComponent });
+}
+TreeViewAnimated.displayName = "TreeViewAnimated";
+
+exports.TreeViewAnimated = TreeViewAnimated;
+exports.treeViewTransitionPresets = treeViewTransitionPresets;
+//# sourceMappingURL=animated.js.map
+//# sourceMappingURL=animated.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/tree-view/animated/animations.ts","../../../src/ui/tree-view/animated/tree-view-animated.tsx"],"names":["jsx","AnimatePresence","motion","useMemo","TreeViewBase"],"mappings":";;;;;;;;;AAOO,IAAM,yBAAA,GAAuD;AAAA,EAClE,IAAA,EAAM,EAAE,QAAA,EAAU,CAAA,EAAE;AAAA,EACpB,OAAA,EAAS,EAAE,QAAA,EAAU,GAAA,EAAK,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA,EAAE;AAAA,EACjD,MAAA,EAAQ,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAC,CAAA,EAAE;AAAA,EACnD,IAAA,EAAM,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA;AAC/C;ACAA,SAAS,oBAAoB,iBAAA,EAAuC;AAClE,EAAA,MAAM,UAAA,GAAa,0BAA0B,iBAAiB,CAAA;AAC9D,EAAA,MAAM,aAAa,iBAAA,KAAsB,MAAA;AAEzC,EAAA,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,QAAA,EAAS,EAAmB;AAC7D,IAAA,uBACEA,cAAA,CAACC,4BAAA,EAAA,EAAgB,OAAA,EAAS,KAAA,EACvB,QAAA,EAAA,IAAA,mBACCD,cAAA;AAAA,MAACE,mBAAA,CAAO,EAAA;AAAA,MAAP;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAU,mCAAA;AAAA,QACV,SAAS,UAAA,GAAa,KAAA,GAAQ,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACtD,SAAS,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,QAC/D,MAAM,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACvD,UAAA;AAAA,QAEC;AAAA;AAAA,QAED,IAAA,EACN,CAAA;AAAA,EAEJ;AAEA,EAAA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAChC,EAAA,OAAO,iBAAA;AACT;AAEO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,MAAM,cAAA,GAAiBC,aAAA;AAAA,IACrB,MAAM,oBAAoB,iBAAiB,CAAA;AAAA,IAC3C,CAAC,iBAAiB;AAAA,GACpB;AACA,EAAA,uBAAOH,cAAA,CAACI,6BAAA,EAAA,EAAc,GAAG,KAAA,EAAO,cAAA,EAAgC,CAAA;AAClE;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"animated.js","sourcesContent":["import type { Transition } from \"framer-motion\";\n\n/** Easing and duration presets for tree group expand/collapse. */\nexport type TreeViewTransition = \"none\" | \"default\" | \"smooth\" | \"slow\";\n\nexport type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;\n\nexport const treeViewTransitionPresets: TreeViewTransitionPresets = {\n  none: { duration: 0 },\n  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },\n};\n","\"use client\";\n\nimport { useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { TreeViewBase } from \"../tree-view-base\";\nimport type { TreeGroupProps } from \"../types\";\n\nimport { treeViewTransitionPresets } from \"./animations\";\nimport type { TreeViewAnimatedProps } from \"./types\";\nimport type { TreeViewTransition } from \"./animations\";\n\nfunction createAnimatedGroup(transitionVariant: TreeViewTransition) {\n  const transition = treeViewTransitionPresets[transitionVariant];\n  const motionless = transitionVariant === \"none\";\n\n  function AnimatedTreeGroup({ open, children }: TreeGroupProps) {\n    return (\n      <AnimatePresence initial={false}>\n        {open ? (\n          <motion.ul\n            role=\"group\"\n            data-slot=\"tree-view-group\"\n            className=\"m-0 list-none overflow-hidden p-0\"\n            initial={motionless ? false : { height: 0, opacity: 0 }}\n            animate={motionless ? undefined : { height: \"auto\", opacity: 1 }}\n            exit={motionless ? undefined : { height: 0, opacity: 0 }}\n            transition={transition}\n          >\n            {children}\n          </motion.ul>\n        ) : null}\n      </AnimatePresence>\n    );\n  }\n\n  AnimatedTreeGroup.displayName = \"AnimatedTreeGroup\";\n  return AnimatedTreeGroup;\n}\n\nexport function TreeViewAnimated({\n  transitionVariant = \"default\",\n  ...props\n}: TreeViewAnimatedProps) {\n  const GroupComponent = useMemo(\n    () => createAnimatedGroup(transitionVariant),\n    [transitionVariant],\n  );\n  return <TreeViewBase {...props} GroupComponent={GroupComponent} />;\n}\n\nTreeViewAnimated.displayName = \"TreeViewAnimated\";\n"]}

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

@@ -0,0 +1,50 @@
+"use client";
+import { TreeViewBase } from '../../chunk-GRJFGIZC.mjs';
+import '../../chunk-4D54YOL6.mjs';
+import { useMemo } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/tree-view/animated/animations.ts
+var treeViewTransitionPresets = {
+  none: { duration: 0 },
+  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
+  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] }
+};
+function createAnimatedGroup(transitionVariant) {
+  const transition = treeViewTransitionPresets[transitionVariant];
+  const motionless = transitionVariant === "none";
+  function AnimatedTreeGroup({ open, children }) {
+    return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx(
+      motion.ul,
+      {
+        role: "group",
+        "data-slot": "tree-view-group",
+        className: "m-0 list-none overflow-hidden p-0",
+        initial: motionless ? false : { height: 0, opacity: 0 },
+        animate: motionless ? void 0 : { height: "auto", opacity: 1 },
+        exit: motionless ? void 0 : { height: 0, opacity: 0 },
+        transition,
+        children
+      }
+    ) : null });
+  }
+  AnimatedTreeGroup.displayName = "AnimatedTreeGroup";
+  return AnimatedTreeGroup;
+}
+function TreeViewAnimated({
+  transitionVariant = "default",
+  ...props
+}) {
+  const GroupComponent = useMemo(
+    () => createAnimatedGroup(transitionVariant),
+    [transitionVariant]
+  );
+  return /* @__PURE__ */ jsx(TreeViewBase, { ...props, GroupComponent });
+}
+TreeViewAnimated.displayName = "TreeViewAnimated";
+
+export { TreeViewAnimated, treeViewTransitionPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/tree-view/animated/animations.ts","../../../src/ui/tree-view/animated/tree-view-animated.tsx"],"names":[],"mappings":";;;;;;;AAOO,IAAM,yBAAA,GAAuD;AAAA,EAClE,IAAA,EAAM,EAAE,QAAA,EAAU,CAAA,EAAE;AAAA,EACpB,OAAA,EAAS,EAAE,QAAA,EAAU,GAAA,EAAK,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA,EAAE;AAAA,EACjD,MAAA,EAAQ,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAC,CAAA,EAAE;AAAA,EACnD,IAAA,EAAM,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA;AAC/C;ACAA,SAAS,oBAAoB,iBAAA,EAAuC;AAClE,EAAA,MAAM,UAAA,GAAa,0BAA0B,iBAAiB,CAAA;AAC9D,EAAA,MAAM,aAAa,iBAAA,KAAsB,MAAA;AAEzC,EAAA,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,QAAA,EAAS,EAAmB;AAC7D,IAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,KAAA,EACvB,QAAA,EAAA,IAAA,mBACC,GAAA;AAAA,MAAC,MAAA,CAAO,EAAA;AAAA,MAAP;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAU,mCAAA;AAAA,QACV,SAAS,UAAA,GAAa,KAAA,GAAQ,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACtD,SAAS,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,QAC/D,MAAM,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACvD,UAAA;AAAA,QAEC;AAAA;AAAA,QAED,IAAA,EACN,CAAA;AAAA,EAEJ;AAEA,EAAA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAChC,EAAA,OAAO,iBAAA;AACT;AAEO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,oBAAoB,iBAAiB,CAAA;AAAA,IAC3C,CAAC,iBAAiB;AAAA,GACpB;AACA,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,cAAA,EAAgC,CAAA;AAClE;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"animated.mjs","sourcesContent":["import type { Transition } from \"framer-motion\";\n\n/** Easing and duration presets for tree group expand/collapse. */\nexport type TreeViewTransition = \"none\" | \"default\" | \"smooth\" | \"slow\";\n\nexport type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;\n\nexport const treeViewTransitionPresets: TreeViewTransitionPresets = {\n  none: { duration: 0 },\n  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },\n};\n","\"use client\";\n\nimport { useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { TreeViewBase } from \"../tree-view-base\";\nimport type { TreeGroupProps } from \"../types\";\n\nimport { treeViewTransitionPresets } from \"./animations\";\nimport type { TreeViewAnimatedProps } from \"./types\";\nimport type { TreeViewTransition } from \"./animations\";\n\nfunction createAnimatedGroup(transitionVariant: TreeViewTransition) {\n  const transition = treeViewTransitionPresets[transitionVariant];\n  const motionless = transitionVariant === \"none\";\n\n  function AnimatedTreeGroup({ open, children }: TreeGroupProps) {\n    return (\n      <AnimatePresence initial={false}>\n        {open ? (\n          <motion.ul\n            role=\"group\"\n            data-slot=\"tree-view-group\"\n            className=\"m-0 list-none overflow-hidden p-0\"\n            initial={motionless ? false : { height: 0, opacity: 0 }}\n            animate={motionless ? undefined : { height: \"auto\", opacity: 1 }}\n            exit={motionless ? undefined : { height: 0, opacity: 0 }}\n            transition={transition}\n          >\n            {children}\n          </motion.ul>\n        ) : null}\n      </AnimatePresence>\n    );\n  }\n\n  AnimatedTreeGroup.displayName = \"AnimatedTreeGroup\";\n  return AnimatedTreeGroup;\n}\n\nexport function TreeViewAnimated({\n  transitionVariant = \"default\",\n  ...props\n}: TreeViewAnimatedProps) {\n  const GroupComponent = useMemo(\n    () => createAnimatedGroup(transitionVariant),\n    [transitionVariant],\n  );\n  return <TreeViewBase {...props} GroupComponent={GroupComponent} />;\n}\n\nTreeViewAnimated.displayName = \"TreeViewAnimated\";\n"]}

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

@@ -0,0 +1,5 @@
+export { TreeView } from "./tree-view";
+export { TreeViewBase } from "./tree-view-base";
+export type { TreeNode, TreeViewBaseProps, TreeViewProps, TreeViewRenderArgs, TreeViewVariantProps, TreeGroupProps, } from "./types";
+export { treeViewVariants, treeViewItemVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,15 @@
+import type { TreeViewBaseProps, TreeViewCtx } from "./types";
+/**
+ * Reads the shared tree-view state from context and fails early when a tree item
+ * is rendered outside the TreeView provider. The component name keeps the error
+ * message actionable for consumers composing custom tree-view pieces.
+ */
+declare function useTreeViewContext(component: string): TreeViewCtx;
+export declare function TreeViewBase({ data, defaultExpanded, expanded, onExpandedChange, defaultSelected, selected, onSelect, renderNode, showGuides, appearance, size, className, GroupComponent, ...rest }: TreeViewBaseProps & {
+    GroupComponent?: TreeViewCtx["GroupComponent"];
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeViewBase {
+    var displayName: string;
+}
+export { useTreeViewContext };
+//# sourceMappingURL=tree-view-base.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-base.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/tree-view-base.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAGV,iBAAiB,EACjB,WAAW,EACZ,MAAM,SAAS,CAAC;AAMjB;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAM1D;AAwKD,wBAAgB,YAAY,CAAC,EAC3B,IAAS,EACT,eAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAkB,EAClB,UAAsB,EACtB,IAAW,EACX,SAAS,EACT,cAAgC,EAChC,GAAG,IAAI,EACR,EAAE,iBAAiB,GAAG;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD,2CA0QA;yBA3Re,YAAY;;;AA+R5B,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { TreeViewProps } from "./types";
+export declare function TreeView(props: TreeViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeView {
+    var displayName: string;
+}
+//# sourceMappingURL=tree-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/tree-view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ"}

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.5",
+  "version": "1.7.7",
   "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/context-menu.ts

@@ -0,0 +1,44 @@
+import {
+  zuiDropdownItemBase,
+  zuiDropdownItemVariants,
+  zuiDropdownSpacing,
+} from "./dropdown";
+
+export const zuiContextMenuContentBase =
+  "min-w-[220px] rounded-lg border border-[color:var(--zui-dropdown-content-border,oklch(20.8%_0.042_265.755_/_0.1))] bg-[var(--zui-dropdown-content-bg,oklch(96.8%_0.007_247.896))] p-2 text-[color:var(--zui-dropdown-content-fg,oklch(20.8%_0.042_265.755))] shadow-lg outline-none dark:border-[color:var(--zui-dropdown-content-border-dark,#ffffff1a)] dark:bg-[var(--zui-dropdown-content-bg-dark,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-content-fg-dark,oklch(96.8%_0.007_247.896))]";
+
+export const zuiContextMenuItemBase = zuiDropdownItemBase;
+
+export const zuiContextMenuItemVariants = {
+  ...zuiDropdownItemVariants,
+  ghost: `${zuiDropdownItemVariants.ghost} dark:bg-[var(--zui-dropdown-item-ghost-bg-dark,transparent)]`,
+  sky: `${zuiDropdownItemVariants.sky} dark:bg-[var(--zui-dropdown-item-sky-bg-dark,oklch(29.3%_0.066_243.157))] dark:text-[color:var(--zui-dropdown-item-sky-fg-dark,oklch(90.1%_0.058_230.902))] dark:hover:text-[color:var(--zui-dropdown-item-sky-fg-hover-dark,oklch(90.1%_0.058_230.902))]`,
+  rose: `${zuiDropdownItemVariants.rose} dark:bg-[var(--zui-dropdown-item-rose-bg-dark,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-dropdown-item-rose-fg-dark,oklch(89.2%_0.058_10.001))] dark:hover:text-[color:var(--zui-dropdown-item-rose-fg-hover-dark,oklch(89.2%_0.058_10.001))]`,
+  purple: `${zuiDropdownItemVariants.purple} dark:bg-[var(--zui-dropdown-item-purple-bg-dark,oklch(29.1%_0.149_302.717))] dark:text-[color:var(--zui-dropdown-item-purple-fg-dark,oklch(90.2%_0.063_306.703))] dark:hover:text-[color:var(--zui-dropdown-item-purple-fg-hover-dark,oklch(90.2%_0.063_306.703))]`,
+  pink: `${zuiDropdownItemVariants.pink} dark:bg-[var(--zui-dropdown-item-pink-bg-dark,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-dropdown-item-pink-fg-dark,oklch(89.9%_0.061_343.231))] dark:hover:text-[color:var(--zui-dropdown-item-pink-fg-hover-dark,oklch(89.9%_0.061_343.231))]`,
+  orange: `${zuiDropdownItemVariants.orange} dark:bg-[var(--zui-dropdown-item-orange-bg-dark,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-dropdown-item-orange-fg-dark,oklch(90.1%_0.076_70.697))] dark:hover:text-[color:var(--zui-dropdown-item-orange-fg-hover-dark,oklch(90.1%_0.076_70.697))]`,
+  yellow: `${zuiDropdownItemVariants.yellow} dark:bg-[var(--zui-dropdown-item-yellow-bg-dark,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-dropdown-item-yellow-fg-dark,oklch(94.5%_0.129_101.54))] dark:hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover-dark,oklch(94.5%_0.129_101.54))]`,
+  teal: `${zuiDropdownItemVariants.teal} dark:bg-[var(--zui-dropdown-item-teal-bg-dark,oklch(27.7%_0.046_192.524))] dark:text-[color:var(--zui-dropdown-item-teal-fg-dark,oklch(91%_0.096_180.426))] dark:hover:text-[color:var(--zui-dropdown-item-teal-fg-hover-dark,oklch(91%_0.096_180.426))]`,
+  indigo: `${zuiDropdownItemVariants.indigo} dark:bg-[var(--zui-dropdown-item-indigo-bg-dark,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-dropdown-item-indigo-fg-dark,oklch(87%_0.065_274.039))] dark:hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover-dark,oklch(87%_0.065_274.039))]`,
+  emerald: `${zuiDropdownItemVariants.emerald} dark:bg-[var(--zui-dropdown-item-emerald-bg-dark,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-dropdown-item-emerald-fg-dark,oklch(90.5%_0.093_164.15))] dark:hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover-dark,oklch(90.5%_0.093_164.15))]`,
+  gray: `${zuiDropdownItemVariants.gray} dark:bg-[var(--zui-dropdown-item-gray-bg-dark,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-dropdown-item-gray-fg-dark,oklch(92.8%_0.006_264.531))] dark:hover:text-[color:var(--zui-dropdown-item-gray-fg-hover-dark,oklch(92.8%_0.006_264.531))]`,
+  amber: `${zuiDropdownItemVariants.amber} dark:bg-[var(--zui-dropdown-item-amber-bg-dark,oklch(27.9%_0.077_45.635))] dark:text-[color:var(--zui-dropdown-item-amber-fg-dark,oklch(92.4%_0.12_95.746))] dark:hover:text-[color:var(--zui-dropdown-item-amber-fg-hover-dark,oklch(92.4%_0.12_95.746))]`,
+  violet: `${zuiDropdownItemVariants.violet} dark:bg-[var(--zui-dropdown-item-violet-bg-dark,oklch(28.3%_0.141_291.089))] dark:text-[color:var(--zui-dropdown-item-violet-fg-dark,oklch(89.4%_0.057_293.283))] dark:hover:text-[color:var(--zui-dropdown-item-violet-fg-hover-dark,oklch(89.4%_0.057_293.283))]`,
+  "gradient-blue": `${zuiDropdownItemVariants["gradient-blue"]} dark:from-[var(--zui-dropdown-item-gradient-blue-from-dark,oklch(28.2%_0.091_267.935))] dark:to-[var(--zui-dropdown-item-gradient-blue-to-dark,oklch(29.1%_0.149_302.717))]`,
+  "gradient-green": `${zuiDropdownItemVariants["gradient-green"]} dark:from-[var(--zui-dropdown-item-gradient-green-from-dark,oklch(26.6%_0.065_152.934))] dark:to-[var(--zui-dropdown-item-gradient-green-to-dark,oklch(27.4%_0.072_132.109))]`,
+  "gradient-red": `${zuiDropdownItemVariants["gradient-red"]} dark:from-[var(--zui-dropdown-item-gradient-red-from-dark,oklch(25.8%_0.092_26.042))] dark:to-[var(--zui-dropdown-item-gradient-red-to-dark,oklch(28.4%_0.109_3.907))]`,
+  "gradient-yellow": `${zuiDropdownItemVariants["gradient-yellow"]} dark:from-[var(--zui-dropdown-item-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813))] dark:to-[var(--zui-dropdown-item-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259))]`,
+  "gradient-purple": `${zuiDropdownItemVariants["gradient-purple"]} dark:from-[var(--zui-dropdown-item-gradient-purple-from-dark,oklch(29.1%_0.149_302.717))] dark:to-[var(--zui-dropdown-item-gradient-purple-to-dark,oklch(28.4%_0.109_3.907))]`,
+  "gradient-teal": `${zuiDropdownItemVariants["gradient-teal"]} dark:from-[var(--zui-dropdown-item-gradient-teal-from-dark,oklch(27.7%_0.046_192.524))] dark:to-[var(--zui-dropdown-item-gradient-teal-to-dark,oklch(30.2%_0.056_229.695))]`,
+  "gradient-indigo": `${zuiDropdownItemVariants["gradient-indigo"]} dark:from-[var(--zui-dropdown-item-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288))] dark:to-[var(--zui-dropdown-item-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717))]`,
+  "gradient-pink": `${zuiDropdownItemVariants["gradient-pink"]} dark:from-[var(--zui-dropdown-item-gradient-pink-from-dark,oklch(28.4%_0.109_3.907))] dark:to-[var(--zui-dropdown-item-gradient-pink-to-dark,oklch(27.1%_0.105_12.094))]`,
+  "gradient-orange": `${zuiDropdownItemVariants["gradient-orange"]} dark:from-[var(--zui-dropdown-item-gradient-orange-from-dark,oklch(26.6%_0.079_36.259))] dark:to-[var(--zui-dropdown-item-gradient-orange-to-dark,oklch(25.8%_0.092_26.042))]`,
+} as const;
+
+export const zuiContextMenuSpacing = zuiDropdownSpacing;
+
+export const zuiContextMenuLabelBase =
+  "px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--zui-dropdown-label-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-dropdown-label-fg-dark,oklch(70.7%_0.022_261.325))]";
+
+export const zuiContextMenuSeparatorBase =
+  "my-1 h-px bg-[var(--zui-dropdown-separator-bg,oklch(20.8%_0.042_265.755_/_0.12))] dark:bg-[var(--zui-dropdown-separator-bg-dark,#ffffff1a)]";

package/src/design-system/index.ts

@@ -7,6 +7,7 @@ export * from "./button";
 export * from "./card";
 export * from "./checkbox";
 export * from "./command";
+export * from "./context-menu";
 export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
@@ -28,8 +29,10 @@ export * from "./spinner";
 export * from "./stepper";
 export * from "./table";
 export * from "./tabs";
+export * from "./timeline";
 export * from "./toast";
 export * from "./tokens";
 export * from "./toggle";
 export * from "./tooltip";
+export * from "./tree-view";
 export * from "./typography";

package/src/design-system/timeline.ts

@@ -0,0 +1,87 @@
+export const zuiTimelineBase = "flex w-full flex-col";
+
+export const zuiTimelineItemBase = "relative flex gap-4";
+
+export const zuiTimelineIndicatorBase =
+  "relative z-[1] grid shrink-0 place-items-center rounded-full border font-semibold transition-colors";
+
+export const zuiTimelineIndicatorAppearances = {
+  default:
+    "border-[color:var(--zui-timeline-indicator-default-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-default-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-default-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-default-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
+  sky: "border-[color:var(--zui-timeline-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-timeline-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-timeline-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-timeline-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-timeline-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]",
+  rose: "border-[color:var(--zui-timeline-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-timeline-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-timeline-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-timeline-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-timeline-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]",
+  purple:
+    "border-[color:var(--zui-timeline-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-timeline-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-timeline-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-timeline-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-timeline-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  pink: "border-[color:var(--zui-timeline-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-timeline-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-timeline-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-timeline-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-timeline-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  orange:
+    "border-[color:var(--zui-timeline-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-timeline-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-timeline-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-timeline-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-timeline-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+  yellow:
+    "border-[color:var(--zui-timeline-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-timeline-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-timeline-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-timeline-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  teal: "border-[color:var(--zui-timeline-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-timeline-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-timeline-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-timeline-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-timeline-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  indigo:
+    "border-[color:var(--zui-timeline-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-timeline-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-timeline-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-timeline-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-timeline-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  emerald:
+    "border-[color:var(--zui-timeline-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-timeline-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-timeline-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-timeline-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-timeline-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
+  gray: "border-[color:var(--zui-timeline-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
+  violet:
+    "border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
+  "gradient-blue":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
+  "gradient-green":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
+  "gradient-red":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
+  "gradient-yellow":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  "gradient-purple":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  "gradient-teal":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  "gradient-indigo":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  "gradient-pink":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  "gradient-orange":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+} as const;
+
+export const zuiTimelineIndicatorSizes = {
+  sm: "size-5 text-[0.625rem]",
+  md: "size-6 text-xs",
+  lg: "size-7 text-sm",
+} as const;
+
+export const zuiTimelineConnectorBase =
+  "pointer-events-none absolute bottom-0 w-px -translate-x-1/2 rounded-full bg-[var(--zui-timeline-connector,#0000001f)] dark:bg-[var(--zui-timeline-connector-dark,#ffffff1f)]";
+
+export const zuiTimelineConnectorSizes = {
+  sm: "left-2.5 top-6",
+  md: "left-3 top-7",
+  lg: "left-3.5 top-8",
+} as const;
+
+export const zuiTimelineContentBase = "min-w-0 flex-1";
+
+export const zuiTimelineContentSizes = {
+  sm: "pb-5",
+  md: "pb-6",
+  lg: "pb-8",
+} as const;
+
+export const zuiTimelineTitleBase =
+  "font-semibold text-[color:var(--zui-timeline-title-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-timeline-title-fg-dark,#ffffff)]";
+
+export const zuiTimelineTitleSizes = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base",
+} as const;
+
+export const zuiTimelineDescriptionBase =
+  "text-[color:var(--zui-timeline-description-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-timeline-description-fg-dark,oklch(70.4%_0.04_256.788))]";
+
+export const zuiTimelineDescriptionSizes = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm",
+} as const;