@spear-ai/spectral 1.13.1 → 1.14.1

package/dist/Toggle/ToggleBase.d.ts

@@ -1,13 +1,31 @@
-import { AsChildProp } from '../primitives/slot';
-import { ButtonHTMLAttributes, Ref } from 'react';
-export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & Omit<AsChildProp, 'asChild'> & {
-    asChild?: boolean;
-    defaultPressed?: boolean;
-    disabled?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
-    pressed?: boolean;
+'use client';
+import { AsChildProp } from "../primitives/slot.js";
+import { ButtonHTMLAttributes, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Toggle/ToggleBase.d.ts
+type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & Omit<AsChildProp, 'asChild'> & {
+  asChild?: boolean;
+  defaultPressed?: boolean;
+  disabled?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  pressed?: boolean;
 };
-export declare const ToggleBase: ({ asChild, children, className, defaultPressed, disabled, onClick, onKeyDown, onPressedChange, pressed: pressedProp, ref, ...rest }: ToggleProps & {
-    ref?: Ref<HTMLButtonElement>;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleBase: ({
+  asChild,
+  children,
+  className,
+  defaultPressed,
+  disabled,
+  onClick,
+  onKeyDown,
+  onPressedChange,
+  pressed: pressedProp,
+  ref,
+  ...rest
+}: ToggleProps & {
+  ref?: Ref<HTMLButtonElement>;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToggleBase, ToggleProps };
 //# sourceMappingURL=ToggleBase.d.ts.map

package/dist/Toggle/ToggleBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleBase.d.ts","names":[],"sources":["../../src/components/Toggle/ToggleBase.tsx"],"mappings":";;;;;;KAIY,WAAA,GAAc,IAAA,CAAK,oBAAA,CAAqB,iBAAA,iBAClD,IAAA,CAAK,WAAA;EACH,OAAA;EACA,cAAA;EACA,QAAA;EACA,eAAA,IAAmB,OAAA;EACnB,OAAA;AAAA;AAAA,cAGS,UAAA;EAAU,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,cAAA;EAAA,QAAA;EAAA,OAAA;EAAA,SAAA;EAAA,eAAA;EAAA,OAAA,EAAA,WAAA;EAAA,GAAA;EAAA,GAAA;AAAA,GAYpB,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Toggle/ToggleBase.js

@@ -1,49 +1,63 @@
-'use client'
-import '../styles/main.css'
-import { Slot as e } from "../primitives/slot.js";
-import { useUncontrolledState as t } from "../hooks/useUncontrolledState.js";
-import { useCallback as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+'use client';
+import { Slot } from "../primitives/slot.js";
+import { useUncontrolledState } from "../hooks/useUncontrolledState.js";
+import { useCallback } from "react";
+import { jsx } 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);
+const ToggleBase = function Toggle({ asChild = false, children, className, defaultPressed = false, disabled, onClick, onKeyDown, onPressedChange, pressed: pressedProp, ref, ...rest }) {
+	const [pressed, setPressed] = useUncontrolledState({
+		defaultValue: defaultPressed,
+		onChange: onPressedChange,
+		value: pressedProp
+	});
+	const handleToggle = useCallback(() => {
+		if (disabled) return;
+		setPressed(!pressed);
 	}, [
-		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
+		disabled,
+		pressed,
+		setPressed
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (onKeyDown) onKeyDown(e);
+		if (e.defaultPrevented) return;
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			handleToggle();
+		}
+	}, [handleToggle, onKeyDown]);
+	const sharedProps = {
+		className,
+		onClick: useCallback((e) => {
+			if (onClick) onClick(e);
+			if (e.defaultPrevented) return;
+			handleToggle();
+		}, [handleToggle, onClick]),
+		onKeyDown: handleKeyDown,
+		"aria-disabled": disabled ? true : void 0,
+		"aria-pressed": pressed,
+		"data-state": pressed ? "on" : "off",
+		"data-disabled": disabled ? true : void 0
 	};
-	return i ? /* @__PURE__ */ r("div", {
-		ref: p,
+	if (asChild) return /* @__PURE__ */ jsx("div", {
+		ref,
 		role: "button",
-		tabIndex: c ? -1 : 0,
-		...m,
-		...y,
-		children: /* @__PURE__ */ r(e, { children: a })
-	}) : /* @__PURE__ */ r("button", {
-		...m,
-		...y,
-		disabled: c,
-		ref: p,
+		tabIndex: disabled ? -1 : 0,
+		...rest,
+		...sharedProps,
+		children: /* @__PURE__ */ jsx(Slot, { children })
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		...sharedProps,
+		disabled,
+		ref,
 		type: "button",
-		children: a
+		children
 	});
 };
+
 //#endregion
-export { i as ToggleBase };
+export { ToggleBase };
+//# sourceMappingURL=ToggleBase.js.map

package/dist/Toggle/ToggleBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleBase.js","names":[],"sources":["../../src/components/Toggle/ToggleBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { useCallback, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type Ref } from 'react'\n\nexport type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> &\n  Omit<AsChildProp, 'asChild'> & {\n    asChild?: boolean\n    defaultPressed?: boolean\n    disabled?: boolean\n    onPressedChange?: (pressed: boolean) => void\n    pressed?: boolean\n  }\n\nexport const ToggleBase = function Toggle({\n  asChild = false,\n  children,\n  className,\n  defaultPressed = false,\n  disabled,\n  onClick,\n  onKeyDown,\n  onPressedChange,\n  pressed: pressedProp,\n  ref,\n  ...rest\n}: ToggleProps & {\n  ref?: Ref<HTMLButtonElement>\n}) {\n  const [pressed, setPressed] = useUncontrolledState<boolean>({\n    defaultValue: defaultPressed,\n    onChange: onPressedChange,\n    value: pressedProp,\n  })\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n    setPressed(!pressed)\n  }, [disabled, pressed, setPressed])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e as KeyboardEvent<HTMLButtonElement>)\n      if (e.defaultPrevented) return\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle, onKeyDown],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n      if (onClick) onClick(e as MouseEvent<HTMLButtonElement>)\n      if (e.defaultPrevented) return\n      handleToggle()\n    },\n    [handleToggle, onClick],\n  )\n\n  const sharedProps = {\n    className,\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    'aria-disabled': disabled ? true : undefined,\n    'aria-pressed': pressed,\n    'data-state': pressed ? 'on' : 'off',\n    'data-disabled': disabled ? true : undefined,\n  }\n\n  if (asChild) {\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- div wrapper required for Slot primitive to merge props with child\n        role='button'\n        tabIndex={disabled ? -1 : 0}\n        {...(rest as HTMLAttributes<HTMLDivElement>)}\n        {...sharedProps}\n      >\n        <Slot>{children}</Slot>\n      </div>\n    )\n  }\n\n  return (\n    <button {...rest} {...sharedProps} disabled={disabled} ref={ref as Ref<HTMLButtonElement>} type='button'>\n      {children}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,aAAa,SAAS,OAAO,EACxC,UAAU,OACV,UACA,WACA,iBAAiB,OACjB,UACA,SACA,WACA,iBACA,SAAS,aACT,KACA,GAAG,QAGF;CACD,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,cAAc;EACd,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAU;AACd,aAAW,CAAC,QAAQ;IACnB;EAAC;EAAU;EAAS;EAAW,CAAC;CAEnC,MAAM,gBAAgB,aACnB,MAAyD;AACxD,MAAI,UAAW,WAAU,EAAsC;AAC/D,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,KAAE,gBAAgB;AAClB,iBAAc;;IAGlB,CAAC,cAAc,UAAU,CAC1B;CAWD,MAAM,cAAc;EAClB;EACA,SAXkB,aACjB,MAAsD;AACrD,OAAI,QAAS,SAAQ,EAAmC;AACxD,OAAI,EAAE,iBAAkB;AACxB,iBAAc;KAEhB,CAAC,cAAc,QAAQ,CAKH;EACpB,WAAW;EACX,iBAAiB,WAAW,OAAO;EACnC,gBAAgB;EAChB,cAAc,UAAU,OAAO;EAC/B,iBAAiB,WAAW,OAAO;EACpC;AAED,KAAI,QACF,QACE,oBAAC,OAAD;EACO;EAEL,MAAK;EACL,UAAU,WAAW,KAAK;EAC1B,GAAK;EACL,GAAI;YAEJ,oBAAC,MAAD,EAAO,UAAgB;EACnB;AAIV,QACE,oBAAC,UAAD;EAAQ,GAAI;EAAM,GAAI;EAAuB;EAAe;EAA+B,MAAK;EAC7F;EACM"}

package/dist/Toggle.d.ts

@@ -1,18 +1,36 @@
-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> & {
-    activeColor?: ActiveColor;
-    activeTextColor?: ActiveColor;
+'use client';
+import { ToggleBase } from "./Toggle/ToggleBase.js";
+import { CSSProperties, ComponentProps, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/Toggle/Toggle.d.ts
+type ActiveColor = string;
+declare const getActiveColorStyle: (activeColor: ActiveColor | undefined, activeTextColor?: ActiveColor) => CSSProperties | undefined;
+type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggleVariants> & {
+  activeColor?: ActiveColor;
+  activeTextColor?: ActiveColor;
 };
-export declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
-    layout?: "default" | "expanded" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const Toggle: ({ ref, className, variant, size, layout, disabled, activeColor, activeTextColor, style, ...props }: ToggleProps & {
-    ref?: Ref<HTMLButtonElement>;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const toggleVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "lg" | "sm" | null | undefined;
+  layout?: "default" | "expanded" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const Toggle: ({
+  ref,
+  className,
+  variant,
+  size,
+  layout,
+  disabled,
+  activeColor,
+  activeTextColor,
+  style,
+  ...props
+}: ToggleProps & {
+  ref?: Ref<HTMLButtonElement>;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ActiveColor, Toggle, ToggleProps, getActiveColorStyle, toggleVariants };
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","names":[],"sources":["../src/components/Toggle/Toggle.tsx"],"mappings":";;;;;;;;KAKY,WAAA;AAAA,cAaC,mBAAA,GAAmB,WAAA,EAAiB,WAAA,cAAuB,eAAA,GAAoB,WAAA,KAAc,aAAA;AAAA,KAc9F,WAAA,GAAc,cAAA,QAAsB,UAAA,IAC9C,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,WAAA;AAAA;AAAA,cAGT,cAAA,GAAc,KAAA;;;;IAwB1B,iCAAA,CAAA,SAAA;AAAA,cAEY,MAAA;EAAM,GAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,eAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAWhB,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Toggle.js

@@ -1,29 +1,38 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import { t } from "./dist-tMzzRwxG.js";
-import { ToggleBase as n } from "./Toggle/ToggleBase.js";
+'use client';
+import { cn } from "./utils/twUtils.js";
+import { ToggleBase } from "./Toggle/ToggleBase.js";
 import "react";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
 //#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)
+const RAW_COLOR_PATTERN = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i;
+const BASE_COLOR_PATTERN = /^(success|warning|danger|primary|neutral|secondary)-\d+$/;
+const resolveColor = (color) => {
+	if (RAW_COLOR_PATTERN.test(color)) return color;
+	if (BASE_COLOR_PATTERN.test(color)) return `var(--horizon-color-${color})`;
+	return `var(--color-${color})`;
+};
+const getActiveColorStyle = (activeColor, activeTextColor) => {
+	if (!activeColor && !activeTextColor) return void 0;
+	return {
+		...activeColor && {
+			"--color-toggle-bg--active": resolveColor(activeColor),
+			"--color-toggle-border--active": resolveColor(activeColor)
 		},
-		...t && { "--color-toggle-text--active": o(t) }
+		...activeTextColor && { "--color-toggle-text--active": resolveColor(activeTextColor) }
 	};
-}, c = t("gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-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", {
+};
+const toggleVariants = cva(`gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-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"
+			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",
@@ -35,21 +44,26 @@ var i = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i
 		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
 });
+const Toggle = ({ ref, className, variant, size, layout, disabled, activeColor, activeTextColor, style, ...props }) => {
+	return /* @__PURE__ */ jsx(ToggleBase, {
+		ref,
+		disabled,
+		"data-slot": "toggle",
+		"data-testid": "spectral-toggle",
+		className: cn(toggleVariants({
+			variant,
+			size,
+			layout
+		}), className),
+		style: {
+			...getActiveColorStyle(activeColor, activeTextColor),
+			...style
+		},
+		...props
+	});
+};
+
 //#endregion
-export { l as Toggle, s as getActiveColorStyle, c as toggleVariants };
+export { Toggle, getActiveColorStyle, toggleVariants };
+//# sourceMappingURL=Toggle.js.map

package/dist/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type CSSProperties, type Ref } from 'react'\nimport { ToggleBase } from './ToggleBase'\n\nexport type ActiveColor = string\n\nconst RAW_COLOR_PATTERN = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\\(|transparent|currentcolor)/i\nconst BASE_COLOR_PATTERN = /^(success|warning|danger|primary|neutral|secondary)-\\d+$/\n\nconst resolveColor = (color: string): string => {\n  if (RAW_COLOR_PATTERN.test(color)) return color\n  // Base palette colors use --horizon-color-* (always available, not tree-shaken)\n  if (BASE_COLOR_PATTERN.test(color)) return `var(--horizon-color-${color})`\n  // Semantic tokens use --color-*\n  return `var(--color-${color})`\n}\n\nexport const getActiveColorStyle = (activeColor: ActiveColor | undefined, activeTextColor?: ActiveColor): CSSProperties | undefined => {\n  if (!activeColor && !activeTextColor) return undefined\n\n  return {\n    ...(activeColor && {\n      '--color-toggle-bg--active': resolveColor(activeColor),\n      '--color-toggle-border--active': resolveColor(activeColor),\n    }),\n    ...(activeTextColor && {\n      '--color-toggle-text--active': resolveColor(activeTextColor),\n    }),\n  } as CSSProperties\n}\n\nexport type ToggleProps = ComponentProps<typeof ToggleBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveColor\n  }\n\nexport const toggleVariants = cva(\n  `gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-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`,\n  {\n    variants: {\n      variant: {\n        default: 'border-toggle-border hover:border-toggle-border--hover',\n        outline: 'border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover',\n      },\n      size: {\n        default: `h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4`,\n        sm: `h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']):not([width]):not([height])]:size-3`,\n        lg: `h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']):not([width]):not([height])]:size-5`,\n      },\n      layout: {\n        default: 'w-fit',\n        expanded: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      layout: 'default',\n    },\n  },\n)\n\nexport const Toggle = ({\n  ref,\n  className,\n  variant,\n  size,\n  layout,\n  disabled,\n  activeColor,\n  activeTextColor,\n  style,\n  ...props\n}: ToggleProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  return <ToggleBase ref={ref} disabled={disabled} data-slot='toggle' data-testid='spectral-toggle' className={cn(toggleVariants({ variant, size, layout }), className)} style={{ ...getActiveColorStyle(activeColor, activeTextColor), ...style }} {...props} />\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB,UAA0B;AAC9C,KAAI,kBAAkB,KAAK,MAAM,CAAE,QAAO;AAE1C,KAAI,mBAAmB,KAAK,MAAM,CAAE,QAAO,uBAAuB,MAAM;AAExE,QAAO,eAAe,MAAM;;AAG9B,MAAa,uBAAuB,aAAsC,oBAA6D;AACrI,KAAI,CAAC,eAAe,CAAC,gBAAiB,QAAO;AAE7C,QAAO;EACL,GAAI,eAAe;GACjB,6BAA6B,aAAa,YAAY;GACtD,iCAAiC,aAAa,YAAY;GAC3D;EACD,GAAI,mBAAmB,EACrB,+BAA+B,aAAa,gBAAgB,EAC7D;EACF;;AASH,MAAa,iBAAiB,IAC5B,s0BACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACV;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,SAAS;GACT,UAAU;GACX;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,QAAQ;EACT;CACF,CACF;AAED,MAAa,UAAU,EACrB,KACA,WACA,SACA,MACA,QACA,UACA,aACA,iBACA,OACA,GAAG,YAGC;AACJ,QAAO,oBAAC,YAAD;EAAiB;EAAe;EAAU,aAAU;EAAS,eAAY;EAAkB,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAQ,CAAC,EAAE,UAAU;EAAE,OAAO;GAAE,GAAG,oBAAoB,aAAa,gBAAgB;GAAE,GAAG;GAAO;EAAE,GAAI;EAAS"}

package/dist/ToggleGroup/ToggleGroupBase.d.ts

@@ -1,37 +1,49 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from 'react';
+'use client';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ToggleGroup/ToggleGroupBase.d.ts
 type Orientation = 'horizontal' | 'vertical';
-export interface CommonGroupProps {
-    className?: string;
-    defaultValue?: string | string[];
-    disabled?: boolean;
-    loop?: boolean;
-    name?: string;
-    onValueChange?: (v: string | string[]) => void;
-    orientation?: Orientation;
-    value?: string | string[];
+interface CommonGroupProps {
+  className?: string;
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  loop?: boolean;
+  name?: string;
+  onValueChange?: (v: string | string[]) => void;
+  orientation?: Orientation;
+  value?: string | string[];
 }
-export type SingleProps = CommonGroupProps & {
-    type?: 'single';
+type SingleProps = CommonGroupProps & {
+  type?: 'single';
 };
-export type MultipleProps = CommonGroupProps & {
-    type: 'multiple';
+type MultipleProps = CommonGroupProps & {
+  type: 'multiple';
 };
-export type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
-export interface ItemRenderProps {
-    children?: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    value: string;
+type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
+interface ItemRenderProps {
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  value: string;
 }
-export declare const ToggleGroupBase: (props: ToggleGroupProps & Record<`data-${string}`, unknown>) => import("react/jsx-runtime").JSX.Element;
-export type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> & ItemRenderProps & {
-    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
-    pressed?: boolean;
-    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
-    defaultPressed?: boolean;
+declare const ToggleGroupBase: (props: ToggleGroupProps & Record<`data-${string}`, unknown>) => _$react_jsx_runtime0.JSX.Element;
+type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> & ItemRenderProps & {
+  /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */pressed?: boolean; /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
+  defaultPressed?: boolean;
 };
-export declare const ToggleGroupItemBase: ({ ref, value, disabled, className, children, onKeyDown, onClick, ...rest }: ToggleGroupItemProps & {
-    ref?: Ref<HTMLButtonElement>;
-}) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const ToggleGroupItemBase: ({
+  ref,
+  value,
+  disabled,
+  className,
+  children,
+  onKeyDown,
+  onClick,
+  ...rest
+}: ToggleGroupItemProps & {
+  ref?: Ref<HTMLButtonElement>;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CommonGroupProps, ItemRenderProps, MultipleProps, SingleProps, ToggleGroupBase, ToggleGroupItemBase, ToggleGroupItemProps, ToggleGroupProps };
 //# sourceMappingURL=ToggleGroupBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupBase.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupBase.tsx"],"mappings":";;;;;KAKK,WAAA;AAAA,UAEY,gBAAA;EACf,SAAA;EACA,YAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,aAAA,IAAiB,CAAA;EACjB,WAAA,GAAc,WAAA;EACd,KAAA;AAAA;AAAA,KAGU,WAAA,GAAc,gBAAA;EACxB,IAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,gBAAA;EAC1B,IAAA;AAAA;AAAA,KAGU,gBAAA,IAAoB,WAAA,GAAc,aAAA,IAAiB,IAAA,CAAK,cAAA,CAAe,cAAA;AAAA,UAElE,eAAA;EACf,QAAA,GAAW,SAAA;EACX,SAAA;EACA,QAAA;EACA,KAAA;AAAA;AAAA,cAiBW,eAAA,GAAe,KAAA,EAAW,gBAAA,GAAmB,MAAA,gCAAiC,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA0F/E,oBAAA,GAAuB,IAAA,CAAK,oBAAA,CAAqB,iBAAA,oEAC3D,eAAA;mFAEE,OAAA,YA3HE;EA6HF,cAAA;AAAA;AAAA,cAGS,mBAAA;EAAmB,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAS7B,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}