@lglab/compose-ui 0.35.0 → 0.37.0

package/dist/select.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import * as react_jsx_runtime241 from "react/jsx-runtime";
+import * as react_jsx_runtime176 from "react/jsx-runtime";
 import { Select, SelectRootProps as SelectRootProps$1 } from "@base-ui/react/select";
 
 //#region src/components/select.d.ts
-declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRootProps$1<Value, Multiple>): react_jsx_runtime241.JSX.Element;
+declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRootProps$1<Value, Multiple>): react_jsx_runtime176.JSX.Element;
 declare namespace SelectRoot {
   var displayName: string;
 }
@@ -13,7 +13,7 @@ declare const SelectTrigger: {
   ({
     className,
     ...props
-  }: SelectTriggerProps): react_jsx_runtime241.JSX.Element;
+  }: SelectTriggerProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectValueProps = React.ComponentProps<typeof Select.Value>;
@@ -21,7 +21,7 @@ declare const SelectValue: {
   ({
     className,
     ...props
-  }: SelectValueProps): react_jsx_runtime241.JSX.Element;
+  }: SelectValueProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectIconProps = React.ComponentProps<typeof Select.Icon>;
@@ -29,7 +29,7 @@ declare const SelectIcon: {
   ({
     className,
     ...props
-  }: SelectIconProps): react_jsx_runtime241.JSX.Element;
+  }: SelectIconProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectBackdropProps = React.ComponentProps<typeof Select.Backdrop>;
@@ -37,12 +37,12 @@ declare const SelectBackdrop: {
   ({
     className,
     ...props
-  }: SelectBackdropProps): react_jsx_runtime241.JSX.Element;
+  }: SelectBackdropProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectPortalProps = React.ComponentProps<typeof Select.Portal>;
 declare const SelectPortal: {
-  (props: SelectPortalProps): react_jsx_runtime241.JSX.Element;
+  (props: SelectPortalProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectPositionerProps = React.ComponentProps<typeof Select.Positioner>;
@@ -50,7 +50,7 @@ declare const SelectPositioner: {
   ({
     className,
     ...props
-  }: SelectPositionerProps): react_jsx_runtime241.JSX.Element;
+  }: SelectPositionerProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectPopupProps = React.ComponentProps<typeof Select.Popup>;
@@ -58,7 +58,7 @@ declare const SelectPopup: {
   ({
     className,
     ...props
-  }: SelectPopupProps): react_jsx_runtime241.JSX.Element;
+  }: SelectPopupProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectListProps = React.ComponentProps<typeof Select.List>;
@@ -66,7 +66,7 @@ declare const SelectList: {
   ({
     className,
     ...props
-  }: SelectListProps): react_jsx_runtime241.JSX.Element;
+  }: SelectListProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectArrowProps = React.ComponentProps<typeof Select.Arrow>;
@@ -74,7 +74,7 @@ declare const SelectArrow: {
   ({
     className,
     ...props
-  }: SelectArrowProps): react_jsx_runtime241.JSX.Element;
+  }: SelectArrowProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectItemProps = React.ComponentProps<typeof Select.Item>;
@@ -82,7 +82,7 @@ declare const SelectItem: {
   ({
     className,
     ...props
-  }: SelectItemProps): react_jsx_runtime241.JSX.Element;
+  }: SelectItemProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectItemTextProps = React.ComponentProps<typeof Select.ItemText>;
@@ -90,7 +90,7 @@ declare const SelectItemText: {
   ({
     className,
     ...props
-  }: SelectItemTextProps): react_jsx_runtime241.JSX.Element;
+  }: SelectItemTextProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectItemIndicatorProps = React.ComponentProps<typeof Select.ItemIndicator>;
@@ -98,7 +98,7 @@ declare const SelectItemIndicator: {
   ({
     className,
     ...props
-  }: SelectItemIndicatorProps): react_jsx_runtime241.JSX.Element;
+  }: SelectItemIndicatorProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectGroupProps = React.ComponentProps<typeof Select.Group>;
@@ -106,7 +106,7 @@ declare const SelectGroup: {
   ({
     className,
     ...props
-  }: SelectGroupProps): react_jsx_runtime241.JSX.Element;
+  }: SelectGroupProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectGroupLabelProps = React.ComponentProps<typeof Select.GroupLabel>;
@@ -114,7 +114,7 @@ declare const SelectGroupLabel: {
   ({
     className,
     ...props
-  }: SelectGroupLabelProps): react_jsx_runtime241.JSX.Element;
+  }: SelectGroupLabelProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectScrollUpArrowProps = React.ComponentProps<typeof Select.ScrollUpArrow>;
@@ -122,7 +122,7 @@ declare const SelectScrollUpArrow: {
   ({
     className,
     ...props
-  }: SelectScrollUpArrowProps): react_jsx_runtime241.JSX.Element;
+  }: SelectScrollUpArrowProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectScrollDownArrowProps = React.ComponentProps<typeof Select.ScrollDownArrow>;
@@ -130,7 +130,7 @@ declare const SelectScrollDownArrow: {
   ({
     className,
     ...props
-  }: SelectScrollDownArrowProps): react_jsx_runtime241.JSX.Element;
+  }: SelectScrollDownArrowProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 type SelectSeparatorProps = React.ComponentProps<typeof Select.Separator>;
@@ -138,7 +138,7 @@ declare const SelectSeparator: {
   ({
     className,
     ...props
-  }: SelectSeparatorProps): react_jsx_runtime241.JSX.Element;
+  }: SelectSeparatorProps): react_jsx_runtime176.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/separator.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime259 from "react/jsx-runtime";
+import * as react_jsx_runtime194 from "react/jsx-runtime";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 
 //#region src/components/separator.d.ts
@@ -9,7 +9,7 @@ declare const Separator: {
     className,
     orientation,
     ...props
-  }: SeparatorProps): react_jsx_runtime259.JSX.Element;
+  }: SeparatorProps): react_jsx_runtime194.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/skeleton.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime299 from "react/jsx-runtime";
+import * as react_jsx_runtime195 from "react/jsx-runtime";
 
 //#region src/components/skeleton.d.ts
 type SkeletonAnimation = 'pulse' | 'shimmer' | 'none';
