@spear-ai/spectral 1.11.2 → 1.12.0

package/dist/utils/dropdownPositioning.js

@@ -0,0 +1,43 @@
+"use client";
+import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
+//#region src/utils/dropdownPositioning.ts
+var i = 12, a = (e, t, n = i) => {
+	let r = n, a = t - n, o = e.right - a;
+	if (o > 0) return -o;
+	let s = r - e.left;
+	return s > 0 ? s : 0;
+}, o = (i = !0) => {
+	let [o, s] = r(null), [c, l] = r(0), u = e(() => {
+		if (!i || !o) {
+			l(0);
+			return;
+		}
+		let e = a(o.getBoundingClientRect(), window.innerWidth);
+		l((t) => Math.abs(t - e) < .5 ? t : e);
+	}, [o, i]);
+	return t(() => {
+		if (!i || !o) return;
+		let e = requestAnimationFrame(() => {
+			u();
+		}), t = () => {
+			u();
+		};
+		window.addEventListener("resize", t), window.addEventListener("scroll", t, !0);
+		let n = null;
+		return typeof ResizeObserver < "u" && (n = new ResizeObserver(() => {
+			u();
+		}), n.observe(o)), () => {
+			cancelAnimationFrame(e), window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0), n?.disconnect();
+		};
+	}, [
+		o,
+		i,
+		u
+	]), {
+		dropdownShiftStyle: n(() => c === 0 ? null : { marginLeft: `${c}px` }, [c]),
+		recalculateDropdownPosition: u,
+		setDropdownElement: s
+	};
+};
+//#endregion
+export { a as getDropdownHorizontalShift, o as useAutoDropdownHorizontalShift };

package/dist/utils/dropdownPositioning.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdownPositioning.test.d.ts.map

package/dist/utils/dropdownPositioning.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownPositioning.test.d.ts","sourceRoot":"","sources":["../../src/utils/dropdownPositioning.test.ts"],"names":[],"mappings":""}

package/dist/utils/dropdownPositioning.test.js

@@ -0,0 +1,21 @@
+import { getDropdownHorizontalShift as e } from "./dropdownPositioning.js";
+//#region src/utils/dropdownPositioning.test.ts
+describe("getDropdownHorizontalShift", () => {
+	it("returns zero when dropdown fits viewport", () => {
+		expect(e({
+			left: 100,
+			right: 500
+		}, 1200)).toBe(0);
+	}), it("returns negative shift when right edge overflows", () => {
+		expect(e({
+			left: 700,
+			right: 1220
+		}, 1200)).toBe(-32);
+	}), it("returns positive shift when left edge overflows", () => {
+		expect(e({
+			left: -10,
+			right: 300
+		}, 1200)).toBe(22);
+	});
+});
+//#endregion

package/dist/utils/formFieldUtils.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode } from 'react';
+import { CSSProperties, KeyboardEvent, ReactNode } from 'react';
 export type FormFieldState = 'default' | 'error' | 'warning' | 'disabled' | 'loading' | 'success';
 export interface BaseFormFieldProps {
     disabled?: boolean;
@@ -22,6 +22,19 @@ export interface BaseOption {
     value: string;
 }
 export type DropdownWidth = 'trigger' | 'content' | (string & {});
+export type DropdownWidthMode = 'trigger' | 'content' | 'custom';
+interface DropdownWidthStyleConfig {
+    dropdownWidth: DropdownWidth;
+    triggerStyleWidth?: string;
+    triggerWidth: string;
+    viewportMaxWidth?: string;
+}
+export declare const getDropdownWidthStyles: ({ dropdownWidth, triggerStyleWidth, triggerWidth, viewportMaxWidth, }: DropdownWidthStyleConfig) => {
+    dropdownOverflowStyle: CSSProperties;
+    dropdownWidthMode: DropdownWidthMode;
+    dropdownWidthStyle: CSSProperties;
+    resolvedDropdownWidth: string;
+};
 export declare const getStateClasses: (state: FormFieldState) => string;
 export declare const getTriggerClasses: (isOpen: boolean | undefined, state: FormFieldState, className?: string) => string;
 export declare const getDropdownClasses: (isOpen: boolean, position?: "top" | "bottom") => string;
@@ -79,4 +92,5 @@ export declare const WarningMessage: ({ className, id, dataTestId, message }: {
 }) => import("react/jsx-runtime").JSX.Element | null;
 export declare const getOptionClasses: (isDisabled: boolean | undefined, isFocused: boolean, isSelected: boolean) => string;
 export declare const scrollIntoView: (element: HTMLElement | null) => void;
+export {};
 //# sourceMappingURL=formFieldUtils.d.ts.map

package/dist/utils/formFieldUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formFieldUtils.d.ts","sourceRoot":"","sources":["../../src/utils/formFieldUtils.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"formFieldUtils.d.ts","sourceRoot":"","sources":["../../src/utils/formFieldUtils.tsx"],"names":[],"mappings":"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"}

