strata-ui-react 0.1.10 → 0.1.12

package/dist/scroll-area.js

@@ -0,0 +1,97 @@
+import { cn } from "./cn.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+const ScrollArea$1 = (t0) => {
+	const $ = c(26);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({orientation: t1, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+	}
+	const orientation = t1 === void 0 ? "vertical" : t1;
+	const t2 = orientation === "horizontal" && "h-full";
+	let t3;
+	if ($[6] !== className || $[7] !== t2) {
+		t3 = cn("h-[200px] rounded-lg bg-surface-container", t2, className);
+		$[6] = className;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== children) {
+		t4 = /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			className: "h-full overscroll-contain flex flex-col gap-xs py-2xs pr-sm pl-sm prose-step-0",
+			children
+		});
+		$[9] = children;
+		$[10] = t4;
+	} else t4 = $[10];
+	const t5 = orientation === "vertical" && "w-2xs mr-2xs my-2xs";
+	const t6 = orientation === "horizontal" && "h-2xs flex-col mb-2xs mx-xs";
+	let t7;
+	if ($[11] !== className || $[12] !== t5 || $[13] !== t6) {
+		t7 = cn("inset-shadow-1-shadow flex justify-center rounded p-[2px] bg-surface-dim opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-75 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-75 hover:cursor-pointer", t5, t6, className);
+		$[11] = className;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "w-full h-full rounded-full bg-accent rounded-1" });
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== orientation || $[17] !== t7) {
+		t9 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+			orientation,
+			className: t7,
+			children: t8
+		});
+		$[16] = orientation;
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ScrollArea.Corner, {});
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== props || $[21] !== ref || $[22] !== t3 || $[23] !== t4 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(ScrollArea.Root, {
+			className: t3,
+			ref,
+			...props,
+			children: [
+				t4,
+				t9,
+				t10
+			]
+		});
+		$[20] = props;
+		$[21] = ref;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t9;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
+};
+export { ScrollArea$1 as ScrollArea };

package/dist/separator.cjs

@@ -0,0 +1,45 @@
+const require_cn = require("./cn.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+const Separator = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = require_cn.cn("", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== props || $[9] !== ref || $[10] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t1,
+			ref,
+			...props,
+			children
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = ref;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+exports.Separator = Separator;

package/dist/separator.js

@@ -0,0 +1,45 @@
+import { cn } from "./cn.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+const Separator = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = cn("", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== props || $[9] !== ref || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			ref,
+			...props,
+			children
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = ref;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+export { Separator };

package/dist/slider-handle.cjs

@@ -0,0 +1,34 @@
+"use no memo";
+const require_cn = require("./cn.cjs");
+const require_tooltip = require("./tooltip.cjs");
+const require_tooltip_trigger = require("./tooltip-trigger.cjs");
+const require_tooltip_context = require("./tooltip-context.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+const SliderHandle = ({ sliderInstance, isActive, onKeyDownHandler, onMouseDownHandler, onTouchStart, value, className, children, ref, ...props }) => {
+	const [isHovering, setIsHovering] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tooltip.Tooltip, {
+		open: isActive || isHovering,
+		trackCursorAxis: "x",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip_trigger.TooltipTrigger, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onKeyDown: onKeyDownHandler,
+			onMouseDown: onMouseDownHandler,
+			onTouchStart,
+			onMouseEnter: () => setIsHovering(true),
+			onMouseLeave: () => setIsHovering(false),
+			role: "slider",
+			"aria-valuemin": sliderInstance.options.min,
+			"aria-valuemax": sliderInstance.options.max,
+			"aria-valuenow": value,
+			style: {
+				left: `${sliderInstance.getPercentageForValue(value)}%`,
+				zIndex: isActive ? "1" : "0"
+			},
+			className: require_cn.cn("absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full outline-none border-2 border-primary bg-surface-container hover:cursor-pointer active:border-secondary hover:border-secondary transition-[width,height,border] aspect-square", isActive ? "size-md shadow-4-shadow" : "size-sm shadow-1-shadow", className),
+			ref,
+			...props,
+			children
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip_context.TooltipContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: value }) })]
+	});
+};
+exports.SliderHandle = SliderHandle;

package/dist/slider-handle.js