@@ -12,7 +12,7 @@ declare const Skeleton: {
     className,
     animation,
     ...props
-  }: SkeletonProps): react_jsx_runtime299.JSX.Element;
+  }: SkeletonProps): react_jsx_runtime195.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/slider.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime228 from "react/jsx-runtime";
+import * as react_jsx_runtime196 from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
 
 //#region src/components/slider.d.ts
@@ -8,7 +8,7 @@ declare const SliderRoot: {
   ({
     className,
     ...props
-  }: SliderRootProps): react_jsx_runtime228.JSX.Element;
+  }: SliderRootProps): react_jsx_runtime196.JSX.Element;
   displayName: string;
 };
 type SliderValueProps = React.ComponentProps<typeof Slider.Value>;
@@ -16,7 +16,7 @@ declare const SliderValue: {
   ({
     className,
     ...props
-  }: SliderValueProps): react_jsx_runtime228.JSX.Element;
+  }: SliderValueProps): react_jsx_runtime196.JSX.Element;
   displayName: string;
 };
 type SliderControlProps = React.ComponentProps<typeof Slider.Control>;
@@ -24,7 +24,7 @@ declare const SliderControl: {
   ({
     className,
     ...props
-  }: SliderControlProps): react_jsx_runtime228.JSX.Element;
+  }: SliderControlProps): react_jsx_runtime196.JSX.Element;
   displayName: string;
 };
 type SliderTrackProps = React.ComponentProps<typeof Slider.Track>;
@@ -32,7 +32,7 @@ declare const SliderTrack: {
   ({
     className,
     ...props
-  }: SliderTrackProps): react_jsx_runtime228.JSX.Element;
+  }: SliderTrackProps): react_jsx_runtime196.JSX.Element;
   displayName: string;
 };
 type SliderIndicatorProps = React.ComponentProps<typeof Slider.Indicator>;
@@ -40,7 +40,7 @@ declare const SliderIndicator: {
   ({
     className,
     ...props
-  }: SliderIndicatorProps): react_jsx_runtime228.JSX.Element;
+  }: SliderIndicatorProps): react_jsx_runtime196.JSX.Element;
   displayName: string;
 };
 type SliderThumbProps = React.ComponentProps<typeof Slider.Thumb>;
