@lglab/compose-ui 0.36.0 → 0.37.0

package/dist/textarea.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime107 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_runtime107.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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"}

package/dist/toast.d.ts

@@ -1,12 +1,12 @@
 import { ButtonSize, ButtonVariant } from "./lib/button-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime108 from "react/jsx-runtime";
+import * as react_jsx_runtime167 from "react/jsx-runtime";
 import { Toast, Toast as Toast$1 } from "@base-ui/react/toast";
 
 //#region src/components/toast.d.ts
 type ToastProviderProps = React.ComponentProps<typeof Toast$1.Provider>;
 declare const ToastProvider: {
-  (props: ToastProviderProps): react_jsx_runtime108.JSX.Element;
+  (props: ToastProviderProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
@@ -18,7 +18,7 @@ declare const ToastViewport: {
     className,
     position,
     ...props
-  }: ToastViewportProps): react_jsx_runtime108.JSX.Element;
+  }: ToastViewportProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastRootProps = React.ComponentProps<typeof Toast$1.Root>;
@@ -26,7 +26,7 @@ declare const ToastRoot: {
   ({
     className,
     ...props
-  }: ToastRootProps): react_jsx_runtime108.JSX.Element;
+  }: ToastRootProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastContentProps = React.ComponentProps<typeof Toast$1.Content>;
@@ -34,7 +34,7 @@ declare const ToastContent: {
   ({
     className,
     ...props
-  }: ToastContentProps): react_jsx_runtime108.JSX.Element;
+  }: ToastContentProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastTitleProps = React.ComponentProps<typeof Toast$1.Title>;
@@ -42,7 +42,7 @@ declare const ToastTitle: {
   ({
     className,
     ...props
-  }: ToastTitleProps): react_jsx_runtime108.JSX.Element;
+  }: ToastTitleProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastDescriptionProps = React.ComponentProps<typeof Toast$1.Description>;
@@ -50,7 +50,7 @@ declare const ToastDescription: {
   ({
     className,
     ...props
-  }: ToastDescriptionProps): react_jsx_runtime108.JSX.Element;
+  }: ToastDescriptionProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastActionProps = React.ComponentProps<typeof Toast$1.Action> & {
@@ -63,7 +63,7 @@ declare const ToastAction: {
     variant,
     size,
     ...props
-  }: ToastActionProps): react_jsx_runtime108.JSX.Element;
+  }: ToastActionProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastCloseProps = React.ComponentProps<typeof Toast$1.Close>;
@@ -71,7 +71,7 @@ declare const ToastClose: {
   ({
     className,
     ...props
-  }: ToastCloseProps): react_jsx_runtime108.JSX.Element;
+  }: ToastCloseProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 type ToastPositionerProps = React.ComponentProps<typeof Toast$1.Positioner>;
@@ -79,7 +79,7 @@ declare const ToastPositioner: {
   ({
     className,
     ...props
-  }: ToastPositionerProps): react_jsx_runtime108.JSX.Element;
+  }: ToastPositionerProps): react_jsx_runtime167.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toggle-group.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize, ControlVariant } from "./lib/control-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime264 from "react/jsx-runtime";
+import * as react_jsx_runtime255 from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 
@@ -11,7 +11,7 @@ declare const ToggleGroupRoot: {
     className,
     orientation,
     ...props
-  }: ToggleGroupRootProps): react_jsx_runtime264.JSX.Element;
+  }: ToggleGroupRootProps): react_jsx_runtime255.JSX.Element;
   displayName: string;
 };
 type ToggleGroupItemProps = React.ComponentProps<typeof Toggle> & {
@@ -26,7 +26,7 @@ declare const ToggleGroupItem: {
     variant,
     size,
     ...props
-  }: ToggleGroupItemProps): react_jsx_runtime264.JSX.Element;
+  }: ToggleGroupItemProps): react_jsx_runtime255.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toggle.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize, ControlVariant } from "./lib/control-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime223 from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 
 //#region src/components/toggle.d.ts
@@ -16,7 +16,7 @@ declare const Toggle: {
     variant,
     size,
     ...props
-  }: ToggleProps): react_jsx_runtime6.JSX.Element;
+  }: ToggleProps): react_jsx_runtime223.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","names":[],"sources":["../src/components/toggle.tsx"],"sourcesContent":[],"mappings":";;;;;;KAgBK,WAAA,GAAc,KAAA,CAAM,sBAAsB;;YAEnC;EAFP;EAAW,IAAA,CAAA,EAIP,WAJO;;cAOV,MAPmB,EAAA;;IAEb,SAAA;IAAA,OAAA;IAAA,IAAA;IAAA,GAAA;EAAA,CAAA,EAK4C,WAL5C,CAAA,EAKuD,kBAAA,CAAA,GAAA,CAAA,OALvD;aAEH,EAAA,MAAA;CAAW"}
+{"version":3,"file":"toggle.d.ts","names":[],"sources":["../src/components/toggle.tsx"],"sourcesContent":[],"mappings":";;;;;;KAgBK,WAAA,GAAc,KAAA,CAAM,sBAAsB;;YAEnC;EAFP;EAAW,IAAA,CAAA,EAIP,WAJO;;cAOV,MAPmB,EAAA;;IAEb,SAAA;IAAA,OAAA;IAAA,IAAA;IAAA,GAAA;EAAA,CAAA,EAK4C,WAL5C,CAAA,EAKuD,oBAAA,CAAA,GAAA,CAAA,OALvD;aAEH,EAAA,MAAA;CAAW"}