@@ -0,0 +1,34 @@
+"use no memo";
+import { cn } from "./cn.js";
+import { Tooltip } from "./tooltip.js";
+import { TooltipTrigger } from "./tooltip-trigger.js";
+import { TooltipContent } from "./tooltip-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const SliderHandle = ({ sliderInstance, isActive, onKeyDownHandler, onMouseDownHandler, onTouchStart, value, className, children, ref, ...props }) => {
+	const [isHovering, setIsHovering] = useState(false);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		open: isActive || isHovering,
+		trackCursorAxis: "x",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("button", {
+			onKeyDown: onKeyDownHandler,
+			onMouseDown: onMouseDownHandler,
+			onTouchStart,
+			onMouseEnter: () => setIsHovering(true),
+			onMouseLeave: () => setIsHovering(false),
+			role: "slider",
+			"aria-valuemin": sliderInstance.options.min,
+			"aria-valuemax": sliderInstance.options.max,
+			"aria-valuenow": value,
+			style: {
+				left: `${sliderInstance.getPercentageForValue(value)}%`,
+				zIndex: isActive ? "1" : "0"
+			},
+			className: cn("absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full outline-none border-2 border-primary bg-surface-container hover:cursor-pointer active:border-secondary hover:border-secondary transition-[width,height,border] aspect-square", isActive ? "size-md shadow-4-shadow" : "size-sm shadow-1-shadow", className),
+			ref,
+			...props,
+			children
+		}) }), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("span", { children: value }) })]
+	});
+};
+export { SliderHandle };

package/dist/slider-segment.cjs

@@ -0,0 +1,17 @@
+"use no memo";
+const require_cn = require("./cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+const SliderSegment = ({ index, steps, left, width, className, children, ref, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cn.cn("absolute bg-primary h-full rounded-full inset-shadow-1-shadow", className),
+		style: {
+			background: `${index === steps - 1 ? "transparent" : "var(--color-primary)"}`,
+			left: `${left}%`,
+			width: `${width}%`
+		},
+		ref,
+		...props,
+		children
+	});
+};
+exports.SliderSegment = SliderSegment;

package/dist/slider-segment.js

@@ -0,0 +1,17 @@
+"use no memo";
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+const SliderSegment = ({ index, steps, left, width, className, children, ref, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute bg-primary h-full rounded-full inset-shadow-1-shadow", className),
+		style: {
+			background: `${index === steps - 1 ? "transparent" : "var(--color-primary)"}`,
+			left: `${left}%`,
+			width: `${width}%`
+		},
+		ref,
+		...props,
+		children
+	});
+};
+export { SliderSegment };

package/dist/slider-tick-label.cjs

@@ -0,0 +1,12 @@
+"use no memo";
+const require_cn = require("./cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+const SliderTickLabel = ({ className, children, ref, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: require_cn.cn("absolute text-[0.6rem] top-full -translate-x-1/2 translate-y-[1.2rem] whitespace-nowrap style-text-default--1 text-on-surface-variant", className),
+		ref,
+		...props,
+		children
+	});
+};
+exports.SliderTickLabel = SliderTickLabel;

package/dist/slider-tick-label.js

@@ -0,0 +1,12 @@
+"use no memo";
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+const SliderTickLabel = ({ className, children, ref, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("absolute text-[0.6rem] top-full -translate-x-1/2 translate-y-[1.2rem] whitespace-nowrap style-text-default--1 text-on-surface-variant", className),
+		ref,
+		...props,
+		children
+	});
+};
+export { SliderTickLabel };

package/dist/slider-tick.cjs

@@ -0,0 +1,13 @@
+"use no memo";
+const require_cn = require("./cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+const SliderTick = ({ percentage, className, children, ref, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_cn.cn("absolute top-2xs -translate-x-1/2", className),
+		ref,
+		...props,
+		style: { left: `${percentage}%` },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute bg-on-surface-variant rounded-full left-0 h-2xs w-[2px] -translate-x-1/2 translate-y-[0.7rem]" }), children]
+	});
+};
+exports.SliderTick = SliderTick;

package/dist/slider-tick.js

@@ -0,0 +1,13 @@
+"use no memo";
+import { cn } from "./cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SliderTick = ({ percentage, className, children, ref, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute top-2xs -translate-x-1/2", className),
+		ref,
+		...props,
+		style: { left: `${percentage}%` },
+		children: [/* @__PURE__ */ jsx("span", { className: "absolute bg-on-surface-variant rounded-full left-0 h-2xs w-[2px] -translate-x-1/2 translate-y-[0.7rem]" }), children]
+	});
+};
+export { SliderTick };

