@spear-ai/spectral 1.6.17 → 1.8.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 dr, DateTimeConfigSchema as cr, HourFormatSchema as ur, PICKER_TYPES as gr, PeriodSchema as fr, TIME_BOUNDS as hr, TimePickerTypeSchema as Tr, TimeValueSchema as vr, convert12HourTo24Hour as xr, display12HourValue as Hr, formatSelectPeriodLabel as yr, formatTimeNumber as Vr, getAriaLabel as Sr, getAriaValueMinMax as Cr, getAriaValueNow as Nr, getArrowByType as Pr, getDateByType as Ar, getLocalizedPeriodLabel as Dr, getLocalizedPeriodLabels as br, getPeriodFromHours as wr, getValid12Hour as Ir, getValidArrow12Hour as Lr, getValidArrowHour as Mr, getValidArrowMinute as kr, getValidArrowNumber as Fr, getValidHour as Er, getValidMinute as Br, getValidNumber as Or, isValid12Hour as jr, isValidHour as Rr, isValidMinute as _r, set12Hours as zr, setDateByType as Ur, setHours as Kr, setMinutes as Yr } 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";
@@ -39,7 +39,6 @@ import "./Icons/KeyboardIcon.js";
 import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
-import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
 import "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
@@ -53,6 +52,7 @@ import "./Icons/PanelIconClose.js";
 import "./Icons/PanelIconOpen.js";
 import "./Icons/PlayIcon.js";
 import "./Icons/PlusIcon.js";
+import "./Icons/PolygonIcon.js";
 import "./Icons/ResetIcon.js";
 import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
@@ -76,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 Gr } from "./DateTimePicker/DateTimeInput.js";
-import { TimePeriodSelect as Qr } 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,
@@ -123,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",
@@ -132,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,
-  dr as DEFAULT_TRANSLATIONS,
-  cr as DateTimeConfigSchema,
-  w as DateTimeDisplayInput,
-  Gr as DateTimeInput,
-  R as DateTimePicker,
-  ur as HourFormatSchema,
-  gr as PICKER_TYPES,
-  fr as PeriodSchema,
-  hr as TIME_BOUNDS,
-  Qr as TimePeriodSelect,
-  M as TimePicker,
-  Tr as TimePickerTypeSchema,
-  vr as TimeValueSchema,
-  xr as convert12HourTo24Hour,
-  L as detectHourFormat,
-  Hr as display12HourValue,
-  yr as formatSelectPeriodLabel,
-  Vr as formatTimeNumber,
+  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,
-  Cr as getAriaValueMinMax,
-  Nr as getAriaValueNow,
-  Pr as getArrowByType,
-  Ar as getDateByType,
-  Dr as getLocalizedPeriodLabel,
-  br as getLocalizedPeriodLabels,
+  Nr as getAriaValueMinMax,
+  Pr as getAriaValueNow,
+  Ar as getArrowByType,
+  Dr as getDateByType,
+  br as getLocalizedPeriodLabel,
+  kr as getLocalizedPeriodLabels,
   wr as getPeriodFromHours,
-  I as getResolvedLocale,
+  w as getResolvedLocale,
   Ir as getValid12Hour,
   Lr as getValidArrow12Hour,
   Mr as getValidArrowHour,
-  kr as getValidArrowMinute,
-  Fr as getValidArrowNumber,
-  Er as getValidHour,
-  Br as getValidMinute,
-  Or as getValidNumber,
-  jr as isValid12Hour,
-  Rr as isValidHour,
-  _r as isValidMinute,
-  zr as set12Hours,
-  Ur as setDateByType,
-  Kr as setHours,
-  Yr as setMinutes
+  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: {