strata-ui-react 0.1.11 → 0.1.12

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 };

package/dist/tabs-indicator.cjs

@@ -0,0 +1,57 @@
+const require_cn = require("./cn.cjs");
+const require_tabs_types = require("./tabs.types.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __base_ui_react_tabs = require("@base-ui/react/tabs");
+const TabsIndicator = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	if ((0, react.useContext)(require_tabs_types.TabsOrientationContext) === "horizontal") {
+		let t1$1;
+		if ($[3] !== className) {
+			t1$1 = require_cn.cn("absolute left-1/2 h-11 md:h-12 top-0 z-[-1] w-(--active-tab-width) translate-y-(--active-tab-top) -translate-x-1/2 rounded-2xl md:rounded-full bg-surface-brand-primary-default transition-all duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]", className);
+			$[3] = className;
+			$[4] = t1$1;
+		} else t1$1 = $[4];
+		let t2$1;
+		if ($[5] !== props || $[6] !== t1$1) {
+			t2$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_tabs.Tabs.Indicator, {
+				className: t1$1,
+				...props
+			});
+			$[5] = props;
+			$[6] = t1$1;
+			$[7] = t2$1;
+		} else t2$1 = $[7];
+		return t2$1;
+	}
+	let t1;
+	if ($[8] !== className) {
+		t1 = require_cn.cn("absolute top-1/2 h-11 md:h-12 left-0 z-[-1] w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-1/2 rounded-full bg-surface-brand-primary-default transition-all duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]", className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== props || $[11] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_tabs.Tabs.Indicator, {
+			className: t1,
+			...props
+		});
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+};
+exports.TabsIndicator = TabsIndicator;

package/dist/tabs-indicator.js

@@ -0,0 +1,57 @@
+import { cn } from "./cn.js";
+import { TabsOrientationContext } from "./tabs.types.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+const TabsIndicator = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	if (useContext(TabsOrientationContext) === "horizontal") {
+		let t1$1;
+		if ($[3] !== className) {
+			t1$1 = cn("absolute left-1/2 h-11 md:h-12 top-0 z-[-1] w-(--active-tab-width) translate-y-(--active-tab-top) -translate-x-1/2 rounded-2xl md:rounded-full bg-surface-brand-primary-default transition-all duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]", className);
+			$[3] = className;
+			$[4] = t1$1;
+		} else t1$1 = $[4];
+		let t2$1;
+		if ($[5] !== props || $[6] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx(Tabs.Indicator, {
+				className: t1$1,
+				...props
+			});
+			$[5] = props;
+			$[6] = t1$1;
+			$[7] = t2$1;
+		} else t2$1 = $[7];
+		return t2$1;
+	}
+	let t1;
+	if ($[8] !== className) {
+		t1 = cn("absolute top-1/2 h-11 md:h-12 left-0 z-[-1] w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-1/2 rounded-full bg-surface-brand-primary-default transition-all duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]", className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== props || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tabs.Indicator, {
+			className: t1,
+			...props
+		});
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+};
+export { TabsIndicator };

package/dist/tabs-list.cjs

@@ -0,0 +1,57 @@
+const require_cn = require("./cn.cjs");
+const require_tabs_types = require("./tabs.types.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __base_ui_react_tabs = require("@base-ui/react/tabs");
+const TabsList = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	if ((0, react.useContext)(require_tabs_types.TabsOrientationContext) === "horizontal") {
+		let t1$1;
+		if ($[3] !== className) {
+			t1$1 = require_cn.cn("relative z-0 flex flex-col h-fit grow gap-2 p-2 bg-surface-neutral-primary-default rounded-3xl", className);
+			$[3] = className;
+			$[4] = t1$1;
+		} else t1$1 = $[4];
+		let t2$1;
+		if ($[5] !== props || $[6] !== t1$1) {
+			t2$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_tabs.Tabs.List, {
+				className: t1$1,
+				...props
+			});
+			$[5] = props;
+			$[6] = t1$1;
+			$[7] = t2$1;
+		} else t2$1 = $[7];
+		return t2$1;
+	}
+	let t1;
+	if ($[8] !== className) {
+		t1 = require_cn.cn("relative z-0 flex gap-1 p-2 bg-surface-neutral-primary-default rounded-full", className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== props || $[11] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_tabs.Tabs.List, {
+			className: t1,
+			...props
+		});
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+};
+exports.TabsList = TabsList;

