@studiolxd/brand 38.12.4

package/dist/toast.js

@@ -0,0 +1,88 @@
+'use client';
+import { Toast as e } from "@base-ui/react/toast";
+//#region src/stories/molecules/Toast/toast.ts
+var t = e.createToastManager(), n = 5e3, r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map(), a = n;
+function o(e) {
+	a = e;
+}
+function s(e) {
+	r.forEach((t) => {
+		e.includes(t) || (r.delete(t), u(t));
+	}), e.forEach((e) => r.add(e));
+}
+function c(e) {
+	if (e !== void 0) return Number.isFinite(e) ? e : 0;
+}
+function l(e) {
+	return e === "error" || e === "warning" ? "high" : "low";
+}
+function u(e) {
+	let t = i.get(e);
+	t !== void 0 && (clearTimeout(t), i.delete(e));
+}
+function d(e, n, r) {
+	if (u(e), n === "loading") return;
+	let o = c(r) ?? a;
+	o <= 0 || i.set(e, setTimeout(() => {
+		i.delete(e), t.close(e);
+	}, o));
+}
+function f(e, t, n) {
+	return {
+		title: e,
+		type: t,
+		description: n?.description,
+		timeout: c(n?.duration),
+		priority: l(t),
+		actionProps: n?.action ? {
+			children: n.action.label,
+			onClick: n.action.onClick
+		} : void 0,
+		onClose: n?.onClose
+	};
+}
+function p(e, n, i) {
+	let a = i?.id;
+	if (a !== void 0 && r.has(a)) return t.update(a, f(e, n, i)), d(a, n, i?.duration), a;
+	let o = t.add({
+		...f(e, n, i),
+		id: a
+	});
+	return r.add(o), o;
+}
+function m(e) {
+	return typeof e == "string" ? { title: e } : e;
+}
+function h(e, t) {
+	return p(e, "default", t);
+}
+var g = Object.assign(h, {
+	message: (e, t) => p(e, "default", t),
+	success: (e, t) => p(e, "success", t),
+	error: (e, t) => p(e, "error", t),
+	warning: (e, t) => p(e, "warning", t),
+	info: (e, t) => p(e, "info", t),
+	loading: (e, t) => p(e, "loading", t),
+	dismiss: (e) => {
+		if (e !== void 0) {
+			u(e), t.close(e);
+			return;
+		}
+		r.forEach((e) => {
+			u(e), t.close(e);
+		});
+	},
+	promise: (e, n) => {
+		let r = (e, t, n) => {
+			let r = m(typeof e == "function" ? e(t) : e);
+			return f(r.title, n, r);
+		};
+		return t.promise(e, {
+			loading: f(m(n.loading).title, "loading", m(n.loading)),
+			success: (e) => r(n.success, e, "success"),
+			error: (e) => r(n.error, e, "error")
+		});
+	}
+});
+//#endregion
+export { n as TOAST_DURATION, o as setToastDefaultDuration, s as syncLiveToasts, g as toast, t as toastManager };

package/dist/toaster.css

