@ctrl-ui/react 0.8.0

package/dist/ui/tabs.d.ts

@@ -0,0 +1,36 @@
+import { ControlledChoice, RenderProp } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { TabsKnobStyle } from "../knob-contracts/tabs-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/tabs.d.ts
+type TabsProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledChoice<TValue> & {
+  style?: CSSProperties & TabsKnobStyle;
+};
+type TabsListVariant = "default" | "browser";
+type TabsListProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TabsKnobStyle;
+} & {
+  size?: ControlSize;
+  variant?: TabsListVariant;
+};
+type TabsTabProps = Omit<Omit<ComponentProps<"button">, "value">, "style"> & {
+  style?: CSSProperties & TabsKnobStyle;
+} & {
+  value: string;
+  render?: RenderProp<ComponentProps<"button">, {
+    active: boolean;
+    disabled: boolean;
+  }>;
+  nativeButton?: boolean;
+};
+type TabsPanelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TabsKnobStyle;
+} & {
+  value: string;
+};
+declare function Tabs<TValue extends string = string>({ className, onValueChange, children, ...props }: TabsProps<TValue>): import("react").JSX.Element;
+declare function TabsList({ size, variant, className, children, style, ...props }: TabsListProps): import("react").JSX.Element;
+declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;
+declare function TabsPanel({ className, value, ref, ...props }: TabsPanelProps): import("react").JSX.Element;
+//#endregion
+export { Tabs, TabsList, TabsListProps, TabsListVariant, TabsPanel, TabsPanelProps, TabsProps, TabsTab, TabsTabProps };

package/dist/ui/tabs.js

@@ -0,0 +1,127 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Children, Fragment, createContext, isValidElement, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/ui/tabs.tsx
+const TabsPanelsContext = createContext(null);
+function useRegisterTabsPanel() {
+	const registerPanel = useContext(TabsPanelsContext);
+	if (!registerPanel) throw new Error("TabsPanel must be rendered inside <Tabs>.");
+	return registerPanel;
+}
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+}
+function Tabs({ className, onValueChange, children, ...props }) {
+	const rootRef = useRef(null);
+	const panelsRef = useRef(/* @__PURE__ */ new Map());
+	const clearPrevHeight = useRef(0);
+	const [registerPanel] = useState(() => (value, node) => {
+		if (!node) return;
+		panelsRef.current.set(value, node);
+		return () => {
+			if (panelsRef.current.get(value) === node) panelsRef.current.delete(value);
+		};
+	});
+	const handleValueChange = (value) => {
+		const root = rootRef.current;
+		if (root) for (const panel of panelsRef.current.values()) {
+			if (panel.inert || panel.hidden) continue;
+			root.style.setProperty("--aui-slide-prev-height", `${panel.getBoundingClientRect().height}px`);
+			cancelAnimationFrame(clearPrevHeight.current);
+			clearPrevHeight.current = requestAnimationFrame(() => {
+				clearPrevHeight.current = requestAnimationFrame(() => root.style.removeProperty("--aui-slide-prev-height"));
+			});
+			break;
+		}
+		onValueChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(TabsPanelsContext.Provider, {
+		value: registerPanel,
+		children: /* @__PURE__ */ jsx(Tabs$1.Root, {
+			"data-control-ui": "tabs",
+			"data-control-family": "tabs",
+			"data-slot": "root",
+			"data-slide": "scope",
+			className,
+			onValueChange: handleValueChange,
+			...props,
+			ref: rootRef,
+			children
+		})
+	});
+}
+const controlHeights = {
+	xs: "var(--control-h-xs)",
+	sm: "var(--control-h-sm)",
+	md: "var(--control-h-md)",
+	lg: "var(--control-h-lg)"
+};
+function countTabs(children) {
+	return Children.toArray(children).reduce((count, child) => {
+		if (!isValidElement(child)) return count;
+		if (child.type === TabsTab) return count + 1;
+		if (child.type === Fragment) return count + countTabs(child.props.children);
+		return count;
+	}, 0);
+}
+function TabsList({ size = "sm", variant = "default", className, children, style, ...props }) {
+	const isSingle = countTabs(children) === 1;
+	const controlStyle = {
+		"--_tabs-trigger-h": controlHeights[size],
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Tabs$1.List, {
+		"data-control-ui": "tabs",
+		"data-control-family": "tabs",
+		"data-slot": "list",
+		"data-size": size,
+		"data-variant": variant,
+		"data-single": isSingle ? "true" : void 0,
+		className: cn(variant === "browser" && "gap-0 p-0 px-(--_tabs-browser-inset) pt-(--cui-tabs-list-padding)", className),
+		style: controlStyle,
+		...props,
+		children: [children, isSingle ? null : /* @__PURE__ */ jsx(Tabs$1.Indicator, {
+			"data-control-ui": "tabs",
+			"data-control-family": "tabs",
+			"data-slot": "indicator",
+			className: variant === "browser" ? "top-auto bottom-0 left-(--_tabs-browser-indicator-x) z-0 h-(--_tabs-trigger-h) w-(--_tabs-browser-indicator-width) transform-none" : void 0
+		})]
+	});
+}
+function TabsTab({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		"data-control-ui": "tabs",
+		"data-control-family": "tabs",
+		"data-slot": "tab",
+		className,
+		...props
+	});
+}
+function TabsPanel({ className, value, ref, ...props }) {
+	const registerPanel = useRegisterTabsPanel();
+	const panelRef = (node) => {
+		const unregister = registerPanel(value, node);
+		const cleanup = setRef(ref, node);
+		if (!node) return;
+		return () => {
+			unregister?.();
+			if (typeof cleanup === "function") cleanup();
+			else setRef(ref, null);
+		};
+	};
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		ref: panelRef,
+		value,
+		"data-control-ui": "tabs",
+		"data-control-family": "tabs",
+		"data-slot": "panel",
+		"data-slide": "panel",
+		className: cn("data-[hidden]:hidden [&[hidden]]:hidden", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsList, TabsPanel, TabsTab };

package/dist/ui/textarea.d.ts

@@ -0,0 +1,9 @@
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/textarea.d.ts
+type TextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
+//#endregion
+export { Textarea, TextareaProps };

package/dist/ui/textarea.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/textarea.tsx
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-control-ui": "textarea",
+		"data-field-kind": "textarea",
+		"data-slot": "root",
+		"data-control-family": "field",
+		"data-control": "true",
+		className: cn("field-sizing-content w-full min-w-0 resize-none", className),
+		...props
+	});
+}
+//#endregion
+export { Textarea };

