@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/Toggle/ToggleBase.js

@@ -1,59 +1,49 @@
 "use client";
 import "../styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
-import { useControllableState as k } from "../hooks/useControllableState.js";
-import { Slot as x } from "../primitives/slot.js";
-import { useCallback as f } from "react";
-const B = function({
-  asChild: c = !1,
-  children: u,
-  className: m,
-  defaultPressed: g = !1,
-  disabled: t,
-  onClick: n,
-  onKeyDown: a,
-  onPressedChange: v,
-  pressed: h,
-  ref: l,
-  ...i
-}) {
-  const [r, d] = k({
-    defaultValue: g,
-    onChange: v,
-    value: h
-  }), o = f(() => {
-    t || d(!r);
-  }, [t, r, d]), P = f(
-    (e) => {
-      a && a(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), o());
-    },
-    [o, a]
-  ), b = f(
-    (e) => {
-      n && n(e), !e.defaultPrevented && o();
-    },
-    [o, n]
-  ), p = {
-    className: m,
-    onClick: b,
-    onKeyDown: P,
-    "aria-disabled": t ? !0 : void 0,
-    "aria-pressed": r,
-    "data-state": r ? "on" : "off",
-    "data-disabled": t ? !0 : void 0
-  };
-  return c ? /* @__PURE__ */ s(
-    "div",
-    {
-      ref: l,
-      role: "button",
-      tabIndex: t ? -1 : 0,
-      ...i,
-      ...p,
-      children: /* @__PURE__ */ s(x, { children: u })
-    }
-  ) : /* @__PURE__ */ s("button", { ...i, ...p, disabled: t, ref: l, type: "button", children: u });
-};
-export {
-  B as ToggleBase
+import { Slot as e } from "../primitives/slot.js";
+import { useControllableState as t } from "../hooks/useControllableState.js";
+import { useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Toggle/ToggleBase.tsx
+var i = function({ asChild: i = !1, children: a, className: o, defaultPressed: s = !1, disabled: c, onClick: l, onKeyDown: u, onPressedChange: d, pressed: f, ref: p, ...m }) {
+	let [h, g] = t({
+		defaultValue: s,
+		onChange: d,
+		value: f
+	}), _ = n(() => {
+		c || g(!h);
+	}, [
+		c,
+		h,
+		g
+	]), v = n((e) => {
+		u && u(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), _());
+	}, [_, u]), y = {
+		className: o,
+		onClick: n((e) => {
+			l && l(e), !e.defaultPrevented && _();
+		}, [_, l]),
+		onKeyDown: v,
+		"aria-disabled": c ? !0 : void 0,
+		"aria-pressed": h,
+		"data-state": h ? "on" : "off",
+		"data-disabled": c ? !0 : void 0
+	};
+	return i ? /* @__PURE__ */ r("div", {
+		ref: p,
+		role: "button",
+		tabIndex: c ? -1 : 0,
+		...m,
+		...y,
+		children: /* @__PURE__ */ r(e, { children: a })
+	}) : /* @__PURE__ */ r("button", {
+		...m,
+		...y,
+		disabled: c,
+		ref: p,
+		type: "button",
+		children: a
+	});
 };
+//#endregion
+export { i as ToggleBase };

package/dist/Toggle.d.ts

@@ -1,6 +1,6 @@
-import { ToggleBase } from './ToggleBase';
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps, CSSProperties, Ref } from 'react';
+import { ToggleBase } from './ToggleBase';
 export type ActiveColor = string;
 export declare const getActiveColorStyle: (activeColor: ActiveColor | undefined, activeTextColor?: ActiveColor) => CSSProperties | undefined;
 export type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggleVariants> & {

package/dist/Toggle.js

@@ -1,64 +1,54 @@
 import "./styles/main.css";
-import { jsx as c } from "react/jsx-runtime";
-import { ToggleBase as v } from "./Toggle/ToggleBase.js";
-import { cn as b } from "./utils/twUtils.js";
-import { c as u } from "./index-D29mdTf5.js";
+import { t as e } from "./twUtils-VNWgstKL.js";
+import { t } from "./dist-B4g6zpUF.js";
+import { ToggleBase as n } from "./Toggle/ToggleBase.js";
 import "react";
-const h = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, f = /^(success|warning|danger|primary|neutral|secondary)-\d+$/, o = (e) => h.test(e) ? e : f.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`, p = (e, t) => {
-  if (!(!e && !t))
-    return {
-      ...e && {
-        "--color-toggle-bg--active": o(e),
-        "--color-toggle-border--active": o(e)
-      },
-      ...t && {
-        "--color-toggle-text--active": o(t)
-      }
-    };
-}, m = u(
-  `
-    bg-toggle-bg inline-flex items-center justify-center gap-2 border rounded-md text-sm shadow-sm font-medium w-fit text-toggle-text whitespace-nowrap outline-none transition-colors
-    [&_svg]:pointer-events-none [&_svg]:shrink-0 active:bg-toggle-bg--active hover:cursor-pointer hover:bg-toggle-bg--hover hover:border-toggle-border--hover hover:text-toggle-text--hover
-    data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active
-    data-[state=on]:border-toggle-border--active focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none aria-invalid:ring-danger-200/20
-    aria-invalid:border-danger-200 aria-pressed:bg-toggle-bg--active aria-pressed:border-toggle-border--active aria-pressed:text-toggle-text--active
-  `,
-  {
-    variants: {
-      variant: {
-        default: "border-toggle-border hover:border-toggle-border--hover",
-        outline: "border-toggle-outline-border hover:bg-toggle-bg--hover hover:border-toggle-outline-border--hover"
-      },
-      size: {
-        default: "h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4",
-        sm: "h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']):not([width]):not([height])]:size-3",
-        lg: "h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']):not([width]):not([height])]:size-5"
-      },
-      layout: {
-        default: "w-fit",
-        expanded: "w-full"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      layout: "default"
-    }
-  }
-), A = ({
-  ref: e,
-  className: t,
-  variant: r,
-  size: a,
-  layout: i,
-  disabled: g,
-  activeColor: n,
-  activeTextColor: s,
-  style: l,
-  ...d
-}) => /* @__PURE__ */ c(v, { ref: e, disabled: g, "data-slot": "toggle", "data-testid": "spectral-toggle", className: b(m({ variant: r, size: a, layout: i }), t), style: { ...p(n, s), ...l }, ...d });
-export {
-  A as Toggle,
-  p as getActiveColorStyle,
-  m as toggleVariants
-};
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Toggle/Toggle.tsx
+var i = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, a = /^(success|warning|danger|primary|neutral|secondary)-\d+$/, o = (e) => i.test(e) ? e : a.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`, s = (e, t) => {
+	if (!(!e && !t)) return {
+		...e && {
+			"--color-toggle-bg--active": o(e),
+			"--color-toggle-border--active": o(e)
+		},
+		...t && { "--color-toggle-text--active": o(t) }
+	};
+}, c = t("gap-2 rounded-md text-sm shadow-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors outline-none hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus:outline-none focus-visible:ring-[3px] active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:ring-danger-200/20 aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active aria-pressed:text-toggle-text--active data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "border-toggle-border hover:border-toggle-border--hover",
+			outline: "border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover"
+		},
+		size: {
+			default: "h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4",
+			sm: "h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']):not([width]):not([height])]:size-3",
+			lg: "h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']):not([width]):not([height])]:size-5"
+		},
+		layout: {
+			default: "w-fit",
+			expanded: "w-full"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		layout: "default"
+	}
+}), l = ({ ref: t, className: i, variant: a, size: o, layout: l, disabled: u, activeColor: d, activeTextColor: f, style: p, ...m }) => /* @__PURE__ */ r(n, {
+	ref: t,
+	disabled: u,
+	"data-slot": "toggle",
+	"data-testid": "spectral-toggle",
+	className: e(c({
+		variant: a,
+		size: o,
+		layout: l
+	}), i),
+	style: {
+		...s(d, f),
+		...p
+	},
+	...m
+});
+//#endregion
+export { l as Toggle, s as getActiveColorStyle, c as toggleVariants };

