@spear-ai/spectral 1.6.16 → 1.7.0

package/dist/DateTimePicker/TimePicker.d.ts

@@ -9,8 +9,8 @@ export interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'>
     /** Override translation strings for ARIA labels */
     translations?: Partial<TimePickerTranslations>;
 }
-export declare function TimePicker({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace TimePicker {
-    var displayName: string;
-}
+export declare const TimePicker: {
+    ({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=TimePicker.d.ts.map

package/dist/DateTimePicker/TimePicker.js

@@ -6,8 +6,8 @@ import { getResolvedLocale as x, DEFAULT_TRANSLATIONS as S, detectHourFormat as
 import { TimePeriodSelect as w } from "./TimePeriodSelect.js";
 import { cn as y } from "../utils/twUtils.js";
 import { useRef as d, useMemo as s } from "react";
-function z({ className: g, date: t, hourFormat: p, locale: f, onChange: a, onPeriodChange: L, translations: P, ...R }) {
-  const l = d(null), h = d(null), k = d(null), o = s(() => x(f), [f]), e = s(() => ({ ...S, ...P }), [P]), v = s(() => p ?? j(o), [p, o]), n = s(() => M(o), [o]), F = s(() => I(e.selectPeriodTemplate, n), [e.selectPeriodTemplate, n]), r = v === "24", u = t ? b(t.getHours()) : "AM", N = (i) => {
+const z = ({ className: g, date: t, hourFormat: p, locale: f, onChange: a, onPeriodChange: L, translations: P, ...R }) => {
+  const l = d(null), h = d(null), k = d(null), o = s(() => x(f), [f]), e = s(() => ({ ...S, ...P }), [P]), v = s(() => p ?? j(o), [p, o]), n = s(() => M(o), [o]), F = s(() => I(n, e.selectPeriodTemplate), [e.selectPeriodTemplate, n]), r = v === "24", u = t ? b(t.getHours()) : "AM", N = (i) => {
     if (!t) {
       L?.(i);
       return;
@@ -56,7 +56,7 @@ function z({ className: g, date: t, hourFormat: p, locale: f, onChange: a, onPer
     ),
     !r && /* @__PURE__ */ c(w, { ariaLabel: F, labels: n, onLeftFocus: () => l.current?.focus(), onPeriodChange: N, period: u, ref: k })
   ] });
-}
+};
 z.displayName = "TimePicker";
 export {
   z as TimePicker

package/dist/DateTimePicker.d.ts

@@ -7,7 +7,7 @@ export interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChan
     defaultValue?: Date;
     disabled?: boolean;
     disablePastDates?: boolean;
-    errorMessage?: string | string[] | Record<string, any> | null;
+    errorMessage?: string | string[] | Record<string, unknown> | null;
     hourFormat?: HourFormat;
     label?: string;
     locale?: Partial<Locale>;
@@ -19,10 +19,10 @@ export interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChan
     timeTranslations?: Partial<TimePickerTranslations>;
     value?: Date;
 }
-export declare function DateTimePicker({ calendarProps, className, defaultValue, disabled, disablePastDates, errorMessage, hourFormat, label, locale, onChange, showTimePicker, state, timeLocale, timeTranslations, value, ...props }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace DateTimePicker {
-    var displayName: string;
-}
+export declare const DateTimePicker: {
+    ({ calendarProps, className, defaultValue, disabled, disablePastDates, errorMessage, hourFormat, label, locale, onChange, showTimePicker, state, timeLocale, timeTranslations, value, ...props }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { Calendar } from './Calendar';
 export { DateTimeDisplayInput } from './DateTimeDisplayInput';
 export { DateTimeInput } from './DateTimeInput';

package/dist/DateTimePicker.js

@@ -1,17 +1,17 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { Calendar as b } from "./DateTimePicker/Calendar.js";
-import { DateTimeDisplayInput as w } from "./DateTimePicker/DateTimeDisplayInput.js";
-import { getResolvedLocale as I, detectHourFormat as L } from "./DateTimePicker/DateTimeUtils.js";
-import { DEFAULT_TRANSLATIONS as lr, DateTimeConfigSchema as sr, HourFormatSchema as dr, PICKER_TYPES as cr, PeriodSchema as ur, TIME_BOUNDS as gr, TimePickerTypeSchema as fr, TimeValueSchema as hr, convert12HourTo24Hour as Tr, display12HourValue as vr, formatSelectPeriodLabel as xr, formatTimeNumber as Hr, getAriaLabel as yr, getAriaValueMinMax as Vr, getAriaValueNow as Sr, getArrowByType as Cr, getDateByType as Nr, getLocalizedPeriodLabel as Pr, getLocalizedPeriodLabels as Ar, getPeriodFromHours as Dr, getValid12Hour as br, getValidArrow12Hour as wr, getValidArrowHour as Ir, getValidArrowMinute as Lr, getValidArrowNumber as Mr, getValidHour as kr, getValidMinute as Fr, getValidNumber as Er, isValid12Hour as Br, isValidHour as Or, isValidMinute as jr, set12Hours as Rr, setDateByType as _r, setHours as zr, setMinutes as Ur } from "./DateTimePicker/DateTimeUtils.js";
-import { TimePicker as M } from "./DateTimePicker/TimePicker.js";
+import { DateTimeDisplayInput as k } from "./DateTimePicker/DateTimeDisplayInput.js";
+import { getResolvedLocale as w, detectHourFormat as I } from "./DateTimePicker/DateTimeUtils.js";
+import { DEFAULT_TRANSLATIONS as cr, DateTimeConfigSchema as ur, HourFormatSchema as gr, PICKER_TYPES as fr, PeriodSchema as hr, TIME_BOUNDS as Tr, TimePickerTypeSchema as vr, TimeValueSchema as xr, convert12HourTo24Hour as Hr, display12HourValue as yr, formatSelectPeriodLabel as Vr, formatTimeNumber as Cr, getAriaLabel as Sr, getAriaValueMinMax as Nr, getAriaValueNow as Pr, getArrowByType as Ar, getDateByType as Dr, getLocalizedPeriodLabel as br, getLocalizedPeriodLabels as kr, getPeriodFromHours as wr, getValid12Hour as Ir, getValidArrow12Hour as Lr, getValidArrowHour as Mr, getValidArrowMinute as Fr, getValidArrowNumber as Er, getValidHour as Br, getValidMinute as Or, getValidNumber as jr, isValid12Hour as Rr, isValidHour as _r, isValidMinute as zr, set12Hours as Ur, setDateByType as Kr, setHours as Yr, setMinutes as qr } from "./DateTimePicker/DateTimeUtils.js";
+import { TimePicker as L } from "./DateTimePicker/TimePicker.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
 import "./Icons/ArrowDownIcon.js";
 import "./Icons/ArrowUpIcon.js";
-import { CalendarIcon as k } from "./Icons/CalendarIcon.js";
+import { CalendarIcon as M } from "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
 import "./Icons/CheckmarkIcon.js";
@@ -44,6 +44,7 @@ import "./Icons/LiveViewIcon.js";
 import "./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";
@@ -55,6 +56,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";
@@ -74,41 +76,61 @@ import { Popover as F, PopoverTrigger as E, PopoverContent as B } from "./Popove
 import { useControllableState as O } from "./hooks/useControllableState.js";
 import { ErrorMessage as j } from "./utils/formFieldUtils.js";
 import { cn as a } from "./utils/twUtils.js";
-import { useMemo as g } from "react";
-import { DateTimeInput as Yr } from "./DateTimePicker/DateTimeInput.js";
-import { TimePeriodSelect as Gr } from "./DateTimePicker/TimePeriodSelect.js";
-function R({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1, disablePastDates: v = !0, errorMessage: s, hourFormat: d, label: x, locale: H, onChange: y, showTimePicker: o = !0, state: c = "default", timeLocale: u, timeTranslations: V, value: S, ...C }) {
-  const [r, m] = O({
-    value: S,
+import { useMemo as g, useCallback as R } from "react";
+import { DateTimeInput as Jr } from "./DateTimePicker/DateTimeInput.js";
+import { TimePeriodSelect as Wr } from "./DateTimePicker/TimePeriodSelect.js";
+const _ = ({
+  calendarProps: f,
+  className: h,
+  defaultValue: T,
+  disabled: m = !1,
+  disablePastDates: v = !0,
+  errorMessage: s,
+  hourFormat: d,
+  label: x,
+  locale: H,
+  onChange: y,
+  showTimePicker: o = !0,
+  state: c = "default",
+  timeLocale: u,
+  timeTranslations: V,
+  value: C,
+  ...S
+}) => {
+  const [r, i] = O({
     defaultValue: T,
-    onChange: y
-  }), n = g(() => I(u), [u]), p = g(() => d ?? L(n), [d, n]), N = (t) => {
+    onChange: y,
+    value: C
+  }), l = g(() => w(u), [u]), p = g(() => d ?? I(l), [d, l]), N = (t) => {
     if (!t) {
-      m(void 0);
+      i(void 0);
       return;
     }
-    r && t.setHours(r.getHours(), r.getMinutes(), 0, 0), m(t);
-  }, P = (t) => {
-    m(t);
-  }, A = (t) => {
+    r && t.setHours(r.getHours(), r.getMinutes(), 0, 0), i(t);
+  }, P = R(
+    (t) => {
+      i(t);
+    },
+    [i]
+  ), A = (t) => {
   }, D = (t) => {
-    m(t);
+    i(t);
   };
-  return /* @__PURE__ */ l(F, { children: [
-    /* @__PURE__ */ l("div", { className: a("w-full", h), "data-slot": "datetime-picker", "data-testid": "spectral-datetime-picker", ...C, children: [
+  return /* @__PURE__ */ n(F, { children: [
+    /* @__PURE__ */ n("div", { className: a("w-full", h), "data-slot": "datetime-picker", "data-testid": "spectral-datetime-picker", ...S, children: [
       /* @__PURE__ */ e(
-        w,
+        k,
         {
           className: a("flex w-full justify-start gap-4 pr-12", !r && "text-text-secondary"),
           "data-testid": "spectral-datetime-picker-input",
-          disabled: i,
-          endIcon: /* @__PURE__ */ e(E, { asChild: !0, disabled: i, children: /* @__PURE__ */ e(
-            k,
+          disabled: m,
+          endIcon: /* @__PURE__ */ e(E, { asChild: !0, disabled: m, children: /* @__PURE__ */ e(
+            M,
             {
               "aria-label": "Open date picker",
-              className: a("text-input-icon hover:text-input-icon--hover absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer focus:outline-none", i ? "pointer-events-none cursor-not-allowed opacity-50" : "hover:text-input-icon--hover cursor-pointer"),
+              className: a("text-input-icon hover:text-input-icon--hover absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer focus:outline-none", m ? "pointer-events-none cursor-not-allowed opacity-50" : "hover:text-input-icon--hover cursor-pointer"),
               "data-testid": "spectral-datetime-picker-trigger",
-              disabled: i
+              disabled: m
             }
           ) }),
           hourFormat: p,
@@ -121,7 +143,7 @@ function R({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1,
       ),
       c === "error" && s && /* @__PURE__ */ e(j, { message: s, dataTestId: "spectral-datetime-picker-error-message", id: "datetime-picker-error" })
     ] }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ n(
       B,
       {
         align: "start",
@@ -130,55 +152,55 @@ function R({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1,
         onOpenAutoFocus: (t) => t.preventDefault(),
         children: [
           /* @__PURE__ */ e(b, { ...f, disablePastDates: v, locale: H, mode: "single", onSelect: N, selected: r }),
-          o && /* @__PURE__ */ e("div", { className: "border-border-secondary border-l pl-6", children: /* @__PURE__ */ e(M, { date: r, hourFormat: p, locale: n, onChange: P, onPeriodChange: A, translations: V }) })
+          o && /* @__PURE__ */ e("div", { className: "border-border-secondary border-l pl-6", children: /* @__PURE__ */ e(L, { date: r, hourFormat: p, locale: l, onChange: P, onPeriodChange: A, translations: V }) })
         ]
       }
     )
   ] });
-}
-R.displayName = "DateTimePicker";
+};
+_.displayName = "DateTimePicker";
 export {
   b as Calendar,
-  lr as DEFAULT_TRANSLATIONS,
-  sr as DateTimeConfigSchema,
-  w as DateTimeDisplayInput,
-  Yr as DateTimeInput,
-  R as DateTimePicker,
-  dr as HourFormatSchema,
-  cr as PICKER_TYPES,
-  ur as PeriodSchema,
-  gr as TIME_BOUNDS,
-  Gr as TimePeriodSelect,
-  M as TimePicker,
-  fr as TimePickerTypeSchema,
-  hr as TimeValueSchema,
-  Tr as convert12HourTo24Hour,
-  L as detectHourFormat,
-  vr as display12HourValue,
-  xr as formatSelectPeriodLabel,
-  Hr as formatTimeNumber,
-  yr as getAriaLabel,
-  Vr as getAriaValueMinMax,
-  Sr as getAriaValueNow,
-  Cr as getArrowByType,
-  Nr as getDateByType,
-  Pr as getLocalizedPeriodLabel,
-  Ar as getLocalizedPeriodLabels,
-  Dr as getPeriodFromHours,
-  I as getResolvedLocale,
-  br as getValid12Hour,
-  wr as getValidArrow12Hour,
-  Ir as getValidArrowHour,
-  Lr as getValidArrowMinute,
-  Mr as getValidArrowNumber,
-  kr as getValidHour,
-  Fr as getValidMinute,
-  Er as getValidNumber,
-  Br as isValid12Hour,
-  Or as isValidHour,
-  jr as isValidMinute,
-  Rr as set12Hours,
-  _r as setDateByType,
-  zr as setHours,
-  Ur as setMinutes
+  cr as DEFAULT_TRANSLATIONS,
+  ur as DateTimeConfigSchema,
+  k as DateTimeDisplayInput,
+  Jr as DateTimeInput,
+  _ as DateTimePicker,
+  gr as HourFormatSchema,
+  fr as PICKER_TYPES,
+  hr as PeriodSchema,
+  Tr as TIME_BOUNDS,
+  Wr as TimePeriodSelect,
+  L as TimePicker,
+  vr as TimePickerTypeSchema,
+  xr as TimeValueSchema,
+  Hr as convert12HourTo24Hour,
+  I as detectHourFormat,
+  yr as display12HourValue,
+  Vr as formatSelectPeriodLabel,
+  Cr as formatTimeNumber,
+  Sr as getAriaLabel,
+  Nr as getAriaValueMinMax,
+  Pr as getAriaValueNow,
+  Ar as getArrowByType,
+  Dr as getDateByType,
+  br as getLocalizedPeriodLabel,
+  kr as getLocalizedPeriodLabels,
+  wr as getPeriodFromHours,
+  w as getResolvedLocale,
+  Ir as getValid12Hour,
+  Lr as getValidArrow12Hour,
+  Mr as getValidArrowHour,
+  Fr as getValidArrowMinute,
+  Er as getValidArrowNumber,
+  Br as getValidHour,
+  Or as getValidMinute,
+  jr as getValidNumber,
+  Rr as isValid12Hour,
+  _r as isValidHour,
+  zr as isValidMinute,
+  Ur as set12Hours,
+  Kr as setDateByType,
+  Yr as setHours,
+  qr as setMinutes
 };

package/dist/Dialog.d.ts

@@ -1,23 +1,23 @@
 import { ComponentProps } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-declare function Dialog({ isOpen, modal, ...props }: Omit<ComponentProps<typeof DialogPrimitive.Root>, 'open'> & {
+declare const Dialog: ({ isOpen, modal, ...props }: Omit<ComponentProps<typeof DialogPrimitive.Root>, "open"> & {
     isOpen?: boolean;
     dialogOverlay?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, dialogOverlay, showCloseButton, onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTrigger: ({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogPortal: ({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogClose: ({ ...props }: ComponentProps<typeof DialogPrimitive.Close>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogOverlay: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogContent: ({ children, className, dialogOverlay, onEscapeKeyDown, onInteractOutside, onPointerDownOutside, showCloseButton, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
     dialogOverlay?: boolean;
-    showCloseButton?: boolean;
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
     onInteractOutside?: (event: PointerEvent | FocusEvent) => void;
     onPointerDownOutside?: (event: PointerEvent) => void;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+    showCloseButton?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DialogHeader: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DialogFooter: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogDescription: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.js

@@ -1,94 +1,67 @@
 import "./styles/main.css";
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { CloseIcon as p } from "./Icons/CloseIcon.js";
-import { R as f, C as i, a as u, D as m, O as x, P as b, T as h, b as v } from "./index-BdS7Ix8W.js";
-import { cn as o } from "./utils/twUtils.js";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { CloseIcon as m } from "./Icons/CloseIcon.js";
+import { R as p, C as i, a as f, D as u, O as x, P as b, T as h, b as v } from "./index-CqbPiOid.js";
+import { cn as e } from "./utils/twUtils.js";
 import "react";
 import { R as y } from "./Combination-CK_g12Qb.js";
-function j({
+const j = ({
   isOpen: t,
   modal: a = !1,
-  ...l
-}) {
-  return /* @__PURE__ */ e(f, { open: t, modal: a, "data-slot": "dialog", "data-testid": "spectral-dialog", ...l });
-}
-function O({ ...t }) {
-  return /* @__PURE__ */ e(v, { asChild: !0, "data-testid": "spectral-dialog-trigger", ...t });
-}
-function D({ ...t }) {
-  return /* @__PURE__ */ e(b, { "data-slot": "dialog-portal", "data-testid": "dialog-portal", ...t });
-}
-function P({ ...t }) {
-  return /* @__PURE__ */ e(i, { asChild: !0, "data-slot": "dialog-close", "data-testid": "spectral-dialog-close", ...t });
-}
-function C({ className: t, ...a }) {
-  return /* @__PURE__ */ e(
-    x,
+  ...s
+}) => /* @__PURE__ */ o(p, { open: t, modal: a, "data-slot": "dialog", "data-testid": "spectral-dialog", ...s }), O = ({ ...t }) => /* @__PURE__ */ o(v, { asChild: !0, "data-testid": "spectral-dialog-trigger", ...t }), D = ({ ...t }) => /* @__PURE__ */ o(b, { "data-slot": "dialog-portal", "data-testid": "dialog-portal", ...t }), P = ({ ...t }) => /* @__PURE__ */ o(i, { asChild: !0, "data-slot": "dialog-close", "data-testid": "spectral-dialog-close", ...t }), C = ({ className: t, ...a }) => /* @__PURE__ */ o(
+  x,
+  {
+    className: e("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", "motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0", t),
+    "data-slot": "dialog-overlay",
+    "data-testid": "spectral-dialog-overlay",
+    ...a
+  }
+), _ = ({
+  children: t,
+  className: a,
+  dialogOverlay: s = !0,
+  onEscapeKeyDown: d,
+  onInteractOutside: r,
+  onPointerDownOutside: n,
+  showCloseButton: c = !0,
+  ...g
+}) => /* @__PURE__ */ l(D, { "data-slot": "dialog-portal", "data-testid": "spectral-dialog-portal", children: [
+  s && /* @__PURE__ */ o(C, {}),
+  /* @__PURE__ */ l(
+    f,
     {
-      className: o("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", t),
-      "data-slot": "dialog-overlay",
-      "data-testid": "spectral-dialog-overlay",
-      ...a
+      className: e(
+        "bg-dialog-bg fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-y-auto overscroll-contain rounded-lg p-6 shadow-lg has-[[data-slot=dialog-footer]]:pb-0",
+        "motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:zoom-in-100! motion-safe:data-[state=open]:slide-in-from-bottom-20 motion-safe:data-[state=open]:duration-600",
+        "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95",
+        y.classNames.fullWidth,
+        a
+      ),
+      "data-slot": "dialog-content",
+      "data-testid": "spectral-dialog-content",
+      onEscapeKeyDown: d,
+      onInteractOutside: r,
+      onPointerDownOutside: n,
+      ...g,
+      children: [
+        t,
+        c && /* @__PURE__ */ l(
+          i,
+          {
+            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+            "data-slot": "dialog-close",
+            "data-testid": "spectral-dialog-close",
+            children: [
+              /* @__PURE__ */ o(m, { size: 16 }),
+              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close dialog" })
+            ]
+          }
+        )
+      ]
     }
-  );
-}
-function _({
-  className: t,
-  children: a,
-  dialogOverlay: l = !0,
-  showCloseButton: d = !0,
-  onEscapeKeyDown: r,
-  onInteractOutside: n,
-  onPointerDownOutside: c,
-  ...g
-}) {
-  return /* @__PURE__ */ s(D, { "data-slot": "dialog-portal", "data-testid": "spectral-dialog-portal", children: [
-    l && /* @__PURE__ */ e(C, {}),
-    /* @__PURE__ */ s(
-      u,
-      {
-        className: o(
-          "bg-dialog-bg fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full max-w-xl translate-x-[-50%] translate-y-[-50%] flex-col gap-4 overflow-y-auto rounded-lg px-6 pt-6 pb-6 shadow-lg duration-200 has-[[data-slot=dialog-footer]]:pb-0",
-          y.classNames.fullWidth,
-          t
-        ),
-        "data-slot": "dialog-content",
-        "data-testid": "spectral-dialog-content",
-        onEscapeKeyDown: r,
-        onInteractOutside: n,
-        onPointerDownOutside: c,
-        ...g,
-        children: [
-          a,
-          d && /* @__PURE__ */ s(
-            i,
-            {
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
-              "data-slot": "dialog-close",
-              "data-testid": "spectral-dialog-close",
-              children: [
-                /* @__PURE__ */ e(p, { size: 16 }),
-                /* @__PURE__ */ e("span", { className: "sr-only", children: "Close dialog" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function F({ className: t, ...a }) {
-  return /* @__PURE__ */ e("div", { className: o("flex flex-col gap-2 text-center sm:text-left", t), "data-slot": "dialog-header", "data-testid": "spectral-dialog-header", ...a });
-}
-function H({ className: t, ...a }) {
-  return /* @__PURE__ */ e("div", { className: o("bg-dialog-bg/85 sticky bottom-0 z-10 -mx-6 flex flex-col-reverse gap-2 px-6 py-4 sm:flex-row sm:justify-end", t), "data-slot": "dialog-footer", "data-testid": "spectral-dialog-footer", ...a });
-}
-function I({ className: t, ...a }) {
-  return /* @__PURE__ */ e(h, { className: o("text-2xl leading-none font-semibold", t), "data-slot": "dialog-title", "data-testid": "spectral-dialog-title", ...a });
-}
-function S({ className: t, ...a }) {
-  return /* @__PURE__ */ e(m, { className: o("text-muted-foreground text-sm", t), "data-slot": "dialog-description", "data-testid": "spectral-dialog-description", ...a });
-}
+  )
+] }), F = ({ className: t, ...a }) => /* @__PURE__ */ o("div", { className: e("flex flex-col gap-2 text-center sm:text-left", t), "data-slot": "dialog-header", "data-testid": "spectral-dialog-header", ...a }), H = ({ className: t, ...a }) => /* @__PURE__ */ o("div", { className: e("bg-dialog-bg/85 sticky bottom-0 z-10 -mx-6 flex flex-col-reverse gap-2 px-6 py-4 sm:flex-row sm:justify-end", t), "data-slot": "dialog-footer", "data-testid": "spectral-dialog-footer", ...a }), I = ({ className: t, ...a }) => /* @__PURE__ */ o(h, { className: e("text-2xl leading-none font-semibold", t), "data-slot": "dialog-title", "data-testid": "spectral-dialog-title", ...a }), S = ({ className: t, ...a }) => /* @__PURE__ */ o(u, { className: e("text-muted-foreground text-sm", t), "data-slot": "dialog-description", "data-testid": "spectral-dialog-description", ...a });
 export {
   j as Dialog,
   P as DialogClose,

package/dist/Drawer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type DrawerProps = {
+export interface DrawerProps {
     children?: ReactNode;
     defaultOpen?: boolean;
     description?: string;
@@ -11,6 +11,6 @@ export type DrawerProps = {
     size?: string;
     title?: string;
     trigger: ReactNode;
-};
+}
 export declare const Drawer: ({ children, defaultOpen, description, direction, dismissible, modal, onOpenChange, open, size, title, trigger }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.js

@@ -1,8 +1,8 @@
 import "./styles/main.css";
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { SpectralProvider as f } from "./SpectralProvider.js";
-import { D as e } from "./index-B3UpsZ2x.js";
-const u = ({ children: d, defaultOpen: o = !1, description: i, direction: l = "right", dismissible: c = !0, modal: p = !0, onOpenChange: n, open: m, size: r = "380px", title: x, trigger: h }) => {
+import { D as e } from "./index-CrjD9cAD.js";
+const u = ({ children: l, defaultOpen: d = !1, description: i, direction: o = "right", dismissible: c = !0, modal: n = !0, onOpenChange: p, open: x, size: r = "380px", title: h, trigger: m }) => {
   const a = "font-sans! fixed", w = {
     left: {
       className: `${a} top-0 bottom-0 left-0 shadow-[20px_0_20px_rgba(0,0,0,0.4)]`,
@@ -20,16 +20,16 @@ const u = ({ children: d, defaultOpen: o = !1, description: i, direction: l = "r
       className: `${a} bottom-0 left-0 right-0 shadow-[0_-20px_20px_rgba(0,0,0,0.4)]`,
       style: { height: r }
     }
-  }, { className: g, style: b } = w[l];
-  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ s(e.Root, { defaultOpen: o, dismissible: c, open: m, onOpenChange: n, direction: l, modal: p, "data-testid": "spectral-drawer", children: [
-    /* @__PURE__ */ t(e.Trigger, { asChild: !0, "data-testid": "spectral-drawer-trigger", children: h }),
+  }, { className: g, style: b } = w[o];
+  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ s(e.Root, { "data-testid": "spectral-drawer", defaultOpen: d, direction: o, dismissible: c, modal: n, onOpenChange: p, open: x, children: [
+    /* @__PURE__ */ t(e.Trigger, { asChild: !0, "data-testid": "spectral-drawer-trigger", children: m }),
     /* @__PURE__ */ s(e.Portal, { children: [
       /* @__PURE__ */ t(e.Overlay, { className: "fixed inset-0 bg-transparent", "data-testid": "spectral-drawer-overlay" }),
-      /* @__PURE__ */ t(e.Content, { asChild: !0, className: `bg-drawer-bg z-10 flex flex-col outline-none [&_*]:box-border ${g}`, style: b, "data-testid": "spectral-drawer-content", children: /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ t(e.Content, { asChild: !0, className: `bg-drawer-bg z-10 flex flex-col overscroll-contain outline-none **:box-border ${g}`, style: b, "data-testid": "spectral-drawer-content", children: /* @__PURE__ */ s("div", { children: [
         /* @__PURE__ */ t(e.Close, {}),
-        /* @__PURE__ */ t(e.Title, { className: "text-text-primary px-3 pt-4 text-lg font-medium", "data-testid": "spectral-drawer-title", children: x }),
+        /* @__PURE__ */ t(e.Title, { className: "text-text-primary px-3 pt-4 text-lg font-medium", "data-testid": "spectral-drawer-title", children: h }),
         /* @__PURE__ */ t(e.Description, { className: "text-text-secondary! mb-2 px-3 text-xs! uppercase", "data-testid": "spectral-drawer-description", children: i }),
-        /* @__PURE__ */ t("div", { className: "w-auto min-w-0 overflow-hidden px-3 py-2 [&_*]:min-w-0 [&>*]:min-w-0", "data-testid": "spectral-drawer-body", children: d })
+        /* @__PURE__ */ t("div", { className: "w-auto min-w-0 overflow-hidden overscroll-contain px-3 py-2 *:box-border *:min-w-0", "data-testid": "spectral-drawer-body", children: l })
       ] }) })
     ] })
   ] }) });

package/dist/HoverCard.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps } from 'react';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-type Side = 'top' | 'right' | 'bottom' | 'left';
 type Align = 'start' | 'center' | 'end';
-type HoverCardContentProps = {
+type Side = 'top' | 'right' | 'bottom' | 'left';
+interface HoverCardContentProps {
     align?: Align;
     alignOffset?: number;
     collisionBoundary?: Element | null | Array<Element | null>;
@@ -10,14 +10,15 @@ type HoverCardContentProps = {
     side?: Side;
     sideOffset?: number;
     width?: number | 'w-fit' | 'trigger-width';
-};
-export type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root> & HoverCardContentProps;
+}
+export interface HoverCardProps extends ComponentProps<typeof HoverCardPrimitive.Root>, HoverCardContentProps {
+}
 export declare const HoverCard: {
     ({ align, alignOffset, collisionBoundary, collisionPadding, side, sideOffset, width, ...props }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const HoverCardTrigger: {
-    ({ ...props }: ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const HoverCardContent: {