tintora 0.25.0 → 0.27.0

package/dist/index.js

@@ -110,8 +110,85 @@ function g({ name: t, src: n, size: r = "medium", className: i, ...a }) {
 	});
 }
 //#endregion
+//#region src/utils/outside.ts
+function _(e, t) {
+	if (e.target !== e.currentTarget) return;
+	let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
+	(e.clientX < n || e.clientX > r || e.clientY < i || e.clientY > a) && t();
+}
+//#endregion
+//#region src/Drawer/Drawer.tsx
+var v = (e) => typeof e == "number" ? `${e}px` : e;
+function y({ open: t, from: n = "right", width: r, height: i, children: o, onClose: s, className: l, ...u }) {
+	let f = c(null);
+	a(() => {
+		let e = f.current;
+		e && (t && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !t && e.open && e.close());
+	}, [t]);
+	let p = {
+		...u.style,
+		...r !== void 0 && { "--tintora-drawer-width": v(r) },
+		...i !== void 0 && { "--tintora-drawer-height": v(i) }
+	};
+	return /* @__PURE__ */ e("dialog", {
+		...u,
+		ref: f,
+		className: d("tintora-drawer", `tintora-drawer--from-${n}`, l),
+		onCancel: (e) => {
+			e.preventDefault(), s();
+		},
+		onClick: (e) => _(e, s),
+		style: p,
+		children: o
+	});
+}
+//#endregion
+//#region src/BottomSheet/BottomSheet.tsx
+function b({ title: n, children: r, className: i, ...a }) {
+	let s = o();
+	return /* @__PURE__ */ t(y, {
+		...a,
+		from: "bottom",
+		"aria-labelledby": s,
+		className: d("tintora-bottom-sheet", i),
+		children: [
+			/* @__PURE__ */ e("span", {
+				className: "tintora-bottom-sheet__grabber",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ e("div", {
+				id: s,
+				className: "tintora-bottom-sheet__title",
+				children: n
+			}),
+			r
+		]
+	});
+}
+function x({ selected: n = !1, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ t("button", {
+		type: "button",
+		...a,
+		"aria-pressed": n,
+		className: d("tintora-bottom-sheet__option", r),
+		children: [/* @__PURE__ */ e("span", { children: i }), /* @__PURE__ */ e("svg", {
+			className: "tintora-bottom-sheet__check",
+			width: "18",
+			height: "18",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ e("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+		})]
+	});
+}
+//#endregion
 //#region src/Spinner/Spinner.tsx
-var _ = {
+var S = {
 	small: {
 		width: 16,
 		height: 16,
@@ -128,8 +205,8 @@ var _ = {
 		strokeWidth: 2.4
 	}
 };
-function v({ size: n = "medium", color: r = "accent" }) {
-	let { width: i, height: a, strokeWidth: o } = _[n];
+function C({ size: n = "medium", color: r = "accent" }) {
+	let { width: i, height: a, strokeWidth: o } = S[n];
 	return /* @__PURE__ */ t("svg", {
 		className: "tintora-spinner",
 		width: i,
@@ -155,7 +232,7 @@ function v({ size: n = "medium", color: r = "accent" }) {
 }
 //#endregion
 //#region src/Button/Button.tsx
-function y({ children: n, className: r, variant: i, size: a = "medium", leadingIcon: o, trailingIcon: s, type: c = "button", loading: l = !1, disabled: u, ...f }) {
+function w({ children: n, className: r, variant: i, size: a = "medium", leadingIcon: o, trailingIcon: s, type: c = "button", loading: l = !1, disabled: u, ...f }) {
 	return /* @__PURE__ */ t("button", {
 		type: c,
 		className: d("tintora-button", `tintora-button--${i}`, `tintora-button--${a}`, {
@@ -170,7 +247,7 @@ function y({ children: n, className: r, variant: i, size: a = "medium", leadingI
 			l && /* @__PURE__ */ e("span", {
 				className: "tintora-button__icon",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ e(v, {
+				children: /* @__PURE__ */ e(C, {
 					size: "small",
 					color: "current"
 				})
@@ -191,13 +268,13 @@ function y({ children: n, className: r, variant: i, size: a = "medium", leadingI
 }
 //#endregion
 //#region src/Card/Card.tsx
-function b({ as: t = "article", variant: n = "surface", className: r, ...i }) {
+function T({ as: t = "article", variant: n = "surface", className: r, ...i }) {
 	return /* @__PURE__ */ e(t, {
 		...i,
 		className: d("tintora-card", `tintora-card--${n}`, r)
 	});
 }
-function x({ selected: t = !1, className: n, ...r }) {
+function E({ selected: t = !1, className: n, ...r }) {
 	return /* @__PURE__ */ e("button", {
 		...r,
 		type: "button",
@@ -207,7 +284,7 @@ function x({ selected: t = !1, className: n, ...r }) {
 }
 //#endregion
 //#region src/hooks/useCheckedState.ts
-function S({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
+function D({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
 	let [r, i] = l(t), a = e !== void 0;
 	return {
 		checked: a ? e : r,
@@ -218,8 +295,8 @@ function S({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
 }
 //#endregion
 //#region src/Checkbox/Checkbox.tsx
-function C({ checked: n, defaultChecked: r, onCheckedChange: i, indeterminate: a = !1, className: o, ...l }) {
-	let u = c(null), f = S({
+function O({ checked: n, defaultChecked: r, onCheckedChange: i, indeterminate: a = !1, className: o, ...l }) {
+	let u = c(null), f = D({
 		checked: n,
 		defaultChecked: r,
 		onCheckedChange: i
@@ -263,7 +340,7 @@ function C({ checked: n, defaultChecked: r, onCheckedChange: i, indeterminate: a
 }
 //#endregion
 //#region src/Chip/Chip.tsx
-function w({ children: t, selected: n, className: r, "aria-pressed": i, ...a }) {
+function k({ children: t, selected: n, className: r, "aria-pressed": i, ...a }) {
 	return /* @__PURE__ */ e("button", {
 		...a,
 		type: "button",
@@ -274,7 +351,7 @@ function w({ children: t, selected: n, className: r, "aria-pressed": i, ...a })
 }
 //#endregion
 //#region src/Dot/Dot.tsx
-function T({ variant: t = "unread", label: n, className: r, ...i }) {
+function A({ variant: t = "unread", label: n, className: r, ...i }) {
 	return /* @__PURE__ */ e("span", {
 		...i,
 		className: d("tintora-dot", `tintora-dot--${t}`, r),
@@ -284,50 +361,17 @@ function T({ variant: t = "unread", label: n, className: r, ...i }) {
 	});
 }
 //#endregion
-//#region src/utils/outside.ts
-function E(e, t) {
-	if (e.target !== e.currentTarget) return;
-	let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-	(e.clientX < n || e.clientX > r || e.clientY < i || e.clientY > a) && t();
-}
-//#endregion
-//#region src/Drawer/Drawer.tsx
-var D = (e) => typeof e == "number" ? `${e}px` : e;
-function O({ open: t, from: n = "right", width: r, height: i, children: o, onClose: s, className: l, ...u }) {
-	let f = c(null);
-	a(() => {
-		let e = f.current;
-		e && (t && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !t && e.open && e.close());
-	}, [t]);
-	let p = {
-		...u.style,
-		...r !== void 0 && { "--tintora-drawer-width": D(r) },
-		...i !== void 0 && { "--tintora-drawer-height": D(i) }
-	};
-	return /* @__PURE__ */ e("dialog", {
-		...u,
-		ref: f,
-		className: d("tintora-drawer", `tintora-drawer--from-${n}`, l),
-		onCancel: (e) => {
-			e.preventDefault(), s();
-		},
-		onClick: (e) => E(e, s),
-		style: p,
-		children: o
-	});
-}
-//#endregion
 //#region src/IconButton/IconButton.tsx
-var k = {
+var j = {
 	round: "secondary",
 	field: "secondary",
 	nav: "ghost"
 };
-function A({ icon: t, variant: n = "round", size: r, selected: i, className: a, ...o }) {
+function M({ icon: t, variant: n = "round", size: r, selected: i, className: a, ...o }) {
 	let s = n === "round" ? r ?? "large" : void 0;
-	return /* @__PURE__ */ e(y, {
+	return /* @__PURE__ */ e(w, {
 		...o,
-		variant: k[n],
+		variant: j[n],
 		"aria-current": i ? "page" : void 0,
 		className: d("tintora-icon-button", `tintora-icon-button--${n}`, s && `tintora-icon-button--${s}`, a),
 		...s && { size: s },
@@ -340,7 +384,7 @@ function A({ icon: t, variant: n = "round", size: r, selected: i, className: a,
 }
 //#endregion
 //#region src/Modal/Modal.tsx
-var j = () => /* @__PURE__ */ e("svg", {
+var N = () => /* @__PURE__ */ e("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 24 24",
@@ -350,23 +394,23 @@ var j = () => /* @__PURE__ */ e("svg", {
 	strokeLinecap: "round",
 	children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
 });
-function M({ open: n, onClose: r, title: i, description: s, icon: l, status: u = "info", actions: f, size: p = "md", align: m = "start", role: h = "dialog", closeButton: g = !0, className: _, children: v, ...y }) {
-	let b = c(null), x = o(), S = o();
+function P({ open: n, onClose: r, title: i, description: s, icon: l, status: u = "info", actions: f, size: p = "md", align: m = "start", role: h = "dialog", closeButton: g = !0, className: v, children: y, ...b }) {
+	let x = c(null), S = o(), C = o();
 	return a(() => {
-		let e = b.current;
+		let e = x.current;
 		e && (n && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !n && e.open && e.close());
 	}, [n]), /* @__PURE__ */ t("dialog", {
-		...y,
-		ref: b,
+		...b,
+		ref: x,
 		role: h,
-		"aria-labelledby": x,
-		"aria-describedby": s ? S : void 0,
-		className: d("tintora-modal", `tintora-modal--${p}`, m === "center" && "tintora-modal--center", _),
+		"aria-labelledby": S,
+		"aria-describedby": s ? C : void 0,
+		className: d("tintora-modal", `tintora-modal--${p}`, m === "center" && "tintora-modal--center", v),
 		onCancel: (e) => {
 			e.preventDefault(), r();
 		},
 		onClick: (e) => {
-			h === "dialog" && E(e, r);
+			h === "dialog" && _(e, r);
 		},
 		children: [
 			l && /* @__PURE__ */ e("span", {
@@ -377,23 +421,23 @@ function M({ open: n, onClose: r, title: i, description: s, icon: l, status: u =
 			/* @__PURE__ */ t("div", {
 				className: "tintora-modal__text",
 				children: [/* @__PURE__ */ e("h2", {
-					id: x,
+					id: S,
 					className: "tintora-modal__title",
 					children: i
 				}), s && /* @__PURE__ */ e("p", {
-					id: S,
+					id: C,
 					className: "tintora-modal__description",
 					children: s
 				})]
 			}),
-			g && /* @__PURE__ */ e(A, {
+			g && /* @__PURE__ */ e(M, {
 				className: "tintora-modal__close",
 				size: "medium",
 				"aria-label": "Close",
-				icon: /* @__PURE__ */ e(j, {}),
+				icon: /* @__PURE__ */ e(N, {}),
 				onClick: r
 			}),
-			v,
+			y,
 			f && /* @__PURE__ */ e("div", {
 				className: "tintora-modal__actions",
 				children: f
@@ -403,7 +447,7 @@ function M({ open: n, onClose: r, title: i, description: s, icon: l, status: u =
 }
 //#endregion
 //#region src/hooks/useLatest.ts
-function N(e) {
+function F(e) {
 	let t = c(e);
 	return a(() => {
 		t.current = e;
@@ -411,8 +455,8 @@ function N(e) {
 }
 //#endregion
 //#region src/hooks/useEscapeKey.ts
-function P(e, t) {
-	let n = N(t);
+function I(e, t) {
+	let n = F(t);
 	a(() => {
 		if (!e) return;
 		let t = (e) => {
@@ -423,8 +467,8 @@ function P(e, t) {
 }
 //#endregion
 //#region src/hooks/useOutsidePress.ts
-function F(e, t, n) {
-	let r = N(n);
+function L(e, t, n) {
+	let r = F(n);
 	a(() => {
 		if (!e) return;
 		let n = (e) => {
@@ -439,7 +483,7 @@ function F(e, t, n) {
 }
 //#endregion
 //#region src/hooks/useTopLayerPosition.ts
-function I(e, t, n, r) {
+function R(e, t, n, r) {
 	let [i, a] = l(null);
 	return s(() => {
 		let r = t.current;
@@ -462,17 +506,17 @@ function I(e, t, n, r) {
 }
 //#endregion
 //#region src/utils/placement.ts
-var L = {
+var z = {
 	gap: 10,
 	margin: 8,
 	arrowInset: 12
-}, R = {
+}, B = {
 	top: "bottom",
 	bottom: "top",
 	left: "right",
 	right: "left"
-}, z = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
-function B(e, t, n, r, { gap: i, margin: a }) {
+}, V = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
+function H(e, t, n, r, { gap: i, margin: a }) {
 	let o = (t) => {
 		switch (t) {
 			case "top": return e.top;
@@ -481,16 +525,16 @@ function B(e, t, n, r, { gap: i, margin: a }) {
 			case "right": return r.width - e.right;
 		}
 	}, s = (n === "top" || n === "bottom" ? t.height : t.width) + i + a, c = o(n);
-	return c >= s || o(R[n]) <= c ? n : R[n];
+	return c >= s || o(B[n]) <= c ? n : B[n];
 }
-function V(e, t, n, r = {
+function U(e, t, n, r = {
 	width: window.innerWidth,
 	height: window.innerHeight
 }, i = {}) {
 	let a = {
-		...L,
+		...z,
 		...i
-	}, { gap: o, margin: s, arrowInset: c } = a, l = B(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
+	}, { gap: o, margin: s, arrowInset: c } = a, l = H(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
 	switch (l) {
 		case "top":
 			d = e.y - t.height - o, f = e.x + e.width / 2 - t.width / 2;
@@ -503,18 +547,18 @@ function V(e, t, n, r = {
 			break;
 		case "right": d = e.y + e.height / 2 - t.height / 2, f = e.x + e.width + o;
 	}
-	u ? f = z(f, s, r.width - t.width - s) : d = z(d, s, r.height - t.height - s);
+	u ? f = V(f, s, r.width - t.width - s) : d = V(d, s, r.height - t.height - s);
 	let p = u ? e.x + e.width / 2 - f : e.y + e.height / 2 - d, m = u ? t.width : t.height;
 	return {
 		top: d,
 		left: f,
 		placement: l,
-		arrowOffset: z(p, c, m - c)
+		arrowOffset: V(p, c, m - c)
 	};
 }
 //#endregion
 //#region src/Popover/Popover.tsx
-var H = [
+var W = [
 	"button:not([disabled])",
 	"[href]",
 	"input:not([disabled])",
@@ -522,14 +566,14 @@ var H = [
 	"textarea:not([disabled])",
 	"[tabindex]:not([tabindex=\"-1\"])"
 ].join(", ");
-function U({ open: r, onOpenChange: i, trigger: l, title: u, children: f, role: p = "dialog", size: m = "md", placement: h = "bottom", className: g }) {
+function G({ open: r, onOpenChange: i, trigger: l, title: u, children: f, role: p = "dialog", size: m = "md", placement: h = "bottom", className: g }) {
 	let _ = o(), v = c(null), y = c(null), b = c(!1), x = () => i(!1);
-	P(r, x), F(r, v, x);
+	I(r, x), L(r, v, x);
 	let S = (e) => {
 		l.props.onClick?.(e), e.defaultPrevented || i(!r);
-	}, C = I(r, y, () => {
+	}, C = R(r, y, () => {
 		let e = y.current, t = v.current?.firstElementChild;
-		return !e || !t ? null : V(t.getBoundingClientRect(), {
+		return !e || !t ? null : U(t.getBoundingClientRect(), {
 			width: e.offsetWidth,
 			height: e.offsetHeight
 		}, h, void 0, { gap: 12 });
@@ -544,7 +588,7 @@ function U({ open: r, onOpenChange: i, trigger: l, title: u, children: f, role:
 	} : { visibility: "hidden" }, T = C !== null;
 	return s(() => {
 		let e = y.current;
-		r && T && e && (e.querySelector("[data-autofocus]") ?? e.querySelector(H) ?? e).focus();
+		r && T && e && (e.querySelector("[data-autofocus]") ?? e.querySelector(W) ?? e).focus();
 	}, [r, T]), a(() => {
 		if (b.current && !r) {
 			let e = document.activeElement;
@@ -574,7 +618,7 @@ function U({ open: r, onOpenChange: i, trigger: l, title: u, children: f, role:
 }
 //#endregion
 //#region src/ProgressBar/ProgressBar.tsx
-function W({ title: n, progress: r, indeterminate: i, valueLabel: a, className: s, "aria-label": c }) {
+function K({ title: n, progress: r, indeterminate: i, valueLabel: a, className: s, "aria-label": c }) {
 	let l = o(), u = i ? void 0 : Math.min(100, Math.max(0, Number.isFinite(r) ? r : 0)), f = u === 100, p = a ?? (i ? "Indeterminate" : `${u}%`);
 	return /* @__PURE__ */ t("div", {
 		className: d("tintora-progress-bar", s),
@@ -608,16 +652,16 @@ function W({ title: n, progress: r, indeterminate: i, valueLabel: a, className:
 }
 //#endregion
 //#region src/Radio/RadioContext.ts
-var G = r(null);
-function K() {
-	let e = i(G);
+var q = r(null);
+function J() {
+	let e = i(q);
 	if (!e) throw Error("Radio must be rendered inside a RadioGroup");
 	return e;
 }
 //#endregion
 //#region src/Radio/Radio.tsx
-function q({ value: n, className: r, disabled: i, ...a }) {
-	let o = K();
+function Y({ value: n, className: r, disabled: i, ...a }) {
+	let o = J();
 	return /* @__PURE__ */ t("span", {
 		className: d("tintora-radio", r),
 		children: [/* @__PURE__ */ e("input", {
@@ -637,9 +681,9 @@ function q({ value: n, className: r, disabled: i, ...a }) {
 }
 //#endregion
 //#region src/Radio/RadioGroup.tsx
-function J({ value: t, defaultValue: n, onValueChange: r, disabled: i = !1, name: a, className: s, ...c }) {
+function ee({ value: t, defaultValue: n, onValueChange: r, disabled: i = !1, name: a, className: s, ...c }) {
 	let u = o(), [f, p] = l(n ?? null), m = t !== void 0, h = m ? t : f;
-	return /* @__PURE__ */ e(G.Provider, {
+	return /* @__PURE__ */ e(q.Provider, {
 		value: {
 			name: a ?? u,
 			value: h,
@@ -657,7 +701,7 @@ function J({ value: t, defaultValue: n, onValueChange: r, disabled: i = !1, name
 }
 //#endregion
 //#region src/SearchInput/SearchInput.tsx
-function Y({ className: n, disabled: r, ...i }) {
+function te({ className: n, disabled: r, ...i }) {
 	return /* @__PURE__ */ t("label", {
 		className: d("tintora-search-input", r && "tintora-search-input--disabled", n),
 		children: [/* @__PURE__ */ t("svg", {
@@ -683,15 +727,15 @@ function Y({ className: n, disabled: r, ...i }) {
 }
 //#endregion
 //#region src/Select/SelectContext.ts
-var X = r(null), Z = () => {
+var X = r(null), ne = () => {
 	let e = i(X);
 	if (!e) throw Error("SelectOption must be rendered inside a Select");
 	return e;
 };
 //#endregion
 //#region src/Select/SelectOption.tsx
-function ee({ label: t, value: n, disabled: r }) {
-	let { select: i, activate: a, optionId: o, value: s, activeValue: c } = Z();
+function re({ label: t, value: n, disabled: r }) {
+	let { select: i, activate: a, optionId: o, value: s, activeValue: c } = ne();
 	return /* @__PURE__ */ e("div", {
 		id: o(n),
 		role: "option",
@@ -705,13 +749,13 @@ function ee({ label: t, value: n, disabled: r }) {
 }
 //#endregion
 //#region src/Select/Select.tsx
-var Q = 4;
-function te({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u, onValueChange: f, name: p, className: m, onClick: h, onKeyDown: g, onKeyUp: _, "aria-label": v, ...y }) {
-	let b = o(), x = c(null), S = c(null), C = c(null), [w, T] = l(n ?? null), [E, D] = l(!1), [O, k] = l(-1), A = s !== void 0, j = A ? s : w, M = r.findIndex((e) => e.value === j), N = (e) => r[e]?.disabled !== !0, P = () => r.findIndex((e, t) => N(t)), L = (e, t) => {
+var Z = 4;
+function ie({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u, onValueChange: f, name: p, className: m, onClick: h, onKeyDown: g, onKeyUp: _, "aria-label": v, ...y }) {
+	let b = o(), x = c(null), S = c(null), C = c(null), [w, T] = l(n ?? null), [E, D] = l(!1), [O, k] = l(-1), A = s !== void 0, j = A ? s : w, M = r.findIndex((e) => e.value === j), N = (e) => r[e]?.disabled !== !0, P = () => r.findIndex((e, t) => N(t)), F = (e, t) => {
 		for (let n = e + t; n >= 0 && n < r.length; n += t) if (N(n)) return n;
 		return e;
-	}, R = () => {
-		let e = L(r.length, -1);
+	}, I = () => {
+		let e = F(r.length, -1);
 		return e === r.length ? -1 : e;
 	}, z = (e) => r.findIndex((t) => t.value === e), B = () => {
 		k(M >= 0 && N(M) ? M : P()), D(!0);
@@ -732,27 +776,27 @@ function te({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u
 			return;
 		}
 		let n = {
-			ArrowDown: () => O < 0 ? P() : L(O, 1),
-			ArrowUp: () => O < 0 ? P() : L(O, -1),
+			ArrowDown: () => O < 0 ? P() : F(O, 1),
+			ArrowUp: () => O < 0 ? P() : F(O, -1),
 			Home: P,
-			End: R
+			End: I
 		};
 		t in n ? (e.preventDefault(), k(n[t]())) : t === "Enter" || t === " " ? (e.preventDefault(), O >= 0 ? H(r[O].value) : V()) : t === "Escape" && (e.preventDefault(), V());
 	}, W = (e) => {
 		_?.(e), e.key === " " && e.preventDefault();
-	}, G = I(E, C, () => {
+	}, G = R(E, C, () => {
 		let e = C.current, t = S.current;
 		if (!e || !t) return null;
-		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + Q + r <= window.innerHeight, a = n.top - Q - r >= 0;
+		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + Z + r <= window.innerHeight, a = n.top - Z - r >= 0;
 		return {
-			top: i || !a ? n.bottom + Q : n.top - Q - r,
+			top: i || !a ? n.bottom + Z : n.top - Z - r,
 			left: n.left,
 			minWidth: n.width
 		};
 	}, []), K = (e) => {
 		h?.(e), !e.defaultPrevented && (E ? V() : B());
 	};
-	F(E, x, V), a(() => {
+	L(E, x, V), a(() => {
 		E && O >= 0 && C.current?.children.item(O)?.scrollIntoView?.({ block: "nearest" });
 	}, [E, O]);
 	let q = (e) => `${b}-option-${z(e)}`, J = E ? r[O]?.value ?? null : null, Y = r[M]?.label;
@@ -809,7 +853,7 @@ function te({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u
 					className: "tintora-select__menu",
 					style: G ?? {},
 					onMouseDown: (e) => e.preventDefault(),
-					children: r.map((t) => /* @__PURE__ */ e(ee, { ...t }, t.value))
+					children: r.map((t) => /* @__PURE__ */ e(re, { ...t }, t.value))
 				}),
 				p && /* @__PURE__ */ e("input", {
 					type: "hidden",
@@ -822,8 +866,26 @@ function te({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u
 	});
 }
 //#endregion
+//#region src/SettingsRow/SettingsRow.tsx
+function ae({ title: n, description: r, children: i, controlPosition: a = "end", className: o, ...s }) {
+	return /* @__PURE__ */ t("div", {
+		...s,
+		className: d("tintora-settings-row", `tintora-settings-row--control-${a}`, r && "tintora-settings-row--described", o),
+		children: [/* @__PURE__ */ t("div", {
+			className: "tintora-settings-row__text",
+			children: [/* @__PURE__ */ e("div", {
+				className: "tintora-settings-row__title",
+				children: n
+			}), r && /* @__PURE__ */ e("div", {
+				className: "tintora-settings-row__description",
+				children: r
+			})]
+		}), i]
+	});
+}
+//#endregion
 //#region src/Skeleton/Skeleton.tsx
-function ne({ width: t, height: n, className: r, style: i, ...a }) {
+function oe({ width: t, height: n, className: r, style: i, ...a }) {
 	let o = {
 		...t !== void 0 && { width: t },
 		...n !== void 0 && { height: n }
@@ -840,8 +902,8 @@ function ne({ width: t, height: n, className: r, style: i, ...a }) {
 }
 //#endregion
 //#region src/Switch/Switch.tsx
-function re({ checked: n, defaultChecked: r, onCheckedChange: i, className: a, ...o }) {
-	let s = S({
+function se({ checked: n, defaultChecked: r, onCheckedChange: i, className: a, ...o }) {
+	let s = D({
 		checked: n,
 		defaultChecked: r,
 		onCheckedChange: i
@@ -862,8 +924,66 @@ function re({ checked: n, defaultChecked: r, onCheckedChange: i, className: a, .
 	});
 }
 //#endregion
+//#region src/Tabs/TabsContext.ts
+var Q = r(null);
+function ce() {
+	let e = i(Q);
+	if (!e) throw Error("Tab must be rendered inside Tabs");
+	return e;
+}
+//#endregion
+//#region src/Tabs/Tab.tsx
+function le({ value: t, className: n, onClick: r, children: i, ...a }) {
+	let o = ce(), s = o.value === t, c = (e) => {
+		r?.(e), e.defaultPrevented || o.select(t);
+	};
+	return /* @__PURE__ */ e("button", {
+		...a,
+		type: "button",
+		role: "tab",
+		"aria-selected": s,
+		tabIndex: s ? 0 : -1,
+		className: d("tintora-tab", n),
+		onClick: c,
+		children: i
+	});
+}
+//#endregion
+//#region src/Tabs/Tabs.tsx
+var ue = [
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+];
+function de({ value: t, defaultValue: n, onValueChange: r, variant: i = "segmented", className: a, children: o, onKeyDown: s, ...c }) {
+	let [u, f] = l(n), p = t !== void 0, m = p ? t : u, h = (e) => {
+		e !== m && (p || f(e), r?.(e));
+	}, g = (e) => {
+		if (s?.(e), e.defaultPrevented || !ue.includes(e.key)) return;
+		let t = Array.from(e.currentTarget.querySelectorAll("[role=\"tab\"]:not(:disabled)")), n = t.indexOf(e.target);
+		if (n < 0) return;
+		e.preventDefault();
+		let r = t.length - 1, i = e.key === "Home" ? 0 : e.key === "End" ? r : (n + (e.key === "ArrowRight" ? 1 : -1) + t.length) % t.length;
+		t[i].focus(), t[i].click();
+	};
+	return /* @__PURE__ */ e(Q.Provider, {
+		value: {
+			value: m,
+			select: h
+		},
+		children: /* @__PURE__ */ e("div", {
+			...c,
+			role: "tablist",
+			className: d("tintora-tabs", `tintora-tabs--${i}`, a),
+			onKeyDown: g,
+			children: o
+		})
+	});
+}
+//#endregion
 //#region src/Tag/Tag.tsx
-function ie({ children: t, className: n, variant: r = "neutral", size: i = "medium", ...a }) {
+function fe({ children: t, className: n, variant: r = "neutral", size: i = "medium", ...a }) {
 	return /* @__PURE__ */ e("span", {
 		...a,
 		className: d("tintora-tag", `tintora-tag--${r}`, `tintora-tag--${i}`, n),
@@ -872,7 +992,7 @@ function ie({ children: t, className: n, variant: r = "neutral", size: i = "medi
 }
 //#endregion
 //#region src/TextField/TextField.tsx
-function ae({ label: n, hint: r, error: i, id: a, className: s, disabled: c, "aria-describedby": l, "aria-invalid": u, ...f }) {
+function pe({ label: n, hint: r, error: i, id: a, className: s, disabled: c, "aria-describedby": l, "aria-invalid": u, ...f }) {
 	let p = o(), m = a ?? p, h = `${m}-message`, g = i ?? r;
 	return /* @__PURE__ */ t("div", {
 		className: d("tintora-textfield", c && "tintora-textfield--disabled", s),
@@ -900,7 +1020,7 @@ function ae({ label: n, hint: r, error: i, id: a, className: s, disabled: c, "ar
 }
 //#endregion
 //#region src/Toast/ToastIcons.tsx
-function oe() {
+function me() {
 	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
@@ -915,7 +1035,7 @@ function oe() {
 		children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" })
 	});
 }
-function se() {
+function he() {
 	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
@@ -930,7 +1050,7 @@ function se() {
 		children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
 	});
 }
-function ce() {
+function ge() {
 	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
@@ -945,7 +1065,7 @@ function ce() {
 		children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
 	});
 }
-function le() {
+function _e() {
 	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
@@ -960,7 +1080,7 @@ function le() {
 		children: /* @__PURE__ */ e("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" })
 	});
 }
-function ue() {
+function ve() {
 	return /* @__PURE__ */ e("svg", {
 		width: "14",
 		height: "14",
@@ -975,14 +1095,14 @@ function ue() {
 }
 //#endregion
 //#region src/Toast/Toast.tsx
-var de = {
-	success: /* @__PURE__ */ e(oe, {}),
-	error: /* @__PURE__ */ e(se, {}),
-	info: /* @__PURE__ */ e(ce, {}),
-	warning: /* @__PURE__ */ e(le, {})
+var ye = {
+	success: /* @__PURE__ */ e(me, {}),
+	error: /* @__PURE__ */ e(he, {}),
+	info: /* @__PURE__ */ e(ge, {}),
+	warning: /* @__PURE__ */ e(_e, {})
 };
-function fe({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3, timerBar: u = !1, className: f, ...p }) {
-	let [m, h] = l(!1), [g, _] = l(!1), v = m || g, y = N(o), b = c(s);
+function be({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3, timerBar: u = !1, className: f, ...p }) {
+	let [m, h] = l(!1), [g, _] = l(!1), v = m || g, y = F(o), b = c(s);
 	a(() => {
 		b.current = s;
 	}, [s]), a(() => {
@@ -1014,7 +1134,7 @@ function fe({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3
 			p.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || _(!1);
 		},
 		children: [
-			n && de[n],
+			n && ye[n],
 			/* @__PURE__ */ e("span", {
 				className: "tintora-toast__message",
 				children: r
@@ -1030,7 +1150,7 @@ function fe({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3
 				className: "tintora-toast__close",
 				"aria-label": "Dismiss",
 				onClick: o,
-				children: /* @__PURE__ */ e(ue, {})
+				children: /* @__PURE__ */ e(ve, {})
 			}),
 			x && /* @__PURE__ */ e("span", {
 				className: "tintora-toast__progress",
@@ -1042,14 +1162,14 @@ function fe({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3
 //#endregion
 //#region src/Toggle/ToggleContext.ts
 var $ = r(null);
-function pe() {
+function xe() {
 	let e = i($);
 	if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
 	return e;
 }
 //#endregion
 //#region src/Toggle/Toggle.tsx
-function me({ children: n, value: r, defaultValue: i, onValueChange: a, disabled: o = !1, className: u, ...f }) {
+function Se({ children: n, value: r, defaultValue: i, onValueChange: a, disabled: o = !1, className: u, ...f }) {
 	let [p, m] = l(i), h = r !== void 0, g = h ? r : p, _ = n.findIndex((e) => e.props.value === g), v = c(null), [y, b] = l({
 		x: 0,
 		width: 0
@@ -1099,8 +1219,8 @@ function me({ children: n, value: r, defaultValue: i, onValueChange: a, disabled
 }
 //#endregion
 //#region src/Toggle/ToggleItem.tsx
-function he({ value: t, children: n, className: r, disabled: i, onClick: a, ...o }) {
-	let s = pe(), c = (e) => {
+function Ce({ value: t, children: n, className: r, disabled: i, onClick: a, ...o }) {
+	let s = xe(), c = (e) => {
 		a?.(e), e.defaultPrevented || s.select(t);
 	};
 	return /* @__PURE__ */ e("button", {
@@ -1115,15 +1235,15 @@ function he({ value: t, children: n, className: r, disabled: i, onClick: a, ...o
 }
 //#endregion
 //#region src/Tooltip/Tooltip.tsx
-var ge = 100;
-function _e({ title: r, content: i, shortcut: s, children: u, className: f, placement: p = "top" }) {
+var we = 100;
+function Te({ title: r, content: i, shortcut: s, children: u, className: f, placement: p = "top" }) {
 	let m = o(), [h, g] = l(!1), _ = c(null), v = c(null), y = c(void 0), b = () => {
 		window.clearTimeout(y.current), g(!0);
 	}, x = () => {
-		window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), ge);
-	}, S = I(h, v, () => {
+		window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), we);
+	}, S = R(h, v, () => {
 		let e = v.current, t = _.current?.firstElementChild;
-		return !e || !t ? null : V(t.getBoundingClientRect(), {
+		return !e || !t ? null : U(t.getBoundingClientRect(), {
 			width: e.offsetWidth,
 			height: e.offsetHeight
 		}, p);
@@ -1133,7 +1253,7 @@ function _e({ title: r, content: i, shortcut: s, children: u, className: f, plac
 		i,
 		s
 	]);
-	P(h, () => g(!1)), a(() => () => window.clearTimeout(y.current), []);
+	I(h, () => g(!1)), a(() => () => window.clearTimeout(y.current), []);
 	let C = S ? {
 		top: S.top,
 		left: S.left,
@@ -1171,4 +1291,4 @@ function _e({ title: r, content: i, shortcut: s, children: u, className: f, plac
 	});
 }
 //#endregion
-export { m as Alert, g as Avatar, y as Button, b as Card, C as Checkbox, w as Chip, T as Dot, O as Drawer, A as IconButton, M as Modal, U as Popover, W as ProgressBar, q as Radio, J as RadioGroup, Y as SearchInput, te as Select, x as SelectableCard, ne as Skeleton, v as Spinner, re as Switch, ie as Tag, ae as TextField, fe as Toast, me as Toggle, he as ToggleItem, _e as Tooltip };
+export { m as Alert, g as Avatar, b as BottomSheet, x as BottomSheetOption, w as Button, T as Card, O as Checkbox, k as Chip, A as Dot, y as Drawer, M as IconButton, P as Modal, G as Popover, K as ProgressBar, Y as Radio, ee as RadioGroup, te as SearchInput, ie as Select, E as SelectableCard, ae as SettingsRow, oe as Skeleton, C as Spinner, se as Switch, le as Tab, de as Tabs, fe as Tag, pe as TextField, be as Toast, Se as Toggle, Ce as ToggleItem, Te as Tooltip };