package/dist/ToggleGroup/ToggleGroupBase.js

@@ -1,107 +1,131 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as E, jsx as B } from "react/jsx-runtime";
-import { useControllableState as M } from "../hooks/useControllableState.js";
-import { clamp as R } from "../utils/sharedUtils.js";
-import { createContext as j, useRef as S, useCallback as i, useMemo as H, useContext as K, useImperativeHandle as L, useEffect as N } from "react";
-const T = j(null), Q = (C) => {
-  const {
-    className: z,
-    defaultValue: r,
-    disabled: l = !1,
-    loop: p = !0,
-    name: x,
-    onValueChange: v,
-    orientation: u = "horizontal",
-    type: d = "single",
-    value: a,
-    "data-variant": D,
-    "data-size": b,
-    "data-slot": m,
-    "data-layout": w,
-    ...G
-  } = C, g = d === "multiple", [n, y] = M({
-    defaultValue: typeof r < "u" ? r : g ? [] : "",
-    onChange: v,
-    value: a
-  }), o = S([]), c = i((t, s) => {
-    const P = { val: t, el: s, disabled: !!s?.disabled };
-    return o.current = [...o.current.filter((A) => A.val !== t), P], () => {
-      o.current = o.current.filter((A) => A.val !== t);
-    };
-  }, []), V = i(() => o.current.slice(), []), k = i(
-    (t) => g ? Array.isArray(n) && n.includes(t) : n === t,
-    [g, n]
-  ), e = i((t) => y(t), [y]), f = i(
-    (t) => {
-      const s = o.current;
-      if (s.length === 0) return;
-      const P = s.length - 1, A = p ? (t % s.length + s.length) % s.length : R(t, 0, P);
-      s[A]?.el?.focus();
-    },
-    [p]
-  ), h = H(
-    () => ({
-      focusItemByIndex: f,
-      groupDisabled: l,
-      isItemPressed: k,
-      itemsSnapshot: V,
-      loop: p,
-      name: x,
-      orientation: u,
-      register: c,
-      setValue: e,
-      type: d,
-      value: n
-    }),
-    [f, l, k, V, p, x, u, c, e, d, n]
-  ), I = x;
-  return /* @__PURE__ */ E("div", { className: z, "data-disabled": l ? "" : void 0, "data-layout": w, "data-orientation": u, "data-size": b, "data-slot": m, "data-variant": D, role: "group", ...G, children: [
-    /* @__PURE__ */ B(T.Provider, { value: h, children: C.children }),
-    I && d === "single" && typeof n == "string" ? /* @__PURE__ */ B("input", { type: "hidden", name: I, value: n }) : null,
-    I && d === "multiple" && Array.isArray(n) ? n.map((t) => /* @__PURE__ */ B("input", { type: "hidden", name: I + "[]", value: t }, t)) : null
-  ] });
-}, W = function({
-  ref: z,
-  value: r,
-  disabled: l,
-  className: p,
-  children: x,
-  onKeyDown: v,
-  onClick: u,
-  ...d
-}) {
-  const a = K(T);
-  if (!a) throw new Error("ToggleGroupItem must be used within ToggleGroup");
-  const { type: D, orientation: b, groupDisabled: m, setValue: w, isItemPressed: G, itemsSnapshot: g, register: n } = a, y = S(null);
-  L(z, () => y.current), N(() => n(r, y.current), [n, r]);
-  const o = G(r), c = i(() => {
-    if (!(m || l))
-      if (D === "single") w(o ? "" : r);
-      else {
-        const e = a.value, f = o ? e.filter((h) => h !== r) : [...e, r];
-        w(f);
-      }
-  }, [a.value, l, m, o, w, D, r]), V = i(
-    (e) => {
-      if (v && v(e), e.defaultPrevented) return;
-      if (e.key === " " || e.key === "Enter") {
-        e.preventDefault(), c();
-        return;
-      }
-      const f = g(), h = f.findIndex((s) => s.val === r), I = b === "horizontal" ? "ArrowLeft" : "ArrowUp", t = b === "horizontal" ? "ArrowRight" : "ArrowDown";
-      e.key === I ? (e.preventDefault(), a.focusItemByIndex(h - 1)) : e.key === t ? (e.preventDefault(), a.focusItemByIndex(h + 1)) : e.key === "Home" ? (e.preventDefault(), a.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), a.focusItemByIndex(f.length - 1));
-    },
-    [a, g, v, b, c, r]
-  ), k = i(
-    (e) => {
-      u && u(e), !e.defaultPrevented && c();
-    },
-    [u, c]
-  );
-  return /* @__PURE__ */ B("button", { "aria-pressed": o, className: p, "data-disabled": m || l ? "" : void 0, "data-state": o ? "on" : "off", disabled: m || l, onClick: k, onKeyDown: V, ref: y, type: "button", ...d, children: x });
-};
-export {
-  Q as ToggleGroupBase,
-  W as ToggleGroupItemBase
+import { useControllableState as e } from "../hooks/useControllableState.js";
+import { clamp as t } from "../utils/sharedUtils.js";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useImperativeHandle as o, useMemo as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/ToggleGroup/ToggleGroupBase.tsx
+var d = n(null), f = (n) => {
+	let { className: i, defaultValue: a, disabled: o = !1, loop: f = !0, name: p, onValueChange: m, orientation: h = "horizontal", type: g = "single", value: _, "data-variant": v, "data-size": y, "data-slot": b, "data-layout": x, ...S } = n, C = g === "multiple", [w, T] = e({
+		defaultValue: a === void 0 ? C ? [] : "" : a,
+		onChange: m,
+		value: _
+	}), E = c([]), D = r((e, t) => {
+		let n = {
+			val: e,
+			el: t,
+			disabled: !!t?.disabled
+		};
+		return E.current = [...E.current.filter((t) => t.val !== e), n], () => {
+			E.current = E.current.filter((t) => t.val !== e);
+		};
+	}, []), O = r(() => E.current.slice(), []), k = r((e) => C ? Array.isArray(w) && w.includes(e) : w === e, [C, w]), A = r((e) => T(e), [T]), j = r((e) => {
+		let n = E.current;
+		if (n.length === 0) return;
+		let r = n.length - 1;
+		n[f ? (e % n.length + n.length) % n.length : t(e, 0, r)]?.el?.focus();
+	}, [f]), M = s(() => ({
+		focusItemByIndex: j,
+		groupDisabled: o,
+		isItemPressed: k,
+		itemsSnapshot: O,
+		loop: f,
+		name: p,
+		orientation: h,
+		register: D,
+		setValue: A,
+		type: g,
+		value: w
+	}), [
+		j,
+		o,
+		k,
+		O,
+		f,
+		p,
+		h,
+		D,
+		A,
+		g,
+		w
+	]), N = p;
+	return /* @__PURE__ */ u("div", {
+		className: i,
+		"data-disabled": o ? "" : void 0,
+		"data-layout": x,
+		"data-orientation": h,
+		"data-size": y,
+		"data-slot": b,
+		"data-variant": v,
+		role: "group",
+		...S,
+		children: [
+			/* @__PURE__ */ l(d.Provider, {
+				value: M,
+				children: n.children
+			}),
+			N && g === "single" && typeof w == "string" ? /* @__PURE__ */ l("input", {
+				type: "hidden",
+				name: N,
+				value: w
+			}) : null,
+			N && g === "multiple" && Array.isArray(w) ? w.map((e) => /* @__PURE__ */ l("input", {
+				type: "hidden",
+				name: N + "[]",
+				value: e
+			}, e)) : null
+		]
+	});
+}, p = function({ ref: e, value: t, disabled: n, className: s, children: u, onKeyDown: f, onClick: p, ...m }) {
+	let h = i(d);
+	if (!h) throw Error("ToggleGroupItem must be used within ToggleGroup");
+	let { type: g, orientation: _, groupDisabled: v, setValue: y, isItemPressed: b, itemsSnapshot: x, register: S } = h, C = c(null);
+	o(e, () => C.current), a(() => S(t, C.current), [S, t]);
+	let w = b(t), T = r(() => {
+		if (!(v || n)) if (g === "single") y(w ? "" : t);
+		else {
+			let e = h.value;
+			y(w ? e.filter((e) => e !== t) : [...e, t]);
+		}
+	}, [
+		h.value,
+		n,
+		v,
+		w,
+		y,
+		g,
+		t
+	]), E = r((e) => {
+		if (f && f(e), e.defaultPrevented) return;
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault(), T();
+			return;
+		}
+		let n = x(), r = n.findIndex((e) => e.val === t), i = _ === "horizontal" ? "ArrowLeft" : "ArrowUp", a = _ === "horizontal" ? "ArrowRight" : "ArrowDown";
+		e.key === i ? (e.preventDefault(), h.focusItemByIndex(r - 1)) : e.key === a ? (e.preventDefault(), h.focusItemByIndex(r + 1)) : e.key === "Home" ? (e.preventDefault(), h.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), h.focusItemByIndex(n.length - 1));
+	}, [
+		h,
+		x,
+		f,
+		_,
+		T,
+		t
+	]), D = r((e) => {
+		p && p(e), !e.defaultPrevented && T();
+	}, [p, T]);
+	return /* @__PURE__ */ l("button", {
+		"aria-pressed": w,
+		className: s,
+		"data-disabled": v || n ? "" : void 0,
+		"data-state": w ? "on" : "off",
+		disabled: v || n,
+		onClick: D,
+		onKeyDown: E,
+		ref: C,
+		type: "button",
+		...m,
+		children: u
+	});
 };