package/dist/ui/timeline.d.ts

@@ -0,0 +1,40 @@
+import { TimelineKnobStyle } from "../knob-contracts/timeline-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/timeline.d.ts
+type TimelineState = "neutral" | "pending" | "running" | "success" | "error";
+type TimelineProps = ComponentProps<"ol"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineItemProps = ComponentProps<"li"> & {
+  state?: TimelineState;
+} & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineSeparatorProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+type TimelineMetaProps = ComponentProps<"div"> & {
+  style?: CSSProperties & TimelineKnobStyle;
+};
+declare function Timeline({ className, ...props }: TimelineProps): import("react").JSX.Element;
+declare function TimelineItem({ state, className, ...props }: TimelineItemProps): import("react").JSX.Element;
+declare function TimelineIndicator({ className, ...props }: TimelineIndicatorProps): import("react").JSX.Element;
+declare function TimelineSeparator({ className, ...props }: TimelineSeparatorProps): import("react").JSX.Element;
+declare function TimelineContent({ className, ...props }: TimelineContentProps): import("react").JSX.Element;
+declare function TimelineTitle({ className, ...props }: TimelineTitleProps): import("react").JSX.Element;
+declare function TimelineDescription({ className, ...props }: TimelineDescriptionProps): import("react").JSX.Element;
+declare function TimelineMeta({ className, ...props }: TimelineMetaProps): import("react").JSX.Element;
+//#endregion
+export { Timeline, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineIndicator, TimelineIndicatorProps, TimelineItem, TimelineItemProps, TimelineMeta, TimelineMetaProps, TimelineProps, TimelineSeparator, TimelineSeparatorProps, TimelineState, TimelineTitle, TimelineTitleProps };

package/dist/ui/timeline.js

@@ -0,0 +1,80 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/timeline.tsx
+function Timeline({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "root",
+		...props,
+		className: cn("grid min-w-0", className)
+	});
+}
+function TimelineItem({ state = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "item",
+		"data-state": state,
+		...props,
+		className: cn("group/timeline-item relative grid min-w-0 grid-cols-[1rem_minmax(0,1fr)]", className)
+	});
+}
+function TimelineIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "indicator",
+		...props,
+		className: cn("relative z-10 col-start-1 row-start-1 flex shrink-0 items-center justify-center", className)
+	});
+}
+function TimelineSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "separator",
+		...props,
+		className: cn("absolute top-5 bottom-0 left-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
+	});
+}
+function TimelineContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "content",
+		...props,
+		className: cn("col-start-2 row-start-1 grid min-w-0", className)
+	});
+}
+function TimelineTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "title",
+		...props,
+		className: cn("min-w-0", className)
+	});
+}
+function TimelineDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "description",
+		...props,
+		className: cn("min-w-0 wrap-anywhere", className)
+	});
+}
+function TimelineMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "timeline",
+		"data-control-family": "timeline",
+		"data-slot": "meta",
+		...props,
+		className: cn("flex min-w-0 flex-wrap items-center", className)
+	});
+}
+//#endregion
+export { Timeline, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineMeta, TimelineSeparator, TimelineTitle };