package/dist/utils/formFieldUtils.js

@@ -1,37 +1,53 @@
 "use client";
-import { t as e } from "../twUtils-VNWgstKL.js";
+import { t as e } from "../twUtils-D_qzdiwM.js";
 import { useCallback as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/utils/formFieldUtils.tsx
-var s = (e) => ({
+var s = ({ dropdownWidth: e, triggerStyleWidth: t, triggerWidth: n, viewportMaxWidth: r = "calc(100vw - 2rem)" }) => {
+	let i = e === "trigger" ? "trigger" : e === "content" ? "content" : "custom", a = e === "trigger" ? n : e === "content" ? "max-content" : e, o = {
+		maxWidth: r,
+		overflowX: "auto",
+		overflowY: "auto"
+	};
+	return {
+		dropdownOverflowStyle: o,
+		dropdownWidthMode: i,
+		dropdownWidthStyle: e === "trigger" ? { width: t ?? n } : {
+			width: a,
+			...e === "content" ? { minWidth: "max-content" } : {},
+			...o
+		},
+		resolvedDropdownWidth: a
+	};
+}, c = (e) => ({
 	success: "border-success-400 hover:border-success-500 focus-visible:border-success-400 focus-visible:outline-success-400",
 	error: "border-danger-400 hover:border-danger-500 focus-visible:border-danger-400 focus-visible:outline-danger-400",
 	warning: "border-warning-400 hover:border-warning-400 focus-visible:border-warning-400 focus-visible:outline-warning-400",
 	loading: "cursor-wait border-input-border--disabled pointer-events-none",
 	disabled: "cursor-not-allowed opacity-50 border-input-border--disabled text-input-text--disabled",
 	default: ""
-})[e], c = (t = !1, n, r) => e("h-12 rounded-lg px-4 text-base flex w-full items-center justify-between border-2 border-input-border bg-input-bg", "text-input-text transition duration-200 hover:border-input-border--hover focus:border-input-border--focus focus:outline-none", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", "disabled:cursor-not-allowed disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:opacity-50", t && "border-input-border--focus outline outline-2 outline-offset-2 outline-input-border--focus", s(n), r), l = (t, n = "bottom") => {
+})[e], l = (t = !1, n, r) => e("h-12 rounded-lg px-4 text-base flex w-full items-center justify-between border-2 border-input-border bg-input-bg", "text-input-text transition duration-200 hover:border-input-border--hover focus:border-input-border--focus focus:outline-none", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", "disabled:cursor-not-allowed disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:opacity-50", t && "border-input-border--focus outline outline-2 outline-offset-2 outline-input-border--focus", c(n), r), u = (t, n = "bottom") => {
 	let r = n === "bottom" ? "top-full mt-1 origin-top" : "bottom-full mb-1 origin-bottom", i = n === "bottom" ? t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none" : t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 translate-y-1 pointer-events-none";
-	return e("left-0 right-0 absolute z-50", u(), "transition-[opacity,transform] duration-150 motion-reduce:transform-none motion-reduce:transition-none", "will-change-[opacity,transform]", r, i);
-}, u = () => "rounded-lg border border-input-border bg-input-bg shadow-md", d = (t, n) => e("peer h-12 rounded-md ps-3 pe-12 text-base flex w-full border-2 border-input-border bg-input-bg transition duration-200", "placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus:outline-none", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", "disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", s(t), n), f = (t, n) => e("peer h-24 rounded-md p-3 text-base flex w-full resize-none border-2 border-input-border bg-input-bg transition duration-200", "placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus:outline-none", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", "disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", s(t), n), p = (e, t) => {
+	return e("left-0 right-0 absolute z-50", d(), "transition-[opacity,transform] duration-150 motion-reduce:transform-none motion-reduce:transition-none", "will-change-[opacity,transform]", r, i);
+}, d = () => "rounded-lg border border-input-border bg-input-bg shadow-md", f = (t, n) => e("peer h-12 rounded-md ps-3 pe-12 text-base flex w-full border-2 border-input-border bg-input-bg transition duration-200", "placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus:outline-none", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", "disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", c(t), n), p = (t, n) => e("peer h-24 rounded-md p-3 text-base flex w-full resize-none border-2 border-input-border bg-input-bg transition duration-200", "placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus:outline-none", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", "disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", c(t), n), m = (e, t) => {
 	let n = r();
 	if (e) return e;
 	let i = t?.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-_.:]/g, "");
 	return i ? `${i}-${n}` : n;
-}, m = (e) => `${e}-error`, h = (t, n, r, i) => ({
+}, h = (e) => `${e}-error`, g = (t, n, r, i) => ({
 	"aria-invalid": t === "error",
 	"aria-required": r,
 	"aria-describedby": e((t === "error" || t === "warning") && i, n) || void 0
-}), g = (e = {}) => ({
+}), _ = (e = {}) => ({
 	"--field-border-radius": "0.5rem",
 	"--field-height": "3rem",
 	"--field-padding": "1rem",
 	...e
-}), _ = (e, t = "default") => ({
+}), v = (e, t = "default") => ({
 	isDisabled: e ?? t === "disabled",
 	isLoading: t === "loading",
 	isInvalid: t === "error"
-}), v = (e) => {
+}), y = (e) => {
 	let t = i(null);
 	return n(() => {
 		let n = (n) => {
@@ -39,7 +55,7 @@ var s = (e) => ({
 		};
 		return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
 	}, [e]), t;
-}, y = (e, r = !1, i, o, s, c) => {
+}, b = (e, r = !1, i, o, s, c) => {
 	let [l, u] = a(-1);
 	n(() => {
 		if (e) if (r) u(0);
@@ -103,7 +119,7 @@ var s = (e) => ({
 		]),
 		isOpen: e
 	};
-}, b = (e) => {
+}, x = (e) => {
 	let t = {}, n = [];
 	return e.forEach((e) => {
 		e.group ? (t[e.group] || (t[e.group] = []), t[e.group].push(e)) : n.push(e);
@@ -112,17 +128,17 @@ var s = (e) => ({
 		ungrouped: n,
 		hasGroups: Object.keys(t).length > 0
 	};
-}, x = ({ className: t, message: n = "Loading…" }) => /* @__PURE__ */ o("div", {
+}, S = ({ className: t, message: n = "Loading…" }) => /* @__PURE__ */ o("div", {
 	"aria-live": "polite",
 	className: e("gap-2 py-6 text-base text-input-text-secondary flex items-center justify-center", t),
 	role: "status",
 	children: n
-}), S = ({ className: t, message: n = "No options found" }) => /* @__PURE__ */ o("div", {
+}), C = ({ className: t, message: n = "No options found" }) => /* @__PURE__ */ o("div", {
 	className: e("py-6 text-base text-center text-text-secondary", t),
 	role: "status",
 	children: n
-}), C = (e) => e ? typeof e == "string" ? e : Array.isArray(e) ? e.join(", ") : typeof e == "object" ? e.message ? e.message : e.error ? e.error : e.details ? e.details : JSON.stringify(e) : String(e) : null, w = ({ className: t, id: n, dataTestId: r, message: i }) => {
-	let a = C(i);
+}), w = (e) => e ? typeof e == "string" ? e : Array.isArray(e) ? e.join(", ") : typeof e == "object" ? e.message ? e.message : e.error ? e.error : e.details ? e.details : JSON.stringify(e) : String(e) : null, T = ({ className: t, id: n, dataTestId: r, message: i }) => {
+	let a = w(i);
 	return a ? /* @__PURE__ */ o("p", {
 		"aria-atomic": "true",
 		"aria-live": "assertive",
@@ -132,8 +148,8 @@ var s = (e) => ({
 		role: "alert",
 		children: a
 	}) : null;
-}, T = ({ className: t, id: n, dataTestId: r, message: i }) => {
-	let a = C(i);
+}, E = ({ className: t, id: n, dataTestId: r, message: i }) => {
+	let a = w(i);
 	return a ? /* @__PURE__ */ o("p", {
 		"aria-atomic": "true",
 		"aria-live": "polite",
@@ -143,11 +159,11 @@ var s = (e) => ({
 		role: "status",
 		children: a
 	}) : null;
-}, E = (t = !1, n, r) => e("rounded-sm py-1.5 pl-2 pr-8 text-base relative flex w-full cursor-pointer items-center outline-none select-none hover:bg-input-bg--hover", n && "bg-input-bg--hover", r && "bg-input-bg--selected text-input-text", t && "pointer-events-none text-input-text--disabled"), D = (e) => {
+}, D = (t = !1, n, r) => e("rounded-sm py-1.5 pl-2 pr-8 text-base relative flex w-full cursor-pointer items-center outline-none select-none hover:bg-input-bg--hover", n && "bg-input-bg--hover", r && "bg-input-bg--selected text-input-text", t && "pointer-events-none text-input-text--disabled"), O = (e) => {
 	e && e.scrollIntoView({
 		block: "nearest",
 		behavior: "smooth"
 	});
 };
 //#endregion
-export { S as EmptyState, w as ErrorMessage, x as LoadingState, T as WarningMessage, h as getAriaProps, l as getDropdownClasses, u as getDropdownSurfaceClasses, m as getErrorMessageId, g as getFormFieldCSSProperties, d as getInputClasses, E as getOptionClasses, s as getStateClasses, f as getTextareaClasses, c as getTriggerClasses, b as groupOptions, D as scrollIntoView, v as useClickOutside, p as useFormFieldId, _ as useFormFieldState, y as useKeyboardNavigation };
+export { C as EmptyState, T as ErrorMessage, S as LoadingState, E as WarningMessage, g as getAriaProps, u as getDropdownClasses, d as getDropdownSurfaceClasses, s as getDropdownWidthStyles, h as getErrorMessageId, _ as getFormFieldCSSProperties, f as getInputClasses, D as getOptionClasses, c as getStateClasses, p as getTextareaClasses, l as getTriggerClasses, x as groupOptions, O as scrollIntoView, y as useClickOutside, m as useFormFieldId, v as useFormFieldState, b as useKeyboardNavigation };

package/dist/utils/twUtils.js

@@ -1,2 +1,2 @@
-import { t as e } from "../twUtils-VNWgstKL.js";
+import { t as e } from "../twUtils-D_qzdiwM.js";
 export { e as cn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spear-ai/spectral",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "type": "module",
   "private": false,
   "repository": {
@@ -52,6 +52,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
@@ -68,7 +69,7 @@
     "motion": "^12.38.0",
     "react-day-picker": "^9.14.0",
     "react-remove-scroll": "^2.7.2",
-    "react-router": "^7.13.2",
+    "react-router": "^7.14.2",
     "react-use-measure": "^2.1.7",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
@@ -78,45 +79,45 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.30.0",
+    "@changesets/cli": "^2.31.0",
     "@chromatic-com/storybook": "^4.1.3",
     "@github-ui/storybook-addon-performance-panel": "^1.1.4",
-    "@sentry/react": "^10.41.0",
+    "@sentry/react": "^10.50.0",
     "@sentry/vite-plugin": "^4.9.1",
-    "@storybook/addon-docs": "^10.3.4",
-    "@storybook/addon-themes": "^10.3.4",
-    "@storybook/addon-vitest": "^10.3.4",
-    "@storybook/builder-vite": "^10.3.4",
-    "@storybook/react-vite": "^10.3.4",
-    "@tailwindcss/vite": "^4.2.2",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-themes": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@tailwindcss/vite": "^4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.12.0",
+    "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/browser-playwright": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
+    "@vitest/browser": "^4.1.5",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/ui": "^4.1.5",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "glob": "^13.0.6",
     "http-server": "^14.1.1",
-    "oxlint": "^1.58.0",
+    "oxfmt": "^0.43.0",
+    "oxlint": "^1.61.0",
     "oxlint-tsgolint": "^0.11.5",
     "playwright": "^1.58.2",
-    "oxfmt": "^0.43.0",
-    "storybook": "^10.2.14",
+    "storybook": "^10.3.5",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^39.0.1",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "typescript": "^5.9.3",
-    "vite": "^8.0.5",
+    "vite": "^8.0.10",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.2",
-    "vitest-browser-react": "^2.1.0"
+    "vitest": "^4.1.5",
+    "vitest-browser-react": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -151,10 +152,13 @@
     "changeset": "changeset",
     "changeset:version": "changeset version",
     "changeset:publish": "changeset publish",
+    "changelog:generate": "node scripts/generate-storybook-changelog.js",
+    "release:version": "pnpm run changeset:version && pnpm run changelog:generate",
     "clean": "rm -rf $(find dist -maxdepth 1 ! -name \"node_modules\") && rm pnpm-lock.yaml",
     "clean:build-artifacts": "find .storybook -name '*.js' -not -name '*.config.js' -delete && find .storybook -name '*.d.ts' -delete && find . -name '*.d.ts' -path './vite.config.d.ts' -delete && rm -rf storybook-static",
     "icons:update": "node scripts/update-icons-index.js",
     "test": "vitest run",
+    "test:form-fields": "vitest run src/components/Select/Select.test.tsx src/components/Combobox/Combobox.test.tsx src/components/MultiSelect/MultiSelect.test.tsx src/components/Textarea/Textarea.test.tsx src/components/DateTimePicker/DateTimePicker.test.tsx src/components/InputOTP/InputOTP.test.tsx src/components/Checkbox/Checkbox.test.tsx src/components/Switch/Switch.test.tsx src/components/RadioGroup/RadioGroup.test.tsx src/components/ControlGroup/ControlGroupSelect.test.tsx",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage"