@spear-ai/spectral 1.6.16 → 1.7.0

package/dist/Select.d.ts

@@ -18,13 +18,15 @@ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'v
 export interface SelectExtendedProps extends SelectProps {
     align?: Align;
     alignOffset?: number;
+    avoidCollisions?: boolean;
+    collisionBoundary?: Element | Element[] | null;
     collisionPadding?: number | Partial<Record<Side, number>>;
     position?: 'popper' | 'item-aligned';
     side?: Side;
     sideOffset?: number;
 }
 export declare const Select: {
-    ({ ref, align, alignOffset, className, collisionPadding, defaultValue, emptyMessage, errorMessage, id, label, labelClassName, loadingMessage, name, onChange, options, placeholder, position, side, sideOffset, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: SelectExtendedProps & {
+    ({ align, alignOffset, avoidCollisions, className, collisionBoundary, collisionPadding, defaultValue, emptyMessage, errorMessage, id, label, labelClassName, loadingMessage, name, onChange, options, placeholder, position, ref, side, sideOffset, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: SelectExtendedProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Select.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as r, jsx as t, Fragment as S } from "react/jsx-runtime";
+import { jsxs as r, jsx as t, Fragment as w } from "react/jsx-runtime";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -9,8 +9,8 @@ import "./Icons/ArrowUpIcon.js";
 import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
-import { CheckmarkIcon as Q } from "./Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as c } from "./Icons/ChevronDownIcon.js";
+import { CheckmarkIcon as X } from "./Icons/CheckmarkIcon.js";
+import { ChevronDownIcon as p } from "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
@@ -36,9 +36,10 @@ import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
 import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as W } from "./Icons/LoaderIcon.js";
+import { LoaderIcon as Y } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
+import "./Icons/MeasureIcon.js";
 import "./Icons/MessagesIcon.js";
 import "./Icons/MetadataIcon.js";
 import "./Icons/MinusIcon.js";
@@ -50,6 +51,7 @@ import "./Icons/PlusIcon.js";
 import "./Icons/ResetIcon.js";
 import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
+import "./Icons/SearchIcon.js";
 import "./Icons/SettingsIcon.js";
 import "./Icons/SortAscendingIcon.js";
 import "./Icons/SortAtoZIcon.js";
@@ -65,118 +67,121 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { Label as C } from "./Label.js";
-import { R as X, T as Y, V as Z, I as _, C as $, S as tt, a as et, b as rt, c as I, G as at, d as it, e as st, f as ot } from "./index-yU8jOTzS.js";
-import { useFormFieldId as lt, useFormFieldState as dt, getAriaProps as mt, groupOptions as ct, getFormFieldCSSProperties as pt, getStateClasses as nt, getTriggerClasses as ut, ErrorMessage as ht, getErrorMessageId as gt, LoadingState as bt, EmptyState as ft, getOptionClasses as xt } from "./utils/formFieldUtils.js";
-import { cn as s } from "./utils/twUtils.js";
-import { useState as yt } from "react";
-const Nt = ({
-  ref: w,
+import { Label as I } from "./Label.js";
+import { R as Z, T as _, V as $, I as tt, C as et, S as rt, a as at, b as it, c as C, G as st, d as ot, e as lt, f as dt } from "./index-CpovUAO-.js";
+import { useFormFieldId as mt, useFormFieldState as ct, getAriaProps as pt, groupOptions as nt, getFormFieldCSSProperties as ut, getStateClasses as gt, getTriggerClasses as ft, ErrorMessage as ht, getErrorMessageId as bt, LoadingState as xt, EmptyState as yt, getOptionClasses as Nt } from "./utils/formFieldUtils.js";
+import { cn as a } from "./utils/twUtils.js";
+import { useState as St } from "react";
+const vt = ({
   align: z = "start",
   alignOffset: F = 0,
-  className: O,
-  collisionPadding: j = 10,
-  defaultValue: k,
-  emptyMessage: L = "No options found",
-  errorMessage: p,
-  id: T,
+  avoidCollisions: O = !0,
+  className: j,
+  collisionBoundary: k,
+  collisionPadding: L = 10,
+  defaultValue: T,
+  emptyMessage: V = "No options found",
+  errorMessage: n,
+  id: q,
   label: l,
-  labelClassName: n,
-  loadingMessage: V = "Loading…",
-  name: u,
-  onChange: q,
-  options: h = [],
-  placeholder: D = "Select an option",
-  position: E = "popper",
-  side: P = "bottom",
-  sideOffset: B = 4,
-  state: a = "default",
-  value: g,
-  "aria-label": G,
-  "aria-describedby": M,
-  ...o
+  labelClassName: u,
+  loadingMessage: D = "Loading…",
+  name: g,
+  onChange: E,
+  options: f = [],
+  placeholder: P = "Select an option",
+  position: d = "popper",
+  ref: B,
+  side: G = "bottom",
+  sideOffset: M = 4,
+  state: i = "default",
+  value: h,
+  "aria-label": R,
+  "aria-describedby": A,
+  ...s
 }) => {
-  const [b, R] = yt(!1), i = lt(T, u), f = gt(i), { isDisabled: d, isLoading: x, isInvalid: A } = dt(o.disabled, a), H = mt(a, M, o.required, f), { groups: y, ungrouped: N } = ct(h), U = () => {
-    if (x)
-      return /* @__PURE__ */ t(bt, { "data-testid": "spectral-select-loading", message: V });
-    if (h.length === 0)
-      return /* @__PURE__ */ t(ft, { "data-testid": "spectral-select-empty", message: L });
+  const [b, U] = St(!1), o = mt(q, g), x = bt(o), { isDisabled: m, isLoading: y, isInvalid: H } = ct(s.disabled, i), J = pt(i, A, s.required, x), { groups: N, ungrouped: S } = nt(f), K = () => {
+    if (y)
+      return /* @__PURE__ */ t(xt, { "data-testid": "spectral-select-loading", message: D });
+    if (f.length === 0)
+      return /* @__PURE__ */ t(yt, { "data-testid": "spectral-select-empty", message: V });
     const v = (e) => {
-      const m = g === e.value;
-      return /* @__PURE__ */ r(it, { className: s(xt(!!e.disabled, !1, m), "relative flex w-full cursor-pointer items-center"), "data-testid": "spectral-select-item", disabled: e.disabled, value: e.value, children: [
-        /* @__PURE__ */ t(st, { "data-testid": "spectral-select-item-text", className: "block truncate", children: e.label }),
-        /* @__PURE__ */ t(ot, { "data-testid": "spectral-select-item-selected-indicator", asChild: !0, children: /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t(Q, { size: 16 }) }) })
+      const c = h === e.value;
+      return /* @__PURE__ */ r(ot, { className: a(Nt(!!e.disabled, !1, c), "relative flex w-full cursor-pointer items-center"), "data-testid": "spectral-select-item", disabled: e.disabled, value: e.value, children: [
+        /* @__PURE__ */ t(lt, { "data-testid": "spectral-select-item-text", className: "block truncate", children: e.label }),
+        /* @__PURE__ */ t(dt, { "data-testid": "spectral-select-item-selected-indicator", asChild: !0, children: /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t(X, { size: 16 }) }) })
       ] }, e.value);
     };
-    return /* @__PURE__ */ r(S, { children: [
-      N.length > 0 && /* @__PURE__ */ r(S, { children: [
-        N.map(v),
-        Object.keys(y).length > 0 && /* @__PURE__ */ t(I, { className: "bg-border-secondary -mx-1 my-1 h-px", "data-testid": "spectral-select-separator" })
+    return /* @__PURE__ */ r(w, { children: [
+      S.length > 0 && /* @__PURE__ */ r(w, { children: [
+        S.map(v),
+        Object.keys(N).length > 0 && /* @__PURE__ */ t(C, { className: "bg-border-secondary -mx-1 my-1 h-px", "data-testid": "spectral-select-separator" })
       ] }),
-      Object.entries(y).map(([e, m], J) => /* @__PURE__ */ r(at, { "data-testid": "spectral-select-group", children: [
-        J > 0 && /* @__PURE__ */ t(I, { className: "bg-border-secondary -mx-1 my-1 h-px", "data-testid": "spectral-select-group-separator" }),
-        /* @__PURE__ */ t(C, { "data-testid": "spectral-select-group-label", htmlFor: i, className: s("text-text-primary px-2 py-1.5 text-base font-semibold", n), children: e }),
-        m.map((K) => v(K))
+      Object.entries(N).map(([e, c], Q) => /* @__PURE__ */ r(st, { "data-testid": "spectral-select-group", children: [
+        Q > 0 && /* @__PURE__ */ t(C, { className: "bg-border-secondary -mx-1 my-1 h-px", "data-testid": "spectral-select-group-separator" }),
+        /* @__PURE__ */ t(I, { className: a("text-text-primary px-2 py-1.5 text-base font-semibold", u), "data-testid": "spectral-select-group-label", children: e }),
+        c.map((W) => v(W))
       ] }, e))
     ] });
   };
   return /* @__PURE__ */ r("div", { className: "w-full", children: [
-    l && /* @__PURE__ */ t(C, { "data-testid": "spectral-select-label", htmlFor: i, className: s("text-text-primary mb-2 block", n, d && "text-text-secondary"), children: l }),
-    /* @__PURE__ */ r(X, { "data-testid": "spectral-select", defaultValue: k, disabled: d, name: u, onOpenChange: R, onValueChange: q, open: b, required: o.required, value: g, children: [
+    l && /* @__PURE__ */ t(I, { className: a("text-text-primary mb-2 block", u, m && "text-text-secondary"), "data-testid": "spectral-select-label", htmlFor: o, children: l }),
+    /* @__PURE__ */ r(Z, { "data-testid": "spectral-select", defaultValue: T, disabled: m, name: g, onOpenChange: U, onValueChange: E, open: b, required: s.required, value: h, children: [
       /* @__PURE__ */ t(
-        Y,
+        _,
         {
-          "aria-controls": i,
+          "aria-controls": o,
           "aria-expanded": b,
-          "aria-label": G || l,
+          "aria-label": R ?? l,
           asChild: !0,
-          className: s(ut(!1, a), nt(a), O),
+          className: a(ft(!1, i), gt(i), j),
           "data-slot": "select-trigger",
-          "data-state": a,
+          "data-state": i,
           "data-testid": "spectral-select-trigger",
-          id: i,
-          ref: w,
+          id: o,
+          ref: B,
           role: "combobox",
-          style: pt(),
-          ...H,
-          ...o,
-          children: /* @__PURE__ */ r("button", { type: "button", disabled: d, children: [
-            /* @__PURE__ */ t(Z, { placeholder: D, className: "block truncate", "data-testid": "spectral-select-value" }),
-            /* @__PURE__ */ t(_, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex items-center", children: x ? /* @__PURE__ */ t(W, { size: 20 }) : /* @__PURE__ */ t(c, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
+          style: ut(),
+          ...J,
+          ...s,
+          children: /* @__PURE__ */ r("button", { type: "button", disabled: m, children: [
+            /* @__PURE__ */ t($, { className: "block truncate", "data-testid": "spectral-select-value", placeholder: P }),
+            /* @__PURE__ */ t(tt, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex items-center", children: y ? /* @__PURE__ */ t(Y, { size: 20 }) : /* @__PURE__ */ t(p, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
           ] })
         }
       ),
-      /* @__PURE__ */ t($, { align: z, alignOffset: F, "data-slot": "select-content", "data-testid": "spectral-select-content", asChild: !0, collisionPadding: j, position: E, side: P, sideOffset: B, children: /* @__PURE__ */ r(
-        "div",
+      /* @__PURE__ */ r(
+        et,
         {
-          className: s(
-            "border-input-border bg-input-bg z-50 rounded-lg border shadow-md",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-            "data-[side=bottom]:slide-in-from-top-2",
-            "data-[side=left]:slide-in-from-right-2",
-            "data-[side=right]:slide-in-from-left-2",
-            "data-[side=top]:slide-in-from-bottom-2"
+          align: z,
+          alignOffset: F,
+          avoidCollisions: O,
+          className: a(
+            "border-input-border bg-input-bg motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out relative z-50 rounded-lg border shadow-md",
+            "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95",
+            "motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-select-content-available-height)",
+            "min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
+            d === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"
           ),
-          style: {
-            boxSizing: "border-box",
-            maxHeight: "var(--radix-select-content-available-height)",
-            position: "fixed",
-            width: "var(--radix-select-trigger-width)"
-          },
+          collisionBoundary: k,
+          collisionPadding: L,
+          "data-slot": "select-content",
+          "data-testid": "spectral-select-content",
+          position: d,
+          side: G,
+          sideOffset: M,
           children: [
-            /* @__PURE__ */ t(tt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-up-button", children: /* @__PURE__ */ t(c, { className: "rotate-180", size: 18 }) }),
-            /* @__PURE__ */ t(et, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "max-h-96 p-1", "data-testid": "spectral-select-items", style: { position: "relative", overflow: "hidden auto" }, children: U() }) }),
-            /* @__PURE__ */ t(rt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-down-button", children: /* @__PURE__ */ t(c, { size: 18 }) })
+            /* @__PURE__ */ t(rt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-up-button", children: /* @__PURE__ */ t(p, { "aria-hidden": "true", className: "rotate-180", size: 18 }) }),
+            /* @__PURE__ */ t(at, { asChild: !0, children: /* @__PURE__ */ t("div", { className: a("p-1", d === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"), "data-testid": "spectral-select-items", children: K() }) }),
+            /* @__PURE__ */ t(it, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-down-button", children: /* @__PURE__ */ t(p, { "aria-hidden": "true", size: 18 }) })
           ]
         }
-      ) })
+      )
     ] }),
-    A && p && /* @__PURE__ */ t(ht, { "data-testid": "spectral-select-error-message", id: f, message: p })
+    H && n && /* @__PURE__ */ t(ht, { "data-testid": "spectral-select-error-message", id: x, message: n })
   ] });
 };
-Nt.displayName = "Select";
+vt.displayName = "Select";
 export {
-  Nt as Select
+  vt as Select
 };

package/dist/Separator.js

@@ -5,13 +5,13 @@ import "react";
 const l = ({ className: o, decorative: r = !0, orientation: a = "horizontal", ref: t, ...i }) => /* @__PURE__ */ p(
   "div",
   {
-    ref: t,
-    "data-slot": "separator",
-    "data-orientation": a,
-    role: r ? "none" : "separator",
     "aria-hidden": r ? "true" : void 0,
     "aria-orientation": r ? void 0 : a,
     className: e("bg-border shrink-0", a === "horizontal" ? "h-px w-full" : "h-full w-px", o),
+    "data-orientation": a,
+    "data-slot": "separator",
+    role: r ? "none" : "separator",
+    ref: t,
     ...i
   }
 );

package/dist/Skeleton.d.ts

@@ -1,4 +1,3 @@
 import { ComponentProps } from 'react';
-declare function Skeleton({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+export declare const Skeleton: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Skeleton.d.ts.map

package/dist/Skeleton.js

@@ -1,10 +1,8 @@
 import "./styles/main.css";
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-function a({ className: e, ...t }) {
-  return /* @__PURE__ */ o("div", { "data-slot": "skeleton", className: r("bg-level-three animate-pulse rounded-md", e), ...t });
-}
+const a = ({ className: e, ...o }) => /* @__PURE__ */ t("div", { "data-slot": "skeleton", className: r("bg-level-three rounded-md motion-safe:animate-pulse", e), ...o });
 export {
   a as Skeleton
 };

package/dist/Slider.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 export type SliderLabelPosition = 'end' | 'both';
 export type SliderInputPosition = 'start' | 'both';
-export type SliderLabelRenderProps = {
-    values: number[];
-    min: number;
+export interface SliderLabelRenderProps {
     max: number;
+    min: number;
     position: 'start' | 'end';
-};
-export type SliderProps = {
+    values: number[];
+}
+export interface SliderProps {
     accessibleName?: string;
     className?: string;
     defaultValue?: number[];
@@ -24,6 +24,6 @@ export type SliderProps = {
     orientation?: 'horizontal' | 'vertical';
     step?: number;
     value?: number[];
-};
+}
 export declare const Slider: ({ accessibleName, className, defaultValue, disabled, inputPosition, label, labelPosition, max, min, minStepsBetweenThumbs, name, onValueChange, onValueCommit, orientation, step, value }: SliderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map