package/dist/slider-track.cjs

@@ -0,0 +1,12 @@
+"use no memo";
+const require_cn = require("./cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+const SliderTrack = ({ className, children, sliderRef, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cn.cn("relative h-2xs inset-shadow-1-shadow rounded-full bg-surface-dim grow", className),
+		ref: sliderRef,
+		...props,
+		children
+	});
+};
+exports.SliderTrack = SliderTrack;

package/dist/slider-track.js

@@ -0,0 +1,12 @@
+"use no memo";
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+const SliderTrack = ({ className, children, sliderRef, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative h-2xs inset-shadow-1-shadow rounded-full bg-surface-dim grow", className),
+		ref: sliderRef,
+		...props,
+		children
+	});
+};
+export { SliderTrack };

package/dist/slider.cjs

@@ -0,0 +1,69 @@
+"use no memo";
+const require_cn = require("./cn.cjs");
+const require_slider_handle = require("./slider-handle.cjs");
+const require_slider_segment = require("./slider-segment.cjs");
+const require_slider_tick_label = require("./slider-tick-label.cjs");
+const require_slider_tick = require("./slider-tick.cjs");
+const require_slider_track = require("./slider-track.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __tanstack_react_ranger = require("@tanstack/react-ranger");
+const Slider = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, min, max, stepSize, defaultValues, showTickLabels, label, className, ref, ...props }) => {
+	const sliderRef = (0, react.useRef)(null);
+	const [values, setValues] = (0, react.useState)(defaultValues || [50]);
+	const sliderInstance = (0, __tanstack_react_ranger.useRanger)({
+		getRangerElement: () => sliderRef.current,
+		values,
+		min: min ?? 0,
+		max: max ?? 100,
+		stepSize: stepSize ?? 1,
+		onChange: (instance) => {
+			setValues(instance.sortedValues);
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: require_cn.cn("space-y-2xs", className),
+		...props,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "style-text-default--1 text-on-surface-variant",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center w-full gap-sm",
+			children: [
+				LeadingIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeadingIcon, {
+					className: "size-sm",
+					weight: "bold"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_slider_track.SliderTrack, {
+					sliderRef,
+					children: [
+						showTickLabels && sliderInstance.getTicks().map(({ value, key, percentage }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_slider_tick.SliderTick, {
+							percentage,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_slider_tick_label.SliderTickLabel, { children: value })
+						}, key)),
+						sliderInstance.getSteps().map(({ left, width }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_slider_segment.SliderSegment, {
+							index,
+							steps: sliderInstance.getSteps().length,
+							left,
+							width
+						}, index)),
+						sliderInstance.handles().map(({ isActive, onKeyDownHandler, onMouseDownHandler, onTouchStart, value: value_0 }, index_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_slider_handle.SliderHandle, {
+							sliderInstance,
+							isActive,
+							onKeyDownHandler,
+							onMouseDownHandler,
+							onTouchStart,
+							value: value_0
+						}, index_0))
+					]
+				}),
+				TrailingIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrailingIcon, {
+					className: "size-sm",
+					weight: "bold"
+				})
+			]
+		})]
+	});
+};
+exports.Slider = Slider;

package/dist/slider.js