package/dist/ui/toast.d.ts

@@ -0,0 +1,28 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ReactNode } from "react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/ui/toast.d.ts
+type ToasterProps = {
+  className?: string;
+  timeout?: number;
+  limit?: number;
+  rootStyle?: CSSProperties & PopupKnobStyle;
+  indicatorStyle?: CSSProperties & PopupKnobStyle;
+  actionStyle?: CSSProperties & PopupKnobStyle;
+  closeStyle?: CSSProperties & PopupKnobStyle;
+};
+declare const toastManager: import("@base-ui/react").ToastManager<any>;
+type ToastOptions = Omit<Parameters<typeof toastManager.add>[0], "title">;
+declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+  success: (title: ReactNode, options?: ToastOptions) => string;
+  error: (title: ReactNode, options?: ToastOptions) => string;
+  warning: (title: ReactNode, options?: ToastOptions) => string;
+  info: (title: ReactNode, options?: ToastOptions) => string;
+  message: (title: ReactNode, options?: ToastOptions) => string;
+  promise: (...args: Parameters<typeof toastManager.promise>) => Promise<unknown>;
+  dismiss: (id?: string) => void;
+};
+declare const useToast: typeof Toast.useToastManager;
+declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }: ToasterProps): import("react").JSX.Element;
+//#endregion
+export { Toaster, ToasterProps, toast, toastManager, useToast };

package/dist/ui/toast.js

@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/ui/toast.tsx
+const toastManager = Toast.createToastManager();
+function withType(type) {
+	return (title, options) => toastManager.add({
+		title,
+		type,
+		...options
+	});
+}
+const toast = Object.assign((title, options) => toastManager.add({
+	title,
+	...options
+}), {
+	success: withType("success"),
+	error: withType("error"),
+	warning: withType("warning"),
+	info: withType("info"),
+	message: (title, options) => toastManager.add({
+		title,
+		...options
+	}),
+	promise: (...args) => toastManager.promise(...args),
+	dismiss: (id) => toastManager.close(id)
+});
+const useToast = Toast.useToastManager;
+function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((entry) => {
+		return /* @__PURE__ */ jsx(Toast.Root, {
+			toast: entry,
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-popup-part": "surface",
+			"data-type": entry.type ?? "message",
+			style: rootStyle,
+			"data-slot": "root",
+			"data-surface": "floating",
+			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
+			children: /* @__PURE__ */ jsxs(Toast.Content, {
+				"data-control-ui": "toast",
+				"data-control-family": "popup",
+				"data-popup-kind": "toast",
+				"data-slot": "content",
+				className: "flex items-start",
+				children: [
+					entry.type && entry.type !== "message" ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-control-ui": "toast",
+						"data-control-family": "popup",
+						"data-popup-kind": "toast",
+						"data-slot": "indicator",
+						style: indicatorStyle,
+						className: "shrink-0"
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [entry.title ? /* @__PURE__ */ jsx(Toast.Title, {
+							"data-control-ui": "toast",
+							"data-control-family": "popup",
+							"data-popup-kind": "toast",
+							"data-slot": "title"
+						}) : null, entry.description ? /* @__PURE__ */ jsx(Toast.Description, {
+							"data-control-ui": "toast",
+							"data-control-family": "popup",
+							"data-popup-kind": "toast",
+							"data-slot": "description"
+						}) : null]
+					}),
+					entry.actionProps ? /* @__PURE__ */ jsx(Toast.Action, {
+						"data-control-ui": "toast",
+						"data-control-family": "popup",
+						"data-popup-kind": "toast",
+						"data-slot": "action",
+						style: actionStyle,
+						className: "shrink-0 cursor-pointer"
+					}) : null,
+					/* @__PURE__ */ jsx(Toast.Close, {
+						"data-control-ui": "toast",
+						"data-control-family": "popup",
+						"data-popup-kind": "toast",
+						"data-slot": "close",
+						style: closeStyle,
+						"aria-label": "Close",
+						className: "shrink-0 cursor-pointer",
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 16 16",
+							className: "size-4",
+							"aria-hidden": "true",
+							fill: "none",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M4 4 12 12M12 4 4 12",
+								stroke: "currentColor",
+								strokeWidth: "1.4",
+								strokeLinecap: "round"
+							})
+						})
+					})
+				]
+			})
+		}, entry.id);
+	});
+}
+function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager,
+		timeout,
+		limit,
+		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "viewport",
+			"data-skin": skinId(),
+			"data-effects": skinEffects(),
+			className: cn("fixed right-4 bottom-4 z-[95] mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
+			children: /* @__PURE__ */ jsx(ToastList, {
+				rootStyle,
+				indicatorStyle,
+				actionStyle,
+				closeStyle
+			})
+		}) })
+	});
+}
+//#endregion
+export { Toaster, toast, toastManager, useToast };

