@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/Tray.d.ts

@@ -1,66 +1,110 @@
-import { VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { Drawer as TrayBase } from 'vaul';
+'use client';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import { Drawer } from "vaul";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/Tray/Tray.d.ts
 declare const TrayContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "full" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TrayBaseProps = ComponentPropsWithoutRef<typeof TrayBase.Root> & {
-    children?: ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'full';
+  size?: "full" | "lg" | "md" | "sm" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+type TrayBaseProps = ComponentPropsWithoutRef<typeof Drawer.Root> & {
+  children?: ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'full';
 };
-export declare const Tray: {
-    ({ children, size, ...props }: TrayBaseProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+declare function Tray({
+  children,
+  size,
+  ...props
+}: TrayBaseProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace Tray {
+  var displayName: string;
+}
+declare function TrayTrigger({
+  className,
+  ref,
+  ...props
+}: ComponentPropsWithoutRef<typeof Drawer.Trigger> & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TrayTrigger {
+  var displayName: string;
+}
+declare function TrayClose({
+  className,
+  ref,
+  ...props
+}: ComponentPropsWithoutRef<typeof Drawer.Close> & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TrayClose {
+  var displayName: string;
+}
+type TrayContentProps = ComponentPropsWithoutRef<typeof Drawer.Content> & VariantProps<typeof TrayContentVariants> & {
+  /** Accessible label for the tray (used when no visible `TrayTitle` is provided). */'aria-label'?: string;
+  children?: ReactNode;
 };
-export declare const TrayTrigger: {
-    ({ className, ref, ...props }: ComponentPropsWithoutRef<typeof TrayBase.Trigger> & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+declare function TrayContent({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  ref,
+  size: sizeProp,
+  ...props
+}: TrayContentProps & {
+  ref?: Ref<HTMLDivElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TrayContent {
+  var displayName: string;
+}
+declare function TrayHeader({
+  children,
+  className,
+  ref,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & {
+  ref?: Ref<HTMLDivElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TrayHeader {
+  var displayName: string;
+}
+declare function TrayTitle({
+  children,
+  className,
+  ref,
+  ...props
+}: ComponentPropsWithoutRef<'h2'> & {
+  ref?: Ref<HTMLHeadingElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TrayTitle {
+  var displayName: string;
+}
+declare function TraySubtitle({
+  className,
+  ref,
+  ...props
+}: ComponentPropsWithoutRef<'p'> & {
+  ref?: Ref<HTMLParagraphElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TraySubtitle {
+  var displayName: string;
+}
+type TrayBodyProps = ComponentPropsWithoutRef<'div'> & {
+  animationKey?: string | number;
 };
-export declare const TrayClose: {
-    ({ className, ref, ...props }: ComponentPropsWithoutRef<typeof TrayBase.Close> & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type TrayContentProps = ComponentPropsWithoutRef<typeof TrayBase.Content> & VariantProps<typeof TrayContentVariants> & {
-    /** Accessible label for the tray (used when no visible `TrayTitle` is provided). */
-    'aria-label'?: string;
-    children?: ReactNode;
-};
-export declare const TrayContent: {
-    ({ "aria-label": ariaLabel, children, className, ref, size: sizeProp, ...props }: TrayContentProps & {
-        ref?: Ref<HTMLDivElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const TrayHeader: {
-    ({ children, className, ref, ...props }: ComponentPropsWithoutRef<"div"> & {
-        ref?: Ref<HTMLDivElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const TrayTitle: {
-    ({ children, className, ref, ...props }: ComponentPropsWithoutRef<"h2"> & {
-        ref?: Ref<HTMLHeadingElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const TraySubtitle: {
-    ({ className, ref, ...props }: ComponentPropsWithoutRef<"p"> & {
-        ref?: Ref<HTMLParagraphElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type TrayBodyProps = ComponentPropsWithoutRef<'div'> & {
-    animationKey?: string | number;
-};
-export declare const TrayBody: {
-    ({ animationKey: keyProp, children, className, ref, ...props }: TrayBodyProps & {
-        ref?: Ref<HTMLDivElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};
+declare function TrayBody({
+  animationKey: keyProp,
+  children,
+  className,
+  ref,
+  ...props
+}: TrayBodyProps & {
+  ref?: Ref<HTMLDivElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace TrayBody {
+  var displayName: string;
+}
+//#endregion
+export { Tray, TrayBaseProps, TrayBody, TrayBodyProps, TrayClose, TrayContent, TrayContentProps, TrayHeader, TraySubtitle, TrayTitle, TrayTrigger };
 //# sourceMappingURL=Tray.d.ts.map

package/dist/Tray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tray.d.ts","names":[],"sources":["../src/components/Tray/Tray.tsx"],"mappings":";;;;;;;;cASM,mBAAA,GAAmB,KAAA;;IAYvB,iCAAA,CAAA,SAAA;AAAA,KAkBU,aAAA,GAAgB,wBAAA,QAAgC,MAAA,CAAS,IAAA;EACnE,QAAA,GAAW,SAAA;EACX,IAAA;AAAA;AAAA;EAGqB,QAAA;EAAU,IAAA;EAAA,GAAgB;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAyBrE,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,MAAA,CAAS,OAAA;EAC1C,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAIC,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,MAAA,CAAS,KAAA;EAC1C,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KAgBW,gBAAA,GAAmB,wBAAA,QAAgC,MAAA,CAAS,OAAA,IACtE,YAAA,QAAoB,mBAAA;sFAElB,YAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA;gBAIC,SAAA;EACd,QAAA;EACA,SAAA;EACA,GAAA;EACA,IAAA,EAAM,QAAA;EAAA,GACH;AAAA,GACF,gBAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA8BC,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAWC,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,kBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAQC,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,oBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KAGW,aAAA,GAAgB,wBAAA;EAC1B,YAAA;AAAA;AAAA;EAIA,YAAA,EAAc,OAAA;EACd,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,aAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Tray.js

@@ -1,17 +1,16 @@
-'use client'
-import './styles/main.css'
-import { CloseIcon as e } from "./Icons/CloseIcon.js";
-import { t } from "./twUtils-BpqlKSeB.js";
-import { t as n } from "./dist-tMzzRwxG.js";
-import { ButtonIcon as r } from "./ButtonIcon.js";
-import { t as i } from "./dist-CrYg_9Cu.js";
-import { t as a } from "./proxy-BFVscmYQ.js";
-import { t as o } from "./AnimatePresence-Bz_JZ2ah.js";
-import { t as s } from "./dist-Cc8NfAO6.js";
-import { createContext as c, useContext as l, useMemo as u, useRef as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+'use client';
+import { CloseIcon } from "./Icons/CloseIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { ButtonIcon } from "./ButtonIcon.js";
+import { createContext, useContext, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Drawer } from "vaul";
+import { AnimatePresence, motion } from "motion/react";
+import useMeasure from "react-use-measure";
+
 //#region src/components/Tray/Tray.tsx
-var m = n("bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full -translate-x-1/2 overflow-hidden bg-drawer-bg outline-none", {
+const TrayContentVariants = cva("bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full -translate-x-1/2 overflow-hidden bg-drawer-bg outline-none", {
 	variants: { size: {
 		sm: "max-w-[400px]",
 		md: "max-w-[600px]",
@@ -19,64 +18,70 @@ var m = n("bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full
 		full: "max-w-full"
 	} },
 	defaultVariants: { size: "sm" }
-}), h = c(void 0), g = () => {
-	let e = l(h);
-	if (!e) throw Error("Tray components must be used within Tray root");
-	return e;
-}, _ = ({ children: e, size: t = "sm", ...n }) => {
-	let r = d("default"), a = u(() => ({
-		animationKey: r.current,
-		setAnimationKey: (e) => {
-			r.current = e;
+});
+const TrayContext = createContext(void 0);
+const useTrayContext = () => {
+	const context = useContext(TrayContext);
+	if (!context) throw new Error("Tray components must be used within Tray root");
+	return context;
+};
+const Tray = ({ children, size = "sm", ...props }) => {
+	const animationKeyRef = useRef("default");
+	const contextValue = useMemo(() => ({
+		animationKey: animationKeyRef.current,
+		setAnimationKey: (key) => {
+			animationKeyRef.current = key;
 		},
-		size: t
-	}), [t]);
-	return /* @__PURE__ */ f(h.Provider, {
-		value: a,
-		children: /* @__PURE__ */ f(i.Root, {
+		size
+	}), [size]);
+	return /* @__PURE__ */ jsx(TrayContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
 			"data-testid": "spectral-tray",
-			...n,
-			children: e
+			...props,
+			children
 		})
 	});
 };
-_.displayName = "Tray";
-var v = ({ className: e, ref: n, ...r }) => /* @__PURE__ */ f(i.Trigger, {
-	className: t(e),
+Tray.displayName = "Tray";
+const TrayTrigger = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Trigger, {
+	className: cn(className),
 	"data-testid": "spectral-tray-trigger",
 	"data-vaul-no-drag": "",
-	ref: n,
-	...r
+	ref,
+	...props
 });
-v.displayName = "TrayTrigger";
-var y = ({ className: n, ref: r, ...a }) => /* @__PURE__ */ f(i.Close, {
-	asChild: !0,
-	className: t(n),
+TrayTrigger.displayName = "TrayTrigger";
+const TrayClose = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Close, {
+	asChild: true,
+	className: cn(className),
 	"data-testid": "spectral-tray-close",
 	"data-vaul-no-drag": "",
-	ref: r,
-	...a,
-	children: /* @__PURE__ */ f(e, {})
+	ref,
+	...props,
+	children: /* @__PURE__ */ jsx(CloseIcon, {})
 });
-y.displayName = "TrayClose";
-var b = ({ className: e, ref: n, ...r }) => /* @__PURE__ */ f(i.Overlay, {
-	className: t("inset-0 fixed z-10 bg-overlay", e),
-	ref: n,
-	...r
+TrayClose.displayName = "TrayClose";
+const TrayOverlay = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Overlay, {
+	className: cn("inset-0 fixed z-10 bg-overlay", className),
+	ref,
+	...props
 });
-b.displayName = "TrayOverlay";
-var x = ({ "aria-label": e, children: n, className: r, ref: o, size: c, ...l }) => {
-	let { size: u } = g(), d = c ?? u, [h, _] = s();
-	return /* @__PURE__ */ p(i.Portal, { children: [/* @__PURE__ */ f(b, {}), /* @__PURE__ */ f(i.Content, {
+TrayOverlay.displayName = "TrayOverlay";
+const TrayContent = ({ "aria-label": ariaLabel, children, className, ref, size: sizeProp, ...props }) => {
+	const { size: contextSize } = useTrayContext();
+	const size = sizeProp ?? contextSize;
+	const [elementRef, bounds] = useMeasure();
+	return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(TrayOverlay, {}), /* @__PURE__ */ jsx(Drawer.Content, {
 		"aria-describedby": void 0,
-		asChild: !0,
-		className: t(m({ size: d }), r),
+		asChild: true,
+		className: cn(TrayContentVariants({ size }), className),
 		"data-testid": "spectral-tray-content",
-		ref: o,
-		...l,
-		children: /* @__PURE__ */ p(a.div, {
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(motion.div, {
 			animate: {
-				height: _.height,
+				height: bounds.height,
 				transition: {
 					duration: .27,
 					ease: [
@@ -87,65 +92,76 @@ var x = ({ "aria-label": e, children: n, className: r, ref: o, size: c, ...l })
 					]
 				}
 			},
-			children: [/* @__PURE__ */ f(i.Title, {
+			children: [/* @__PURE__ */ jsx(Drawer.Title, {
 				className: "sr-only",
-				children: e ?? "Tray"
-			}), /* @__PURE__ */ f("div", {
-				ref: h,
+				children: ariaLabel ?? "Tray"
+			}), /* @__PURE__ */ jsx("div", {
+				ref: elementRef,
 				className: "px-6 pb-6 pt-2.5 antialiased",
-				children: n
+				children
 			})]
 		})
 	})] });
 };
-x.displayName = "TrayContent";
-var S = ({ children: n, className: i, ref: a, ...o }) => /* @__PURE__ */ p("div", {
-	className: t("space-y-1.5 pb-4 relative flex flex-col text-start", i),
+TrayContent.displayName = "TrayContent";
+const TrayHeader = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("space-y-1.5 pb-4 relative flex flex-col text-start", className),
 	"data-testid": "spectral-tray-header",
-	ref: a,
-	...o,
-	children: [n, /* @__PURE__ */ f(y, {
+	ref,
+	...props,
+	children: [children, /* @__PURE__ */ jsx(TrayClose, {
 		className: "text-neutral-400 hover:text-neutral-100 p-1 top-0 absolute right-[-14px] z-10 cursor-pointer rounded-full transition-colors hover:scale-110 hover:bg-level-four",
-		children: /* @__PURE__ */ f(r, {
-			icon: /* @__PURE__ */ f(e, {}),
+		children: /* @__PURE__ */ jsx(ButtonIcon, {
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			label: "Close tray",
 			shape: "circle"
 		})
 	})]
 });
-S.displayName = "TrayHeader";
-var C = ({ children: e, className: n, ref: r, ...i }) => /* @__PURE__ */ f("h2", {
-	className: t("text-xl font-semibold text-text-primary", n),
+TrayHeader.displayName = "TrayHeader";
+const TrayTitle = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsx("h2", {
+	className: cn("text-xl font-semibold text-text-primary", className),
 	"data-testid": "spectral-tray-title",
-	ref: r,
-	...i,
-	children: e
+	ref,
+	...props,
+	children
 });
-C.displayName = "TrayTitle";
-var w = ({ className: e, ref: n, ...r }) => /* @__PURE__ */ f("p", {
-	className: t("text-sm text-text-secondary", e),
+TrayTitle.displayName = "TrayTitle";
+const TraySubtitle = ({ className, ref, ...props }) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-sm text-text-secondary", className),
 	"data-testid": "spectral-tray-subtitle",
-	ref: n,
-	...r
+	ref,
+	...props
 });
-w.displayName = "TraySubtitle";
-var T = ({ animationKey: e, children: n, className: r, ref: i, ...c }) => {
-	let { animationKey: l } = g(), p = e ?? l, m = d(null), [h, _] = s(), v = u(() => {
-		let e = _.height, t = m.current, n = .15;
-		if (!m.current) return m.current = e, n;
-		let r = Math.abs(e - (t ?? 0));
-		return m.current = e, Math.min(Math.max(r / 500, n), .27);
-	}, [_.height]);
-	return /* @__PURE__ */ f("div", {
-		ref: i,
+TraySubtitle.displayName = "TraySubtitle";
+const TrayBody = ({ animationKey: keyProp, children, className, ref, ...props }) => {
+	const { animationKey: contextKey } = useTrayContext();
+	const key = keyProp ?? contextKey;
+	const previousHeightRef = useRef(null);
+	const [elementRef, bounds] = useMeasure();
+	const opacityDuration = useMemo(() => {
+		const currentHeight = bounds.height;
+		const previousHeight = previousHeightRef.current;
+		const MAX_DURATION = .27;
+		const MIN_DURATION = .15;
+		if (!previousHeightRef.current) {
+			previousHeightRef.current = currentHeight;
+			return MIN_DURATION;
+		}
+		const heightDifference = Math.abs(currentHeight - (previousHeight ?? 0));
+		previousHeightRef.current = currentHeight;
+		return Math.min(Math.max(heightDifference / 500, MIN_DURATION), MAX_DURATION);
+	}, [bounds.height]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-testid": "spectral-tray-body",
-		className: t(r),
-		...c,
-		children: /* @__PURE__ */ f(o, {
-			initial: !1,
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
 			mode: "popLayout",
-			custom: p,
-			children: /* @__PURE__ */ f(a.div, {
+			custom: key,
+			children: /* @__PURE__ */ jsx(motion.div, {
 				animate: {
 					opacity: 1,
 					scale: 1,
@@ -159,9 +175,9 @@ var T = ({ animationKey: e, children: n, className: r, ref: i, ...c }) => {
 					opacity: 0,
 					scale: .96
 				},
-				ref: h,
+				ref: elementRef,
 				transition: {
-					duration: v,
+					duration: opacityDuration,
 					ease: [
 						.26,
 						.08,
@@ -169,11 +185,13 @@ var T = ({ animationKey: e, children: n, className: r, ref: i, ...c }) => {
 						1
 					]
 				},
-				children: n
-			}, p)
+				children
+			}, key)
 		})
 	});
 };
-T.displayName = "TrayBody";
+TrayBody.displayName = "TrayBody";
+
 //#endregion
-export { _ as Tray, T as TrayBody, y as TrayClose, x as TrayContent, S as TrayHeader, w as TraySubtitle, C as TrayTitle, v as TrayTrigger };
+export { Tray, TrayBody, TrayClose, TrayContent, TrayHeader, TraySubtitle, TrayTitle, TrayTrigger };
+//# sourceMappingURL=Tray.js.map

package/dist/Tray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tray.js","names":["TrayBase"],"sources":["../src/components/Tray/Tray.tsx"],"sourcesContent":["import { ButtonIcon } from '@components/ButtonIcon/ButtonIcon'\nimport { CloseIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { createContext, useContext, useMemo, useRef, type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react'\nimport useMeasure from 'react-use-measure'\nimport { Drawer as TrayBase } from 'vaul'\n\nconst TrayContentVariants = cva('bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full -translate-x-1/2 overflow-hidden bg-drawer-bg outline-none', {\n  variants: {\n    size: {\n      sm: 'max-w-[400px]',\n      md: 'max-w-[600px]',\n      lg: 'max-w-[800px]',\n      full: 'max-w-full',\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\ninterface TrayContextValue {\n  animationKey: string | number\n  setAnimationKey: (key: string | number) => void\n  size: 'sm' | 'md' | 'lg' | 'full'\n}\n\nconst TrayContext = createContext<TrayContextValue | undefined>(undefined)\n\nconst useTrayContext = () => {\n  const context = useContext(TrayContext)\n  if (!context) {\n    throw new Error('Tray components must be used within Tray root')\n  }\n  return context\n}\n\nexport type TrayBaseProps = ComponentPropsWithoutRef<typeof TrayBase.Root> & {\n  children?: ReactNode\n  size?: 'sm' | 'md' | 'lg' | 'full'\n}\n\nexport const Tray = ({ children, size = 'sm', ...props }: TrayBaseProps) => {\n  const animationKeyRef = useRef<string | number>('default')\n\n  const contextValue = useMemo(\n    () => ({\n      animationKey: animationKeyRef.current,\n      setAnimationKey: (key: string | number) => {\n        animationKeyRef.current = key\n      },\n      size,\n    }),\n    [size],\n  )\n\n  return (\n    <TrayContext.Provider value={contextValue}>\n      <TrayBase.Root data-testid='spectral-tray' {...props}>\n        {children}\n      </TrayBase.Root>\n    </TrayContext.Provider>\n  )\n}\nTray.displayName = 'Tray'\n\nexport const TrayTrigger = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Trigger> & {\n  ref?: Ref<HTMLButtonElement>\n}) => <TrayBase.Trigger className={cn(className)} data-testid='spectral-tray-trigger' data-vaul-no-drag='' ref={ref} {...props} />\nTrayTrigger.displayName = 'TrayTrigger'\n\nexport const TrayClose = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Close> & {\n  ref?: Ref<HTMLButtonElement>\n}) => (\n  <TrayBase.Close asChild className={cn(className)} data-testid='spectral-tray-close' data-vaul-no-drag='' ref={ref} {...props}>\n    <CloseIcon />\n  </TrayBase.Close>\n)\nTrayClose.displayName = 'TrayClose'\n\nconst TrayOverlay = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Overlay> & {\n  ref?: Ref<HTMLDivElement>\n}) => <TrayBase.Overlay className={cn('inset-0 fixed z-10 bg-overlay', className)} ref={ref} {...props} />\nTrayOverlay.displayName = 'TrayOverlay'\n\nexport type TrayContentProps = ComponentPropsWithoutRef<typeof TrayBase.Content> &\n  VariantProps<typeof TrayContentVariants> & {\n    /** Accessible label for the tray (used when no visible `TrayTitle` is provided). */\n    'aria-label'?: string\n    children?: ReactNode\n  }\n\nexport const TrayContent = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref,\n  size: sizeProp,\n  ...props\n}: TrayContentProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { size: contextSize } = useTrayContext()\n  const size = sizeProp ?? contextSize\n  const [elementRef, bounds] = useMeasure()\n\n  return (\n    <TrayBase.Portal>\n      <TrayOverlay />\n      <TrayBase.Content aria-describedby={undefined} asChild className={cn(TrayContentVariants({ size }), className)} data-testid='spectral-tray-content' ref={ref} {...props}>\n        <motion.div\n          animate={{\n            height: bounds.height,\n            transition: {\n              duration: 0.27,\n              ease: [0.25, 1, 0.5, 1],\n            },\n          }}\n        >\n          <TrayBase.Title className='sr-only'>{ariaLabel ?? 'Tray'}</TrayBase.Title>\n          <div ref={elementRef} className='px-6 pb-6 pt-2.5 antialiased'>\n            {children}\n          </div>\n        </motion.div>\n      </TrayBase.Content>\n    </TrayBase.Portal>\n  )\n}\nTrayContent.displayName = 'TrayContent'\n\nexport const TrayHeader = ({\n  children,\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLDivElement>\n}) => (\n  <div className={cn('space-y-1.5 pb-4 relative flex flex-col text-start', className)} data-testid='spectral-tray-header' ref={ref} {...props}>\n    {children}\n    <TrayClose className='text-neutral-400 hover:text-neutral-100 p-1 top-0 absolute right-[-14px] z-10 cursor-pointer rounded-full transition-colors hover:scale-110 hover:bg-level-four'>\n      <ButtonIcon icon={<CloseIcon />} label='Close tray' shape='circle' />\n    </TrayClose>\n  </div>\n)\nTrayHeader.displayName = 'TrayHeader'\n\nexport const TrayTitle = ({\n  children,\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'h2'> & {\n  ref?: Ref<HTMLHeadingElement>\n}) => (\n  <h2 className={cn('text-xl font-semibold text-text-primary', className)} data-testid='spectral-tray-title' ref={ref} {...props}>\n    {children}\n  </h2>\n)\nTrayTitle.displayName = 'TrayTitle'\n\nexport const TraySubtitle = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'p'> & {\n  ref?: Ref<HTMLParagraphElement>\n}) => <p className={cn('text-sm text-text-secondary', className)} data-testid='spectral-tray-subtitle' ref={ref} {...props} />\nTraySubtitle.displayName = 'TraySubtitle'\n\nexport type TrayBodyProps = ComponentPropsWithoutRef<'div'> & {\n  animationKey?: string | number\n}\n\nexport const TrayBody = ({\n  animationKey: keyProp,\n  children,\n  className,\n  ref,\n  ...props\n}: TrayBodyProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { animationKey: contextKey } = useTrayContext()\n  const key = keyProp ?? contextKey\n  const previousHeightRef = useRef<number | null>(null)\n  const [elementRef, bounds] = useMeasure()\n\n  const opacityDuration = useMemo(() => {\n    const currentHeight = bounds.height\n    const previousHeight = previousHeightRef.current\n\n    const MAX_DURATION = 0.27\n    const MIN_DURATION = 0.15\n\n    if (!previousHeightRef.current) {\n      previousHeightRef.current = currentHeight\n      return MIN_DURATION\n    }\n\n    const heightDifference = Math.abs(currentHeight - (previousHeight ?? 0))\n    previousHeightRef.current = currentHeight\n\n    const duration = Math.min(Math.max(heightDifference / 500, MIN_DURATION), MAX_DURATION)\n\n    return duration\n  }, [bounds.height])\n\n  return (\n    <div ref={ref} data-testid='spectral-tray-body' className={cn(className)} {...props}>\n      <AnimatePresence initial={false} mode='popLayout' custom={key}>\n        <motion.div\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          exit={{ opacity: 0, scale: 0.96 }}\n          initial={{ opacity: 0, scale: 0.96 }}\n          key={key}\n          ref={elementRef}\n          transition={{\n            duration: opacityDuration,\n            ease: [0.26, 0.08, 0.25, 1],\n          }}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\nTrayBody.displayName = 'TrayBody'\n"],"mappings":"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"}

package/dist/components/Icons/iconTypes.d.ts

@@ -0,0 +1,17 @@
+'use client';
+import { ComponentProps, ReactElement } from "react";
+
+//#region src/components/Icons/iconTypes.d.ts
+interface IconProps extends ComponentProps<'svg'> {
+  'aria-hidden'?: ComponentProps<'svg'>['aria-hidden'];
+  className?: string;
+  color?: string;
+  description?: string;
+  disabled?: boolean;
+  size?: number;
+  strokeWidth?: number;
+  title?: string;
+}
+//#endregion
+export { IconProps };
+//# sourceMappingURL=iconTypes.d.ts.map

package/dist/components/Icons/iconTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconTypes.d.ts","names":[],"sources":["../../../src/components/Icons/iconTypes.ts"],"mappings":";;;;UAEiB,SAAA,SAAkB,cAAA;EACjC,aAAA,GAAgB,cAAA;EAChB,SAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,IAAA;EACA,WAAA;EACA,KAAA;AAAA"}

package/dist/components/IconsAnimated/iconTypes.d.ts

@@ -0,0 +1,15 @@
+'use client';
+import { HTMLAttributes, Ref } from "react";
+
+//#region src/components/IconsAnimated/iconTypes.d.ts
+interface AnimatedIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+interface AnimatedIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+  ref?: Ref<AnimatedIconHandle>;
+}
+//#endregion
+export { AnimatedIconProps };
+//# sourceMappingURL=iconTypes.d.ts.map

package/dist/components/IconsAnimated/iconTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconTypes.d.ts","names":[],"sources":["../../../src/components/IconsAnimated/iconTypes.ts"],"mappings":";;;;UAEiB,kBAAA;EACf,cAAA;EACA,aAAA;AAAA;AAAA,UAGe,iBAAA,SAA0B,cAAA,CAAe,cAAA;EACxD,IAAA;EACA,GAAA,GAAM,GAAA,CAAI,kBAAA;AAAA"}

package/dist/components/SpectralProvider/SpectralProvider.d.ts

@@ -0,0 +1,35 @@
+'use client';
+import { FC, ReactNode } from "react";
+
+//#region src/components/SpectralProvider/SpectralProvider.d.ts
+interface SpectralProviderProps {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Adds a wrapper div with spectral-root class for CSS isolation.
+   * Set to false if you want to manage CSS specificity yourself.
+   * @default true
+   */
+  isolated?: boolean;
+}
+/**
+ * Optional provider component for Spectral components.
+ * Provides CSS isolation when needed to prevent style conflicts.
+ *
+ * @example
+ * ```tsx
+ * // With isolation (recommended for apps with conflicting styles)
+ * <SpectralProvider>
+ *   <Button>Click me</Button>
+ * </SpectralProvider>
+ *
+ * // Without wrapper (when you have full control over styles)
+ * <SpectralProvider isolated={false}>
+ *   <Button>Click me</Button>
+ * </SpectralProvider>
+ * ```
+ */
+declare const SpectralProvider: FC<SpectralProviderProps>;
+//#endregion
+export { SpectralProvider, SpectralProviderProps };
+//# sourceMappingURL=SpectralProvider.d.ts.map

package/dist/components/SpectralProvider/SpectralProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpectralProvider.d.ts","names":[],"sources":["../../../src/components/SpectralProvider/SpectralProvider.tsx"],"mappings":";;;;UAEiB,qBAAA;EACf,QAAA,EAAU,SAAA;EACV,SAAA;EAFoC;;;;;EAQpC,QAAA;AAAA;;;AAoBF;;;;;;;;;;;;;;;cAAa,gBAAA,EAAkB,EAAA,CAAG,qBAAA"}

package/dist/components/SpectralProvider/SpectralProvider.js

@@ -0,0 +1,33 @@
+'use client';
+import "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/SpectralProvider/SpectralProvider.tsx
+/**
+* Optional provider component for Spectral components.
+* Provides CSS isolation when needed to prevent style conflicts.
+*
+* @example
+* ```tsx
+* // With isolation (recommended for apps with conflicting styles)
+* <SpectralProvider>
+*   <Button>Click me</Button>
+* </SpectralProvider>
+*
+* // Without wrapper (when you have full control over styles)
+* <SpectralProvider isolated={false}>
+*   <Button>Click me</Button>
+* </SpectralProvider>
+* ```
+*/
+const SpectralProvider = ({ children, className = "", isolated = true }) => {
+	if (!isolated) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx("div", {
+		className: `spectral-root ${className}`,
+		children
+	});
+};
+
+//#endregion
+export { SpectralProvider };
+//# sourceMappingURL=SpectralProvider.js.map

package/dist/components/SpectralProvider/SpectralProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpectralProvider.js","names":[],"sources":["../../../src/components/SpectralProvider/SpectralProvider.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react'\n\nexport interface SpectralProviderProps {\n  children: ReactNode\n  className?: string\n  /**\n   * Adds a wrapper div with spectral-root class for CSS isolation.\n   * Set to false if you want to manage CSS specificity yourself.\n   * @default true\n   */\n  isolated?: boolean\n}\n\n/**\n * Optional provider component for Spectral components.\n * Provides CSS isolation when needed to prevent style conflicts.\n *\n * @example\n * ```tsx\n * // With isolation (recommended for apps with conflicting styles)\n * <SpectralProvider>\n *   <Button>Click me</Button>\n * </SpectralProvider>\n *\n * // Without wrapper (when you have full control over styles)\n * <SpectralProvider isolated={false}>\n *   <Button>Click me</Button>\n * </SpectralProvider>\n * ```\n */\nexport const SpectralProvider: FC<SpectralProviderProps> = ({ children, className = '', isolated = true }) => {\n  if (!isolated) {\n    return <>{children}</>\n  }\n\n  return <div className={`spectral-root ${className}`}>{children}</div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,oBAA+C,EAAE,UAAU,YAAY,IAAI,WAAW,WAAW;AAC5G,KAAI,CAAC,SACH,QAAO,gCAAG,UAAY;AAGxB,QAAO,oBAAC,OAAD;EAAK,WAAW,iBAAiB;EAAc;EAAe"}

package/dist/components/ToggleGroup/ToggleGroup.context.js

@@ -0,0 +1,14 @@
+'use client';
+import { createContext } from "react";
+import "class-variance-authority";
+
+//#region src/components/ToggleGroup/ToggleGroup.context.ts
+const ToggleGroupContext = createContext({
+	layout: "default",
+	size: "default",
+	variant: "default"
+});
+
+//#endregion
+export { ToggleGroupContext };
+//# sourceMappingURL=ToggleGroup.context.js.map

package/dist/components/ToggleGroup/ToggleGroup.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.context.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.context.ts"],"sourcesContent":["import { type ActiveColor, type toggleVariants } from '@components/Toggle/Toggle'\nimport { type VariantProps } from 'class-variance-authority'\nimport { createContext } from 'react'\n\nexport type ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {\n  activeColor?: ActiveColor\n  activeTextColor?: ActiveColor\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  layout: 'default',\n  size: 'default',\n  variant: 'default',\n})\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB,cAAuC;CACvE,QAAQ;CACR,MAAM;CACN,SAAS;CACV,CAAC"}