package/dist/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize, ControlVariant } from "./lib/control-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime268 from "react/jsx-runtime";
+import * as react_jsx_runtime217 from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
 
 //#region src/components/toolbar.d.ts
@@ -9,7 +9,7 @@ declare const ToolbarRoot: {
   ({
     className,
     ...props
-  }: ToolbarRootProps): react_jsx_runtime268.JSX.Element;
+  }: ToolbarRootProps): react_jsx_runtime217.JSX.Element;
   displayName: string;
 };
 type ToolbarButtonProps = React.ComponentProps<typeof Toolbar.Button> & {
@@ -24,7 +24,7 @@ declare const ToolbarButton: {
     variant,
     size,
     ...props
-  }: ToolbarButtonProps): react_jsx_runtime268.JSX.Element;
+  }: ToolbarButtonProps): react_jsx_runtime217.JSX.Element;
   displayName: string;
 };
 type ToolbarLinkProps = React.ComponentProps<typeof Toolbar.Link>;
@@ -32,7 +32,7 @@ declare const ToolbarLink: {
   ({
     className,
     ...props
-  }: ToolbarLinkProps): react_jsx_runtime268.JSX.Element;
+  }: ToolbarLinkProps): react_jsx_runtime217.JSX.Element;
   displayName: string;
 };
 type ToolbarInputProps = React.ComponentProps<typeof Toolbar.Input>;
@@ -40,7 +40,7 @@ declare const ToolbarInput: {
   ({
     className,
     ...props
-  }: ToolbarInputProps): react_jsx_runtime268.JSX.Element;
+  }: ToolbarInputProps): react_jsx_runtime217.JSX.Element;
   displayName: string;
 };
 type ToolbarGroupProps = React.ComponentProps<typeof Toolbar.Group>;
@@ -48,7 +48,7 @@ declare const ToolbarGroup: {
   ({
     className,
     ...props
-  }: ToolbarGroupProps): react_jsx_runtime268.JSX.Element;
+  }: ToolbarGroupProps): react_jsx_runtime217.JSX.Element;
   displayName: string;
 };
 type ToolbarSeparatorProps = React.ComponentProps<typeof Toolbar.Separator>;
@@ -56,7 +56,7 @@ declare const ToolbarSeparator: {
   ({
     className,
     ...props
-  }: ToolbarSeparatorProps): react_jsx_runtime268.JSX.Element;
+  }: ToolbarSeparatorProps): react_jsx_runtime217.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/tooltip.d.ts

@@ -1,12 +1,12 @@
 import { TooltipVariant } from "./lib/tooltip-variants.js";
 import * as React from "react";
-import * as react_jsx_runtime274 from "react/jsx-runtime";
+import * as react_jsx_runtime248 from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 
 //#region src/components/tooltip.d.ts
 type TooltipProviderProps = React.ComponentProps<typeof Tooltip.Provider>;
 declare const TooltipProvider: {
-  (props: TooltipProviderProps): react_jsx_runtime274.JSX.Element;
+  (props: TooltipProviderProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 type TooltipRootProps = React.ComponentProps<typeof Tooltip.Root> & {
@@ -16,7 +16,7 @@ declare const TooltipRoot: {
   ({
     variant,
     ...props
-  }: TooltipRootProps): react_jsx_runtime274.JSX.Element;
+  }: TooltipRootProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 type TooltipTriggerProps = React.ComponentProps<typeof Tooltip.Trigger>;
@@ -24,12 +24,12 @@ declare const TooltipTrigger: {
   ({
     className,
     ...props
-  }: TooltipTriggerProps): react_jsx_runtime274.JSX.Element;
+  }: TooltipTriggerProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 type TooltipPortalProps = React.ComponentProps<typeof Tooltip.Portal>;
 declare const TooltipPortal: {
-  (props: TooltipPortalProps): react_jsx_runtime274.JSX.Element;
+  (props: TooltipPortalProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 type TooltipPositionerProps = React.ComponentProps<typeof Tooltip.Positioner>;
@@ -37,7 +37,7 @@ declare const TooltipPositioner: {
   ({
     className,
     ...props
-  }: TooltipPositionerProps): react_jsx_runtime274.JSX.Element;
+  }: TooltipPositionerProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 type TooltipPopupProps = React.ComponentProps<typeof Tooltip.Popup> & {
@@ -48,7 +48,7 @@ declare const TooltipPopup: {
     className,
     variant,
     ...props
-  }: TooltipPopupProps): react_jsx_runtime274.JSX.Element;
+  }: TooltipPopupProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 type TooltipArrowProps = React.ComponentProps<typeof Tooltip.Arrow> & {
@@ -59,7 +59,7 @@ declare const TooltipArrow: {
     className,
     variant,
     ...props
-  }: TooltipArrowProps): react_jsx_runtime274.JSX.Element;
+  }: TooltipArrowProps): react_jsx_runtime248.JSX.Element;
   displayName: string;
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -198,6 +198,10 @@
       "import": "./dist/textarea.js",
       "types": "./dist/textarea.d.ts"
     },
+    "./timeline": {
+      "import": "./dist/timeline.js",
+      "types": "./dist/timeline.d.ts"
+    },
     "./toast": {
       "import": "./dist/toast.js",
       "types": "./dist/toast.d.ts"