@zentauri-ui/zentauri-components 1.7.5 → 1.7.7

package/src/ui/timeline/types.ts

@@ -0,0 +1,61 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ComponentPropsWithRef,
+  ComponentPropsWithoutRef,
+  ReactNode,
+} from "react";
+
+import type { TimelineTransition } from "./animated/animations";
+import type {
+  timelineIndicatorVariants,
+  timelineVariants,
+} from "./variants";
+
+export type { TimelineTransition };
+
+type TimelineVariantProps = VariantProps<typeof timelineVariants>;
+
+export type TimelineAppearance = NonNullable<
+  VariantProps<typeof timelineIndicatorVariants>["appearance"]
+>;
+
+export type TimelineSize = NonNullable<
+  VariantProps<typeof timelineIndicatorVariants>["size"]
+>;
+
+export type TimelineProps = TimelineVariantProps & {
+  /** Default indicator appearance applied to every item (overridable per indicator). */
+  appearance?: TimelineAppearance;
+  /** Controls indicator size, content spacing, and text scale. */
+  size?: TimelineSize;
+  children?: ReactNode;
+} & Omit<ComponentPropsWithRef<"ol">, "children">;
+
+export type TimelineItemProps = ComponentPropsWithRef<"li"> & {
+  children?: ReactNode;
+};
+
+export type TimelineIndicatorProps = ComponentPropsWithoutRef<"div"> & {
+  /** Override the appearance inherited from the Timeline root. */
+  appearance?: TimelineAppearance;
+  children?: ReactNode;
+};
+
+export type TimelineContentProps = ComponentPropsWithoutRef<"div"> & {
+  children?: ReactNode;
+};
+
+export type TimelineTitleProps = ComponentPropsWithoutRef<"div">;
+
+export type TimelineDescriptionProps = ComponentPropsWithoutRef<"p">;
+
+export type TimelineCtx = {
+  appearance: TimelineAppearance;
+  size: TimelineSize;
+  total: number;
+};
+
+export type TimelineItemCtx = {
+  index: number;
+  isLast: boolean;
+};

package/src/ui/timeline/variants.ts

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiTimelineBase,
+  zuiTimelineConnectorBase,
+  zuiTimelineConnectorSizes,
+  zuiTimelineContentBase,
+  zuiTimelineContentSizes,
+  zuiTimelineDescriptionBase,
+  zuiTimelineDescriptionSizes,
+  zuiTimelineIndicatorAppearances,
+  zuiTimelineIndicatorBase,
+  zuiTimelineIndicatorSizes,
+  zuiTimelineItemBase,
+  zuiTimelineTitleBase,
+  zuiTimelineTitleSizes,
+} from "../../design-system/timeline";
+
+export const timelineVariants = cva(zuiTimelineBase);
+
+export const timelineItemVariants = cva(zuiTimelineItemBase);
+
+export const timelineConnectorVariants = cva(zuiTimelineConnectorBase, {
+  variants: {
+    size: zuiTimelineConnectorSizes,
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const timelineIndicatorVariants = cva(zuiTimelineIndicatorBase, {
+  variants: {
+    appearance: zuiTimelineIndicatorAppearances,
+    size: zuiTimelineIndicatorSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const timelineContentVariants = cva(zuiTimelineContentBase, {
+  variants: {
+    size: zuiTimelineContentSizes,
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const timelineTitleVariants = cva(zuiTimelineTitleBase, {
+  variants: {
+    size: zuiTimelineTitleSizes,
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const timelineDescriptionVariants = cva(zuiTimelineDescriptionBase, {
+  variants: {
+    size: zuiTimelineDescriptionSizes,
+  },
+  defaultVariants: { size: "md" },
+});

package/src/ui/tree-view/animated/animations.ts

@@ -0,0 +1,13 @@
+import type { Transition } from "framer-motion";
+
+/** Easing and duration presets for tree group expand/collapse. */
+export type TreeViewTransition = "none" | "default" | "smooth" | "slow";
+
+export type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;
+
+export const treeViewTransitionPresets: 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] },
+};

package/src/ui/tree-view/animated/index.ts

@@ -0,0 +1,6 @@
+"use client";
+
+export { TreeViewAnimated } from "./tree-view-animated";
+export type { TreeViewAnimatedProps } from "./types";
+export { treeViewTransitionPresets } from "./animations";
+export type { TreeViewTransition } from "./animations";

package/src/ui/tree-view/animated/tree-view-animated.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useMemo } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { TreeViewBase } from "../tree-view-base";
+import type { TreeGroupProps } from "../types";
+
+import { treeViewTransitionPresets } from "./animations";
+import type { TreeViewAnimatedProps } from "./types";
+import type { TreeViewTransition } from "./animations";
+
+function createAnimatedGroup(transitionVariant: TreeViewTransition) {
+  const transition = treeViewTransitionPresets[transitionVariant];
+  const motionless = transitionVariant === "none";
+
+  function AnimatedTreeGroup({ open, children }: TreeGroupProps) {
+    return (
+      <AnimatePresence initial={false}>
+        {open ? (
+          <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 ? undefined : { height: "auto", opacity: 1 }}
+            exit={motionless ? undefined : { height: 0, opacity: 0 }}
+            transition={transition}
+          >
+            {children}
+          </motion.ul>
+        ) : null}
+      </AnimatePresence>
+    );
+  }
+
+  AnimatedTreeGroup.displayName = "AnimatedTreeGroup";
+  return AnimatedTreeGroup;
+}
+
+export function TreeViewAnimated({
+  transitionVariant = "default",
+  ...props
+}: TreeViewAnimatedProps) {
+  const GroupComponent = useMemo(
+    () => createAnimatedGroup(transitionVariant),
+    [transitionVariant],
+  );
+  return <TreeViewBase {...props} GroupComponent={GroupComponent} />;
+}
+
+TreeViewAnimated.displayName = "TreeViewAnimated";

package/src/ui/tree-view/animated/types.ts

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

package/src/ui/tree-view/index.ts

@@ -0,0 +1,13 @@
+"use client";
+
+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";