@evinvest/uikit 0.14.0 → 0.15.0

package/dist/index.js

@@ -334,7 +334,9 @@ import "react";
 var ALERT_BASE = "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current";
 var alertVariants = {
   "neutral": "bg-card text-ink",
-  "destructive": "text-accent-error bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-error/90"
+  "destructive": "text-accent-error bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-error/90",
+  "success": "text-positive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-positive/90",
+  "info": "text-accent-info bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-info/90"
 };
 var ALERT_TITLE = "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight";
 var ALERT_DESCRIPTION = "text-ink-soft col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed";
@@ -1302,24 +1304,27 @@ function Footer({
 }
 
 // src/components/input.tsx
-import "react";
+import * as React24 from "react";
 
 // src/generated/input.ts
 var INPUT_BASE = "file:text-ink placeholder:text-ink-soft selection:bg-primary selection:text-on-primary border-input h-9 w-full min-w-0 rounded-[var(--control-radius)] border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error";
 
 // src/components/input.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx14(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(INPUT_BASE, className),
-      ...props
-    }
-  );
-}
+var Input = React24.forwardRef(
+  function Input2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx14(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(INPUT_BASE, className),
+        ...props
+      }
+    );
+  }
+);
 
 // src/components/textarea.tsx
 import "react";
