@kuzenbo/core 0.0.2 → 0.0.3

package/dist/ui/timeline.js

@@ -0,0 +1,472 @@
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn, tv } from "tailwind-variants";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/ui/timeline/use-timeline.ts
+const TimelineContext = createContext(null);
+const useTimeline = () => {
+	const context = useContext(TimelineContext);
+	if (!context) throw new Error("useTimeline must be used within a <Timeline />");
+	return context;
+};
+const TimelineItemContext = createContext(null);
+const useTimelineItem = () => {
+	const context = useContext(TimelineItemContext);
+	if (!context) throw new Error("useTimelineItem must be used within a <TimelineItem />");
+	return context;
+};
+const getItemStatus = (itemIndex, activeIndex) => {
+	if (activeIndex === void 0) return "pending";
+	if (itemIndex < activeIndex) return "completed";
+	if (itemIndex === activeIndex) return "active";
+	return "pending";
+};
+
+//#endregion
+//#region src/ui/timeline/timeline-connector.tsx
+const timelineConnectorVariants = tv({
+	base: ["absolute z-0", "group-last/timeline-item:hidden"],
+	variants: {
+		status: {
+			completed: "bg-primary",
+			active: "bg-border",
+			pending: "bg-border"
+		},
+		orientation: {
+			vertical: "",
+			horizontal: ""
+		},
+		variant: {
+			default: "",
+			alternate: ""
+		},
+		isAlternateRight: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			variant: "default",
+			className: [
+				"start-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)]",
+				"top-[var(--timeline-dot-size)]",
+				"h-[calc(100%-var(--timeline-dot-size))]",
+				"w-[var(--timeline-connector-thickness)]"
+			]
+		},
+		{
+			orientation: "horizontal",
+			variant: "default",
+			className: [
+				"start-[var(--timeline-dot-size)]",
+				"top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)]",
+				"h-[var(--timeline-connector-thickness)]",
+				"w-[calc(100%-var(--timeline-dot-size))]"
+			]
+		},
+		{
+			orientation: "vertical",
+			variant: "alternate",
+			isAlternateRight: false,
+			className: [
+				"top-0",
+				"-right-[var(--timeline-connector-thickness)/2]",
+				"h-full",
+				"w-[var(--timeline-connector-thickness)]"
+			]
+		},
+		{
+			orientation: "vertical",
+			variant: "alternate",
+			isAlternateRight: true,
+			className: [
+				"top-0",
+				"-left-[var(--timeline-connector-thickness)/2]",
+				"h-full",
+				"w-[var(--timeline-connector-thickness)]"
+			]
+		},
+		{
+			orientation: "horizontal",
+			variant: "alternate",
+			className: [
+				"top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)]",
+				"left-[var(--timeline-dot-size)]",
+				"row-start-2",
+				"h-[var(--timeline-connector-thickness)]",
+				"w-[calc(100%-var(--timeline-dot-size))]"
+			]
+		}
+	],
+	defaultVariants: {
+		status: "pending",
+		orientation: "vertical",
+		variant: "default",
+		isAlternateRight: false
+	}
+});
+const TimelineConnector = ({ className, render, forceMount, ...props }) => {
+	const { orientation, variant } = useTimeline();
+	const { status, isAlternateRight } = useTimelineItem();
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			"aria-hidden": true,
+			className: cn(timelineConnectorVariants({
+				status,
+				orientation,
+				variant,
+				isAlternateRight
+			}), forceMount && "group-last/timeline-item:block", className)
+		}, props),
+		render,
+		state: {
+			slot: "timeline-connector",
+			status,
+			orientation
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/timeline/timeline-content.tsx
+const timelineContentVariants = tv({
+	base: "flex-1",
+	variants: {
+		orientation: {
+			vertical: "",
+			horizontal: ""
+		},
+		variant: {
+			default: "",
+			alternate: ""
+		},
+		isAlternateRight: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "alternate",
+			orientation: "vertical",
+			isAlternateRight: false,
+			className: "text-right"
+		},
+		{
+			variant: "alternate",
+			orientation: "horizontal",
+			isAlternateRight: false,
+			className: "row-start-3 pt-2"
+		},
+		{
+			variant: "alternate",
+			orientation: "horizontal",
+			isAlternateRight: true,
+			className: "row-start-1 pb-2"
+		}
+	],
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "default",
+		isAlternateRight: false
+	}
+});
+const TimelineContent = ({ className, render, ...props }) => {
+	const { orientation, variant } = useTimeline();
+	const { status, isAlternateRight } = useTimelineItem();
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(timelineContentVariants({
+			orientation,
+			variant,
+			isAlternateRight
+		}), className) }, props),
+		render,
+		state: {
+			slot: "timeline-content",
+			status
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/timeline/timeline-description.tsx
+const TimelineDescription = ({ className, render, ...props }) => useRender({
+	defaultTagName: "div",
+	props: mergeProps({ className: cn("text-sm text-muted-foreground", className) }, props),
+	render,
+	state: { slot: "timeline-description" }
+});
+
+//#endregion
+//#region src/ui/timeline/timeline-dot.tsx
+const timelineDotVariants = tv({
+	base: ["relative z-10 flex shrink-0 items-center justify-center rounded-full border-2 bg-background", "size-[var(--timeline-dot-size)]"],
+	variants: {
+		status: {
+			completed: "border-primary bg-primary",
+			active: "border-primary bg-background",
+			pending: "border-border bg-background"
+		},
+		orientation: {
+			vertical: "",
+			horizontal: ""
+		},
+		variant: {
+			default: "",
+			alternate: ""
+		},
+		isAlternateRight: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "alternate",
+			orientation: "vertical",
+			isAlternateRight: false,
+			className: "absolute -right-[calc(var(--timeline-dot-size)/2+var(--timeline-connector-thickness)/2)]"
+		},
+		{
+			variant: "alternate",
+			orientation: "vertical",
+			isAlternateRight: true,
+			className: "absolute -left-[calc(var(--timeline-dot-size)/2+var(--timeline-connector-thickness)/2)]"
+		},
+		{
+			variant: "alternate",
+			orientation: "horizontal",
+			className: "row-start-2"
+		}
+	],
+	defaultVariants: {
+		status: "pending",
+		orientation: "vertical",
+		variant: "default",
+		isAlternateRight: false
+	}
+});
+const TimelineDot = ({ className, render, ...props }) => {
+	const { orientation, variant } = useTimeline();
+	const { status, isAlternateRight } = useTimelineItem();
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(timelineDotVariants({
+			status,
+			orientation,
+			variant,
+			isAlternateRight
+		}), className) }, props),
+		render,
+		state: {
+			slot: "timeline-dot",
+			status,
+			orientation
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/timeline/timeline-header.tsx
+const TimelineHeader = ({ className, render, ...props }) => useRender({
+	defaultTagName: "div",
+	props: mergeProps({ className: cn("flex flex-col gap-1", className) }, props),
+	render,
+	state: { slot: "timeline-header" }
+});
+
+//#endregion
+//#region src/ui/timeline/timeline-item.tsx
+const timelineItemVariants = tv({
+	base: "group/timeline-item relative flex",
+	variants: {
+		orientation: {
+			vertical: "",
+			horizontal: ""
+		},
+		variant: {
+			default: "",
+			alternate: ""
+		},
+		isAlternateRight: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			variant: "default",
+			className: "gap-3 pb-8 last:pb-0"
+		},
+		{
+			orientation: "horizontal",
+			variant: "default",
+			className: "flex-col gap-3"
+		},
+		{
+			orientation: "vertical",
+			variant: "alternate",
+			isAlternateRight: false,
+			className: "w-1/2 gap-3 pr-6 pb-8 last:pb-0"
+		},
+		{
+			orientation: "vertical",
+			variant: "alternate",
+			isAlternateRight: true,
+			className: "ml-auto w-1/2 flex-row-reverse gap-3 pb-8 pl-6 last:pb-0"
+		},
+		{
+			orientation: "horizontal",
+			variant: "alternate",
+			className: "grid min-w-0 grid-rows-[1fr_auto_1fr] gap-3"
+		}
+	],
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "default",
+		isAlternateRight: false
+	}
+});
+const TimelineItem = ({ index, className, children, ...props }) => {
+	const { orientation, variant, dir, activeIndex } = useTimeline();
+	const status = getItemStatus(index, activeIndex);
+	const isAlternateRight = variant === "alternate" && index % 2 === 1;
+	const itemContextValue = useMemo(() => ({
+		index,
+		status,
+		isAlternateRight
+	}), [
+		index,
+		status,
+		isAlternateRight
+	]);
+	return /* @__PURE__ */ jsx(TimelineItemContext.Provider, {
+		value: itemContextValue,
+		children: /* @__PURE__ */ jsx("li", {
+			"aria-current": status === "active" ? "step" : void 0,
+			className: cn(timelineItemVariants({
+				orientation,
+				variant,
+				isAlternateRight
+			}), className),
+			"data-alternate-right": isAlternateRight ? "" : void 0,
+			"data-orientation": orientation,
+			"data-slot": "timeline-item",
+			"data-status": status,
+			dir,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/timeline/timeline-time.tsx
+const TimelineTime = ({ className, render, ...props }) => useRender({
+	defaultTagName: "time",
+	props: mergeProps({ className: cn("text-xs text-muted-foreground", className) }, props),
+	render,
+	state: { slot: "timeline-time" }
+});
+
+//#endregion
+//#region src/ui/timeline/timeline-title.tsx
+const TimelineTitle = ({ className, render, ...props }) => useRender({
+	defaultTagName: "div",
+	props: mergeProps({ className: cn("leading-none font-semibold", className) }, props),
+	render,
+	state: { slot: "timeline-title" }
+});
+
+//#endregion
+//#region src/ui/timeline/timeline.tsx
+const timelineVariants = tv({
+	base: [
+		"group/timeline relative flex",
+		"[--timeline-connector-thickness:0.125rem]",
+		"[--timeline-dot-size:0.875rem]"
+	],
+	variants: {
+		orientation: {
+			vertical: "flex-col",
+			horizontal: "flex-row items-start"
+		},
+		variant: {
+			default: "",
+			alternate: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			variant: "default",
+			className: "gap-0"
+		},
+		{
+			orientation: "horizontal",
+			variant: "default",
+			className: "gap-0"
+		},
+		{
+			orientation: "vertical",
+			variant: "alternate",
+			className: "relative w-full gap-0"
+		},
+		{
+			orientation: "horizontal",
+			variant: "alternate",
+			className: "items-center gap-0"
+		}
+	],
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "default"
+	}
+});
+const Timeline = ({ orientation = "vertical", variant = "default", dir = "ltr", activeIndex, className, children, ...props }) => {
+	const contextValue = useMemo(() => ({
+		orientation,
+		variant,
+		dir,
+		activeIndex
+	}), [
+		orientation,
+		variant,
+		dir,
+		activeIndex
+	]);
+	return /* @__PURE__ */ jsx(TimelineContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: cn(timelineVariants({
+				orientation,
+				variant
+			}), className),
+			"data-orientation": orientation,
+			"data-slot": "timeline",
+			"data-variant": variant,
+			dir,
+			...props,
+			children
+		})
+	});
+};
+Timeline.Connector = TimelineConnector;
+Timeline.Content = TimelineContent;
+Timeline.Description = TimelineDescription;
+Timeline.Dot = TimelineDot;
+Timeline.Header = TimelineHeader;
+Timeline.Item = TimelineItem;
+Timeline.Time = TimelineTime;
+Timeline.Title = TimelineTitle;
+
+//#endregion
+export { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, TimelineHeader, TimelineItem, TimelineTime, TimelineTitle, timelineVariants };
+//# sourceMappingURL=timeline.js.map

package/dist/ui/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","names":[],"sources":["../../src/ui/timeline/use-timeline.ts","../../src/ui/timeline/timeline-connector.tsx","../../src/ui/timeline/timeline-content.tsx","../../src/ui/timeline/timeline-description.tsx","../../src/ui/timeline/timeline-dot.tsx","../../src/ui/timeline/timeline-header.tsx","../../src/ui/timeline/timeline-item.tsx","../../src/ui/timeline/timeline-time.tsx","../../src/ui/timeline/timeline-title.tsx","../../src/ui/timeline/timeline.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\ntype Direction = \"ltr\" | \"rtl\";\ntype Orientation = \"vertical\" | \"horizontal\";\ntype Variant = \"default\" | \"alternate\";\ntype Status = \"completed\" | \"active\" | \"pending\";\n\ninterface TimelineContextValue {\n  orientation: Orientation;\n  variant: Variant;\n  dir: Direction;\n  activeIndex?: number;\n}\n\ninterface TimelineItemContextValue {\n  index: number;\n  status: Status;\n  isAlternateRight: boolean;\n}\n\nconst TimelineContext = createContext<TimelineContextValue | null>(null);\n\nconst useTimeline = () => {\n  const context = useContext(TimelineContext);\n\n  if (!context) {\n    throw new Error(\"useTimeline must be used within a <Timeline />\");\n  }\n\n  return context;\n};\n\nconst TimelineItemContext = createContext<TimelineItemContextValue | null>(\n  null\n);\n\nconst useTimelineItem = () => {\n  const context = useContext(TimelineItemContext);\n\n  if (!context) {\n    throw new Error(\"useTimelineItem must be used within a <TimelineItem />\");\n  }\n\n  return context;\n};\n\nconst getItemStatus = (itemIndex: number, activeIndex?: number): Status => {\n  if (activeIndex === undefined) {\n    return \"pending\";\n  }\n  if (itemIndex < activeIndex) {\n    return \"completed\";\n  }\n  if (itemIndex === activeIndex) {\n    return \"active\";\n  }\n  return \"pending\";\n};\n\nexport {\n  type Direction,\n  type Orientation,\n  type Status,\n  type TimelineContextValue,\n  type TimelineItemContextValue,\n  type Variant,\n  getItemStatus,\n  TimelineContext,\n  TimelineItemContext,\n  useTimeline,\n  useTimelineItem,\n};\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn, tv } from \"tailwind-variants\";\n\nimport { useTimeline, useTimelineItem } from \"./use-timeline\";\n\nconst timelineConnectorVariants = tv({\n  base: [\"absolute z-0\", \"group-last/timeline-item:hidden\"],\n  variants: {\n    status: {\n      completed: \"bg-primary\",\n      active: \"bg-border\",\n      pending: \"bg-border\",\n    },\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\",\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\",\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      orientation: \"vertical\",\n      variant: \"default\",\n      className: [\n        \"start-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)]\",\n        \"top-[var(--timeline-dot-size)]\",\n        \"h-[calc(100%-var(--timeline-dot-size))]\",\n        \"w-[var(--timeline-connector-thickness)]\",\n      ],\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"default\",\n      className: [\n        \"start-[var(--timeline-dot-size)]\",\n        \"top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)]\",\n        \"h-[var(--timeline-connector-thickness)]\",\n        \"w-[calc(100%-var(--timeline-dot-size))]\",\n      ],\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: false,\n      className: [\n        \"top-0\",\n        \"-right-[var(--timeline-connector-thickness)/2]\",\n        \"h-full\",\n        \"w-[var(--timeline-connector-thickness)]\",\n      ],\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: true,\n      className: [\n        \"top-0\",\n        \"-left-[var(--timeline-connector-thickness)/2]\",\n        \"h-full\",\n        \"w-[var(--timeline-connector-thickness)]\",\n      ],\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"alternate\",\n      className: [\n        \"top-[calc(var(--timeline-dot-size)/2-var(--timeline-connector-thickness)/2)]\",\n        \"left-[var(--timeline-dot-size)]\",\n        \"row-start-2\",\n        \"h-[var(--timeline-connector-thickness)]\",\n        \"w-[calc(100%-var(--timeline-dot-size))]\",\n      ],\n    },\n  ],\n  defaultVariants: {\n    status: \"pending\",\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false,\n  },\n});\n\ninterface TimelineConnectorProps extends useRender.ComponentProps<\"div\"> {\n  forceMount?: boolean;\n}\n\nconst TimelineConnector = ({\n  className,\n  render,\n  forceMount,\n  ...props\n}: TimelineConnectorProps) => {\n  const { orientation, variant } = useTimeline();\n  const { status, isAlternateRight } = useTimelineItem();\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        \"aria-hidden\": true,\n        className: cn(\n          timelineConnectorVariants({\n            status,\n            orientation,\n            variant,\n            isAlternateRight,\n          }),\n          forceMount && \"group-last/timeline-item:block\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-connector\",\n      status,\n      orientation,\n    },\n  });\n};\n\nexport { TimelineConnector, timelineConnectorVariants };\nexport type { TimelineConnectorProps };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn, tv } from \"tailwind-variants\";\n\nimport { useTimeline, useTimelineItem } from \"./use-timeline\";\n\nconst timelineContentVariants = tv({\n  base: \"flex-1\",\n  variants: {\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\",\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\",\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"alternate\",\n      orientation: \"vertical\",\n      isAlternateRight: false,\n      className: \"text-right\",\n    },\n    {\n      variant: \"alternate\",\n      orientation: \"horizontal\",\n      isAlternateRight: false,\n      className: \"row-start-3 pt-2\",\n    },\n    {\n      variant: \"alternate\",\n      orientation: \"horizontal\",\n      isAlternateRight: true,\n      className: \"row-start-1 pb-2\",\n    },\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false,\n  },\n});\n\ntype TimelineContentProps = useRender.ComponentProps<\"div\">;\n\nconst TimelineContent = ({\n  className,\n  render,\n  ...props\n}: TimelineContentProps) => {\n  const { orientation, variant } = useTimeline();\n  const { status, isAlternateRight } = useTimelineItem();\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          timelineContentVariants({\n            orientation,\n            variant,\n            isAlternateRight,\n          }),\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-content\",\n      status,\n    },\n  });\n};\n\nexport { TimelineContent, timelineContentVariants };\nexport type { TimelineContentProps };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"tailwind-variants\";\n\ntype TimelineDescriptionProps = useRender.ComponentProps<\"div\">;\n\nconst TimelineDescription = ({\n  className,\n  render,\n  ...props\n}: TimelineDescriptionProps) =>\n  useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"text-sm text-muted-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-description\",\n    },\n  });\n\nexport { TimelineDescription };\nexport type { TimelineDescriptionProps };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn, tv } from \"tailwind-variants\";\n\nimport { useTimeline, useTimelineItem } from \"./use-timeline\";\n\nconst timelineDotVariants = tv({\n  base: [\n    \"relative z-10 flex shrink-0 items-center justify-center rounded-full border-2 bg-background\",\n    \"size-[var(--timeline-dot-size)]\",\n  ],\n  variants: {\n    status: {\n      completed: \"border-primary bg-primary\",\n      active: \"border-primary bg-background\",\n      pending: \"border-border bg-background\",\n    },\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\",\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\",\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"alternate\",\n      orientation: \"vertical\",\n      isAlternateRight: false,\n      className:\n        \"absolute -right-[calc(var(--timeline-dot-size)/2+var(--timeline-connector-thickness)/2)]\",\n    },\n    {\n      variant: \"alternate\",\n      orientation: \"vertical\",\n      isAlternateRight: true,\n      className:\n        \"absolute -left-[calc(var(--timeline-dot-size)/2+var(--timeline-connector-thickness)/2)]\",\n    },\n    {\n      variant: \"alternate\",\n      orientation: \"horizontal\",\n      className: \"row-start-2\",\n    },\n  ],\n  defaultVariants: {\n    status: \"pending\",\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false,\n  },\n});\n\ntype TimelineDotProps = useRender.ComponentProps<\"div\">;\n\nconst TimelineDot = ({ className, render, ...props }: TimelineDotProps) => {\n  const { orientation, variant } = useTimeline();\n  const { status, isAlternateRight } = useTimelineItem();\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          timelineDotVariants({\n            status,\n            orientation,\n            variant,\n            isAlternateRight,\n          }),\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-dot\",\n      status,\n      orientation,\n    },\n  });\n};\n\nexport { TimelineDot, timelineDotVariants };\nexport type { TimelineDotProps };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"tailwind-variants\";\n\ntype TimelineHeaderProps = useRender.ComponentProps<\"div\">;\n\nconst TimelineHeader = ({ className, render, ...props }: TimelineHeaderProps) =>\n  useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"flex flex-col gap-1\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-header\",\n    },\n  });\n\nexport { TimelineHeader };\nexport type { TimelineHeaderProps };\n","import { type ComponentProps, type ReactNode, useMemo } from \"react\";\nimport { cn, tv } from \"tailwind-variants\";\n\nimport {\n  getItemStatus,\n  TimelineItemContext,\n  useTimeline,\n} from \"./use-timeline\";\n\nconst timelineItemVariants = tv({\n  base: \"group/timeline-item relative flex\",\n  variants: {\n    orientation: {\n      vertical: \"\",\n      horizontal: \"\",\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\",\n    },\n    isAlternateRight: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      orientation: \"vertical\",\n      variant: \"default\",\n      className: \"gap-3 pb-8 last:pb-0\",\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"default\",\n      className: \"flex-col gap-3\",\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: false,\n      className: \"w-1/2 gap-3 pr-6 pb-8 last:pb-0\",\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      isAlternateRight: true,\n      className: \"ml-auto w-1/2 flex-row-reverse gap-3 pb-8 pl-6 last:pb-0\",\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"alternate\",\n      className: \"grid min-w-0 grid-rows-[1fr_auto_1fr] gap-3\",\n    },\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\",\n    isAlternateRight: false,\n  },\n});\n\ninterface TimelineItemProps extends ComponentProps<\"li\"> {\n  index: number;\n  children?: ReactNode;\n}\n\nconst TimelineItem = ({\n  index,\n  className,\n  children,\n  ...props\n}: TimelineItemProps) => {\n  const { orientation, variant, dir, activeIndex } = useTimeline();\n\n  const status = getItemStatus(index, activeIndex);\n  const isAlternateRight = variant === \"alternate\" && index % 2 === 1;\n\n  const itemContextValue = useMemo(\n    () => ({\n      index,\n      status,\n      isAlternateRight,\n    }),\n    [index, status, isAlternateRight]\n  );\n\n  return (\n    <TimelineItemContext.Provider value={itemContextValue}>\n      <li\n        aria-current={status === \"active\" ? \"step\" : undefined}\n        className={cn(\n          timelineItemVariants({\n            orientation,\n            variant,\n            isAlternateRight,\n          }),\n          className\n        )}\n        data-alternate-right={isAlternateRight ? \"\" : undefined}\n        data-orientation={orientation}\n        data-slot=\"timeline-item\"\n        data-status={status}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </li>\n    </TimelineItemContext.Provider>\n  );\n};\n\nexport { TimelineItem, timelineItemVariants };\nexport type { TimelineItemProps };\n","import type { ComponentProps } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"tailwind-variants\";\n\ntype TimelineTimeProps = useRender.ComponentProps<\"time\"> &\n  Pick<ComponentProps<\"time\">, \"dateTime\">;\n\nconst TimelineTime = ({ className, render, ...props }: TimelineTimeProps) =>\n  useRender({\n    defaultTagName: \"time\",\n    props: mergeProps<\"time\">(\n      {\n        className: cn(\"text-xs text-muted-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-time\",\n    },\n  });\n\nexport { TimelineTime };\nexport type { TimelineTimeProps };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"tailwind-variants\";\n\ntype TimelineTitleProps = useRender.ComponentProps<\"div\">;\n\nconst TimelineTitle = ({ className, render, ...props }: TimelineTitleProps) =>\n  useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"leading-none font-semibold\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"timeline-title\",\n    },\n  });\n\nexport { TimelineTitle };\nexport type { TimelineTitleProps };\n","import { type ComponentProps, type ReactNode, useMemo } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport { TimelineConnector } from \"./timeline-connector\";\nimport { TimelineContent } from \"./timeline-content\";\nimport { TimelineDescription } from \"./timeline-description\";\nimport { TimelineDot } from \"./timeline-dot\";\nimport { TimelineHeader } from \"./timeline-header\";\nimport { TimelineItem } from \"./timeline-item\";\nimport { TimelineTime } from \"./timeline-time\";\nimport { TimelineTitle } from \"./timeline-title\";\nimport { type Direction, TimelineContext } from \"./use-timeline\";\n\nconst timelineVariants = tv({\n  base: [\n    \"group/timeline relative flex\",\n    \"[--timeline-connector-thickness:0.125rem]\",\n    \"[--timeline-dot-size:0.875rem]\",\n  ],\n  variants: {\n    orientation: {\n      vertical: \"flex-col\",\n      horizontal: \"flex-row items-start\",\n    },\n    variant: {\n      default: \"\",\n      alternate: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      orientation: \"vertical\",\n      variant: \"default\",\n      className: \"gap-0\",\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"default\",\n      className: \"gap-0\",\n    },\n    {\n      orientation: \"vertical\",\n      variant: \"alternate\",\n      className: \"relative w-full gap-0\",\n    },\n    {\n      orientation: \"horizontal\",\n      variant: \"alternate\",\n      className: \"items-center gap-0\",\n    },\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\",\n  },\n});\n\ninterface TimelineProps\n  extends ComponentProps<\"ol\">, VariantProps<typeof timelineVariants> {\n  dir?: Direction;\n  activeIndex?: number;\n  children?: ReactNode;\n}\n\nconst Timeline = ({\n  orientation = \"vertical\",\n  variant = \"default\",\n  dir = \"ltr\",\n  activeIndex,\n  className,\n  children,\n  ...props\n}: TimelineProps) => {\n  const contextValue = useMemo(\n    () => ({\n      orientation,\n      variant,\n      dir,\n      activeIndex,\n    }),\n    [orientation, variant, dir, activeIndex]\n  );\n\n  return (\n    <TimelineContext.Provider value={contextValue}>\n      <ol\n        className={cn(timelineVariants({ orientation, variant }), className)}\n        data-orientation={orientation}\n        data-slot=\"timeline\"\n        data-variant={variant}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </ol>\n    </TimelineContext.Provider>\n  );\n};\n\nTimeline.Connector = TimelineConnector;\nTimeline.Content = TimelineContent;\nTimeline.Description = TimelineDescription;\nTimeline.Dot = TimelineDot;\nTimeline.Header = TimelineHeader;\nTimeline.Item = TimelineItem;\nTimeline.Time = TimelineTime;\nTimeline.Title = TimelineTitle;\n\nexport {\n  Timeline,\n  TimelineConnector,\n  TimelineContent,\n  TimelineDescription,\n  TimelineDot,\n  TimelineHeader,\n  TimelineItem,\n  TimelineTime,\n  TimelineTitle,\n  timelineVariants,\n};\nexport type { TimelineProps };\n\nexport type { TimelineConnectorProps } from \"./timeline-connector\";\nexport type { TimelineContentProps } from \"./timeline-content\";\nexport type { TimelineDescriptionProps } from \"./timeline-description\";\nexport type { TimelineDotProps } from \"./timeline-dot\";\nexport type { TimelineHeaderProps } from \"./timeline-header\";\nexport type { TimelineItemProps } from \"./timeline-item\";\nexport type { TimelineTimeProps } from \"./timeline-time\";\nexport type { TimelineTitleProps } from \"./timeline-title\";\n"],"mappings":";;;;;;;AAsBA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAM,oBAAoB;CACxB,MAAM,UAAU,WAAW,gBAAgB;AAE3C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,iDAAiD;AAGnE,QAAO;;AAGT,MAAM,sBAAsB,cAC1B,KACD;AAED,MAAM,wBAAwB;CAC5B,MAAM,UAAU,WAAW,oBAAoB;AAE/C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,yDAAyD;AAG3E,QAAO;;AAGT,MAAM,iBAAiB,WAAmB,gBAAiC;AACzE,KAAI,gBAAgB,OAClB,QAAO;AAET,KAAI,YAAY,YACd,QAAO;AAET,KAAI,cAAc,YAChB,QAAO;AAET,QAAO;;;;;ACpDT,MAAM,4BAA4B,GAAG;CACnC,MAAM,CAAC,gBAAgB,kCAAkC;CACzD,UAAU;EACR,QAAQ;GACN,WAAW;GACX,QAAQ;GACR,SAAS;GACV;EACD,aAAa;GACX,UAAU;GACV,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACZ;EACD,kBAAkB;GAChB,MAAM;GACN,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,SAAS;GACT,kBAAkB;GAClB,WAAW;IACT;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,SAAS;GACT,kBAAkB;GAClB,WAAW;IACT;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,aAAa;EACb,SAAS;EACT,kBAAkB;EACnB;CACF,CAAC;AAMF,MAAM,qBAAqB,EACzB,WACA,QACA,YACA,GAAG,YACyB;CAC5B,MAAM,EAAE,aAAa,YAAY,aAAa;CAC9C,MAAM,EAAE,QAAQ,qBAAqB,iBAAiB;AAEtD,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL;GACE,eAAe;GACf,WAAW,GACT,0BAA0B;IACxB;IACA;IACA;IACA;IACD,CAAC,EACF,cAAc,kCACd,UACD;GACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;;;;ACzHJ,MAAM,0BAA0B,GAAG;CACjC,MAAM;CACN,UAAU;EACR,aAAa;GACX,UAAU;GACV,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACZ;EACD,kBAAkB;GAChB,MAAM;GACN,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,aAAa;GACb,kBAAkB;GAClB,WAAW;GACZ;EACD;GACE,SAAS;GACT,aAAa;GACb,kBAAkB;GAClB,WAAW;GACZ;EACD;GACE,SAAS;GACT,aAAa;GACb,kBAAkB;GAClB,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,aAAa;EACb,SAAS;EACT,kBAAkB;EACnB;CACF,CAAC;AAIF,MAAM,mBAAmB,EACvB,WACA,QACA,GAAG,YACuB;CAC1B,MAAM,EAAE,aAAa,YAAY,aAAa;CAC9C,MAAM,EAAE,QAAQ,qBAAqB,iBAAiB;AAEtD,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,wBAAwB;GACtB;GACA;GACA;GACD,CAAC,EACF,UACD,EACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACD;EACF,CAAC;;;;;ACzEJ,MAAM,uBAAuB,EAC3B,WACA,QACA,GAAG,YAEH,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GAAG,iCAAiC,UAAU,EAC1D,EACD,MACD;CACD;CACA,OAAO,EACL,MAAM,wBACP;CACF,CAAC;;;;ACjBJ,MAAM,sBAAsB,GAAG;CAC7B,MAAM,CACJ,+FACA,kCACD;CACD,UAAU;EACR,QAAQ;GACN,WAAW;GACX,QAAQ;GACR,SAAS;GACV;EACD,aAAa;GACX,UAAU;GACV,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACZ;EACD,kBAAkB;GAChB,MAAM;GACN,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,aAAa;GACb,kBAAkB;GAClB,WACE;GACH;EACD;GACE,SAAS;GACT,aAAa;GACb,kBAAkB;GAClB,WACE;GACH;EACD;GACE,SAAS;GACT,aAAa;GACb,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,aAAa;EACb,SAAS;EACT,kBAAkB;EACnB;CACF,CAAC;AAIF,MAAM,eAAe,EAAE,WAAW,QAAQ,GAAG,YAA8B;CACzE,MAAM,EAAE,aAAa,YAAY,aAAa;CAC9C,MAAM,EAAE,QAAQ,qBAAqB,iBAAiB;AAEtD,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,oBAAoB;GAClB;GACA;GACA;GACA;GACD,CAAC,EACF,UACD,EACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;;;;ACjFJ,MAAM,kBAAkB,EAAE,WAAW,QAAQ,GAAG,YAC9C,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GAAG,uBAAuB,UAAU,EAChD,EACD,MACD;CACD;CACA,OAAO,EACL,MAAM,mBACP;CACF,CAAC;;;;ACVJ,MAAM,uBAAuB,GAAG;CAC9B,MAAM;CACN,UAAU;EACR,aAAa;GACX,UAAU;GACV,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACZ;EACD,kBAAkB;GAChB,MAAM;GACN,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,kBAAkB;GAClB,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,kBAAkB;GAClB,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,aAAa;EACb,SAAS;EACT,kBAAkB;EACnB;CACF,CAAC;AAOF,MAAM,gBAAgB,EACpB,OACA,WACA,UACA,GAAG,YACoB;CACvB,MAAM,EAAE,aAAa,SAAS,KAAK,gBAAgB,aAAa;CAEhE,MAAM,SAAS,cAAc,OAAO,YAAY;CAChD,MAAM,mBAAmB,YAAY,eAAe,QAAQ,MAAM;CAElE,MAAM,mBAAmB,eAChB;EACL;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAQ;EAAiB,CAClC;AAED,QACE,oBAAC,oBAAoB;EAAS,OAAO;YACnC,oBAAC;GACC,gBAAc,WAAW,WAAW,SAAS;GAC7C,WAAW,GACT,qBAAqB;IACnB;IACA;IACA;IACD,CAAC,EACF,UACD;GACD,wBAAsB,mBAAmB,KAAK;GAC9C,oBAAkB;GAClB,aAAU;GACV,eAAa;GACR;GACL,GAAI;GAEH;IACE;GACwB;;;;;AClGnC,MAAM,gBAAgB,EAAE,WAAW,QAAQ,GAAG,YAC5C,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GAAG,iCAAiC,UAAU,EAC1D,EACD,MACD;CACD;CACA,OAAO,EACL,MAAM,iBACP;CACF,CAAC;;;;AChBJ,MAAM,iBAAiB,EAAE,WAAW,QAAQ,GAAG,YAC7C,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GAAG,8BAA8B,UAAU,EACvD,EACD,MACD;CACD;CACA,OAAO,EACL,MAAM,kBACP;CACF,CAAC;;;;ACNJ,MAAM,mBAAmB,GAAG;CAC1B,MAAM;EACJ;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa;GACX,UAAU;GACV,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,WAAW;GACZ;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACD;GACE,aAAa;GACb,SAAS;GACT,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,aAAa;EACb,SAAS;EACV;CACF,CAAC;AASF,MAAM,YAAY,EAChB,cAAc,YACd,UAAU,WACV,MAAM,OACN,aACA,WACA,UACA,GAAG,YACgB;CACnB,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACD,GACD;EAAC;EAAa;EAAS;EAAK;EAAY,CACzC;AAED,QACE,oBAAC,gBAAgB;EAAS,OAAO;YAC/B,oBAAC;GACC,WAAW,GAAG,iBAAiB;IAAE;IAAa;IAAS,CAAC,EAAE,UAAU;GACpE,oBAAkB;GAClB,aAAU;GACV,gBAAc;GACT;GACL,GAAI;GAEH;IACE;GACoB;;AAI/B,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,MAAM;AACf,SAAS,SAAS;AAClB,SAAS,OAAO;AAChB,SAAS,OAAO;AAChB,SAAS,QAAQ"}