@@ -48,7 +48,7 @@ declare const SliderThumb: {
   ({
     className,
     ...props
-  }: SliderThumbProps): react_jsx_runtime228.JSX.Element;
+  }: SliderThumbProps): react_jsx_runtime196.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/switch.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime262 from "react/jsx-runtime";
+import * as react_jsx_runtime202 from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 
 //#region src/components/switch.d.ts
@@ -8,7 +8,7 @@ declare const SwitchRoot: {
   ({
     className,
     ...props
-  }: SwitchRootProps): react_jsx_runtime262.JSX.Element;
+  }: SwitchRootProps): react_jsx_runtime202.JSX.Element;
   displayName: string;
 };
 type SwitchThumbProps = React.ComponentProps<typeof Switch.Thumb>;
@@ -16,7 +16,7 @@ declare const SwitchThumb: {
   ({
     className,
     ...props
-  }: SwitchThumbProps): react_jsx_runtime262.JSX.Element;
+  }: SwitchThumbProps): react_jsx_runtime202.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime284 from "react/jsx-runtime";
+import * as react_jsx_runtime211 from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/components/tabs.d.ts
@@ -8,7 +8,7 @@ declare const TabsRoot: {
   ({
     className,
     ...props
-  }: TabsRootProps): react_jsx_runtime284.JSX.Element;
+  }: TabsRootProps): react_jsx_runtime211.JSX.Element;
   displayName: string;
 };
 type TabsListProps = React.ComponentProps<typeof Tabs.List> & {
@@ -20,7 +20,7 @@ declare const TabsList: {
     className,
     orientation,
     ...props
-  }: TabsListProps): react_jsx_runtime284.JSX.Element;
+  }: TabsListProps): react_jsx_runtime211.JSX.Element;
   displayName: string;
 };
 type TabsTabProps = React.ComponentProps<typeof Tabs.Tab> & {
@@ -32,7 +32,7 @@ declare const TabsTab: {
     className,
     size,
     ...props
-  }: TabsTabProps): react_jsx_runtime284.JSX.Element;
+  }: TabsTabProps): react_jsx_runtime211.JSX.Element;
   displayName: string;
 };
 type TabsIndicatorProps = React.ComponentProps<typeof Tabs.Indicator> & {
@@ -44,7 +44,7 @@ declare const TabsIndicator: {
     className,
     orientation,
     ...props
-  }: TabsIndicatorProps): react_jsx_runtime284.JSX.Element;
+  }: TabsIndicatorProps): react_jsx_runtime211.JSX.Element;
   displayName: string;
 };
 type TabsPanelProps = React.ComponentProps<typeof Tabs.Panel>;
@@ -52,7 +52,7 @@ declare const TabsPanel: {
   ({
     className,
     ...props
-  }: TabsPanelProps): react_jsx_runtime284.JSX.Element;
+  }: TabsPanelProps): react_jsx_runtime211.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/textarea.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime289 from "react/jsx-runtime";
+import * as react_jsx_runtime216 from "react/jsx-runtime";
 
 //#region src/components/textarea.d.ts
 type TextareaProps = React.ComponentProps<'textarea'>;
@@ -7,7 +7,7 @@ declare const Textarea: {
   ({
     className,
     ...props
-  }: TextareaProps): react_jsx_runtime289.JSX.Element;
+  }: TextareaProps): react_jsx_runtime216.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/timeline.d.ts

