@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/ToggleGroup/ToggleGroupBase.js

@@ -1,134 +1,185 @@
-'use client'
-import '../styles/main.css'
-import { useUncontrolledState as e } from "../hooks/useUncontrolledState.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";
+'use client';
+import { useUncontrolledState } from "../hooks/useUncontrolledState.js";
+import { clamp } from "../utils/sharedUtils.js";
+import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { jsx, jsxs } 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
+const GroupContext = createContext(null);
+const ToggleGroupBase = (props) => {
+	const { className, defaultValue, disabled: groupDisabled = false, loop = true, name, onValueChange, orientation = "horizontal", type = "single", value: valueProp, "data-variant": dataVariant, "data-size": dataSize, "data-slot": dataSlot, "data-layout": dataLayout, ...rest } = props;
+	const isMultiple = type === "multiple";
+	const handleValueChange = useCallback((next) => {
+		if (!onValueChange) return;
+		if (isMultiple) {
+			onValueChange(next);
+			return;
+		}
+		onValueChange(next);
+	}, [isMultiple, onValueChange]);
+	const [value, setValue] = useUncontrolledState({
+		defaultValue: typeof defaultValue !== "undefined" ? defaultValue : isMultiple ? [] : "",
+		onChange: handleValueChange,
+		value: valueProp
+	});
+	const registry = useRef([]);
+	const register = useCallback((val, el) => {
+		const entry = {
+			val,
+			el,
+			disabled: !!el?.disabled
 		};
-		return E.current = [...E.current.filter((t) => t.val !== e), n], () => {
-			E.current = E.current.filter((t) => t.val !== e);
+		registry.current = [...registry.current.filter((i) => i.val !== val), entry];
+		return () => {
+			registry.current = registry.current.filter((i) => i.val !== val);
 		};
-	}, []), 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
+	}, []);
+	const itemsSnapshot = useCallback(() => registry.current.slice(), []);
+	const isItemPressed = useCallback((val) => {
+		if (isMultiple) return Array.isArray(value) && value.includes(val);
+		return value === val;
+	}, [isMultiple, value]);
+	const setValueSafe = useCallback((next) => setValue(next), [setValue]);
+	const focusItemByIndex = useCallback((index) => {
+		const items = registry.current;
+		if (items.length === 0) return;
+		const last = items.length - 1;
+		items[loop ? (index % items.length + items.length) % items.length : clamp(index, 0, last)]?.el?.focus();
+	}, [loop]);
+	const ctx = useMemo(() => ({
+		focusItemByIndex,
+		groupDisabled,
+		isItemPressed,
+		itemsSnapshot,
+		loop,
+		name,
+		orientation,
+		register,
+		setValue: setValueSafe,
+		type,
+		value
 	}), [
-		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,
+		focusItemByIndex,
+		groupDisabled,
+		isItemPressed,
+		itemsSnapshot,
+		loop,
+		name,
+		orientation,
+		register,
+		setValueSafe,
+		type,
+		value
+	]);
+	const hiddenName = name;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-disabled": groupDisabled ? "" : void 0,
+		"data-layout": dataLayout,
+		"data-orientation": orientation,
+		"data-size": dataSize,
+		"data-slot": dataSlot,
+		"data-variant": dataVariant,
 		role: "group",