@@ -6758,6 +6763,21 @@ function mondayIndex(d) {
 function sameDay(a, b) {
   return !!a && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function outOfRange(day, min, max) {
+  const t = day.getTime();
+  return !!min && t < startOfDay(min).getTime() || !!max && t > startOfDay(max).getTime();
+}
+var MONDAY = new Date(2024, 0, 1);
+function localisedWeekdays(locale) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  return Array.from(
+    { length: 7 },
+    (_, i) => fmt.format(new Date(MONDAY.getFullYear(), MONDAY.getMonth(), MONDAY.getDate() + i))
+  );
+}
 function Calendar({
   selected,
   onSelect,
@@ -6765,6 +6785,12 @@ function Calendar({
   defaultMonth,
   onMonthChange,
   today = /* @__PURE__ */ new Date(),
+  min,
+  max,
+  disabled = false,
+  previousMonthLabel = "Previous month",
+  nextMonthLabel = "Next month",
+  locale,
   className
 }) {
   const [internal, setInternal] = React66.useState(
@@ -6778,7 +6804,8 @@ function Calendar({
   };
   const year = view.getFullYear();
   const monthIndex = view.getMonth();
-  const caption = `${MONTHS[monthIndex]} ${year}`;
+  const caption = locale ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(view) : `${MONTHS[monthIndex]} ${year}`;
+  const weekdays = locale ? localisedWeekdays(locale) : WEEKDAYS;
   const lead = mondayIndex(view);
   const total = new Date(year, monthIndex + 1, 0).getDate();
   const cells = [];
@@ -6806,32 +6833,34 @@ function Calendar({
             {
               type: "button",
               className: navClass,
-              "aria-label": "Previous month",
+              "aria-label": previousMonthLabel,
+              disabled,
               onClick: () => go(-1),
               children: /* @__PURE__ */ jsx56(Chevron, { d: CHEVRON_LEFT })
             }
           ),
-          /* @__PURE__ */ jsx56("div", { className: CALENDAR_CAPTION, children: caption }),
+          /* @__PURE__ */ jsx56("div", { "data-slot": "calendar-caption", className: CALENDAR_CAPTION, children: caption }),
           /* @__PURE__ */ jsx56(
             "button",
             {
               type: "button",
               className: navClass,
-              "aria-label": "Next month",
+              "aria-label": nextMonthLabel,
+              disabled,
               onClick: () => go(1),
               children: /* @__PURE__ */ jsx56(Chevron, { d: CHEVRON_RIGHT })
             }
           )
         ] }),
         /* @__PURE__ */ jsxs26("table", { className: CALENDAR_GRID, role: "grid", children: [
-          /* @__PURE__ */ jsx56("thead", { children: /* @__PURE__ */ jsx56("tr", { className: CALENDAR_WEEKDAY_ROW, children: WEEKDAYS.map((wd) => /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx56("thead", { children: /* @__PURE__ */ jsx56("tr", { className: CALENDAR_WEEKDAY_ROW, children: weekdays.map((wd, i) => /* @__PURE__ */ jsx56(
             "th",
             {
               scope: "col",
               className: CALENDAR_WEEKDAY,
               children: wd
             },
-            wd
+            i
           )) }) }),
           /* @__PURE__ */ jsx56("tbody", { children: weeks.map((week, wi) => /* @__PURE__ */ jsx56("tr", { className: CALENDAR_WEEK, children: week.map((cell, ci) => {
             if (cell === null) {
@@ -6846,6 +6875,7 @@ function Calendar({
             const date = new Date(year, monthIndex, cell);
             const isSelected = sameDay(selected, date);
             const isToday = sameDay(today, date);
+            const isDisabled = disabled || outOfRange(date, min, max);
             return /* @__PURE__ */ jsx56(
               "td",
               {
@@ -6859,7 +6889,10 @@ function Calendar({
                     "data-slot": "calendar-day",
                     "data-selected": isSelected,
                     "data-today": isToday,
-                    onClick: () => onSelect?.(date),
+                    ...isDisabled ? { "data-disabled": "true", disabled: true } : {},
+                    onClick: () => {
+                      if (!isDisabled) onSelect?.(date);
+                    },
                     className: cn(
                       buttonVariants({
                         variant: "ghost",
@@ -6882,9 +6915,262 @@ function Calendar({
   );
 }
 
-// src/components/sonner.tsx
+// src/components/date-time-picker.tsx
 import * as React67 from "react";
 
+// src/generated/date-time-picker.ts
+var DATE_TIME_PICKER_TRIGGER = "w-full justify-start gap-2 text-left font-normal data-[placeholder]:text-ink-soft [&>svg]:text-ink-soft";
+var DATE_TIME_PICKER_CONTENT = "w-auto p-0";
+var DATE_TIME_PICKER_TIME = "flex items-center gap-2 border-t border-border px-3 py-2";
+var DATE_TIME_PICKER_TIME_INPUT = "w-14 text-center tabular-nums";
+var DATE_TIME_PICKER_TIME_SEPARATOR = "text-ink-soft select-none";
+var DATE_TIME_PICKER_CLEAR = "ml-auto";
+
+// src/components/date-time-picker.tsx
+import { jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+var CALENDAR_ICON = [
+  "M8 2v4",
+  "M16 2v4",
+  "M3 10h18",
+  "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
+];
+function CalendarIcon() {
+  return /* @__PURE__ */ jsx57(
+    "svg",
+    {
+      className: "size-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: CALENDAR_ICON.map((d) => /* @__PURE__ */ jsx57("path", { d }, d))
+    }
+  );
+}
+var pad = (n) => String(n).padStart(2, "0");
+function atMinute(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
+}
+function clampMoment(d, min, max) {
+  const lo = min && atMinute(min);
+  const hi = max && atMinute(max);
+  if (lo && d.getTime() < lo.getTime()) return lo;
+  if (hi && d.getTime() > hi.getTime()) return hi;
+  return d;
+}
+function parseField(raw, max) {
+  const digits = raw.replace(/\D/g, "").slice(-2);
+  if (digits === "") return null;
+  return Math.min(Number(digits), max);
+}
+var selectAll = (e) => e.currentTarget.select();
+function isoLabel(d) {
+  return `${d.getFullYear().toString().padStart(4, "0")}-${pad(d.getMonth() + 1)}-${pad(
+    d.getDate()
+  )} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function DateTimePicker({
+  value: valueProp,
+  defaultValue = null,
+  onChange,
+  min,
+  max,
+  locale,
+  format,
+  placeholder = "",
+  labels = {},
+  disabled = false,
+  name,
+  today = /* @__PURE__ */ new Date(),
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  align = "start",
+  className,
+  id,
+  ...rest
+}) {
+  const [value, setValue] = useControllableState({
+    ...valueProp !== void 0 ? { value: valueProp } : {},
+    defaultValue,
+    ...onChange ? { onChange } : {}
+  });
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const rootRef = React67.useRef(null);
+  const hoursRef = React67.useRef(null);
+  React67.useEffect(() => {
+    if (!isOpen) return;
+    hoursRef.current?.focus();
+    return () => {
+      const active = document.activeElement;
+      const content = hoursRef.current?.closest("[data-slot=date-time-picker-content]");
+      const lost = !active || active === document.body || !!content?.contains(active);
+      if (lost) {
+        rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
+      }
+    };
+  }, [isOpen]);
+  const emit = (next) => setValue(clampMoment(atMinute(next), min, max));
+  const base = () => value ? new Date(value.getTime()) : new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const onSelect = (day) => emit(
+    new Date(
+      day.getFullYear(),
+      day.getMonth(),
+      day.getDate(),
+      value?.getHours() ?? 0,
+      value?.getMinutes() ?? 0
+    )
+  );
+  const onHours = (e) => {
+    const hour = parseField(e.target.value, 23);
+    if (hour === null) return;
+    const next = base();
+    next.setHours(hour);
+    emit(next);
+  };
+  const onMinutes = (e) => {
+    const minute = parseField(e.target.value, 59);
+    if (minute === null) return;
+    const next = base();
+    next.setMinutes(minute);
+    emit(next);
+  };
+  const onClear = () => {
+    setValue(null);
+    setOpen(false);
+  };
+  const onContentBlur = (e) => {
+    const next = e.relatedTarget;
+    if (!(next instanceof Node)) return;
+    if (e.currentTarget.contains(next) || rootRef.current?.contains(next)) return;
+    setOpen(false);
+  };
+  const label = value ? format ? format(value) : locale ? (
+    // The fields are 24-hour, so the label is too — even where the locale
+    // would default to 12-hour ("2:05 PM" over a "14" hours field).
+    new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short",
+      hourCycle: "h23"
+    }).format(value)
+  ) : isoLabel(value) : placeholder;
+  return /* @__PURE__ */ jsx57("div", { "data-slot": "date-time-picker", ref: rootRef, children: /* @__PURE__ */ jsxs27(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs27(
+      PopoverTrigger,
+      {
+        type: "button",
+        "data-slot": "date-time-picker-trigger",
+        "data-placeholder": value ? void 0 : "true",
+        "aria-haspopup": "dialog",
+        className: cn(
+          buttonVariants({ variant: "outline", size: "md" }),
+          DATE_TIME_PICKER_TRIGGER,
+          className
+        ),
+        disabled,
+        ...id !== void 0 ? { id } : {},
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx57(CalendarIcon, {}),
+          /* @__PURE__ */ jsx57("span", { children: label })
+        ]
+      }
+    ),
+    name !== void 0 && /* @__PURE__ */ jsx57(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: value ? String(Math.floor(value.getTime() / 1e3)) : ""
+      }
+    ),
+    /* @__PURE__ */ jsxs27(
+      PopoverContent,
+      {
+        "data-slot": "date-time-picker-content",
+        role: "dialog",
+        "aria-label": labels.dialog ?? "Choose date and time",
+        align,
+        onBlur: onContentBlur,
+        className: DATE_TIME_PICKER_CONTENT,
+        children: [
+          /* @__PURE__ */ jsx57(
+            Calendar,
+            {
+              ...value ? { selected: value } : {},
+              onSelect,
+              defaultMonth: value ?? min ?? today,
+              today,
+              disabled,
+              ...min ? { min } : {},
+              ...max ? { max } : {},
+              ...locale !== void 0 ? { locale } : {},
+              ...labels.previousMonth !== void 0 ? { previousMonthLabel: labels.previousMonth } : {},
+              ...labels.nextMonth !== void 0 ? { nextMonthLabel: labels.nextMonth } : {}
+            }
+          ),
+          /* @__PURE__ */ jsxs27("div", { className: DATE_TIME_PICKER_TIME, "data-slot": "date-time-picker-time", children: [
+            /* @__PURE__ */ jsx57(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                onFocus: selectAll,
+                className: DATE_TIME_PICKER_TIME_INPUT,
+                ref: hoursRef,
+                "data-slot": "date-time-picker-hours",
+                "aria-label": labels.hours ?? "Hours",
+                value: pad(value?.getHours() ?? 0),
+                disabled,
+                onChange: onHours
+              }
+            ),
+            /* @__PURE__ */ jsx57("span", { className: DATE_TIME_PICKER_TIME_SEPARATOR, "aria-hidden": true, children: ":" }),
+            /* @__PURE__ */ jsx57(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                onFocus: selectAll,
+                className: DATE_TIME_PICKER_TIME_INPUT,
+                "data-slot": "date-time-picker-minutes",
+                "aria-label": labels.minutes ?? "Minutes",
+                value: pad(value?.getMinutes() ?? 0),
+                disabled,
+                onChange: onMinutes
+              }
+            ),
+            /* @__PURE__ */ jsx57(
+              "button",
+              {
+                type: "button",
+                className: buttonVariants({ variant: "ghost", size: "sm", className: DATE_TIME_PICKER_CLEAR }),
+                "data-slot": "date-time-picker-clear",
+                disabled,
+                onClick: onClear,
+                children: labels.clear ?? "Clear"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/sonner.tsx
+import * as React68 from "react";
+
 // src/generated/sonner.ts
 var TOAST_BASE = "pointer-events-auto flex w-full items-start gap-3 rounded-md border p-4 text-sm shadow-lg";
 var toastVariantClasses = {
@@ -6908,7 +7194,7 @@ var TOAST_CONTENT = "flex-1 space-y-1";
 var TOAST_TITLE = "font-medium";
 
 // src/components/sonner.tsx
-import { jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 4e3;
 var SWIPE_THRESHOLD = 45;
 var SWIPE_VELOCITY = 0.11;
@@ -6973,17 +7259,17 @@ function ToastItem({
   reportHeight,
   removeHeight
 }) {
-  const ref = React67.useRef(null);
-  const [height, setHeight] = React67.useState(0);
-  const remainingRef = React67.useRef(t.duration);
-  const startedRef = React67.useRef(0);
-  const flingRef = React67.useRef(
+  const ref = React68.useRef(null);
+  const [height, setHeight] = React68.useState(0);
+  const remainingRef = React68.useRef(t.duration);
+  const startedRef = React68.useRef(0);
+  const flingRef = React68.useRef(
     void 0
   );
-  const dragRef = React67.useRef(
+  const dragRef = React68.useRef(
     null
   );
-  React67.useLayoutEffect(() => {
+  React68.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     el.style.height = "auto";
@@ -6994,12 +7280,12 @@ function ToastItem({
       reportHeight(t.id, h);
     }
   }, [t.id, t.message, t.description, reportHeight]);
-  React67.useEffect(() => () => removeHeight(t.id), [t.id, removeHeight]);
-  const mountedClosing = React67.useRef(t.state === "closing");
-  React67.useEffect(() => {
+  React68.useEffect(() => () => removeHeight(t.id), [t.id, removeHeight]);
+  const mountedClosing = React68.useRef(t.state === "closing");
+  React68.useEffect(() => {
     if (mountedClosing.current) store.remove(t.id);
   }, [t.id]);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (t.duration === Infinity || t.state === "closing" || paused) return;
     startedRef.current = Date.now();
     const id = setTimeout(() => store.dismiss(t.id), remainingRef.current);
@@ -7011,7 +7297,7 @@ function ToastItem({
       );
     };
   }, [paused, t.id, t.duration, t.state]);
-  React67.useEffect(
+  React68.useEffect(
     () => () => {
       if (flingRef.current) clearTimeout(flingRef.current);
     },
@@ -7070,7 +7356,7 @@ function ToastItem({
       );
     }
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "li",
     {
       ref,
@@ -7098,11 +7384,11 @@ function ToastItem({
         toastVariantClasses[t.variant]
       ),
       children: [
-        /* @__PURE__ */ jsxs27("div", { className: TOAST_CONTENT, children: [
-          /* @__PURE__ */ jsx57("div", { className: TOAST_TITLE, children: t.message }),
-          t.description ? /* @__PURE__ */ jsx57("div", { className: "text-ink-soft text-sm", children: t.description }) : null
+        /* @__PURE__ */ jsxs28("div", { className: TOAST_CONTENT, children: [
+          /* @__PURE__ */ jsx58("div", { className: TOAST_TITLE, children: t.message }),
+          t.description ? /* @__PURE__ */ jsx58("div", { className: "text-ink-soft text-sm", children: t.description }) : null
         ] }),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "button",
           {
             type: "button",
@@ -7110,7 +7396,7 @@ function ToastItem({
             "data-slot": "toast-close",
             onClick: () => store.dismiss(t.id),
             className: TOAST_CLOSE,
-            children: /* @__PURE__ */ jsx57(
+            children: /* @__PURE__ */ jsx58(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -7123,7 +7409,7 @@ function ToastItem({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx57("path", { d: "M18 6 6 18M6 6l12 12" })
+                children: /* @__PURE__ */ jsx58("path", { d: "M18 6 6 18M6 6l12 12" })
               }
             )
           }
@@ -7137,17 +7423,17 @@ function Toaster({
   className,
   ...props
 }) {
-  const [toasts, setToasts] = React67.useState([]);
-  const [heights, setHeights] = React67.useState(/* @__PURE__ */ new Map());
-  const [paused, setPaused] = React67.useState(false);
-  React67.useEffect(() => store.subscribe(setToasts), []);
+  const [toasts, setToasts] = React68.useState([]);
+  const [heights, setHeights] = React68.useState(/* @__PURE__ */ new Map());
+  const [paused, setPaused] = React68.useState(false);
+  React68.useEffect(() => store.subscribe(setToasts), []);
   const onEnter = () => setPaused(true);
   const onLeave = (e) => {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       setPaused(false);
     }
   };
-  const reportHeight = React67.useCallback((id, h) => {
+  const reportHeight = React68.useCallback((id, h) => {
     setHeights((prev) => {
       if (prev.get(id) === h) return prev;
       const next = new Map(prev);
@@ -7155,7 +7441,7 @@ function Toaster({
       return next;
     });
   }, []);
-  const removeHeight = React67.useCallback((id) => {
+  const removeHeight = React68.useCallback((id) => {
     setHeights((prev) => {
       if (!prev.has(id)) return prev;
       const next = new Map(prev);
@@ -7173,7 +7459,7 @@ function Toaster({
     sum += heights.get(t.id) ?? 0;
     return o;
   });
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     "ol",
     {
       "data-slot": "toaster",
@@ -7194,7 +7480,7 @@ function Toaster({
       onPointerOut: onLeave,
       onFocus: onEnter,
       onBlur: onLeave,
-      children: ordered.map((t, i) => /* @__PURE__ */ jsx57(
+      children: ordered.map((t, i) => /* @__PURE__ */ jsx58(
         ToastItem,
         {
           toast: t,
@@ -7212,7 +7498,7 @@ function Toaster({
 }
 
 // src/components/form.tsx
-import * as React68 from "react";
+import * as React69 from "react";
 
 // src/generated/form.ts
 var FORM_ITEM = "grid gap-2";
@@ -7220,21 +7506,21 @@ var FORM_DESCRIPTION = "text-ink-soft text-sm";
 var FORM_MESSAGE = "text-accent-error text-sm";
 
 // src/components/form.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
-var FormItemContext = React68.createContext(null);
+import { jsx as jsx59 } from "react/jsx-runtime";
+var FormItemContext = React69.createContext(null);
 function useFormItem() {
-  const ctx = React68.useContext(FormItemContext);
+  const ctx = React69.useContext(FormItemContext);
   if (!ctx) {
     throw new Error("Form parts must be used within <FormItem>");
   }
   return ctx;
 }
 function Form({ ...props }) {
-  return /* @__PURE__ */ jsx58("form", { "data-slot": "form", ...props });
+  return /* @__PURE__ */ jsx59("form", { "data-slot": "form", ...props });
 }
 function FormItem({ className, ...props }) {
-  const id = React68.useId();
-  const value = React68.useMemo(
+  const id = React69.useId();
+  const value = React69.useMemo(
     () => ({
       id,
       formItemId: `${id}-form-item`,
@@ -7243,7 +7529,7 @@ function FormItem({ className, ...props }) {
     }),
     [id]
   );
-  return /* @__PURE__ */ jsx58(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx58("div", { "data-slot": "form-item", className: cn(FORM_ITEM, className), ...props }) });
+  return /* @__PURE__ */ jsx59(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx59("div", { "data-slot": "form-item", className: cn(FORM_ITEM, className), ...props }) });
 }
 function FormLabel({
   className,
@@ -7251,7 +7537,7 @@ function FormLabel({
   ...props
 }) {
   const { formItemId } = useFormItem();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Label,
     {
       "data-slot": "form-label",
@@ -7267,7 +7553,7 @@ function FormControl({
   ...props
 }) {
   const { formItemId, formDescriptionId, formMessageId } = useFormItem();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Slot,
     {
       "data-slot": "form-control",
@@ -7280,7 +7566,7 @@ function FormControl({
 }
 function FormDescription({ className, ...props }) {
   const { formDescriptionId } = useFormItem();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "p",
     {
       "data-slot": "form-description",
@@ -7295,7 +7581,7 @@ function FormMessage({ className, children, ...props }) {
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "p",
     {
       "data-slot": "form-message",
@@ -7308,7 +7594,7 @@ function FormMessage({ className, children, ...props }) {
 }
 
 // src/components/resizable.tsx
-import * as React69 from "react";
+import * as React70 from "react";
 
 // src/generated/resizable.ts
 var RESIZABLE_GROUP = "flex h-full w-full data-[panel-group-direction=vertical]:flex-col";
@@ -7317,10 +7603,10 @@ var RESIZABLE_HANDLE = "bg-border focus-visible:ring-ring relative flex w-px ite
 var RESIZABLE_HANDLE_GRIP = "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border";
 
 // src/components/resizable.tsx
-import { jsx as jsx59, jsxs as jsxs28 } from "react/jsx-runtime";
-var ResizableContext = React69.createContext(null);
+import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
+var ResizableContext = React70.createContext(null);
 function useResizable() {
-  const ctx = React69.useContext(ResizableContext);
+  const ctx = React70.useContext(ResizableContext);
   if (!ctx)
     throw new Error("Resizable parts must be used within a ResizablePanelGroup");
   return ctx;
@@ -7343,9 +7629,9 @@ function ResizablePanelGroup({
   children,
   ...props
 }) {
-  const [sizes, setSizes] = React69.useState([]);
-  const groupRef = React69.useRef(null);
-  const register = React69.useCallback((index, defaultSize) => {
+  const [sizes, setSizes] = React70.useState([]);
+  const groupRef = React70.useRef(null);
+  const register = React70.useCallback((index, defaultSize) => {
     setSizes((prev) => {
       if (prev[index] !== void 0) return prev;
       const next = prev.slice();
@@ -7354,14 +7640,14 @@ function ResizablePanelGroup({
       return next;
     });
   }, []);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (sizes.length) onLayout?.(sizes);
   }, [sizes, onLayout]);
-  const value = React69.useMemo(
+  const value = React70.useMemo(
     () => ({ sizes, setSizes, register, direction, keyboardStep, groupRef }),
     [sizes, register, direction, keyboardStep]
   );
-  return /* @__PURE__ */ jsx59(ResizableContext.Provider, { value, children: /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(ResizableContext.Provider, { value, children: /* @__PURE__ */ jsx60(
     "div",
     {
       ref: groupRef,
@@ -7382,11 +7668,11 @@ function ResizablePanel({
   ...props
 }) {
   const { sizes, register } = useResizable();
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     register(index, defaultSize);
   }, [register, index, defaultSize]);
   const basis = sizes[index] ?? defaultSize;
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     "div",
     {
       "data-slot": "resizable-panel",
@@ -7405,12 +7691,12 @@ function ResizableHandle({
   ...props
 }) {
   const { setSizes, direction, keyboardStep, groupRef } = useResizable();
-  const draggingRef = React69.useRef(false);
-  const resize = React69.useCallback(
+  const draggingRef = React70.useRef(false);
+  const resize = React70.useCallback(
     (delta) => setSizes((prev) => redistribute(prev, index, delta)),
     [setSizes, index]
   );
-  const onPointerMove = React69.useCallback(
+  const onPointerMove = React70.useCallback(
     (event) => {
       if (!draggingRef.current) return;
       const rect = groupRef.current?.getBoundingClientRect();
@@ -7422,7 +7708,7 @@ function ResizableHandle({
     },
     [direction, resize, groupRef]
   );
-  const onPointerUp = React69.useCallback(() => {
+  const onPointerUp = React70.useCallback(() => {
     draggingRef.current = false;
     window.removeEventListener("pointermove", onPointerMove);
     window.removeEventListener("pointerup", onPointerUp);
@@ -7433,7 +7719,7 @@ function ResizableHandle({
     window.addEventListener("pointermove", onPointerMove);
     window.addEventListener("pointerup", onPointerUp);
   };
-  React69.useEffect(() => () => onPointerUp(), [onPointerUp]);
+  React70.useEffect(() => () => onPointerUp(), [onPointerUp]);
   const onKeyDown = (event) => {
     let delta;
     switch (event.key) {
@@ -7453,7 +7739,7 @@ function ResizableHandle({
     event.preventDefault();
     resize(delta);
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       "data-slot": "resizable-handle",
@@ -7466,7 +7752,7 @@ function ResizableHandle({
       onKeyDown,
       ...props,
       children: [
-        withHandle && /* @__PURE__ */ jsx59("div", { className: RESIZABLE_HANDLE_GRIP, children: /* @__PURE__ */ jsxs28(
+        withHandle && /* @__PURE__ */ jsx60("div", { className: RESIZABLE_HANDLE_GRIP, children: /* @__PURE__ */ jsxs29(
           "svg",
           {
             className: "size-2.5",
@@ -7481,12 +7767,12 @@ function ResizableHandle({
             strokeLinejoin: "round",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx59("circle", { cx: "9", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx59("circle", { cx: "9", cy: "5", r: "1" }),
-              /* @__PURE__ */ jsx59("circle", { cx: "9", cy: "19", r: "1" }),
-              /* @__PURE__ */ jsx59("circle", { cx: "15", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx59("circle", { cx: "15", cy: "5", r: "1" }),
-              /* @__PURE__ */ jsx59("circle", { cx: "15", cy: "19", r: "1" })
+              /* @__PURE__ */ jsx60("circle", { cx: "9", cy: "12", r: "1" }),
+              /* @__PURE__ */ jsx60("circle", { cx: "9", cy: "5", r: "1" }),
+              /* @__PURE__ */ jsx60("circle", { cx: "9", cy: "19", r: "1" }),
+              /* @__PURE__ */ jsx60("circle", { cx: "15", cy: "12", r: "1" }),
+              /* @__PURE__ */ jsx60("circle", { cx: "15", cy: "5", r: "1" }),
+              /* @__PURE__ */ jsx60("circle", { cx: "15", cy: "19", r: "1" })
             ]
           }
         ) }),
@@ -7497,7 +7783,7 @@ function ResizableHandle({
 }
 
 // src/components/terminal.tsx
-import * as React70 from "react";
+import * as React71 from "react";
 
 // src/generated/terminal.ts
 var TERMINAL_ROOT = "grid w-full grid-cols-1 gap-px bg-border text-ink text-sm lg:h-[calc(100dvh-var(--ev-shell-offset,0px))] lg:grid-cols-[minmax(0,1fr)_18rem_20rem] lg:grid-rows-[auto_minmax(0,1fr)_14rem]";
@@ -7543,12 +7829,12 @@ var orderSideClasses = {
 var OPEN_ORDERS_EMPTY = "flex flex-1 items-center justify-center p-6 text-sm text-ink-soft";
 
 // src/components/terminal.tsx
-import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
 function Terminal({ className, ...props }) {
-  return /* @__PURE__ */ jsx60("div", { "data-slot": "terminal", className: cn(TERMINAL_ROOT, className), ...props });
+  return /* @__PURE__ */ jsx61("div", { "data-slot": "terminal", className: cn(TERMINAL_ROOT, className), ...props });
 }
 function TerminalPane({ area, className, ...props }) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "section",
     {
       "data-slot": "terminal-pane",
@@ -7559,7 +7845,7 @@ function TerminalPane({ area, className, ...props }) {
   );
 }
 function TerminalPaneHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "header",
     {
       "data-slot": "terminal-pane-header",
@@ -7569,10 +7855,10 @@ function TerminalPaneHeader({ className, ...props }) {
   );
 }
 function TerminalPaneBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx60("div", { "data-slot": "terminal-pane-body", className: cn(TERMINAL_PANE_BODY, className), ...props });
+  return /* @__PURE__ */ jsx61("div", { "data-slot": "terminal-pane-body", className: cn(TERMINAL_PANE_BODY, className), ...props });
 }
-var TerminalChart = React70.forwardRef(function TerminalChart2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx60(
+var TerminalChart = React71.forwardRef(function TerminalChart2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       ref,
@@ -7583,7 +7869,7 @@ var TerminalChart = React70.forwardRef(function TerminalChart2({ className, ...p
   );
 });
 function TerminalTicker({ className, ...props }) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       "data-slot": "terminal-ticker",
@@ -7594,19 +7880,19 @@ function TerminalTicker({ className, ...props }) {
   );
 }
 function TickerStat({ label, value, className, ...props }) {
-  return /* @__PURE__ */ jsxs29("div", { "data-slot": "ticker-stat", className: TERMINAL_TICKER_STAT, ...props, children: [
-    /* @__PURE__ */ jsx60("span", { className: TERMINAL_TICKER_LABEL, children: label }),
-    /* @__PURE__ */ jsx60("span", { className: cn(TERMINAL_TICKER_VALUE, className), children: value })
+  return /* @__PURE__ */ jsxs30("div", { "data-slot": "ticker-stat", className: TERMINAL_TICKER_STAT, ...props, children: [
+    /* @__PURE__ */ jsx61("span", { className: TERMINAL_TICKER_LABEL, children: label }),
+    /* @__PURE__ */ jsx61("span", { className: cn(TERMINAL_TICKER_VALUE, className), children: value })
   ] });
 }
 function OrderBook({ className, ...props }) {
-  return /* @__PURE__ */ jsx60("div", { "data-slot": "order-book", className: cn(ORDER_BOOK, className), ...props });
+  return /* @__PURE__ */ jsx61("div", { "data-slot": "order-book", className: cn(ORDER_BOOK, className), ...props });
 }
 function OrderBookHead({ price, size, total, className, ...props }) {
-  return /* @__PURE__ */ jsxs29("div", { "data-slot": "order-book-head", className: cn(ORDER_BOOK_HEAD, className), ...props, children: [
-    /* @__PURE__ */ jsx60("span", { children: price }),
-    /* @__PURE__ */ jsx60("span", { children: size }),
-    /* @__PURE__ */ jsx60("span", { children: total })
+  return /* @__PURE__ */ jsxs30("div", { "data-slot": "order-book-head", className: cn(ORDER_BOOK_HEAD, className), ...props, children: [
+    /* @__PURE__ */ jsx61("span", { children: price }),
+    /* @__PURE__ */ jsx61("span", { children: size }),
+    /* @__PURE__ */ jsx61("span", { children: total })
   ] });
 }
 function OrderBookRow({
@@ -7618,7 +7904,7 @@ function OrderBookRow({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-slot": "order-book-row",
@@ -7626,7 +7912,7 @@ function OrderBookRow({
       className: cn(ORDER_BOOK_ROW, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           "span",
           {
             "aria-hidden": "true",
@@ -7634,9 +7920,9 @@ function OrderBookRow({
             style: { width: `${depthPercent(depth)}%` }
           }
         ),
-        /* @__PURE__ */ jsx60("span", { className: cn(ORDER_BOOK_PRICE, bookSideClasses[side]), children: price }),
-        /* @__PURE__ */ jsx60("span", { children: size }),
-        /* @__PURE__ */ jsx60("span", { children: total })
+        /* @__PURE__ */ jsx61("span", { className: cn(ORDER_BOOK_PRICE, bookSideClasses[side]), children: price }),
+        /* @__PURE__ */ jsx61("span", { children: size }),
+        /* @__PURE__ */ jsx61("span", { children: total })
       ]
     }
   );
@@ -7646,10 +7932,10 @@ function depthPercent(depth) {
   return Math.round(Math.min(1, Math.max(0, depth)) * 100);
 }
 function OrderBookSpread({ className, ...props }) {
-  return /* @__PURE__ */ jsx60("div", { "data-slot": "order-book-spread", className: cn(ORDER_BOOK_SPREAD, className), ...props });
+  return /* @__PURE__ */ jsx61("div", { "data-slot": "order-book-spread", className: cn(ORDER_BOOK_SPREAD, className), ...props });
 }
 function TradesTapeRow({ side, price, size, time, className, ...props }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-slot": "trades-tape-row",
@@ -7657,15 +7943,15 @@ function TradesTapeRow({ side, price, size, time, className, ...props }) {
       className: cn(TRADES_TAPE_ROW, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx60("span", { className: cn(ORDER_BOOK_PRICE, bookSideClasses[side]), children: price }),
-        /* @__PURE__ */ jsx60("span", { children: size }),
-        /* @__PURE__ */ jsx60("span", { children: time })
+        /* @__PURE__ */ jsx61("span", { className: cn(ORDER_BOOK_PRICE, bookSideClasses[side]), children: price }),
+        /* @__PURE__ */ jsx61("span", { children: size }),
+        /* @__PURE__ */ jsx61("span", { children: time })
       ]
     }
   );
 }
 function OrderForm({ className, onSubmit, ...props }) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "form",
     {
       "data-slot": "order-form",
@@ -7679,13 +7965,13 @@ function OrderForm({ className, onSubmit, ...props }) {
   );
 }
 function OrderFormRow({ label, value, className, ...props }) {
-  return /* @__PURE__ */ jsxs29("div", { "data-slot": "order-form-row", className: cn(ORDER_FORM_ROW, className), ...props, children: [
-    /* @__PURE__ */ jsx60("span", { className: ORDER_FORM_LABEL, children: label }),
-    /* @__PURE__ */ jsx60("span", { className: ORDER_FORM_VALUE, children: value })
+  return /* @__PURE__ */ jsxs30("div", { "data-slot": "order-form-row", className: cn(ORDER_FORM_ROW, className), ...props, children: [
+    /* @__PURE__ */ jsx61("span", { className: ORDER_FORM_LABEL, children: label }),
+    /* @__PURE__ */ jsx61("span", { className: ORDER_FORM_VALUE, children: value })
   ] });
 }
 function OrderFormSubmit({ side = "buy", className, ...props }) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "button",
     {
       type: "submit",
@@ -7697,7 +7983,7 @@ function OrderFormSubmit({ side = "buy", className, ...props }) {
   );
 }
 function OpenOrdersEmpty({ className, ...props }) {
-  return /* @__PURE__ */ jsx60("div", { "data-slot": "open-orders-empty", className: cn(OPEN_ORDERS_EMPTY, className), ...props });
+  return /* @__PURE__ */ jsx61("div", { "data-slot": "open-orders-empty", className: cn(OPEN_ORDERS_EMPTY, className), ...props });
 }
 export {
   Accordion,
@@ -7782,6 +8068,7 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DateTimePicker,
   Dialog,
   DialogClose,
   DialogContent,