+//#endregion
+export { f as ToggleGroupBase, p as ToggleGroupItemBase };

package/dist/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
-import { ToggleGroupBase, ToggleGroupItemBase } from './ToggleGroupBase';
 import { toggleVariants, ActiveColor } from '../Toggle/Toggle';
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps, Ref } from 'react';
+import { ToggleGroupBase, ToggleGroupItemBase } from './ToggleGroupBase';
 export type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> & VariantProps<typeof toggleVariants> & {
     activeColor?: ActiveColor;
     activeTextColor?: ActiveColor;

package/dist/ToggleGroup.js

@@ -1,67 +1,56 @@
 "use client";
 import "./styles/main.css";
+import { t as e } from "./twUtils-VNWgstKL.js";
+import { getActiveColorStyle as t, toggleVariants as n } from "./Toggle.js";
+import { ToggleGroupBase as r, ToggleGroupItemBase as i } from "./ToggleGroup/ToggleGroupBase.js";
+import { createContext as a, useContext as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
-import { ToggleGroupBase as C, ToggleGroupItemBase as T } from "./ToggleGroup/ToggleGroupBase.js";
-import { getActiveColorStyle as z, toggleVariants as G } from "./Toggle.js";
-import { cn as c } from "./utils/twUtils.js";
-import { createContext as h, useContext as w } from "react";
-const m = h({
-  layout: "default",
-  size: "default",
-  variant: "default"
-}), _ = ({ className: r, variant: o, size: e, layout: a, activeColor: l, activeTextColor: d, children: n, ...i }) => /* @__PURE__ */ s(
-  C,
-  {
-    className: c("group/toggle-group flex h-fit w-fit items-center rounded-md data-[layout='expanded']:w-full data-[variant='outline']:gap-0.5 [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", r),
-    "data-layout": a,
-    "data-size": e,
-    "data-slot": "toggle-group",
-    "data-testid": "spectral-toggle-group",
-    "data-variant": o,
-    ...i,
-    children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
-  }
-), A = ({
-  activeColor: r,
-  activeTextColor: o,
-  children: e,
-  className: a,
-  layout: l,
-  ref: d,
-  size: n,
-  style: i,
-  value: v,
-  variant: f,
-  ...y
-}) => {
-  const t = w(m), u = t.variant ?? f, g = t.size ?? n, p = t.layout ?? l, x = r ?? t.activeColor, b = o ?? t.activeTextColor;
-  return /* @__PURE__ */ s(
-    T,
-    {
-      className: c(
-        G({
-          variant: u,
-          size: g,
-          layout: p
-        }),
-        "group data-[variant=outline]:border-toggle-outline-border data-[variant=outline]:hover:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
-        a
-      ),
-      "data-layout": p,
-      "data-size": g,
-      "data-slot": "toggle-group-item",
-      "data-testid": "spectral-toggle-group-item",
-      "data-variant": u,
-      ref: d,
-      style: { ...z(x, b), ...i },
-      value: v,
-      ...y,
-      children: e
-    }
-  );
-};
-A.displayName = "ToggleGroupItem";
-export {
-  _ as ToggleGroup,
-  A as ToggleGroupItem
+//#region src/components/ToggleGroup/ToggleGroup.tsx
+var c = a({
+	layout: "default",
+	size: "default",
+	variant: "default"
+}), l = ({ className: t, variant: n, size: i, layout: a, activeColor: o, activeTextColor: l, children: u, ...d }) => /* @__PURE__ */ s(r, {
+	className: e("group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0.5 flex h-fit w-fit items-center data-[layout='expanded']:w-full", t),
+	"data-layout": a,
+	"data-size": i,
+	"data-slot": "toggle-group",
+	"data-testid": "spectral-toggle-group",
+	"data-variant": n,
+	...d,
+	children: /* @__PURE__ */ s(c.Provider, {
+		value: {
+			variant: n,
+			size: i,
+			layout: a,
+			activeColor: o,
+			activeTextColor: l
+		},
+		children: u
+	})
+}), u = ({ activeColor: r, activeTextColor: a, children: l, className: u, layout: d, ref: f, size: p, style: m, value: h, variant: g, ..._ }) => {
+	let v = o(c), y = v.variant ?? g, b = v.size ?? p, x = v.layout ?? d, S = r ?? v.activeColor, C = a ?? v.activeTextColor;
+	return /* @__PURE__ */ s(i, {
+		className: e(n({
+			variant: y,
+			size: b,
+			layout: x
+		}), "group data-[variant=outline]:hover:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:border-toggle-outline-border", u),
+		"data-layout": x,
+		"data-size": b,
+		"data-slot": "toggle-group-item",
+		"data-testid": "spectral-toggle-group-item",
+		"data-variant": y,
+		ref: f,
+		style: {
+			...t(S, C),
+			...m
+		},
+		value: h,
+		..._,
+		children: l
+	});
 };
+u.displayName = "ToggleGroupItem";
+//#endregion
+export { l as ToggleGroup, u as ToggleGroupItem };