package/dist/ui/toggle.d.ts

@@ -0,0 +1,20 @@
+import { ControlledMultiChoice } from "../control-props.js";
+import { ButtonProps } from "./button.js";
+import { ComponentProps } from "react";
+//#region src/ui/toggle.d.ts
+type ToggleProps = Omit<ButtonProps, "render" | "nativeButton" | "value"> & {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  value?: string;
+  showCheck?: boolean;
+};
+type ToggleGroupProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice<TValue> & {
+  multiple?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+};
+declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
+declare function ToggleGroup<TValue extends string = string>({ className, orientation, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
+//#endregion
+export { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps };

package/dist/ui/toggle.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { buttonContentClasses, buttonStructureClasses } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+//#region src/ui/toggle.tsx
+function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		pressed,
+		defaultPressed,
+		onPressedChange,
+		value,
+		disabled,
+		render: (renderProps, state) => {
+			const isActive = active ?? state.pressed;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				...renderProps,
+				"data-control-ui": "toggle",
+				"data-control-family": "button",
+				"data-slot": "root",
+				"data-control": "true",
+				"data-active": isActive ? "true" : void 0,
+				"data-variant": variant,
+				"data-tone": tone,
+				"data-size": size,
+				className: cn(buttonStructureClasses, renderProps.className, className),
+				children: /* @__PURE__ */ jsxs("span", {
+					"data-control-ui": "toggle",
+					"data-control-family": "button",
+					"data-slot": "content",
+					className: buttonContentClasses,
+					children: [showCheck ? /* @__PURE__ */ jsx("span", {
+						"data-control-ui": "toggle",
+						"data-slot": "check",
+						className: "flex size-3.5 shrink-0 items-center justify-center",
+						children: isActive ? /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 12 12",
+							className: "size-3",
+							"aria-hidden": "true",
+							fill: "none",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M2.5 6.5 5 9l4.5-5",
+								stroke: "currentColor",
+								strokeWidth: "1.4",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						}) : null
+					}) : null, renderProps.children]
+				})
+			});
+		},
+		...props,
+		children
+	});
+}
+function ToggleGroup({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		"data-control-ui": "toggle",
+		"data-control-family": "button",
+		"data-slot": "group",
+		"data-orientation": orientation,
+		orientation,
+		className: cn("inline-flex items-center", orientation === "vertical" && "flex-col", className),
+		...props
+	});
+}
+//#endregion
+export { Toggle, ToggleGroup };

package/dist/ui/toolbar.d.ts

@@ -0,0 +1,40 @@
+import { ToolbarKnobStyle } from "../knob-contracts/toolbar-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+//#region src/ui/toolbar.d.ts
+type ToolbarVariant = "default" | "inverse";
+type ToolbarLinkVariant = "default" | "track";
+type ToolbarProps = Omit<ComponentProps<"div">, "style"> & {
+  orientation?: "horizontal" | "vertical";
+  variant?: ToolbarVariant;
+  style?: CSSProperties & ToolbarKnobStyle;
+};
+type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
+  iconOnly?: boolean;
+  style?: CSSProperties & ToolbarKnobStyle;
+};
+type ToolbarLinkProps = Omit<ComponentProps<"a">, "style"> & {
+  variant?: ToolbarLinkVariant;
+  style?: CSSProperties & ToolbarKnobStyle;
+};
+type ToolbarGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ToolbarKnobStyle;
+};
+type ToolbarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+  orientation?: "horizontal" | "vertical";
+  style?: CSSProperties & ToolbarKnobStyle;
+};
+type ToolbarInputProps = Omit<ComponentProps<"input">, "style"> & {
+  style?: CSSProperties & ToolbarKnobStyle;
+};
+declare function Toolbar({ orientation, variant, className, ...props }: ToolbarProps): import("react").JSX.Element;
+type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof Toolbar$1.Button>, "render">;
+declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
+type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof Toolbar$1.Link>, "render">;
+declare function ToolbarLink({ variant, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
+declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+declare function ToolbarSeparator({ orientation, className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
+type RefinedToolbarInputProps = ToolbarInputProps & Pick<ComponentProps<typeof Toolbar$1.Input>, "render">;
+declare function ToolbarInput({ className, ...props }: RefinedToolbarInputProps): import("react").JSX.Element;
+//#endregion
+export { Toolbar, ToolbarButton, ToolbarButtonProps, ToolbarGroup, ToolbarGroupProps, ToolbarInput, ToolbarInputProps, ToolbarLink, ToolbarLinkProps, ToolbarLinkVariant, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, ToolbarVariant };