@@ -0,0 +1,69 @@
+"use no memo";
+import { cn } from "./cn.js";
+import { SliderHandle } from "./slider-handle.js";
+import { SliderSegment } from "./slider-segment.js";
+import { SliderTickLabel } from "./slider-tick-label.js";
+import { SliderTick } from "./slider-tick.js";
+import { SliderTrack } from "./slider-track.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useRanger } from "@tanstack/react-ranger";
+const Slider = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, min, max, stepSize, defaultValues, showTickLabels, label, className, ref, ...props }) => {
+	const sliderRef = useRef(null);
+	const [values, setValues] = useState(defaultValues || [50]);
+	const sliderInstance = useRanger({
+		getRangerElement: () => sliderRef.current,
+		values,
+		min: min ?? 0,
+		max: max ?? 100,
+		stepSize: stepSize ?? 1,
+		onChange: (instance) => {
+			setValues(instance.sortedValues);
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("space-y-2xs", className),
+		...props,
+		children: [label && /* @__PURE__ */ jsx("p", {
+			className: "style-text-default--1 text-on-surface-variant",
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center w-full gap-sm",
+			children: [
+				LeadingIcon && /* @__PURE__ */ jsx(LeadingIcon, {
+					className: "size-sm",
+					weight: "bold"
+				}),
+				/* @__PURE__ */ jsxs(SliderTrack, {
+					sliderRef,
+					children: [
+						showTickLabels && sliderInstance.getTicks().map(({ value, key, percentage }) => /* @__PURE__ */ jsx(SliderTick, {
+							percentage,
+							children: /* @__PURE__ */ jsx(SliderTickLabel, { children: value })
+						}, key)),
+						sliderInstance.getSteps().map(({ left, width }, index) => /* @__PURE__ */ jsx(SliderSegment, {
+							index,
+							steps: sliderInstance.getSteps().length,
+							left,
+							width
+						}, index)),
+						sliderInstance.handles().map(({ isActive, onKeyDownHandler, onMouseDownHandler, onTouchStart, value: value_0 }, index_0) => /* @__PURE__ */ jsx(SliderHandle, {
+							sliderInstance,
+							isActive,
+							onKeyDownHandler,
+							onMouseDownHandler,
+							onTouchStart,
+							value: value_0
+						}, index_0))
+					]
+				}),
+				TrailingIcon && /* @__PURE__ */ jsx(TrailingIcon, {
+					className: "size-sm",
+					weight: "bold"
+				})
+			]
+		})]
+	});
+};
+export { Slider };

package/dist/switch.cjs

@@ -0,0 +1,71 @@
+const require_cn = require("./cn.cjs");
+const require_label = require("./label.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __base_ui_react_switch = require("@base-ui/react/switch");
+const Switch = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(18);
+	let className;
+	let label;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({label, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		className = $[1];
+		label = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = require_cn.cn("relative group transition-colors flex items-center h-[26px] w-[50px] rounded-full bg-surface-dim bg-size-[6.5rem_100%] inset-shadow-1-shadow p-0.5 ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full data-checked:bg-accent data-checked:active:bg-gray-500 outline-2 outline-transparent not-disabled:hover:outline-accent hover:cursor-pointer disabled:opacity-50 disabled:pointer-events-none", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_switch.Switch.Thumb, { className: "size-[14px] data-checked:size-[18px] rounded-full bg-accent transition-transform duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] translate-x-[6px] shadow-xs data-checked:translate-x-[26px] data-checked:scale-[1.1] data-unchecked:bg-accent data-checked:bg-on-accent" });
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== ref || $[10] !== t1) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_switch.Switch.Root, {
+			className: t1,
+			ref,
+			...props,
+			children: t2
+		});
+		$[8] = props;
+		$[9] = ref;
+		$[10] = t1;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== label || $[13] !== props) {
+		t4 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+			htmlFor: props.id,
+			children: label
+		});
+		$[12] = label;
+		$[13] = props;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-xs",
+			children: [t3, t4]
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+};
+exports.Switch = Switch;

package/dist/switch.js

@@ -0,0 +1,71 @@
+import { cn } from "./cn.js";
+import { Label } from "./label.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+const Switch$1 = (t0) => {
+	const $ = c(18);
+	let className;
+	let label;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({label, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		className = $[1];
+		label = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = cn("relative group transition-colors flex items-center h-[26px] w-[50px] rounded-full bg-surface-dim bg-size-[6.5rem_100%] inset-shadow-1-shadow p-0.5 ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full data-checked:bg-accent data-checked:active:bg-gray-500 outline-2 outline-transparent not-disabled:hover:outline-accent hover:cursor-pointer disabled:opacity-50 disabled:pointer-events-none", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Switch.Thumb, { className: "size-[14px] data-checked:size-[18px] rounded-full bg-accent transition-transform duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] translate-x-[6px] shadow-xs data-checked:translate-x-[26px] data-checked:scale-[1.1] data-unchecked:bg-accent data-checked:bg-on-accent" });
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== ref || $[10] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Switch.Root, {
+			className: t1,
+			ref,
+			...props,
+			children: t2
+		});
+		$[8] = props;
+		$[9] = ref;
+		$[10] = t1;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== label || $[13] !== props) {
+		t4 = label && /* @__PURE__ */ jsx(Label, {
+			htmlFor: props.id,
+			children: label
+		});
+		$[12] = label;
+		$[13] = props;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-xs",
+			children: [t3, t4]
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+};
+export { Switch$1 as Switch };