@@ -0,0 +1 @@
+:root{--button-border-style:solid;--button-border-color:#0000;--button-justify-content:center;--button-cursor:pointer;--button-white-space:nowrap;--button-text-decoration:none;--button-disabled-cursor:not-allowed;--button-focus-ring-style:solid;--button-block-width:100%;--button-outline-bg:#0000;--button-text-border-width:0;--button-text-padding-inline:0;--button-text-bg:#0000;--button-text-border:#0000;--button-text-hover-bg:#0000;--button-text-hover-border:#0000;--button-text-active-bg:#0000;--button-text-active-border:#0000;--button-ghost-border-width:0;--button-ghost-bg:#0000;--button-ghost-border:#0000;--button-ghost-hover-border:#0000;--button-ghost-active-border:#0000;--button-font-family:var(--font-family-sans);--button-font-size:var(--font-size-2);--button-line-height:var(--line-height-none);--button-transition-duration:var(--motion-duration-fast);--button-transition-easing:var(--motion-easing-default);--button-height:var(--size-component-md);--button-sm-height:var(--size-component-sm);--button-lg-height:var(--size-component-lg);--button-padding-inline:var(--spacing-6);--button-focus-ring-offset:var(--spacing-1);--button-sm-padding-inline:var(--spacing-5);--button-sm-font-size:var(--font-size-1);--button-lg-padding-inline:var(--spacing-8);--button-lg-font-size:var(--font-size-3);--button-primary-border-style:var(--button-border-style);--button-primary-justify-content:var(--button-justify-content);--button-primary-cursor:var(--button-cursor);--button-primary-white-space:var(--button-white-space);--button-primary-text-decoration:var(--button-text-decoration);--button-primary-disabled-cursor:var(--button-disabled-cursor);--button-primary-disabled-color:var(--color-white);--button-primary-focus-ring-style:var(--button-focus-ring-style);--button-destructive-border-style:var(--button-border-style);--button-destructive-justify-content:var(--button-justify-content);--button-destructive-cursor:var(--button-cursor);--button-destructive-white-space:var(--button-white-space);--button-destructive-text-decoration:var(--button-text-decoration);--button-destructive-disabled-cursor:var(--button-disabled-cursor);--button-destructive-focus-ring-style:var(--button-focus-ring-style);--button-destructive-bg:var(--color-white);--button-outline-border-style:var(--button-border-style);--button-outline-justify-content:var(--button-justify-content);--button-outline-cursor:var(--button-cursor);--button-outline-white-space:var(--button-white-space);--button-outline-text-decoration:var(--button-text-decoration);--button-outline-disabled-cursor:var(--button-disabled-cursor);--button-outline-focus-ring-style:var(--button-focus-ring-style);--button-text-border-style:var(--button-border-style);--button-text-justify-content:var(--button-justify-content);--button-text-cursor:var(--link-cursor);--button-text-white-space:var(--button-white-space);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-ink-hover-underline-width:var(--link-ink-hover-underline-width);--button-text-disabled-cursor:var(--button-disabled-cursor);--button-text-focus-ring-style:var(--button-focus-ring-style);--button-ghost-border-style:var(--button-border-style);--button-ghost-justify-content:var(--button-justify-content);--button-ghost-cursor:var(--button-cursor);--button-ghost-white-space:var(--button-white-space);--button-ghost-text-decoration:var(--button-text-decoration);--button-ghost-disabled-cursor:var(--button-disabled-cursor);--button-ghost-focus-ring-style:var(--button-focus-ring-style);--button-border-radius:var(--border-radius-default);--button-border-width:var(--border-width-default);--button-font-weight:var(--font-weight-default);--button-disabled-bg:var(--color-disabled-bg-on-light);--button-disabled-color:var(--color-disabled-text-on-light);--button-disabled-border:var(--color-disabled-text-on-light);--button-focus-ring-width:var(--border-width-focus);--button-primary-font-family:var(--button-font-family);--button-primary-font-size:var(--button-font-size);--button-primary-line-height:var(--button-line-height);--button-primary-transition-duration:var(--button-transition-duration);--button-primary-transition-easing:var(--button-transition-easing);--button-primary-padding-inline:var(--button-padding-inline);--button-primary-focus-ring-offset:var(--button-focus-ring-offset);--button-primary-focus-ring-color:var(--color-primary);--button-primary-bg:var(--color-accent-1);--button-primary-color:var(--color-primary);--button-primary-border:var(--color-accent-1);--button-primary-hover-bg:var(--color-accent-2);--button-primary-hover-color:var(--color-primary);--button-primary-hover-border:var(--color-accent-2);--button-primary-active-bg:var(--color-accent-2);--button-primary-active-color:var(--color-primary);--button-primary-active-border:var(--color-accent-2);--button-destructive-font-family:var(--button-font-family);--button-destructive-font-size:var(--button-font-size);--button-destructive-line-height:var(--button-line-height);--button-destructive-transition-duration:var(--button-transition-duration);--button-destructive-transition-easing:var(--button-transition-easing);--button-destructive-padding-inline:var(--button-padding-inline);--button-destructive-focus-ring-offset:var(--button-focus-ring-offset);--button-destructive-focus-ring-color:var(--color-destructive-text-on-light);--button-destructive-color:var(--color-destructive-text-on-light);--button-destructive-border:var(--color-destructive-text-on-light);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-outline-font-family:var(--button-font-family);--button-outline-font-size:var(--button-font-size);--button-outline-line-height:var(--button-line-height);--button-outline-transition-duration:var(--button-transition-duration);--button-outline-transition-easing:var(--button-transition-easing);--button-outline-disabled-color:var(--color-disabled-border-on-light);--button-outline-disabled-border:var(--color-disabled-border-on-light);--button-outline-padding-inline:var(--button-padding-inline);--button-outline-focus-ring-offset:var(--button-focus-ring-offset);--button-outline-focus-ring-color:var(--color-text-on-light);--button-outline-color:var(--color-text-on-light);--button-outline-border:var(--color-text-on-light);--button-outline-hover-bg:var(--color-text-on-light);--button-outline-hover-color:var(--color-text-on-dark);--button-outline-hover-border:var(--color-text-on-light);--button-outline-active-bg:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-dark);--button-outline-active-border:var(--color-text-on-light);--button-text-font-family:var(--button-font-family);--button-text-font-size:var(--button-font-size);--button-text-line-height:var(--button-line-height);--button-text-underline-offset:var(--link-underline-offset);--button-text-transition-duration:var(--button-transition-duration);--button-text-transition-easing:var(--button-transition-easing);--button-ghost-font-family:var(--button-font-family);--button-ghost-font-size:var(--button-font-size);--button-ghost-line-height:var(--button-line-height);--button-ghost-transition-duration:var(--button-transition-duration);--button-ghost-transition-easing:var(--button-transition-easing);--button-ghost-padding-inline:var(--button-padding-inline);--button-ghost-focus-ring-offset:var(--button-focus-ring-offset);--button-ghost-focus-ring-color:var(--color-primary);--button-ghost-color:var(--color-text-on-light);--button-ghost-hover-bg:var(--color-primary);--button-ghost-hover-color:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-primary);--button-ghost-active-color:var(--color-text-on-dark);--button-primary-border-radius:var(--button-border-radius);--button-primary-border-width:var(--button-border-width);--button-primary-font-weight:var(--button-font-weight);--button-primary-disabled-bg:var(--button-disabled-border);--button-primary-disabled-border:var(--button-disabled-border);--button-primary-focus-ring-width:var(--button-focus-ring-width);--button-destructive-border-radius:var(--button-border-radius);--button-destructive-border-width:var(--button-border-width);--button-destructive-font-weight:var(--button-font-weight);--button-destructive-disabled-color:var(--button-disabled-color);--button-destructive-disabled-border:var(--button-disabled-border);--button-destructive-focus-ring-width:var(--button-focus-ring-width);--button-outline-border-radius:var(--button-border-radius);--button-outline-border-width:var(--button-border-width);--button-outline-font-weight:var(--button-font-weight);--button-outline-focus-ring-width:var(--button-focus-ring-width);--button-text-border-radius:var(--button-border-radius);--button-text-font-weight:var(--button-font-weight);--button-text-underline-width:var(--link-underline-width);--button-text-ink-color:var(--link-ink-color);--button-text-ink-underline-width:var(--link-ink-underline-width);--button-text-disabled-color:var(--button-disabled-color);--button-text-focus-ring-width:var(--button-focus-ring-width);--button-text-focus-ring-offset:var(--link-focus-ring-offset);--button-text-focus-ring-color:var(--link-focus-ring-color);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-active-color:var(--link-hover-color);--button-ghost-border-radius:var(--button-border-radius);--button-ghost-font-weight:var(--button-font-weight);--button-ghost-disabled-color:var(--button-disabled-color);--button-ghost-focus-ring-width:var(--button-focus-ring-width)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--button-outline-hover-bg:var(--color-white);--button-outline-hover-border:var(--color-white);--button-outline-active-bg:var(--color-white);--button-outline-active-border:var(--color-white);--button-outline-focus-ring-color:var(--color-white);--button-text-underline-width:var(--link-underline-width);--button-primary-focus-ring-color:var(--color-text-on-dark);--button-destructive-color:var(--color-destructive-text-on-dark);--button-destructive-border:var(--color-destructive-text-on-dark);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-destructive-focus-ring-color:var(--color-destructive-text-on-dark);--button-outline-color:var(--color-text-on-dark);--button-outline-border:var(--color-text-on-dark);--button-outline-hover-color:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-light);--button-text-disabled-color:var(--color-text-muted-on-dark);--button-ghost-color:var(--color-text-on-dark);--button-ghost-hover-color:var(--color-primary);--button-ghost-active-color:var(--color-primary);--button-ghost-focus-ring-color:var(--color-text-on-dark);--button-ghost-hover-bg:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-text-on-dark);--button-ghost-disabled-color:var(--color-text-muted-on-dark);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-ink-color:var(--link-ink-color);--button-text-active-color:var(--link-hover-color);--button-text-focus-ring-color:var(--link-focus-ring-color)}:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}:root{--toast-max-width:360px;--toast-stack-scale:.05;--toast-enter-scale:.97;--toast-z-index:var(--z-index-toast);--toast-inset-block:var(--spacing-5);--toast-inset-inline:var(--spacing-5);--toast-gap:var(--spacing-2);--toast-stack-offset:var(--spacing-3);--toast-duration-in:var(--motion-duration-base);--toast-duration-out:var(--motion-duration-base);--toast-easing:var(--motion-easing-out)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}.toaster{--toast-stack-direction:-1;z-index:var(--toast-z-index);inline-size:min(var(--toast-max-width), calc(100vw - var(--toast-inset-inline) * 2));outline:none;position:fixed;inset-block-end:var(--toast-inset-block);inset-inline-end:var(--toast-inset-inline)}.toaster.toaster--top{--toast-stack-direction:1;inset-block-start:var(--toast-inset-block);inset-block-end:auto}.toaster.toaster--left{inset-inline-start:var(--toast-inset-inline);inset-inline-end:auto}.toaster.toaster--center{inset-inline:50% auto;translate:-50%}.toast{transform-origin:bottom;cursor:default;z-index:calc(var(--toast-z-index) - var(--toast-index));transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * var(--toast-index) * var(--toast-stack-offset))) scale(max(0, 1 - var(--toast-index) * var(--toast-stack-scale)));transition:transform var(--toast-duration-in) var(--toast-easing), opacity var(--toast-duration-in) var(--toast-easing);position:absolute;inset-block-end:0;inset-inline:0}.toaster.toaster--top .toast{transform-origin:top;inset-block:0 auto}.toast[data-expanded],.toaster--expanded .toast{transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))))}.toast[data-starting-style],.toast[data-ending-style]{opacity:0;transform:translateY(calc(var(--toast-stack-direction) * -100%)) scale(var(--toast-enter-scale))}.toast[data-ending-style]{transition-duration:var(--toast-duration-out)}.toast[data-swiping]{transition:none}.toast[data-limited]{opacity:0}.toast .toast__action{margin-block-start:var(--alert-content-gap);margin-inline-start:calc(var(--button-sm-padding-inline) * -1)}

package/dist/toaster.js

@@ -0,0 +1,80 @@
+'use client';
+import './toaster.css';
+import { Button as e } from "./button.js";
+import { CloseButton as t } from "./close-button.js";
+import { t as n } from "./_shared/css-properties.js";
+import { TOAST_DURATION as r, setToastDefaultDuration as i, syncLiveToasts as a, toastManager as o } from "./toast.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useEffect as l } from "react";
+import { Toast as u } from "@base-ui/react/toast";
+//#region src/stories/molecules/Toast/Toaster.tsx
+var d = 8, f = {
+	success: "alert--success",
+	error: "alert--error",
+	warning: "alert--warning"
+};
+function p(e, t) {
+	return [
+		"alert",
+		f[e ?? ""] ?? "",
+		e === "warning" ? "" : "surface-dark",
+		t ? "alert--dismissible" : "",
+		"toast"
+	].filter(Boolean).join(" ");
+}
+function m({ position: r, containerAriaLabel: i, closeLabel: o, closeButton: d, gap: f, expand: m }) {
+	let { toasts: h } = u.useToastManager(), [g, _] = r.split("-"), v = h.map((e) => e.id).join(",");
+	l(() => {
+		a(v ? v.split(",") : []);
+	}, [v]);
+	let y = n({ "--toast-gap": `${f}px` }), b = [
+		"toaster",
+		g === "top" ? "toaster--top" : "",
+		_ === "right" ? "" : `toaster--${_}`,
+		m ? "toaster--expanded" : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s(u.Portal, { children: /* @__PURE__ */ s(u.Viewport, {
+		ref: y,
+		className: b,
+		"aria-label": i,
+		children: h.map((n) => /* @__PURE__ */ c(u.Root, {
+			toast: n,
+			className: p(n.type, d),
+			children: [/* @__PURE__ */ c("div", {
+				className: "alert__content",
+				children: [
+					/* @__PURE__ */ s(u.Title, { className: "alert__title" }),
+					/* @__PURE__ */ s(u.Description, { className: "alert__description" }),
+					/* @__PURE__ */ s(u.Action, {
+						className: "toast__action",
+						render: /* @__PURE__ */ s(e, {
+							variant: "ghost",
+							size: "sm"
+						})
+					})
+				]
+			}), d && /* @__PURE__ */ s(u.Close, {
+				className: "alert__close",
+				render: /* @__PURE__ */ s(t, { label: o })
+			})]
+		}, n.id))
+	}) });
+}
+function h({ position: e = "bottom-right", containerAriaLabel: t = "Notificaciones", closeLabel: n = "Cerrar", closeButton: a = !0, duration: c = r, gap: f = d, visibleToasts: p = 3, expand: h = !1 }) {
+	let g = Number.isFinite(c) ? c : 0;
+	return l(() => i(g), [g]), /* @__PURE__ */ s(u.Provider, {
+		toastManager: o,
+		timeout: g,
+		limit: p,
+		children: /* @__PURE__ */ s(m, {
+			position: e,
+			containerAriaLabel: t,
+			closeLabel: n,
+			closeButton: a,
+			gap: f,
+			expand: h
+		})
+	});
+}
+//#endregion
+export { h as Toaster };

package/dist/toggle-group.css

@@ -0,0 +1 @@
+.toggle-group{align-items:center;gap:var(--toggle-group-gap);display:inline-flex}.toggle-group.toggle-group--vertical{flex-direction:column;align-items:stretch}

package/dist/toggle-group.js

@@ -0,0 +1,30 @@
+'use client';
+import './toggle-group.css';
+import { t as e } from "./_shared/togglegroupcontext.js";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n, useMemo as r } from "react";
+import { ToggleGroup as i } from "@base-ui/react/toggle-group";
+//#region src/stories/atoms/ToggleGroup/ToggleGroup.tsx
+var a = n(function({ value: n, defaultValue: a, onValueChange: o, multiple: s = !1, size: c, orientation: l = "horizontal", children: u, className: d, ...f }, p) {
+	let m = [
+		"toggle-group",
+		l === "vertical" ? "toggle-group--vertical" : "",
+		d ?? ""
+	].filter(Boolean).join(" "), h = r(() => ({ size: c }), [c]);
+	return /* @__PURE__ */ t(e.Provider, {
+		value: h,
+		children: /* @__PURE__ */ t(i, {
+			ref: p,
+			className: m,
+			value: n,
+			defaultValue: a,
+			multiple: s,
+			orientation: l,
+			onValueChange: o ? (e) => o(e) : void 0,
+			...f,
+			children: u
+		})
+	});
+});
+//#endregion
+export { a as ToggleGroup };

package/dist/toggle.css

@@ -0,0 +1 @@
+.toggle{justify-content:center;align-items:center;gap:var(--toggle-gap);height:var(--toggle-height);padding-block:0;padding-inline:var(--toggle-padding-inline);border-width:var(--toggle-border-width);border-style:var(--toggle-border-style);border-radius:var(--toggle-border-radius);border-color:var(--toggle-border-color);background-color:var(--toggle-bg);color:var(--toggle-color);font-family:var(--toggle-font-family);font-size:var(--toggle-font-size);font-weight:var(--toggle-font-weight);line-height:var(--toggle-line-height);cursor:var(--toggle-cursor);transition:color var(--toggle-transition-duration) var(--toggle-transition-easing), border-color var(--toggle-transition-duration) var(--toggle-transition-easing), background-color var(--toggle-transition-duration) var(--toggle-transition-easing);display:inline-flex}.toggle:hover:not([data-pressed]):not([data-disabled]){border-color:var(--toggle-hover-border-color)}.toggle[data-pressed]{background-color:var(--toggle-pressed-bg);border-color:var(--toggle-pressed-border-color);color:var(--toggle-pressed-color)}.toggle:focus-visible{outline:var(--toggle-focus-ring-width) solid var(--toggle-focus-ring-color);outline-offset:var(--toggle-focus-ring-offset)}.toggle[data-disabled]{opacity:var(--toggle-disabled-opacity);cursor:var(--toggle-disabled-cursor)}.toggle.toggle--icon-only{inline-size:var(--toggle-height);padding-inline:0}.toggle.toggle--sm{--toggle-height:var(--toggle-sm-height);--toggle-padding-inline:var(--toggle-sm-padding-inline);--toggle-font-size:var(--toggle-sm-font-size)}.toggle.toggle--lg{--toggle-height:var(--toggle-lg-height);--toggle-padding-inline:var(--toggle-lg-padding-inline);--toggle-font-size:var(--toggle-lg-font-size)}

package/dist/toggle.js

@@ -0,0 +1,23 @@
+'use client';
+import './toggle.css';
+import { n as e } from "./_shared/togglegroupcontext.js";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { Toggle as r } from "@base-ui/react/toggle";
+//#region src/stories/atoms/Toggle/Toggle.tsx
+var i = n(function({ size: n, iconOnly: i = !1, className: a, onPressedChange: o, ...s }, c) {
+	let l = e(), u = n ?? l?.size ?? "md";
+	return /* @__PURE__ */ t(r, {
+		ref: c,
+		className: [
+			"toggle",
+			u === "md" ? "" : `toggle--${u}`,
+			i ? "toggle--icon-only" : "",
+			a ?? ""
+		].filter(Boolean).join(" "),
+		onPressedChange: o ? (e) => o(e) : void 0,
+		...s
+	});
+});
+//#endregion
+export { i as Toggle };