package/dist/ui/toggle-group.d.ts

@@ -0,0 +1,138 @@
+import { t as UISize } from "../size-system-wzOLSuax.js";
+import { toggleVariants } from "./toggle.js";
+import * as react from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import * as tailwind_merge0 from "tailwind-merge";
+
+//#region src/ui/toggle-group/toggle-group-context.d.ts
+type ToggleGroupVariant = NonNullable<VariantProps<typeof toggleVariants>["variant"]>;
+type ToggleGroupSize = UISize;
+interface ToggleGroupContextValue {
+  orientation: "horizontal" | "vertical";
+  size: ToggleGroupSize;
+  spacing: number;
+  variant: ToggleGroupVariant;
+}
+declare const ToggleGroupContext: react.Context<ToggleGroupContextValue>;
+//#endregion
+//#region src/ui/toggle-group/toggle-group-item.d.ts
+declare const toggleGroupItemVariants: tailwind_variants0.TVReturnType<{} | {
+  variant: {
+    default: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+    outline: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+  };
+  size: {
+    xs: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+    sm: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+    md: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+    lg: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+    xl: tailwind_merge0.ClassNameValue | {
+      base?: tailwind_merge0.ClassNameValue;
+    };
+  };
+}, undefined, "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", {
+  variant: {
+    default: string;
+    outline: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  variant: {
+    default: string;
+    outline: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "group/toggle inline-flex cursor-pointer items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+  variant: {
+    default: string;
+    outline: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  variant: {
+    default: string;
+    outline: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "group/toggle inline-flex cursor-pointer items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>>;
+type ToggleGroupItemVariantProps = Omit<VariantProps<typeof toggleGroupItemVariants>, "size" | "variant"> & {
+  size?: ToggleGroupSize;
+  variant?: ToggleGroupVariant;
+};
+type ToggleGroupItemProps = Toggle.Props & ToggleGroupItemVariantProps;
+declare const ToggleGroupItem: ({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ToggleGroupItemProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/toggle-group/toggle-group.d.ts
+type ToggleGroupProps = ToggleGroup$1.Props & {
+  orientation?: "horizontal" | "vertical";
+  size?: ToggleGroupSize;
+  spacing?: number;
+  variant?: ToggleGroupVariant;
+};
+declare const ToggleGroup: {
+  ({
+    className,
+    variant,
+    size: providedSize,
+    spacing,
+    orientation,
+    children,
+    ...props
+  }: ToggleGroupProps): react_jsx_runtime0.JSX.Element;
+  Item: ({
+    className,
+    children,
+    variant,
+    size,
+    ...props
+  }: ToggleGroupItemProps) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { ToggleGroup, ToggleGroupContext, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupProps, type ToggleGroupSize, type ToggleGroupVariant };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/ui/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","names":[],"sources":["../../src/ui/toggle-group/toggle-group-context.tsx","../../src/ui/toggle-group/toggle-group-item.tsx","../../src/ui/toggle-group/toggle-group.tsx"],"mappings":";;;;;;;;;;;KASY,kBAAA,GAAqB,WAAA,CAC/B,YAAA,QAAoB,cAAA;AAAA,KAEV,eAAA,GAAkB,MAAA;AAAA,UAEb,uBAAA;EACf,WAAA;EACA,IAAA,EAAM,eAAA;EACN,OAAA;EACA,OAAA,EAAS,kBAAA;AAAA;AAAA,cAGL,kBAAA,EAAkB,KAAA,CAAA,OAAA,CAAA,uBAAA;;;cCLlB,uBAAA,qBAAuB,YAAA;;aAO3B,eAAA,CAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEG,2BAAA,GAA8B,IAAA,CACjC,YAAA,QAAoB,uBAAA;EAGpB,IAAA,GAAO,eAAA;EACP,OAAA,GAAU,kBAAA;AAAA;AAAA,KAGA,oBAAA,GAAuB,MAAA,CAAgB,KAAA,GACjD,2BAAA;AAAA,cAEI,eAAA;EAAmB,SAAA;EAAA,QAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAMtB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KC3BX,gBAAA,GAAmB,aAAA,CAAqB,KAAA;EAClD,WAAA;EACA,IAAA,GAAO,eAAA;EACP,OAAA;EACA,OAAA,GAAU,kBAAA;AAAA;AAAA,cAGN,WAAA;EAAA;;;;;;;;KAQH,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}