package/dist/tabs-list.js

@@ -0,0 +1,57 @@
+import { cn } from "./cn.js";
+import { TabsOrientationContext } from "./tabs.types.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+const TabsList = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	if (useContext(TabsOrientationContext) === "horizontal") {
+		let t1$1;
+		if ($[3] !== className) {
+			t1$1 = cn("relative z-0 flex flex-col h-fit grow gap-2 p-2 bg-surface-neutral-primary-default rounded-3xl", className);
+			$[3] = className;
+			$[4] = t1$1;
+		} else t1$1 = $[4];
+		let t2$1;
+		if ($[5] !== props || $[6] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx(Tabs.List, {
+				className: t1$1,
+				...props
+			});
+			$[5] = props;
+			$[6] = t1$1;
+			$[7] = t2$1;
+		} else t2$1 = $[7];
+		return t2$1;
+	}
+	let t1;
+	if ($[8] !== className) {
+		t1 = cn("relative z-0 flex gap-1 p-2 bg-surface-neutral-primary-default rounded-full", className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== props || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tabs.List, {
+			className: t1,
+			...props
+		});
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+};
+export { TabsList };

package/dist/tabs-panel.cjs

@@ -0,0 +1,40 @@
+const require_cn = require("./cn.cjs");
+const require_tabs_types = require("./tabs.types.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __base_ui_react_tabs = require("@base-ui/react/tabs");
+const TabsPanel = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const t1 = (0, react.useContext)(require_tabs_types.TabsOrientationContext) === "horizontal" ? "flex-1 min-h-0 h-full" : "grow";
+	let t2;
+	if ($[3] !== className || $[4] !== t1) {
+		t2 = require_cn.cn("relative rounded-xl bg-surface-neutral-primary-default", t1, "flex items-center justify-center p-4 overflow-auto", className);
+		$[3] = className;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_tabs.Tabs.Panel, {
+			className: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+exports.TabsPanel = TabsPanel;

package/dist/tabs-panel.js

@@ -0,0 +1,40 @@
+import { cn } from "./cn.js";
+import { TabsOrientationContext } from "./tabs.types.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+const TabsPanel = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const t1 = useContext(TabsOrientationContext) === "horizontal" ? "flex-1 min-h-0 h-full" : "grow";
+	let t2;
+	if ($[3] !== className || $[4] !== t1) {
+		t2 = cn("relative rounded-xl bg-surface-neutral-primary-default", t1, "flex items-center justify-center p-4 overflow-auto", className);
+		$[3] = className;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tabs.Panel, {
+			className: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+export { TabsPanel };

package/dist/tabs-tab.cjs

@@ -0,0 +1,36 @@
+const require_cn = require("./cn.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __base_ui_react_tabs = require("@base-ui/react/tabs");
+const TabsTab = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = require_cn.cn("inline-flex rounded-2xl md:rounded-full h-11 md:h-12 px-6 body-base-semibold w-full text-text-brand-primary-default text-center items-center justify-center border-0 break-keep whitespace-nowrap outline-none select-none focus-visible:relative focus-visible:before:absolute focus-visible:before:outline data-selected:text-text-inverse-primary-default transition-colors duration-300 hover:cursor-pointer aria-[selected=false]:hover:bg-surface-neutral-primary-hover", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_tabs.Tabs.Tab, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+exports.TabsTab = TabsTab;