@@ -0,0 +1,81 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as react_jsx_runtime224 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/timeline.d.ts
+declare const timelineVariants: (props?: ({
+  position?: "center" | "right" | "left" | "alternate" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+interface TimelineRootProps extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {}
+declare const TimelineRoot: {
+  ({
+    className,
+    position,
+    children,
+    ...props
+  }: TimelineRootProps): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const TimelineItem: {
+  ({
+    className,
+    children,
+    ...props
+  }: React.ComponentProps<"li">): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const timelineMarkerVariants: (props?: ({
+  variant?: "default" | "primary" | "destructive" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+interface TimelineMarkerProps extends React.ComponentProps<'div'>, VariantProps<typeof timelineMarkerVariants> {
+  icon?: React.ReactNode;
+}
+declare const TimelineMarker: {
+  ({
+    className,
+    variant,
+    icon,
+    children,
+    ...props
+  }: TimelineMarkerProps): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const TimelineContent: {
+  ({
+    className,
+    ...props
+  }: React.ComponentProps<"div">): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const TimelineSpacer: {
+  ({
+    className,
+    ...props
+  }: React.ComponentProps<"div">): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const TimelineTitle: {
+  ({
+    className,
+    ...props
+  }: React.ComponentProps<"p">): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const TimelineDescription: {
+  ({
+    className,
+    ...props
+  }: React.ComponentProps<"p">): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+declare const TimelineTime: {
+  ({
+    className,
+    ...props
+  }: React.ComponentProps<"time">): react_jsx_runtime224.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TimelineContent, TimelineDescription, TimelineItem, TimelineMarker, type TimelineMarkerProps, TimelineRoot, type TimelineRootProps, TimelineSpacer, TimelineTime, TimelineTitle };
+//# sourceMappingURL=timeline.d.ts.map

package/dist/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","names":[],"sources":["../src/components/timeline.tsx"],"sourcesContent":[],"mappings":";;;;;;cAqBM;;IAYJ,+BAAA,CAAA;UAEQ,iBAAA,SACA,KAAA,CAAM,sBAAsB,oBAAoB,mBAjC5B;cAmCxB,YAFJ,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,QAAA;IAAA,QAAA;IAAA,GAAA;EAAA,CAAA,EAEiE,iBAFjE,CAAA,EAEkF,oBAAA,CAAA,GAAA,CAAA,OAFlF;aAAwD,EAAA,MAAA;;cAqCpD,YArCgC,EAAA;EAAY,CAAA;IAAA,SAAA;IAAA,QAAA;IAAA,GAAA;EAAA,CAAA,EAqCO,KAAA,CAAM,cArCb,CAAA,IAAA,CAAA,CAAA,EAqCiC,oBAAA,CAAA,GAAA,CAAA,OArCjC;EAE5C,WAAA,EAAA,MA6BL;CAAA;cAmDK;;IAgBL,+BAAA,CAAA;UAUS,mBAAA,SACA,KAAA,CAAM,cA3GmD,CAAA,KAAA,CAAA,EA2G5B,YA3G4B,CAAA,OA2GR,sBA3GQ,CAAA,CAAA;MAAiB,CAAA,EA4G3E,KAAA,CAAM,SA5GqE;;AAAA,cA+G9E,cArCL,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,OAAA;IAAA,IAAA;IAAA,QAAA;IAAA,GAAA;EAAA,CAAA,EA2CE,mBA3CF,CAAA,EA2CqB,oBAAA,CAAA,GAAA,CAAA,OA3CrB;;;cA+FK,eAtIyD,EAAA;;IAAoB,SAAA;IAAA,GAAA;EAAA,CAAA,EAsIjC,KAAA,CAAM,cAtI2B,CAAA,KAAA,CAAA,CAAA,EAsIN,oBAAA,CAAA,GAAA,CAAA,OAtIM;EAAA,WAAA,EAAA,MAAA;AAAA,CAAA;cA8K7E,cAtGJ,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,GAAA;EAAA,CAAA,EAsG+C,KAAA,CAAM,cAtGrD,CAAA,KAAA,CAAA,CAAA,EAsG0E,oBAAA,CAAA,GAAA,CAAA,OAtG1E;aAAyD,EAAA,MAAA;;cAoHrD,aApHU,EAAA;;IAAuB,SAAA;IAAA,GAAA;EAAA,CAAA,EAoHS,KAAA,CAAM,cApHf,CAAA,GAAA,CAAA,CAAA,EAoHkC,oBAAA,CAAA,GAAA,CAAA,OApHlC;EAAY,WAAA,EAAA,MAAA;AAAA,CAAA;cAkI7C,mBA1EL,EAAA;;;;KA0EqD,KAAA,CAAM,sBAAmB,oBAAA,CAAA,GAAA,CAAA;;;cAczE;;IAtIH,SAAA;IAAA,GAAA;EAAA,CAAA,EAsI4C,KAAA,CAAM,cAtIlD,CAAA,MAAA,CAAA,CAAA,EAsIwE,oBAAA,CAAA,GAAA,CAAA,OAtIxE;aAAmB,EAAA,MAAA;CAAA"}

package/dist/timeline.js

@@ -0,0 +1,165 @@
+'use client';
+
+import { cn } from "./lib/utils.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/timeline.tsx
+const TimelineContext = React.createContext({ position: "left" });
+const TimelineItemContext = React.createContext({ index: 0 });
+const timelineVariants = cva("flex flex-col list-none m-0 p-0", {
+	variants: { position: {
+		left: "gap-6",
+		right: "gap-6",
+		alternate: "gap-0",
+		center: "gap-0"
+	} },
+	defaultVariants: { position: "left" }
+});
+const TimelineRoot = ({ className, position, children, ...props }) => {
+	const timelinePosition = position ?? "left";
+	const childrenWithIndex = React.Children.map(children, (child, index) => {
+		if (React.isValidElement(child)) return /* @__PURE__ */ jsx(TimelineItemContext.Provider, {
+			value: { index },
+			children: child
+		});
+		return child;
+	});
+	return /* @__PURE__ */ jsx(TimelineContext.Provider, {
+		value: { position: timelinePosition },
+		children: /* @__PURE__ */ jsx("ol", {
+			role: "list",
+			"data-slot": "timeline",
+			"data-position": timelinePosition,
+			className: cn(timelineVariants({ position: timelinePosition }), className),
+			...props,
+			children: childrenWithIndex
+		})
+	});
+};
+TimelineRoot.displayName = "TimelineRoot";
+const TimelineItem = ({ className, children, ...props }) => {
+	const { position } = React.useContext(TimelineContext);
+	const { index } = React.useContext(TimelineItemContext);
+	const isRight = position === "right" || position === "alternate" && index % 2 === 1;
+	if (position === "center") {
+		const isEven = index % 2 === 0;
+		return /* @__PURE__ */ jsx("li", {
+			role: "listitem",
+			"data-slot": "timeline-item",
+			"data-position": isEven ? "left" : "right",
+			className: cn("relative m-0 grid grid-cols-[1fr_auto_1fr] gap-4 p-0", className),
+			...props,
+			children
+		});
+	}
+	return /* @__PURE__ */ jsx("li", {
+		role: "listitem",
+		"data-slot": "timeline-item",
+		"data-position": isRight ? "right" : "left",
+		className: cn("relative m-0 flex gap-4 p-0", position === "alternate" && "justify-center", isRight && "flex-row-reverse", className),
+		...props,
+		children
+	});
+};
+TimelineItem.displayName = "TimelineItem";
+const timelineMarkerVariants = cva("relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full", {
+	variants: { variant: {
+		default: "border border-border bg-background",
+		primary: "bg-primary text-white",
+		success: "bg-success text-white",
+		warning: "bg-warning text-white",
+		destructive: "bg-destructive text-white"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const variantLabels = {
+	default: "Event",
+	primary: "Important",
+	success: "Completed",
+	warning: "Warning",
+	destructive: "Error"
+};
+const TimelineMarker = ({ className, variant, icon, children, ...props }) => {
+	const { position } = React.useContext(TimelineContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-col items-center", position === "center" && "justify-start"),
+		children: [children ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "timeline-marker",
+			className: cn("relative z-10 flex shrink-0 items-center justify-center", className),
+			...props,
+			children
+		}) : /* @__PURE__ */ jsx("div", {
+			"data-slot": "timeline-marker",
+			className: cn(timelineMarkerVariants({ variant }), className),
+			"aria-label": variantLabels[variant ?? "default"],
+			role: "status",
+			...props,
+			children: icon ? /* @__PURE__ */ jsx("div", {
+				className: "flex size-3 items-center justify-center text-current",
+				children: icon
+			}) : /* @__PURE__ */ jsx("div", { className: cn("size-2 rounded-full bg-current") })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "border-l border-border absolute -top-4 -bottom-4 left-1/2 -translate-x-1/2 [li:first-child_&]:top-6 [li:last-child_&]:bottom-auto [li:last-child_&]:h-full",
+			"data-slot": "timeline-line",
+			"aria-hidden": "true"
+		})]
+	});
+};
+TimelineMarker.displayName = "TimelineMarker";
+const TimelineContent = ({ className, ...props }) => {
+	const { position } = React.useContext(TimelineContext);
+	const { index } = React.useContext(TimelineItemContext);
+	const isRight = position === "right" || position === "alternate" && index % 2 === 1;
+	if (position === "center") {
+		const isEven = index % 2 === 0;
+		return /* @__PURE__ */ jsx("div", {
+			"data-slot": "timeline-content",
+			className: cn("flex flex-col gap-1 pb-6", isEven ? "text-right" : "text-left", className),
+			...props
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "timeline-content",
+		className: cn("flex flex-1 flex-col gap-1 pb-4", position === "alternate" && "w-1/2 pb-8", position === "alternate" && (isRight ? "text-right" : "text-left"), className),
+		...props
+	});
+};
+TimelineContent.displayName = "TimelineContent";
+const TimelineSpacer = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "timeline-spacer",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+};
+TimelineSpacer.displayName = "TimelineSpacer";
+const TimelineTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "timeline-title",
+		className: cn("leading-none font-medium", className),
+		...props
+	});
+};
+TimelineTitle.displayName = "TimelineTitle";
+const TimelineDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "timeline-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+};
+TimelineDescription.displayName = "TimelineDescription";
+const TimelineTime = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("time", {
+		"data-slot": "timeline-time",
+		className: cn("text-muted-foreground text-xs", className),
+		...props
+	});
+};
+TimelineTime.displayName = "TimelineTime";
+
+//#endregion
+export { TimelineContent, TimelineDescription, TimelineItem, TimelineMarker, TimelineRoot, TimelineSpacer, TimelineTime, TimelineTitle };
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","names":[],"sources":["../src/components/timeline.tsx"],"sourcesContent":["'use client'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================\n// Context for position and index\n// ============================================\nconst TimelineContext = React.createContext<{\n  position: 'left' | 'right' | 'alternate' | 'center'\n}>({\n  position: 'left',\n})\n\nconst TimelineItemContext = React.createContext<{ index: number }>({ index: 0 })\n\n// ============================================\n// 1. TimelineRoot\n// ============================================\nconst timelineVariants = cva('flex flex-col list-none m-0 p-0', {\n  variants: {\n    position: {\n      left: 'gap-6',\n      right: 'gap-6',\n      alternate: 'gap-0',\n      center: 'gap-0',\n    },\n  },\n  defaultVariants: {\n    position: 'left',\n  },\n})\n\ninterface TimelineRootProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {}\n\nconst TimelineRoot = ({ className, position, children, ...props }: TimelineRootProps) => {\n  const timelinePosition = position ?? 'left'\n\n  // Wrap children to inject index for each TimelineItem\n  // Non-element children (null, strings, etc.) are passed through unchanged\n  const childrenWithIndex = React.Children.map(children, (child, index) => {\n    if (React.isValidElement(child)) {\n      return (\n        <TimelineItemContext.Provider value={{ index }}>\n          {child}\n        </TimelineItemContext.Provider>\n      )\n    }\n    return child\n  })\n\n  return (\n    <TimelineContext.Provider value={{ position: timelinePosition }}>\n      <ol\n        role='list'\n        data-slot='timeline'\n        data-position={timelinePosition}\n        className={cn(timelineVariants({ position: timelinePosition }), className)}\n        {...props}\n      >\n        {childrenWithIndex}\n      </ol>\n    </TimelineContext.Provider>\n  )\n}\nTimelineRoot.displayName = 'TimelineRoot'\n\n// ============================================\n// 2. TimelineItem\n// ============================================\nconst TimelineItem = ({ className, children, ...props }: React.ComponentProps<'li'>) => {\n  const { position } = React.useContext(TimelineContext)\n  const { index } = React.useContext(TimelineItemContext)\n\n  // Determine if this item should be on the right side\n  const isRight = position === 'right' || (position === 'alternate' && index % 2 === 1)\n\n  // Center mode - special layout with line in the middle\n  if (position === 'center') {\n    const isEven = index % 2 === 0\n    return (\n      <li\n        role='listitem'\n        data-slot='timeline-item'\n        data-position={isEven ? 'left' : 'right'}\n        className={cn('relative m-0 grid grid-cols-[1fr_auto_1fr] gap-4 p-0', className)}\n        {...props}\n      >\n        {children}\n      </li>\n    )\n  }\n\n  return (\n    <li\n      role='listitem'\n      data-slot='timeline-item'\n      data-position={isRight ? 'right' : 'left'}\n      className={cn(\n        'relative m-0 flex gap-4 p-0',\n        position === 'alternate' && 'justify-center',\n        isRight && 'flex-row-reverse',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n}\nTimelineItem.displayName = 'TimelineItem'\n\n// ============================================\n// 3. TimelineMarker\n// ============================================\nconst timelineMarkerVariants = cva(\n  'relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full',\n  {\n    variants: {\n      variant: {\n        default: 'border border-border bg-background',\n        primary: 'bg-primary text-white',\n        success: 'bg-success text-white',\n        warning: 'bg-warning text-white',\n        destructive: 'bg-destructive text-white',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nconst variantLabels = {\n  default: 'Event',\n  primary: 'Important',\n  success: 'Completed',\n  warning: 'Warning',\n  destructive: 'Error',\n}\n\ninterface TimelineMarkerProps\n  extends React.ComponentProps<'div'>, VariantProps<typeof timelineMarkerVariants> {\n  icon?: React.ReactNode\n}\n\nconst TimelineMarker = ({\n  className,\n  variant,\n  icon,\n  children,\n  ...props\n}: TimelineMarkerProps) => {\n  const { position } = React.useContext(TimelineContext)\n\n  return (\n    <div\n      className={cn(\n        'relative flex flex-col items-center',\n        position === 'center' && 'justify-start',\n      )}\n    >\n      {children ? (\n        <div\n          data-slot='timeline-marker'\n          className={cn(\n            'relative z-10 flex shrink-0 items-center justify-center',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      ) : (\n        <div\n          data-slot='timeline-marker'\n          className={cn(timelineMarkerVariants({ variant }), className)}\n          aria-label={variantLabels[variant ?? 'default']}\n          role='status'\n          {...props}\n        >\n          {icon ? (\n            <div className='flex size-3 items-center justify-center text-current'>\n              {icon}\n            </div>\n          ) : (\n            <div className={cn('size-2 rounded-full bg-current')} />\n          )}\n        </div>\n      )}\n      {/* Line */}\n      <div\n        className='border-l border-border absolute -top-4 -bottom-4 left-1/2 -translate-x-1/2 [li:first-child_&]:top-6 [li:last-child_&]:bottom-auto [li:last-child_&]:h-full'\n        data-slot='timeline-line'\n        aria-hidden='true'\n      />\n    </div>\n  )\n}\nTimelineMarker.displayName = 'TimelineMarker'\n\n// ============================================\n// 4. TimelineContent\n// ============================================\nconst TimelineContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  const { position } = React.useContext(TimelineContext)\n  const { index } = React.useContext(TimelineItemContext)\n\n  const isRight = position === 'right' || (position === 'alternate' && index % 2 === 1)\n\n  // Center mode uses grid layout\n  if (position === 'center') {\n    const isEven = index % 2 === 0\n    return (\n      <div\n        data-slot='timeline-content'\n        className={cn(\n          'flex flex-col gap-1 pb-6',\n          isEven ? 'text-right' : 'text-left',\n          className,\n        )}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <div\n      data-slot='timeline-content'\n      className={cn(\n        'flex flex-1 flex-col gap-1 pb-4',\n        position === 'alternate' && 'w-1/2 pb-8',\n        position === 'alternate' && (isRight ? 'text-right' : 'text-left'),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nTimelineContent.displayName = 'TimelineContent'\n\n// ============================================\n// 5. TimelineSpacer\n// ============================================\nconst TimelineSpacer = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot='timeline-spacer'\n      className={cn('min-w-0 flex-1', className)}\n      {...props}\n    />\n  )\n}\nTimelineSpacer.displayName = 'TimelineSpacer'\n\n// ============================================\n// 6. TimelineTitle\n// ============================================\nconst TimelineTitle = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot='timeline-title'\n      className={cn('leading-none font-medium', className)}\n      {...props}\n    />\n  )\n}\nTimelineTitle.displayName = 'TimelineTitle'\n\n// ============================================\n// 7. TimelineDescription\n// ============================================\nconst TimelineDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot='timeline-description'\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\nTimelineDescription.displayName = 'TimelineDescription'\n\n// ============================================\n// 8. TimelineTime\n// ============================================\nconst TimelineTime = ({ className, ...props }: React.ComponentProps<'time'>) => {\n  return (\n    <time\n      data-slot='timeline-time'\n      className={cn('text-muted-foreground text-xs', className)}\n      {...props}\n    />\n  )\n}\nTimelineTime.displayName = 'TimelineTime'\n\n// ============================================\n// Export\n// ============================================\nexport {\n  TimelineRoot,\n  TimelineItem,\n  TimelineMarker,\n  TimelineContent,\n  TimelineSpacer,\n  TimelineTitle,\n  TimelineDescription,\n  TimelineTime,\n}\n\nexport type { TimelineRootProps, TimelineMarkerProps }\n"],"mappings":"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"}