-		...S,
+		...rest,
 		children: [
-			/* @__PURE__ */ l(d.Provider, {
-				value: M,
-				children: n.children
+			/* @__PURE__ */ jsx(GroupContext.Provider, {
+				value: ctx,
+				children: props.children
 			}),
-			N && g === "single" && typeof w == "string" ? /* @__PURE__ */ l("input", {
+			hiddenName && type === "single" && typeof value === "string" ? /* @__PURE__ */ jsx("input", {
 				type: "hidden",
-				name: N,
-				value: w
+				name: hiddenName,
+				value
 			}) : null,
-			N && g === "multiple" && Array.isArray(w) ? w.map((e) => /* @__PURE__ */ l("input", {
+			hiddenName && type === "multiple" && Array.isArray(value) ? value.map((v) => /* @__PURE__ */ jsx("input", {
 				type: "hidden",
-				name: N + "[]",
-				value: e
-			}, e)) : null
+				name: hiddenName + "[]",
+				value: v
+			}, v)) : 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, () => {
-		if (!C.current) throw Error("ToggleGroupItem button ref is not set");
-		return C.current;
-	}), a(() => S(t, C.current), [S, t]);
-	let w = b(t), T = r(() => {
-		if (!(v || n)) if (g === "single") y(w ? "" : t);
+};
+const ToggleGroupItemBase = function ToggleGroupItem({ ref, value, disabled, className, children, onKeyDown, onClick, ...rest }) {
+	const ctx = useContext(GroupContext);
+	if (!ctx) throw new Error("ToggleGroupItem must be used within ToggleGroup");
+	const { type, orientation, groupDisabled, setValue, isItemPressed, itemsSnapshot, register } = ctx;
+	const btnRef = useRef(null);
+	useImperativeHandle(ref, () => {
+		if (!btnRef.current) throw new Error("ToggleGroupItem button ref is not set");
+		return btnRef.current;
+	});
+	useEffect(() => register(value, btnRef.current), [register, value]);
+	const pressed = isItemPressed(value);
+	const toggleMe = useCallback(() => {
+		if (groupDisabled || disabled) return;
+		if (type === "single") setValue(pressed ? "" : value);
 		else {
-			let e = h.value;
-			y(w ? e.filter((e) => e !== t) : [...e, t]);
+			const current = ctx.value;
+			setValue(pressed ? current.filter((v) => v !== value) : [...current, value]);
 		}
 	}, [
-		h.value,
-		n,
-		v,
-		w,
-		y,
-		g,
-		t
-	]), E = r((e) => {
-		if (f && f(e), e.defaultPrevented) return;
+		ctx.value,
+		disabled,
+		groupDisabled,
+		pressed,
+		setValue,
+		type,
+		value
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (onKeyDown) onKeyDown(e);
+		if (e.defaultPrevented) return;
 		if (e.key === " " || e.key === "Enter") {
-			e.preventDefault(), T();
+			e.preventDefault();
+			toggleMe();
 			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));
+		const items = itemsSnapshot();
+		const index = items.findIndex((i) => i.val === value);
+		const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (e.key === prevKey) {
+			e.preventDefault();
+			ctx.focusItemByIndex(index - 1);
+		} else if (e.key === nextKey) {
+			e.preventDefault();
+			ctx.focusItemByIndex(index + 1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			ctx.focusItemByIndex(0);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			ctx.focusItemByIndex(items.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,
+		ctx,
+		itemsSnapshot,
+		onKeyDown,
+		orientation,
+		toggleMe,
+		value
+	]);
+	const handleClick = useCallback((e) => {
+		if (onClick) onClick(e);
+		if (e.defaultPrevented) return;
+		toggleMe();
+	}, [onClick, toggleMe]);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-pressed": pressed,
+		className,
+		"data-disabled": groupDisabled || disabled ? "" : void 0,
+		"data-state": pressed ? "on" : "off",
+		disabled: groupDisabled || disabled,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		ref: btnRef,
 		type: "button",
-		...m,
-		children: u
+		...rest,
+		children
 	});
 };
+
 //#endregion
-export { f as ToggleGroupBase, p as ToggleGroupItemBase };
+export { ToggleGroupBase, ToggleGroupItemBase };
+//# sourceMappingURL=ToggleGroupBase.js.map

package/dist/ToggleGroup/ToggleGroupBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupBase.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { clamp } from '@utils/sharedUtils'\nimport { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react'\n\ntype VoidFn = () => void\ntype Orientation = 'horizontal' | 'vertical'\n\nexport interface CommonGroupProps {\n  className?: string\n  disabled?: boolean\n  loop?: boolean\n  name?: string\n  orientation?: Orientation\n}\n\nexport type SingleProps = CommonGroupProps & {\n  defaultValue?: string\n  onValueChange?: (v: string) => void\n  type?: 'single'\n  value?: string\n}\n\nexport type MultipleProps = CommonGroupProps & {\n  defaultValue?: string[]\n  onValueChange?: (v: string[]) => void\n  type: 'multiple'\n  value?: string[]\n}\n\nexport type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nexport interface ItemRenderProps {\n  children?: ReactNode\n  className?: string\n  disabled?: boolean\n  value: string\n}\n\nconst GroupContext = createContext<{\n  focusItemByIndex: (index: number) => void\n  groupDisabled: boolean\n  loop: boolean\n  isItemPressed: (val: string) => boolean\n  itemsSnapshot: () => { val: string; el: HTMLButtonElement | null; disabled: boolean }[]\n  name?: string\n  orientation: Orientation\n  register: (val: string, el: HTMLButtonElement | null) => VoidFn\n  setValue: (next: string | string[]) => void\n  type: 'single' | 'multiple'\n  value: string | string[]\n} | null>(null)\n\nexport const ToggleGroupBase = (props: ToggleGroupProps & Record<`data-${string}`, unknown>) => {\n  const {\n    className,\n    defaultValue,\n    disabled: groupDisabled = false,\n    loop = true,\n    name,\n    onValueChange,\n    orientation = 'horizontal',\n    type = 'single',\n    value: valueProp,\n    'data-variant': dataVariant,\n    'data-size': dataSize,\n    'data-slot': dataSlot,\n    'data-layout': dataLayout,\n    ...rest\n  } = props\n\n  const isMultiple = type === 'multiple'\n\n  const handleValueChange = useCallback(\n    (next: string | string[]) => {\n      if (!onValueChange) return\n      if (isMultiple) {\n        const onValueChangeMultiple = onValueChange as (v: string[]) => void\n        onValueChangeMultiple(next as string[])\n        return\n      }\n      const onValueChangeSingle = onValueChange as (v: string) => void\n      onValueChangeSingle(next as string)\n    },\n    [isMultiple, onValueChange],\n  )\n\n  const [value, setValue] = useUncontrolledState<string | string[]>({\n    defaultValue: typeof defaultValue !== 'undefined' ? defaultValue : isMultiple ? [] : '',\n    onChange: handleValueChange,\n    value: valueProp,\n  })\n\n  const registry = useRef<{ val: string; el: HTMLButtonElement | null; disabled: boolean }[]>([])\n\n  const register = useCallback((val: string, el: HTMLButtonElement | null) => {\n    const entry = { val, el, disabled: !!el?.disabled }\n    registry.current = [...registry.current.filter((i) => i.val !== val), entry]\n    return () => {\n      registry.current = registry.current.filter((i) => i.val !== val)\n    }\n  }, [])\n\n  const itemsSnapshot = useCallback(() => registry.current.slice(), [])\n\n  const isItemPressed = useCallback(\n    (val: string) => {\n      if (isMultiple) return Array.isArray(value) && value.includes(val)\n      return value === val\n    },\n    [isMultiple, value],\n  )\n\n  const setValueSafe = useCallback((next: string | string[]) => setValue(next), [setValue])\n\n  const focusItemByIndex = useCallback(\n    (index: number) => {\n      const items = registry.current\n      if (items.length === 0) return\n      const last = items.length - 1\n      const clamped = loop ? ((index % items.length) + items.length) % items.length : clamp(index, 0, last)\n      const target = items[clamped]\n      target?.el?.focus()\n    },\n    [loop],\n  )\n\n  const ctx = useMemo(\n    () => ({\n      focusItemByIndex,\n      groupDisabled,\n      isItemPressed,\n      itemsSnapshot,\n      loop,\n      name,\n      orientation,\n      register,\n      setValue: setValueSafe,\n      type,\n      value,\n    }),\n    [focusItemByIndex, groupDisabled, isItemPressed, itemsSnapshot, loop, name, orientation, register, setValueSafe, type, value],\n  )\n\n  const hiddenName = name\n\n  return (\n    <div className={className} data-disabled={groupDisabled ? '' : undefined} data-layout={dataLayout} data-orientation={orientation} data-size={dataSize} data-slot={dataSlot} data-variant={dataVariant} role='group' {...rest}>\n      <GroupContext.Provider value={ctx}>{props.children}</GroupContext.Provider>\n\n      {hiddenName && type === 'single' && typeof value === 'string' ? <input type='hidden' name={hiddenName} value={value} /> : null}\n\n      {hiddenName && type === 'multiple' && Array.isArray(value) ? value.map((v) => <input key={v} type='hidden' name={hiddenName + '[]'} value={v} />) : null}\n    </div>\n  )\n}\n\nexport type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> &\n  ItemRenderProps & {\n    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */\n    pressed?: boolean\n    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */\n    defaultPressed?: boolean\n  }\n\nexport const ToggleGroupItemBase = function ToggleGroupItem({\n  ref,\n  value,\n  disabled,\n  className,\n  children,\n  onKeyDown,\n  onClick,\n  ...rest\n}: ToggleGroupItemProps & {\n  ref?: Ref<HTMLButtonElement>\n}) {\n  const ctx = useContext(GroupContext)\n  if (!ctx) throw new Error('ToggleGroupItem must be used within ToggleGroup')\n\n  const { type, orientation, groupDisabled, setValue, isItemPressed, itemsSnapshot, register } = ctx\n\n  const btnRef = useRef<HTMLButtonElement | null>(null)\n  useImperativeHandle(ref, () => {\n    if (!btnRef.current) {\n      throw new Error('ToggleGroupItem button ref is not set')\n    }\n    return btnRef.current\n  })\n\n  useEffect(() => register(value, btnRef.current), [register, value])\n\n  const pressed = isItemPressed(value)\n\n  const toggleMe = useCallback(() => {\n    if (groupDisabled || disabled) return\n    if (type === 'single') setValue(pressed ? '' : value)\n    else {\n      const current = ctx.value as string[]\n      const next = pressed ? current.filter((v) => v !== value) : [...current, value]\n      setValue(next)\n    }\n  }, [ctx.value, disabled, groupDisabled, pressed, setValue, type, value])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (onKeyDown) onKeyDown(e)\n      if (e.defaultPrevented) return\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        toggleMe()\n        return\n      }\n      const items = itemsSnapshot()\n      const index = items.findIndex((i) => i.val === value)\n      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n      if (e.key === prevKey) {\n        e.preventDefault()\n        ctx.focusItemByIndex(index - 1)\n      } else if (e.key === nextKey) {\n        e.preventDefault()\n        ctx.focusItemByIndex(index + 1)\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        ctx.focusItemByIndex(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        ctx.focusItemByIndex(items.length - 1)\n      }\n    },\n    [ctx, itemsSnapshot, onKeyDown, orientation, toggleMe, value],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) onClick(e)\n      if (e.defaultPrevented) return\n      toggleMe()\n    },\n    [onClick, toggleMe],\n  )\n\n  return (\n    <button aria-pressed={pressed} className={className} data-disabled={groupDisabled || disabled ? '' : undefined} data-state={pressed ? 'on' : 'off'} disabled={groupDisabled || disabled} onClick={handleClick} onKeyDown={handleKeyDown} ref={btnRef} type='button' {...rest}>\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/ToggleGroup/ToggleGroupItem.d.ts

@@ -1,15 +1,33 @@
-import { toggleVariants, ActiveColor } from '../Toggle/Toggle';
-import { VariantProps } from 'class-variance-authority';
-import { ComponentProps, Ref } from 'react';
-import { ToggleGroupItemBase } from './ToggleGroupBase';
-export type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> & VariantProps<typeof toggleVariants> & {
-    activeColor?: ActiveColor;
-    activeTextColor?: ActiveColor;
-};
-export declare const ToggleGroupItem: {
-    ({ activeColor, activeTextColor, children, className, layout, ref, size, style, value, variant, ...props }: ToggleGroupItemProps & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+'use client';
+import { ActiveColor, toggleVariants } from "../Toggle.js";
+import { ToggleGroupItemBase } from "./ToggleGroupBase.js";
+import { ComponentProps, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/ToggleGroup/ToggleGroupItem.d.ts
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> & VariantProps<typeof toggleVariants> & {
+  activeColor?: ActiveColor;
+  activeTextColor?: ActiveColor;
 };
+declare function ToggleGroupItem({
+  activeColor,
+  activeTextColor,
+  children,
+  className,
+  layout,
+  ref,
+  size,
+  style,
+  value,
+  variant,
+  ...props
+}: ToggleGroupItemProps & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace ToggleGroupItem {
+  var displayName: string;
+}
+//#endregion
+export { ToggleGroupItem, ToggleGroupItemProps };
 //# sourceMappingURL=ToggleGroupItem.d.ts.map

package/dist/ToggleGroup/ToggleGroupItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"mappings":";;;;;;;;KAOY,oBAAA,GAAuB,cAAA,QAAsB,mBAAA,IACvD,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,WAAA;AAAA;AAAA;EAIpB,WAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,MAAA;EACA,GAAA;EACA,IAAA;EACA,KAAA;EACA,KAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/ToggleGroup/ToggleGroupItem.js

@@ -1,35 +1,43 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { getActiveColorStyle as t, toggleVariants as n } from "../Toggle.js";
-import { ToggleGroupContext as r } from "./ToggleGroup.context.js";
-import { ToggleGroupItemBase as i } from "./ToggleGroupBase.js";
-import { useContext as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { getActiveColorStyle, toggleVariants } from "../Toggle.js";
+import { ToggleGroupContext } from "../components/ToggleGroup/ToggleGroup.context.js";
+import { ToggleGroupItemBase } from "./ToggleGroupBase.js";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import "class-variance-authority";
+
 //#region src/components/ToggleGroup/ToggleGroupItem.tsx
-var s = ({ activeColor: s, activeTextColor: c, children: l, className: u, layout: d, ref: f, size: p, style: m, value: h, variant: g, ..._ }) => {
-	let v = a(r), y = g ?? v.variant, b = p ?? v.size, x = d ?? v.layout, S = s ?? v.activeColor, C = c ?? v.activeTextColor;
-	return /* @__PURE__ */ o(i, {
-		className: e(n({
-			variant: y,
-			size: b,
-			layout: x
-		}), "group rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:data-[state=on]:border-toggle-border--active", u),
-		"data-layout": x,
-		"data-size": b,
+const ToggleGroupItem = ({ activeColor, activeTextColor, children, className, layout, ref, size, style, value, variant, ...props }) => {
+	const context = useContext(ToggleGroupContext);
+	const resolvedVariant = variant ?? context.variant;
+	const resolvedSize = size ?? context.size;
+	const resolvedLayout = layout ?? context.layout;
+	const resolvedActiveColor = activeColor ?? context.activeColor;
+	const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor;
+	return /* @__PURE__ */ jsx(ToggleGroupItemBase, {
+		className: cn(toggleVariants({
+			variant: resolvedVariant,
+			size: resolvedSize,
+			layout: resolvedLayout
+		}), "group rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:hover:border-toggle-border data-[variant=outline]:data-[state=on]:border-selected-primary data-[variant=outline]:data-[state=on]:hover:border-selected-primary", className),
+		"data-layout": resolvedLayout,
+		"data-size": resolvedSize,
 		"data-slot": "toggle-group-item",
 		"data-testid": "spectral-toggle-group-item",
-		"data-variant": y,
-		ref: f,
+		"data-variant": resolvedVariant,
+		ref,
 		style: {
-			...t(S, C),
-			...m
+			...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor),
+			...style
 		},
-		value: h,
-		..._,
-		children: l
+		value,
+		...props,
+		children
 	});
 };
-s.displayName = "ToggleGroupItem";
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
 //#endregion
-export { s as ToggleGroupItem };
+export { ToggleGroupItem };
+//# sourceMappingURL=ToggleGroupItem.js.map

package/dist/ToggleGroup/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import { getActiveColorStyle, toggleVariants, type ActiveColor } from '@components/Toggle/Toggle'\nimport { cn } from '@utils/twUtils'\nimport { type VariantProps } from 'class-variance-authority'\nimport { useContext, type ComponentProps, type Ref } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupItemBase } from './ToggleGroupBase'\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveColor\n  }\n\nexport const ToggleGroupItem = ({\n  activeColor,\n  activeTextColor,\n  children,\n  className,\n  layout,\n  ref,\n  size,\n  style,\n  value,\n  variant,\n  ...props\n}: ToggleGroupItemProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const context = useContext(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedLayout = layout ?? context.layout\n  const resolvedActiveColor = activeColor ?? context.activeColor\n  const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor\n\n  return (\n    <ToggleGroupItemBase\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          layout: resolvedLayout,\n        }),\n        'group rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:hover:border-toggle-border data-[variant=outline]:data-[state=on]:border-selected-primary data-[variant=outline]:data-[state=on]:hover:border-selected-primary',\n        className,\n      )}\n      data-layout={resolvedLayout}\n      data-size={resolvedSize}\n      data-slot='toggle-group-item'\n      data-testid='spectral-toggle-group-item'\n      data-variant={resolvedVariant}\n      ref={ref}\n      style={{ ...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor), ...style }}\n      value={value}\n      {...props}\n    >\n      {children}\n    </ToggleGroupItemBase>\n  )\n}\n\nToggleGroupItem.displayName = 'ToggleGroupItem'\n"],"mappings":";;;;;;;;;;AAaA,MAAa,mBAAmB,EAC9B,aACA,iBACA,UACA,WACA,QACA,KACA,MACA,OACA,OACA,SACA,GAAG,YAGC;CACJ,MAAM,UAAU,WAAW,mBAAmB;CAC9C,MAAM,kBAAkB,WAAW,QAAQ;CAC3C,MAAM,eAAe,QAAQ,QAAQ;CACrC,MAAM,iBAAiB,UAAU,QAAQ;CACzC,MAAM,sBAAsB,eAAe,QAAQ;CACnD,MAAM,0BAA0B,mBAAmB,QAAQ;AAE3D,QACE,oBAAC,qBAAD;EACE,WAAW,GACT,eAAe;GACb,SAAS;GACT,MAAM;GACN,QAAQ;GACT,CAAC,EACF,kSACA,UACD;EACD,eAAa;EACb,aAAW;EACX,aAAU;EACV,eAAY;EACZ,gBAAc;EACT;EACL,OAAO;GAAE,GAAG,oBAAoB,qBAAqB,wBAAwB;GAAE,GAAG;GAAO;EAClF;EACP,GAAI;EAEH;EACmB;;AAI1B,gBAAgB,cAAc"}

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.d.ts

@@ -1,22 +1,51 @@
-import { DropdownMenuOption, DropdownMenuProps } from '../DropdownMenu/DropdownMenu';
-import { CSSProperties, ReactNode } from 'react';
-import { ToggleGroupItemProps } from './ToggleGroupItem';
-export interface ToggleGroupSplitMenuItemProps extends Omit<ToggleGroupItemProps, 'children'> {
-    children: ReactNode;
-    dropdownAlign?: DropdownMenuProps['align'];
-    dropdownAriaLabel: string;
-    dropdownButtonClassName?: string;
-    dropdownCollisionPadding?: DropdownMenuProps['collisionPadding'];
-    dropdownButtonStyle?: CSSProperties;
-    dropdownOptions: DropdownMenuOption[];
-    dropdownSide?: DropdownMenuProps['side'];
-    dropdownValue?: string | string[];
-    dropdownValueLabel?: string;
-    onDropdownValueChange?: (value: string | string[]) => void;
-    triggerIcon?: ReactNode;
+'use client';
+import { DropdownMenuOption, DropdownMenuProps } from "../DropdownMenu.js";
+import { ToggleGroupItemProps } from "./ToggleGroupItem.js";
+import { CSSProperties, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ToggleGroup/ToggleGroupSplitMenuItem.d.ts
+interface ToggleGroupSplitMenuItemProps extends Omit<ToggleGroupItemProps, 'children'> {
+  children: ReactNode;
+  dropdownAlign?: DropdownMenuProps['align'];
+  dropdownAriaLabel: string;
+  dropdownButtonClassName?: string;
+  dropdownCollisionPadding?: DropdownMenuProps['collisionPadding'];
+  dropdownButtonStyle?: CSSProperties;
+  dropdownOptions: DropdownMenuOption[];
+  dropdownSide?: DropdownMenuProps['side'];
+  dropdownValue?: string | string[];
+  dropdownValueLabel?: string;
+  onDropdownValueChange?: (value: string | string[]) => void;
+  triggerIcon?: ReactNode;
 }
-export declare const ToggleGroupSplitMenuItem: {
-    ({ activeColor, activeTextColor, children, className, dropdownAlign, dropdownAriaLabel, dropdownButtonClassName, dropdownButtonStyle, dropdownCollisionPadding, dropdownOptions, dropdownSide, dropdownValue, dropdownValueLabel, layout, onDropdownValueChange, onKeyDown, size, style, triggerIcon, value, variant, ...props }: ToggleGroupSplitMenuItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function ToggleGroupSplitMenuItem({
+  activeColor,
+  activeTextColor,
+  children,
+  className,
+  dropdownAlign,
+  dropdownAriaLabel,
+  dropdownButtonClassName,
+  dropdownButtonStyle,
+  dropdownCollisionPadding,
+  dropdownOptions,
+  dropdownSide,
+  dropdownValue,
+  dropdownValueLabel,
+  layout,
+  onDropdownValueChange,
+  onKeyDown,
+  size,
+  style,
+  triggerIcon,
+  value,
+  variant,
+  ...props
+}: ToggleGroupSplitMenuItemProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace ToggleGroupSplitMenuItem {
+  var displayName: string;
+}
+//#endregion
+export { ToggleGroupSplitMenuItem, ToggleGroupSplitMenuItemProps };
 //# sourceMappingURL=ToggleGroupSplitMenuItem.d.ts.map

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupSplitMenuItem.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx"],"mappings":";;;;;;;UAQiB,6BAAA,SAAsC,IAAA,CAAK,oBAAA;EAC1D,QAAA,EAAU,SAAA;EACV,aAAA,GAAgB,iBAAA;EAChB,iBAAA;EACA,uBAAA;EACA,wBAAA,GAA2B,iBAAA;EAC3B,mBAAA,GAAsB,aAAA;EACtB,eAAA,EAAiB,kBAAA;EACjB,YAAA,GAAe,iBAAA;EACf,aAAA;EACA,kBAAA;EACA,qBAAA,IAAyB,KAAA;EACzB,WAAA,GAAc,SAAA;AAAA;AAAA;EAId,WAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,mBAAA;EACA,wBAAA;EACA,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,MAAA;EACA,qBAAA;EACA,SAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,6BAAA,GAA6B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}