@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.js

@@ -1,114 +1,146 @@
-'use client'
-import '../styles/main.css'
-import { ChevronDownIcon as e } from "../Icons/ChevronDownIcon.js";
-import { t } from "../twUtils-BpqlKSeB.js";
-import { getActiveColorStyle as n, toggleVariants as r } from "../Toggle.js";
-import { ToggleGroupContext as i } from "./ToggleGroup.context.js";
-import { ToggleGroupItem as a } from "./ToggleGroupItem.js";
-import { t as o } from "../DropdownMenu-BO_RPCVU.js";
-import { useContext as s, useRef as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+'use client';
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.js";
+import { cn } from "../utils/twUtils.js";
+import { getActiveColorStyle, toggleVariants } from "../Toggle.js";
+import { ToggleGroupContext } from "../components/ToggleGroup/ToggleGroup.context.js";
+import { ToggleGroupItem } from "./ToggleGroupItem.js";
+import { DropdownMenu } from "../DropdownMenu.js";
+import { useContext, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx
-var p = ({ activeColor: p, activeTextColor: m, children: h, className: g, dropdownAlign: _ = "end", dropdownAriaLabel: v, dropdownButtonClassName: y, dropdownButtonStyle: b, dropdownCollisionPadding: x = 12, dropdownOptions: S, dropdownSide: C = "bottom", dropdownValue: w, dropdownValueLabel: T, layout: E, onDropdownValueChange: D, onKeyDown: O, size: k, style: A, triggerIcon: j = /* @__PURE__ */ d(e, { size: 16 }), value: M, variant: N, ...P }) => {
-	let [F, I] = l(!1), L = c(null), R = c(null), z = c(null), B = c(null), V = P.disabled ?? !1, H = s(i), U = N ?? H.variant, W = k ?? H.size, G = E ?? H.layout, K = H.orientation ?? "horizontal", q = p ?? H.activeColor, J = m ?? H.activeTextColor, Y = {
-		...n(q, J),
-		...A
-	}, X = (e = "first") => {
-		let t = L.current;
-		if (!t) return;
-		let n = Array.from(t.querySelectorAll("[role=\"menuitem\"]:not([data-disabled]), [role=\"menuitemcheckbox\"]:not([data-disabled]), [role=\"menuitemradio\"]:not([data-disabled])"));
-		if (n.length !== 0) {
-			if (e === "last") {
-				n[n.length - 1]?.focus();
-				return;
-			}
-			n[0]?.focus();
+const ToggleGroupSplitMenuItem = ({ activeColor, activeTextColor, children, className, dropdownAlign = "end", dropdownAriaLabel, dropdownButtonClassName, dropdownButtonStyle, dropdownCollisionPadding = 12, dropdownOptions, dropdownSide = "bottom", dropdownValue, dropdownValueLabel, layout, onDropdownValueChange, onKeyDown, size, style, triggerIcon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }), value, variant, ...props }) => {
+	const [open, setOpen] = useState(false);
+	const dropdownContentRef = useRef(null);
+	const primaryButtonRef = useRef(null);
+	const chevronButtonRef = useRef(null);
+	const openerRef = useRef(null);
+	const isDisabled = props.disabled ?? false;
+	const context = useContext(ToggleGroupContext);
+	const resolvedVariant = variant ?? context.variant;
+	const resolvedSize = size ?? context.size;
+	const resolvedLayout = layout ?? context.layout;
+	const resolvedOrientation = context.orientation ?? "horizontal";
+	const resolvedActiveColor = activeColor ?? context.activeColor;
+	const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor;
+	const sharedActiveStyle = {
+		...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor),
+		...style
+	};
+	const focusFirstEnabledDropdownItem = (focusTarget = "first") => {
+		const content = dropdownContentRef.current;
+		if (!content) return;
+		const enabledItems = Array.from(content.querySelectorAll("[role=\"menuitem\"]:not([data-disabled]), [role=\"menuitemcheckbox\"]:not([data-disabled]), [role=\"menuitemradio\"]:not([data-disabled])"));
+		if (enabledItems.length === 0) return;
+		if (focusTarget === "last") {
+			enabledItems[enabledItems.length - 1]?.focus();
+			return;
 		}
-	}, Z = (e) => {
-		B.current = e, I(!0), setTimeout(() => {
-			X("first");
+		enabledItems[0]?.focus();
+	};
+	const openMenu = (opener) => {
+		openerRef.current = opener;
+		setOpen(true);
+		setTimeout(() => {
+			focusFirstEnabledDropdownItem("first");
 		}, 0);
-	}, Q = () => {
-		let e = B.current === "primary" ? R.current : z.current;
-		B.current = null, e?.focus();
-	}, $ = (e) => {
-		if (e) {
-			B.current ||= "chevron", I(!0), setTimeout(() => {
-				X("first");
+	};
+	const restoreFocusToOpener = () => {
+		const focusTarget = openerRef.current === "primary" ? primaryButtonRef.current : chevronButtonRef.current;
+		openerRef.current = null;
+		focusTarget?.focus();
+	};
+	const handleDropdownOpenChange = (nextOpen) => {
+		if (nextOpen) {
+			if (!openerRef.current) openerRef.current = "chevron";
+			setOpen(true);
+			setTimeout(() => {
+				focusFirstEnabledDropdownItem("first");
 			}, 0);
 			return;
 		}
-		I(!1), Q();
-	}, ee = (e) => {
-		if (e.key === "ArrowDown" && K !== "vertical") {
-			e.preventDefault(), Z("primary"), O && O(e);
+		setOpen(false);
+		restoreFocusToOpener();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "ArrowDown" && resolvedOrientation !== "vertical") {
+			event.preventDefault();
+			openMenu("primary");
+			if (onKeyDown) onKeyDown(event);
 			return;
 		}
-		O && O(e);
-	}, te = (e) => {
-		if (F && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-			e.preventDefault(), X(e.key === "ArrowUp" ? "last" : "first"), O && O(e);
+		if (onKeyDown) onKeyDown(event);
+	};
+	const handleDropdownTriggerKeyDown = (event) => {
+		if (open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			focusFirstEnabledDropdownItem(event.key === "ArrowUp" ? "last" : "first");
+			if (onKeyDown) onKeyDown(event);
 			return;
 		}
-		if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " || e.key === "Space" || e.key === "Spacebar") {
-			e.preventDefault(), Z("chevron"), O && O(e);
+		if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " " || event.key === "Space" || event.key === "Spacebar") {
+			event.preventDefault();
+			openMenu("chevron");
+			if (onKeyDown) onKeyDown(event);
 			return;
 		}
-		O && O(e);
+		if (onKeyDown) onKeyDown(event);
 	};
-	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(a, {
-		activeColor: q,
-		activeTextColor: J,
-		"aria-label": P["aria-label"] ? `${P["aria-label"]}${T ? `, ${T}` : ""}` : void 0,
-		className: t("peer/spectral-split-menu rounded-r-none! border-r-0", g),
-		layout: G,
-		onKeyDown: ee,
-		ref: R,
-		size: W,
-		style: Y,
-		value: M,
-		variant: U,
-		...(({ "aria-label": e, ...t }) => t)(P),
-		children: h
-	}), /* @__PURE__ */ d(o, {
-		align: _,
-		asChild: !0,
-		collisionPadding: x,
-		disabled: V,
-		dropdownContentRef: L,
-		onOpenChange: $,
-		onValueChange: D,
-		open: F,
-		options: S,
-		side: C,
-		trigger: /* @__PURE__ */ d("button", {
-			"aria-expanded": F,
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+		activeColor: resolvedActiveColor,
+		activeTextColor: resolvedActiveTextColor,
+		"aria-label": props["aria-label"] ? `${props["aria-label"]}${dropdownValueLabel ? `, ${dropdownValueLabel}` : ""}` : void 0,
+		className: cn("peer/spectral-split-menu rounded-r-none! border-r-0", className),
+		layout: resolvedLayout,
+		onKeyDown: handleKeyDown,
+		ref: primaryButtonRef,
+		size: resolvedSize,
+		style: sharedActiveStyle,
+		value,
+		variant: resolvedVariant,
+		...(({ "aria-label": _, ...rest }) => rest)(props),
+		children
+	}), /* @__PURE__ */ jsx(DropdownMenu, {
+		align: dropdownAlign,
+		asChild: true,
+		collisionPadding: dropdownCollisionPadding,
+		disabled: isDisabled,
+		dropdownContentRef,
+		onOpenChange: handleDropdownOpenChange,
+		onValueChange: onDropdownValueChange,
+		open,
+		options: dropdownOptions,
+		side: dropdownSide,
+		trigger: /* @__PURE__ */ jsx("button", {
+			"aria-expanded": open,
 			"aria-haspopup": "menu",
-			"aria-label": v,
-			className: t(r({
-				layout: G,
-				size: W,
-				variant: U
-			}), "px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none", "data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border", "hover:opacity-100! data-[variant=outline]:hover:border-toggle-border", "before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", "peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active", "peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!", "peer-data-[state=on]/spectral-split-menu:text-toggle-text--active", "peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!", y),
-			"data-layout": G,
-			"data-size": W,
-			"data-variant": U,
-			disabled: V,
-			onKeyDown: te,
+			"aria-label": dropdownAriaLabel,
+			className: cn(toggleVariants({
+				layout: resolvedLayout,
+				size: resolvedSize,
+				variant: resolvedVariant
+			}), "px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none", "data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border", "hover:opacity-100! data-[variant=outline]:hover:border-toggle-border", "before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", "peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active", "peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!", "peer-data-[state=on]/spectral-split-menu:text-toggle-text--active", "peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!", dropdownButtonClassName),
+			"data-layout": resolvedLayout,
+			"data-size": resolvedSize,
+			"data-variant": resolvedVariant,
+			disabled: isDisabled,
+			onKeyDown: handleDropdownTriggerKeyDown,
 			onPointerDown: () => {
-				B.current = "chevron";
+				openerRef.current = "chevron";
 			},
-			ref: z,
+			ref: chevronButtonRef,
 			style: {
-				...Y,
-				...b
+				...sharedActiveStyle,
+				...dropdownButtonStyle
 			},
 			type: "button",
-			children: j
+			children: triggerIcon
 		}),
-		value: w
+		value: dropdownValue
 	})] });
 };
-p.displayName = "ToggleGroupSplitMenuItem";
+ToggleGroupSplitMenuItem.displayName = "ToggleGroupSplitMenuItem";
+
 //#endregion
-export { p as ToggleGroupSplitMenuItem };
+export { ToggleGroupSplitMenuItem };
+//# sourceMappingURL=ToggleGroupSplitMenuItem.js.map

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupSplitMenuItem.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx"],"sourcesContent":["import { DropdownMenu, type DropdownMenuOption, type DropdownMenuProps } from '@components/DropdownMenu/DropdownMenu'\nimport { ChevronDownIcon } from '@components/Icons'\nimport { getActiveColorStyle, toggleVariants } from '@components/Toggle/Toggle'\nimport { cn } from '@utils/twUtils'\nimport { useContext, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem'\n\nexport interface ToggleGroupSplitMenuItemProps extends Omit<ToggleGroupItemProps, 'children'> {\n  children: ReactNode\n  dropdownAlign?: DropdownMenuProps['align']\n  dropdownAriaLabel: string\n  dropdownButtonClassName?: string\n  dropdownCollisionPadding?: DropdownMenuProps['collisionPadding']\n  dropdownButtonStyle?: CSSProperties\n  dropdownOptions: DropdownMenuOption[]\n  dropdownSide?: DropdownMenuProps['side']\n  dropdownValue?: string | string[]\n  dropdownValueLabel?: string\n  onDropdownValueChange?: (value: string | string[]) => void\n  triggerIcon?: ReactNode\n}\n\nexport const ToggleGroupSplitMenuItem = ({\n  activeColor,\n  activeTextColor,\n  children,\n  className,\n  dropdownAlign = 'end',\n  dropdownAriaLabel,\n  dropdownButtonClassName,\n  dropdownButtonStyle,\n  dropdownCollisionPadding = 12,\n  dropdownOptions,\n  dropdownSide = 'bottom',\n  dropdownValue,\n  dropdownValueLabel,\n  layout,\n  onDropdownValueChange,\n  onKeyDown,\n  size,\n  style,\n  triggerIcon = <ChevronDownIcon size={16} />,\n  value,\n  variant,\n  ...props\n}: ToggleGroupSplitMenuItemProps) => {\n  const [open, setOpen] = useState(false)\n  const dropdownContentRef = useRef<HTMLDivElement | null>(null)\n  const primaryButtonRef = useRef<HTMLButtonElement | null>(null)\n  const chevronButtonRef = useRef<HTMLButtonElement | null>(null)\n  const openerRef = useRef<'primary' | 'chevron' | null>(null)\n  const isDisabled = props.disabled ?? false\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 resolvedOrientation = context.orientation ?? 'horizontal'\n  const resolvedActiveColor = activeColor ?? context.activeColor\n  const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor\n  const sharedActiveStyle = {\n    ...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor),\n    ...style,\n  }\n\n  const focusFirstEnabledDropdownItem = (focusTarget: 'first' | 'last' = 'first'): void => {\n    const content = dropdownContentRef.current\n    if (!content) return\n\n    const menuItemSelector = '[role=\"menuitem\"]:not([data-disabled]), [role=\"menuitemcheckbox\"]:not([data-disabled]), [role=\"menuitemradio\"]:not([data-disabled])'\n    const enabledItems = Array.from(content.querySelectorAll<HTMLElement>(menuItemSelector))\n    if (enabledItems.length === 0) return\n\n    if (focusTarget === 'last') {\n      enabledItems[enabledItems.length - 1]?.focus()\n      return\n    }\n\n    enabledItems[0]?.focus()\n  }\n\n  const openMenu = (opener: 'primary' | 'chevron'): void => {\n    openerRef.current = opener\n    setOpen(true)\n    setTimeout(() => {\n      focusFirstEnabledDropdownItem('first')\n    }, 0)\n  }\n\n  const restoreFocusToOpener = (): void => {\n    const opener = openerRef.current\n    const focusTarget = opener === 'primary' ? primaryButtonRef.current : chevronButtonRef.current\n    openerRef.current = null\n    focusTarget?.focus()\n  }\n\n  const handleDropdownOpenChange = (nextOpen: boolean): void => {\n    if (nextOpen) {\n      if (!openerRef.current) {\n        openerRef.current = 'chevron'\n      }\n      setOpen(true)\n      setTimeout(() => {\n        focusFirstEnabledDropdownItem('first')\n      }, 0)\n      return\n    }\n\n    setOpen(false)\n    restoreFocusToOpener()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'ArrowDown' && resolvedOrientation !== 'vertical') {\n      event.preventDefault()\n      openMenu('primary')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    if (onKeyDown) onKeyDown(event)\n  }\n\n  const handleDropdownTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (open && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n      event.preventDefault()\n      focusFirstEnabledDropdownItem(event.key === 'ArrowUp' ? 'last' : 'first')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    const isOpenMenuKey = event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ' || event.key === 'Space' || event.key === 'Spacebar'\n\n    if (isOpenMenuKey) {\n      event.preventDefault()\n      openMenu('chevron')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    if (onKeyDown) onKeyDown(event)\n  }\n\n  const toggleAriaLabel = props['aria-label'] ? `${props['aria-label']}${dropdownValueLabel ? `, ${dropdownValueLabel}` : ''}` : undefined\n\n  return (\n    <>\n      <ToggleGroupItem\n        activeColor={resolvedActiveColor}\n        activeTextColor={resolvedActiveTextColor}\n        aria-label={toggleAriaLabel}\n        className={cn('peer/spectral-split-menu rounded-r-none! border-r-0', className)}\n        layout={resolvedLayout}\n        onKeyDown={handleKeyDown}\n        ref={primaryButtonRef}\n        size={resolvedSize}\n        style={sharedActiveStyle}\n        value={value}\n        variant={resolvedVariant}\n        {...(({ 'aria-label': _, ...rest }) => rest)(props)}\n      >\n        {children}\n      </ToggleGroupItem>\n\n      <DropdownMenu\n        align={dropdownAlign}\n        asChild\n        collisionPadding={dropdownCollisionPadding}\n        disabled={isDisabled}\n        dropdownContentRef={dropdownContentRef}\n        onOpenChange={handleDropdownOpenChange}\n        onValueChange={onDropdownValueChange}\n        open={open}\n        options={dropdownOptions}\n        side={dropdownSide}\n        trigger={\n          <button\n            aria-expanded={open}\n            aria-haspopup='menu'\n            aria-label={dropdownAriaLabel}\n            className={cn(\n              toggleVariants({\n                layout: resolvedLayout,\n                size: resolvedSize,\n                variant: resolvedVariant,\n              }),\n              'px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none',\n              'data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border',\n              'hover:opacity-100! data-[variant=outline]:hover:border-toggle-border',\n              'before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',\n              'peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!',\n              'peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active',\n              'peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!',\n              'peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!',\n              'peer-data-[state=on]/spectral-split-menu:text-toggle-text--active',\n              'peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!',\n              dropdownButtonClassName,\n            )}\n            data-layout={resolvedLayout}\n            data-size={resolvedSize}\n            data-variant={resolvedVariant}\n            disabled={isDisabled}\n            onKeyDown={handleDropdownTriggerKeyDown}\n            onPointerDown={() => {\n              openerRef.current = 'chevron'\n            }}\n            ref={chevronButtonRef}\n            style={{ ...sharedActiveStyle, ...dropdownButtonStyle }}\n            type='button'\n          >\n            {triggerIcon}\n          </button>\n        }\n        value={dropdownValue}\n      />\n    </>\n  )\n}\n\nToggleGroupSplitMenuItem.displayName = 'ToggleGroupSplitMenuItem'\n"],"mappings":"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"}

package/dist/ToggleGroup.d.ts

@@ -1,12 +1,28 @@
-import { ActiveColor, toggleVariants } from '../Toggle/Toggle';
-import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
-import { ToggleGroupBase } from './ToggleGroupBase';
-export { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem';
-export { ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps } from './ToggleGroupSplitMenuItem';
-export type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantProps<typeof toggleVariants> & {
-    activeColor?: ActiveColor;
-    activeTextColor?: ActiveColor;
+'use client';
+import { ActiveColor, toggleVariants } from "./Toggle.js";
+import { ToggleGroupBase } from "./ToggleGroup/ToggleGroupBase.js";
+import { ToggleGroupItem, ToggleGroupItemProps } from "./ToggleGroup/ToggleGroupItem.js";
+import { ToggleGroupSplitMenuItem, ToggleGroupSplitMenuItemProps } from "./ToggleGroup/ToggleGroupSplitMenuItem.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/ToggleGroup/ToggleGroup.d.ts
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantProps<typeof toggleVariants> & {
+  activeColor?: ActiveColor;
+  activeTextColor?: ActiveColor;
 };
-export declare const ToggleGroup: ({ className, variant, size, layout, activeColor, activeTextColor, orientation, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleGroup: ({
+  className,
+  variant,
+  size,
+  layout,
+  activeColor,
+  activeTextColor,
+  orientation,
+  children,
+  ...props
+}: ToggleGroupProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps };
 //# sourceMappingURL=ToggleGroup.d.ts.map

package/dist/ToggleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.d.ts","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"mappings":";;;;;;;;;;KASY,gBAAA,GAAmB,cAAA,QAAsB,eAAA,IACnD,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,WAAA;AAAA;AAAA,cAGT,WAAA;EAAW,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,WAAA;EAAA,eAAA;EAAA,WAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAAyG,gBAAA,KAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ToggleGroup.js

@@ -1,34 +1,38 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import "./Toggle.js";
-import { ToggleGroupContext as t } from "./ToggleGroup/ToggleGroup.context.js";
-import { ToggleGroupBase as n } from "./ToggleGroup/ToggleGroupBase.js";
-import { ToggleGroupItem as r } from "./ToggleGroup/ToggleGroupItem.js";
-import { ToggleGroupSplitMenuItem as i } from "./ToggleGroup/ToggleGroupSplitMenuItem.js";
+'use client';
+import { cn } from "./utils/twUtils.js";
+import { ToggleGroupContext } from "./components/ToggleGroup/ToggleGroup.context.js";
+import { ToggleGroupBase } from "./ToggleGroup/ToggleGroupBase.js";
+import { ToggleGroupItem } from "./ToggleGroup/ToggleGroupItem.js";
+import { ToggleGroupSplitMenuItem } from "./ToggleGroup/ToggleGroupSplitMenuItem.js";
 import "react";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import "class-variance-authority";
+
 //#region src/components/ToggleGroup/ToggleGroup.tsx
-var o = ({ className: r, variant: i, size: o, layout: s, activeColor: c, activeTextColor: l, orientation: u, children: d, ...f }) => /* @__PURE__ */ a(n, {
-	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 flex h-fit w-fit items-center data-[layout='expanded']:w-full data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0", r),
-	"data-layout": s,
-	"data-size": o,
-	"data-slot": "toggle-group",
-	"data-testid": "spectral-toggle-group",
-	"data-variant": i,
-	orientation: u,
-	...f,
-	children: /* @__PURE__ */ a(t.Provider, {
-		value: {
-			variant: i,
-			size: o,
-			layout: s,
-			activeColor: c,
-			activeTextColor: l,
-			orientation: u
-		},
-		children: d
-	})
-});
+const ToggleGroup = ({ className, variant, size, layout, activeColor, activeTextColor, orientation, children, ...props }) => {
+	return /* @__PURE__ */ jsx(ToggleGroupBase, {
+		className: cn(`group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0 flex h-fit w-fit items-center data-[layout='expanded']:w-full data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0 data-[variant='outline']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)] data-[variant='outline']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]`, className),
+		"data-layout": layout,
+		"data-size": size,
+		"data-slot": "toggle-group",
+		"data-testid": "spectral-toggle-group",
+		"data-variant": variant,
+		orientation,
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				layout,
+				activeColor,
+				activeTextColor,
+				orientation
+			},
+			children
+		})
+	});
+};
+
 //#endregion
-export { o as ToggleGroup, r as ToggleGroupItem, i as ToggleGroupSplitMenuItem };
+export { ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem };
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { type ActiveColor, type toggleVariants } from '@components/Toggle/Toggle'\nimport { cn } from '@utils/twUtils'\nimport { type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupBase } from './ToggleGroupBase'\nexport { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem'\nexport { ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps } from './ToggleGroupSplitMenuItem'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveColor\n  }\n\nexport const ToggleGroup = ({ className, variant, size, layout, activeColor, activeTextColor, orientation, children, ...props }: ToggleGroupProps) => {\n  return (\n    <ToggleGroupBase\n      className={cn(\n        `group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0 flex h-fit w-fit items-center data-[layout='expanded']:w-full data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0 data-[variant='outline']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)] data-[variant='outline']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]`,\n        className,\n      )}\n      data-layout={layout}\n      data-size={size}\n      data-slot='toggle-group'\n      data-testid='spectral-toggle-group'\n      data-variant={variant}\n      orientation={orientation}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, layout, activeColor, activeTextColor, orientation }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,eAAe,EAAE,WAAW,SAAS,MAAM,QAAQ,aAAa,iBAAiB,aAAa,UAAU,GAAG,YAA8B;AACpJ,QACE,oBAAC,iBAAD;EACE,WAAW,GACT,glBACA,UACD;EACD,eAAa;EACb,aAAW;EACX,aAAU;EACV,eAAY;EACZ,gBAAc;EACD;EACb,GAAI;YAEJ,oBAAC,mBAAmB,UAApB;GAA6B,OAAO;IAAE;IAAS;IAAM;IAAQ;IAAa;IAAiB;IAAa;GAAG;GAAuC;EAClI"}

package/dist/Tooltip.d.ts

@@ -1,14 +1,37 @@
-import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-export declare const TooltipProvider: ({ delayDuration, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
-export declare const Tooltip: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
-export declare const TooltipTrigger: ({ asChild, children, ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+'use client';
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/Tooltip/Tooltip.d.ts
+declare const TooltipProvider: ({
+  delayDuration,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) => _$react_jsx_runtime0.JSX.Element;
+declare const Tooltip: ({
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Root>) => _$react_jsx_runtime0.JSX.Element;
+declare const TooltipTrigger: ({
+  asChild,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Trigger>) => _$react_jsx_runtime0.JSX.Element;
 declare const tooltipVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const TooltipContent: ({ children, className, showArrow, side, sideOffset, variant, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipVariants> & {
-    showArrow?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export {};
+  variant?: "default" | "outline" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const TooltipContent: ({
+  children,
+  className,
+  showArrow,
+  side,
+  sideOffset,
+  variant,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipVariants> & {
+  showArrow?: boolean;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","names":[],"sources":["../src/components/Tooltip/Tooltip.tsx"],"mappings":";;;;;;;;cAKa,eAAA;EAAe,aAAA;EAAA,GAAA;AAAA,GAAqC,cAAA,QAAsB,gBAAA,CAAiB,QAAA,MAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIpG,OAAA;EAAA,GAAO;AAAA,GAAkB,cAAA,QAAsB,gBAAA,CAAiB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAQrE,cAAA;EAAc,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAAqC,cAAA,QAAsB,gBAAA,CAAiB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAQzG,eAAA,GAAe,KAAA;;IAapB,iCAAA,CAAA,SAAA;AAAA,cAcY,cAAA;EAAc,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAQxB,cAAA,QAAsB,gBAAA,CAAiB,OAAA,IACxC,YAAA,QAAoB,eAAA;EAClB,SAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Tooltip.js

@@ -1,3 +1,68 @@
-'use client'
-import { i as e, n as t, r as n, t as r } from "./Tooltip-CTjKOfvC.js";
-export { r as Tooltip, t as TooltipContent, n as TooltipProvider, e as TooltipTrigger };
+'use client';
+import { cn } from "./utils/twUtils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+//#region src/components/Tooltip/Tooltip.tsx
+const TooltipProvider = ({ delayDuration = 0, ...props }) => {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+};
+const Tooltip = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+		"data-slot": "tooltip",
+		"data-testid": "spectral-tooltip",
+		...props
+	}) });
+};
+const TooltipTrigger = ({ asChild, children, ...props }) => {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+		asChild,
+		className: "w-fit",
+		"data-slot": "tooltip-trigger",
+		"data-testid": "spectral-tooltip-trigger",
+		...props,
+		children
+	});
+};
+const tooltipVariants = cva(`tooltip-effects rounded-md px-3 py-1.5 text-xs pointer-events-auto z-50 w-fit bg-tooltip-bg text-text-primary will-change-transform outline-none select-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95`, {
+	variants: { variant: {
+		default: "",
+		outline: "border-2 border-tooltip-outline-border"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const tooltipArrowVariants = cva("size-2.5 z-[-1] rotate-45 rounded-[2px] bg-tooltip-arrow fill-tooltip-arrow", {
+	variants: { variant: {
+		default: "-translate-y-[calc(50%+1px)]",
+		outline: "-translate-y-[calc(50%-1.5px)] border-2 border-t-0 border-l-0 border-tooltip-outline-arrow"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const TooltipContent = ({ children, className, showArrow = false, side, sideOffset = 0, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+		"data-testid": "spectral-tooltip-portal",
+		"data-slot": "tooltip-portal",
+		children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
+			className: cn(tooltipVariants({ variant }), className),
+			"data-slot": "tooltip-content",
+			"data-testid": "spectral-tooltip-content",
+			side,
+			sideOffset,
+			...props,
+			children: [children, showArrow && /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, {
+				className: cn(tooltipArrowVariants({ variant })),
+				height: 8
+			})]
+		})
+	});
+};
+
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport const TooltipProvider = ({ delayDuration = 0, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider data-slot='tooltip-provider' delayDuration={delayDuration} {...props} />\n}\n\nexport const Tooltip = ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot='tooltip' data-testid='spectral-tooltip' {...props} />\n    </TooltipProvider>\n  )\n}\n\nexport const TooltipTrigger = ({ asChild, children, ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return (\n    <TooltipPrimitive.Trigger asChild={asChild} className='w-fit' data-slot='tooltip-trigger' data-testid='spectral-tooltip-trigger' {...props}>\n      {children}\n    </TooltipPrimitive.Trigger>\n  )\n}\n\nconst tooltipVariants = cva(\n  `tooltip-effects rounded-md px-3 py-1.5 text-xs pointer-events-auto z-50 w-fit bg-tooltip-bg text-text-primary will-change-transform outline-none select-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95`,\n  {\n    variants: {\n      variant: {\n        default: '',\n        outline: 'border-2 border-tooltip-outline-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nconst tooltipArrowVariants = cva('size-2.5 z-[-1] rotate-45 rounded-[2px] bg-tooltip-arrow fill-tooltip-arrow', {\n  variants: {\n    variant: {\n      default: '-translate-y-[calc(50%+1px)]',\n      outline: '-translate-y-[calc(50%-1.5px)] border-2 border-t-0 border-l-0 border-tooltip-outline-arrow',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const TooltipContent = ({\n  children,\n  className,\n  showArrow = false,\n  side,\n  sideOffset = 0,\n  variant = 'default',\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content> &\n  VariantProps<typeof tooltipVariants> & {\n    showArrow?: boolean\n  }) => {\n  return (\n    <TooltipPrimitive.Portal data-testid='spectral-tooltip-portal' data-slot='tooltip-portal'>\n      <TooltipPrimitive.Content className={cn(tooltipVariants({ variant }), className)} data-slot='tooltip-content' data-testid='spectral-tooltip-content' side={side} sideOffset={sideOffset} {...props}>\n        {children}\n        {showArrow && <TooltipPrimitive.Arrow className={cn(tooltipArrowVariants({ variant }))} height={8} />}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAKA,MAAa,mBAAmB,EAAE,gBAAgB,GAAG,GAAG,YAA8D;AACpH,QAAO,oBAAC,iBAAiB,UAAlB;EAA2B,aAAU;EAAkC;EAAe,GAAI;EAAS;;AAG5G,MAAa,WAAW,EAAE,GAAG,YAA0D;AACrF,QACE,oBAAC,iBAAD,YACE,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,eAAY;EAAmB,GAAI;EAAS,GACvE;;AAItB,MAAa,kBAAkB,EAAE,SAAS,UAAU,GAAG,YAA6D;AAClH,QACE,oBAAC,iBAAiB,SAAlB;EAAmC;EAAS,WAAU;EAAQ,aAAU;EAAkB,eAAY;EAA2B,GAAI;EAClI;EACwB;;AAI/B,MAAM,kBAAkB,IACtB,ymBACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAM,uBAAuB,IAAI,+EAA+E;CAC9G,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,UACA,WACA,YAAY,OACZ,MACA,aAAa,GACb,UAAU,WACV,GAAG,YAIG;AACN,QACE,oBAAC,iBAAiB,QAAlB;EAAyB,eAAY;EAA0B,aAAU;YACvE,qBAAC,iBAAiB,SAAlB;GAA0B,WAAW,GAAG,gBAAgB,EAAE,SAAS,CAAC,EAAE,UAAU;GAAE,aAAU;GAAkB,eAAY;GAAiC;GAAkB;GAAY,GAAI;aAA7L,CACG,UACA,aAAa,oBAAC,iBAAiB,OAAlB;IAAwB,WAAW,GAAG,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAAE,QAAQ;IAAK,EAC5E;;EACH"}