@bmsuisse/ui 0.18.0 → 0.20.0

package/dist/index.js

@@ -3369,7 +3369,9 @@ function Stepper({
   navLabel = "Steps",
   newLabel = "New",
   scrollTestId = "stepper-scroll",
-  newTestId
+  newTestId,
+  minWidth,
+  className
 }) {
   const stepRefs = useRef8(/* @__PURE__ */ new Map());
   useEffect8(() => {
@@ -3380,69 +3382,76 @@ function Stepper({
     // onNew is pinned outside the horizontally-scrolling region below (a sibling of
     // it, not a child) so its own edge never scrolls off-screen along with the
     // later steps once the scroller's min-width doesn't fit the viewport.
-    /* @__PURE__ */ jsxs30("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxs30("div", { className: cn("flex w-full shrink-0 items-center gap-2", className), children: [
       /* @__PURE__ */ jsx48("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx48(
         "div",
         {
           "data-testid": scrollTestId,
           className: "flex w-full items-center gap-0 overflow-x-auto px-2 py-1",
-          children: /* @__PURE__ */ jsx48("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
-            const done = step > n;
-            const active = step === n;
-            const navigable = n <= maxStep && n !== step;
-            const last = i === steps.length - 1;
-            return /* @__PURE__ */ jsxs30("li", { className: cn("flex items-start", !last && "flex-1"), children: [
-              /* @__PURE__ */ jsxs30(
-                "button",
-                {
-                  ref: (element) => {
-                    if (element) stepRefs.current.set(n, element);
-                    else stepRefs.current.delete(n);
-                  },
-                  "data-testid": `step-${n}`,
-                  "aria-disabled": !navigable,
-                  "aria-current": active ? "step" : void 0,
-                  onClick: () => navigable && onNavigate(n),
-                  className: cn(
-                    "flex min-w-[68px] flex-col items-center gap-0.5 transition-opacity",
-                    navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx48(
-                      "div",
-                      {
-                        className: cn(
-                          "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
-                          done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+          children: /* @__PURE__ */ jsx48(
+            "ol",
+            {
+              className: cn("flex flex-1 items-start", minWidth === void 0 && "min-w-fit"),
+              style: minWidth === void 0 ? void 0 : { minWidth },
+              children: steps.map(({ n, label, phase }, i) => {
+                const done = step > n;
+                const active = step === n;
+                const navigable = n <= maxStep && n !== step;
+                const last = i === steps.length - 1;
+                return /* @__PURE__ */ jsxs30("li", { className: cn("flex items-start", !last && "flex-1"), children: [
+                  /* @__PURE__ */ jsxs30(
+                    "button",
+                    {
+                      ref: (element) => {
+                        if (element) stepRefs.current.set(n, element);
+                        else stepRefs.current.delete(n);
+                      },
+                      "data-testid": `step-${n}`,
+                      "aria-disabled": !navigable,
+                      "aria-current": active ? "step" : void 0,
+                      onClick: () => navigable && onNavigate(n),
+                      className: cn(
+                        "flex min-w-[68px] flex-col items-center gap-0.5 transition-opacity",
+                        navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx48(
+                          "div",
+                          {
+                            className: cn(
+                              "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
+                              done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                            ),
+                            children: done ? /* @__PURE__ */ jsx48(CheckIcon5, { className: "h-3 w-3" }) : n
+                          }
                         ),
-                        children: done ? /* @__PURE__ */ jsx48(CheckIcon5, { className: "h-3 w-3" }) : n
-                      }
-                    ),
-                    /* @__PURE__ */ jsx48(
-                      "span",
-                      {
-                        className: cn(
-                          "text-center whitespace-nowrap transition-colors",
-                          active ? "text-[12px] font-semibold text-foreground" : done ? "text-[12px] font-medium text-primary" : "text-[12px] font-medium text-muted-foreground"
+                        /* @__PURE__ */ jsx48(
+                          "span",
+                          {
+                            className: cn(
+                              "text-center whitespace-nowrap transition-colors",
+                              active ? "text-[12px] font-semibold text-foreground" : done ? "text-[12px] font-medium text-primary" : "text-[12px] font-medium text-muted-foreground"
+                            ),
+                            children: label
+                          }
                         ),
-                        children: label
-                      }
-                    ),
-                    /* @__PURE__ */ jsx48("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
-                  ]
-                }
-              ),
-              !last && /* @__PURE__ */ jsx48(
-                "div",
-                {
-                  className: cn(
-                    "mx-1.5 mt-3.5 h-px flex-1 transition-colors",
-                    done ? "bg-primary" : "bg-border"
+                        phase && /* @__PURE__ */ jsx48("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
+                      ]
+                    }
+                  ),
+                  !last && /* @__PURE__ */ jsx48(
+                    "div",
+                    {
+                      className: cn(
+                        "mx-1.5 mt-3.5 h-px flex-1 transition-colors",
+                        done ? "bg-primary" : "bg-border"
+                      )
+                    }
                   )
-                }
-              )
-            ] }, n);
-          }) })
+                ] }, n);
+              })
+            }
+          )
         }
       ) }),
       onNew && /* @__PURE__ */ jsxs30(
@@ -3462,11 +3471,717 @@ function Stepper({
   );
 }
 
+// src/patterns/empty-state/EmptyState.tsx
+import { FunnelIcon } from "@heroicons/react/24/outline";
+import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+var EmptyState = ({
+  title,
+  description,
+  icon: Icon2,
+  action,
+  size = "md",
+  fill = false,
+  className,
+  ...props
+}) => {
+  const sm = size === "sm";
+  return /* @__PURE__ */ jsxs31(
+    "div",
+    {
+      "data-testid": "empty-state",
+      className: cn(
+        "flex flex-col items-center text-center",
+        sm ? "gap-1 px-4 py-4" : "gap-1.5 px-6 py-8",
+        fill && "min-h-0 flex-1 justify-center",
+        className
+      ),
+      ...props,
+      children: [
+        Icon2 ? /* @__PURE__ */ jsx49(
+          "div",
+          {
+            className: cn(
+              "mb-1 flex items-center justify-center rounded-full bg-muted",
+              sm ? "h-8 w-8" : "h-12 w-12"
+            ),
+            children: /* @__PURE__ */ jsx49(Icon2, { "aria-hidden": "true", className: cn("text-muted-foreground", sm ? "h-4 w-4" : "h-6 w-6") })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx49("p", { className: cn("font-semibold text-foreground", sm ? "text-xs" : "text-sm"), children: title }),
+        description ? /* @__PURE__ */ jsx49("p", { className: cn("max-w-prose text-muted-foreground", sm ? "text-xs" : "text-sm"), children: description }) : null,
+        action ? /* @__PURE__ */ jsx49("div", { className: "mt-2 flex justify-center gap-2", children: action }) : null
+      ]
+    }
+  );
+};
+var defaultFilteredEmptyStateLabels = {
+  title: "No results",
+  description: "Nothing matches the current search or filters.",
+  reset: "Reset filters"
+};
+var FilteredEmptyState = ({
+  onReset,
+  labels,
+  icon = FunnelIcon,
+  size,
+  ...props
+}) => {
+  const l = { ...defaultFilteredEmptyStateLabels, ...labels };
+  const rootTestId = props["data-testid"];
+  return /* @__PURE__ */ jsx49(
+    EmptyState,
+    {
+      icon,
+      size,
+      title: l.title,
+      description: l.description,
+      action: /* @__PURE__ */ jsx49(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: size === "sm" ? "xs" : "sm",
+          onClick: onReset,
+          "data-testid": typeof rootTestId === "string" ? `${rootTestId}-reset` : void 0,
+          children: l.reset
+        }
+      ),
+      ...props
+    }
+  );
+};
+
+// src/patterns/toast/toastStore.ts
+var DEFAULT_TOAST_DURATION = { info: 4e3, success: 4e3, warning: 4e3, error: 8e3 };
+var MAX_TOASTS = 3;
+var TOAST_EXIT_MS = 150;
+var toasts = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+var emit = (next) => {
+  toasts = next;
+  for (const l of listeners) l();
+};
+var subscribeToasts = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var getToasts = () => toasts;
+var EMPTY = [];
+var getServerToasts = () => EMPTY;
+var remove = (id) => emit(toasts.filter((t) => t.id !== id));
+function dismissToast(id) {
+  const targets = toasts.filter((t) => !t.leaving && (id === void 0 || t.id === id));
+  if (targets.length === 0) return;
+  const ids = new Set(targets.map((t) => t.id));
+  emit(toasts.map((t) => ids.has(t.id) ? { ...t, leaving: true } : t));
+  setTimeout(() => {
+    for (const i of ids) remove(i);
+  }, TOAST_EXIT_MS);
+}
+function show(message, options = {}) {
+  const id = nextId++;
+  const tone = options.tone ?? "info";
+  const item = {
+    id,
+    message,
+    description: options.description,
+    tone,
+    action: options.action,
+    duration: options.duration,
+    leaving: false
+  };
+  const active = toasts.filter((t) => !t.leaving);
+  if (active.length >= MAX_TOASTS) {
+    const victim = active.find((t) => t.duration !== Infinity) ?? active[0];
+    if (victim) dismissToast(victim.id);
+  }
+  emit([...toasts, item]);
+  return id;
+}
+var toast = Object.assign(show, {
+  info: (message, options) => show(message, { ...options, tone: "info" }),
+  success: (message, options) => show(message, { ...options, tone: "success" }),
+  warning: (message, options) => show(message, { ...options, tone: "warning" }),
+  error: (message, options) => show(message, { ...options, tone: "error" }),
+  dismiss: dismissToast
+});
+function resetToasts() {
+  emit([]);
+}
+
+// src/patterns/toast/Toaster.tsx
+import {
+  CheckCircleIcon as CheckCircleIcon2,
+  ExclamationTriangleIcon as ExclamationTriangleIcon6,
+  InformationCircleIcon as InformationCircleIcon2,
+  XCircleIcon,
+  XMarkIcon as XMarkIcon6
+} from "@heroicons/react/24/outline";
+import { useEffect as useEffect9, useRef as useRef9, useState as useState16, useSyncExternalStore } from "react";
+import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+var defaultToasterLabels = {
+  region: "Notifications",
+  dismiss: "Dismiss"
+};
+var positionClass = {
+  "bottom-center": "bottom-4 items-center pb-[env(safe-area-inset-bottom)]",
+  "bottom-left": "bottom-4 items-start pb-[env(safe-area-inset-bottom)]",
+  "bottom-right": "bottom-4 items-end pb-[env(safe-area-inset-bottom)]",
+  "top-center": "top-4 items-center pt-[env(safe-area-inset-top)]",
+  "top-left": "top-4 items-start pt-[env(safe-area-inset-top)]",
+  "top-right": "top-4 items-end pt-[env(safe-area-inset-top)]"
+};
+var toneIcon = {
+  info: InformationCircleIcon2,
+  success: CheckCircleIcon2,
+  warning: ExclamationTriangleIcon6,
+  error: XCircleIcon
+};
+var toneIconClass = {
+  info: "text-sky-600 dark:text-sky-400",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  error: "text-destructive"
+};
+var Toaster = ({ position = "bottom-center", duration, labels, className }) => {
+  const toasts2 = useSyncExternalStore(subscribeToasts, getToasts, getServerToasts);
+  const l = { ...defaultToasterLabels, ...labels };
+  const top = position.startsWith("top");
+  return /* @__PURE__ */ jsx50(
+    "section",
+    {
+      "aria-label": l.region,
+      "aria-live": "polite",
+      className: cn(
+        "pointer-events-none fixed inset-x-0 z-[100] flex gap-2 px-4",
+        top ? "flex-col-reverse" : "flex-col",
+        positionClass[position],
+        className
+      ),
+      children: toasts2.map((t) => /* @__PURE__ */ jsx50(ToastCard, { toast: t, duration: resolveDuration(t, duration), dismissLabel: l.dismiss }, t.id))
+    }
+  );
+};
+var resolveDuration = (t, fallback) => t.duration ?? (typeof fallback === "number" ? fallback : fallback?.[t.tone] ?? DEFAULT_TOAST_DURATION[t.tone]);
+var ToastCard = ({
+  toast: toast2,
+  duration,
+  dismissLabel
+}) => {
+  const [entered, setEntered] = useState16(false);
+  const [hovered, setHovered] = useState16(false);
+  const [focused, setFocused] = useState16(false);
+  const paused = hovered || focused;
+  const bar = useRef9(null);
+  const Icon2 = toneIcon[toast2.tone];
+  const timed = Number.isFinite(duration) && duration > 0;
+  useEffect9(() => {
+    const raf = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const remaining = useRef9(duration);
+  const animRef = useRef9(null);
+  useEffect9(() => {
+    if (!timed || toast2.leaving) return;
+    const el = bar.current;
+    if (el && typeof el.animate === "function") {
+      const anim = el.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+        duration,
+        fill: "forwards"
+      });
+      anim.onfinish = () => dismissToast(toast2.id);
+      animRef.current = anim;
+      return () => {
+        anim.onfinish = null;
+        anim.cancel();
+        animRef.current = null;
+      };
+    }
+    return void 0;
+  }, [timed, duration, toast2.id, toast2.leaving]);
+  useEffect9(() => {
+    if (!timed || toast2.leaving) return;
+    if (animRef.current) {
+      if (paused) animRef.current.pause();
+      else animRef.current.play();
+      return;
+    }
+    if (paused) return;
+    const started = Date.now();
+    const handle = setTimeout(() => dismissToast(toast2.id), remaining.current);
+    return () => {
+      clearTimeout(handle);
+      remaining.current -= Date.now() - started;
+    };
+  }, [paused, timed, toast2.id, toast2.leaving]);
+  const shown = entered && !toast2.leaving;
+  return /* @__PURE__ */ jsxs32(
+    "div",
+    {
+      role: toast2.tone === "error" ? "alert" : void 0,
+      "data-testid": "toast",
+      "data-tone": toast2.tone,
+      "data-state": toast2.leaving ? "closed" : "open",
+      onPointerEnter: (e) => {
+        if (e.pointerType === "mouse") setHovered(true);
+      },
+      onPointerLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+      },
+      className: cn(
+        "pointer-events-auto relative flex w-full max-w-sm items-start gap-2 overflow-hidden rounded-lg border border-border bg-card px-3 py-2.5 text-sm text-card-foreground shadow-lg transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none",
+        shown ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0",
+        toast2.leaving && "pointer-events-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsx50(Icon2, { "aria-hidden": "true", className: cn("mt-0.5 h-4 w-4 shrink-0", toneIconClass[toast2.tone]) }),
+        /* @__PURE__ */ jsxs32("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx50("p", { className: "font-medium", children: toast2.message }),
+          toast2.description ? /* @__PURE__ */ jsx50("p", { className: "mt-0.5 text-xs text-muted-foreground", children: toast2.description }) : null
+        ] }),
+        toast2.action ? /* @__PURE__ */ jsx50(
+          "button",
+          {
+            type: "button",
+            "data-testid": "toast-action",
+            onClick: () => {
+              if (toast2.leaving) return;
+              toast2.action?.onClick();
+              dismissToast(toast2.id);
+            },
+            className: "shrink-0 rounded-sm px-1.5 py-0.5 font-semibold text-foreground underline-offset-2 hover:bg-accent hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: toast2.action.label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx50(
+          "button",
+          {
+            type: "button",
+            "aria-label": dismissLabel,
+            onClick: () => dismissToast(toast2.id),
+            className: "grid h-5 w-5 shrink-0 place-items-center rounded-sm text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx50(XMarkIcon6, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+          }
+        ),
+        timed && !toast2.leaving ? /* @__PURE__ */ jsx50(
+          "span",
+          {
+            ref: bar,
+            "aria-hidden": "true",
+            "data-testid": "toast-progress",
+            className: "absolute inset-x-0 bottom-0 h-0.5 origin-left bg-foreground/25 motion-reduce:opacity-0"
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/patterns/date-input/DateInput.tsx
+import { CalendarDaysIcon } from "@heroicons/react/24/outline";
+import { forwardRef as forwardRef20, useEffect as useEffect11, useId as useId3, useImperativeHandle, useRef as useRef11, useState as useState18 } from "react";
+
+// src/lib/dateField.ts
+var layoutCache = /* @__PURE__ */ new Map();
+function layoutOf(locale) {
+  const cached = layoutCache.get(locale);
+  if (cached) return cached;
+  const parts = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).formatToParts(
+    new Date(2001, 1, 3)
+  );
+  const order = parts.filter((p) => p.type === "day" || p.type === "month" || p.type === "year").map((p) => p.type);
+  const separator = parts.find((p) => p.type === "literal")?.value.trim() || ".";
+  const layout = { order, separator };
+  layoutCache.set(locale, layout);
+  return layout;
+}
+var WORD = { day: "dd", month: "mm", year: "yyyy" };
+function datePlaceholder(locale) {
+  const { order, separator } = layoutOf(locale);
+  return order.map((part) => WORD[part]).join(separator);
+}
+var pad = (n, width) => String(n).padStart(width, "0");
+function formatIsoDay(iso, locale) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})(?:[T ].*)?$/.exec(iso);
+  if (!match) return "";
+  const { order, separator } = layoutOf(locale);
+  const [, year = "", month = "", day = ""] = match;
+  const value = { year, month, day };
+  return order.map((part) => value[part]).join(separator);
+}
+var isRealDay = (year, month, day) => {
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+};
+var TWO_DIGIT_YEAR_LOOKAHEAD = 20;
+function expandYear(raw) {
+  const n = Number(raw);
+  if (raw.length > 2) return n;
+  const now = (/* @__PURE__ */ new Date()).getFullYear();
+  const century = Math.floor(now / 100) * 100;
+  return century + n > now + TWO_DIGIT_YEAR_LOOKAHEAD ? century - 100 + n : century + n;
+}
+function splitDigits(digits, order) {
+  if (digits.length !== 6 && digits.length !== 8) return null;
+  const width = { day: 2, month: 2, year: digits.length - 4 };
+  const out = [];
+  let at = 0;
+  for (const part of order) {
+    out.push(digits.slice(at, at + width[part]));
+    at += width[part];
+  }
+  return out;
+}
+function parseIsoDay(text, locale) {
+  const trimmed = text.trim().replace(/\.$/, "");
+  const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[T ].*)?$/.exec(trimmed);
+  let year;
+  let month;
+  let day;
+  if (iso) {
+    [year, month, day] = [Number(iso[1]), Number(iso[2]), Number(iso[3])];
+  } else {
+    const { order } = layoutOf(locale);
+    const typed = /^(\d{1,4})[./\-\s]+(\d{1,2})[./\-\s]+(\d{1,4})$/.exec(trimmed);
+    const raw = typed ? [typed[1] ?? "", typed[2] ?? "", typed[3] ?? ""] : /^\d+$/.test(trimmed) ? splitDigits(trimmed, order) : null;
+    if (!raw) return null;
+    const at = (part) => raw[order.indexOf(part)] ?? "";
+    year = expandYear(at("year"));
+    month = Number(at("month"));
+    day = Number(at("day"));
+  }
+  if (year < 1e3 || year > 9999 || !isRealDay(year, month, day)) return null;
+  return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`;
+}
+function toLocalIsoDay(d) {
+  return `${pad(d.getFullYear(), 4)}-${pad(d.getMonth() + 1, 2)}-${pad(d.getDate(), 2)}`;
+}
+var daysInMonth = (year, month) => new Date(year, month, 0).getDate();
+function shiftIsoDay(iso, by) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso);
+  if (!match) return iso;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const total = year * 12 + (month - 1) + (by.months ?? 0);
+  const nextYear = Math.floor(total / 12);
+  const nextMonth = total % 12 + 1;
+  const moved = new Date(nextYear, nextMonth - 1, Math.min(day, daysInMonth(nextYear, nextMonth)) + (by.days ?? 0));
+  const result = moved.getFullYear();
+  return result < 1e3 || result > 9999 ? iso : toLocalIsoDay(moved);
+}
+
+// src/patterns/date-input/NativeDateInput.tsx
+import { forwardRef as forwardRef19, useEffect as useEffect10, useId as useId2, useRef as useRef10, useState as useState17 } from "react";
+
+// src/patterns/date-input/shared.tsx
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var defaultDateInputLabels = {
+  invalid: "Enter a valid date",
+  outOfRange: "Date is out of range",
+  openCalendar: "Choose date"
+};
+var toDay = (iso) => iso?.slice(0, 10) ?? "";
+var COARSE = "(pointer: coarse)";
+var subscribeCoarse = (listener) => {
+  const mq = typeof window !== "undefined" ? window.matchMedia?.(COARSE) : void 0;
+  mq?.addEventListener("change", listener);
+  return () => mq?.removeEventListener("change", listener);
+};
+var isCoarse = () => typeof window !== "undefined" && !!window.matchMedia?.(COARSE).matches;
+var useCoarsePointer = () => useSyncExternalStore2(subscribeCoarse, isCoarse, () => false);
+var errorMessage = (error, l) => error === "invalid" ? l.invalid : error === "range" ? l.outOfRange : "";
+var DateInputMessage = ({ id, message }) => /* @__PURE__ */ jsx51("p", { id, role: "alert", className: "mt-1 text-xs text-destructive", children: message });
+var invalidClass = "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive";
+
+// src/patterns/date-input/NativeDateInput.tsx
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+var NativeDateInput = forwardRef19(
+  ({
+    value,
+    onValueChange,
+    onInvalidChange,
+    locale: _locale,
+    native: _native,
+    min,
+    max,
+    showError = true,
+    labels,
+    onBlur,
+    placeholder: _placeholder,
+    className,
+    name,
+    ...props
+  }, ref) => {
+    const l = { ...defaultDateInputLabels, ...labels };
+    const minDay = toDay(min);
+    const maxDay = toDay(max);
+    const [raw, setRaw] = useState17(toDay(value));
+    const [error, setErrorState] = useState17(null);
+    const errorRef = useRef10(null);
+    const messageId = useId2();
+    const setError = (next) => {
+      if (errorRef.current === next) return;
+      errorRef.current = next;
+      setErrorState(next);
+      onInvalidChange?.(next != null, next ?? void 0);
+    };
+    useEffect10(() => {
+      setRaw(toDay(value));
+      setError(null);
+    }, [value]);
+    const message = errorMessage(error, l);
+    const showMessage = showError && message !== "";
+    const describedBy = [props["aria-describedby"], showMessage ? messageId : void 0].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs33("div", { className, children: [
+      /* @__PURE__ */ jsx52(
+        Input,
+        {
+          ref,
+          ...props,
+          className: invalidClass,
+          type: "date",
+          min: minDay || void 0,
+          max: maxDay || void 0,
+          value: raw,
+          "aria-invalid": error != null || props["aria-invalid"] || void 0,
+          "aria-describedby": describedBy,
+          onChange: (e) => {
+            const el = e.currentTarget;
+            const next = el.value;
+            setRaw(next);
+            if (el.validity.badInput) {
+              setError(null);
+              return;
+            }
+            if (next && (minDay && next < minDay || maxDay && next > maxDay)) {
+              setError("range");
+              return;
+            }
+            setError(null);
+            if (next !== toDay(value)) onValueChange(next);
+          },
+          onBlur: (e) => {
+            if (e.currentTarget.validity.badInput) setError("invalid");
+            onBlur?.(e);
+          }
+        }
+      ),
+      showMessage ? /* @__PURE__ */ jsx52(DateInputMessage, { id: messageId, message }) : null,
+      name ? /* @__PURE__ */ jsx52("input", { type: "hidden", name, value: toDay(value) }) : null
+    ] });
+  }
+);
+NativeDateInput.displayName = "NativeDateInput";
+
+// src/patterns/date-input/DateInput.tsx
+import { Fragment as Fragment6, jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
+function check(text, locale, min, max) {
+  if (!text.trim()) return null;
+  const iso = parseIsoDay(text, locale);
+  if (iso == null) return "invalid";
+  if (min && iso < min || max && iso > max) return "range";
+  return null;
+}
+var DateInput = forwardRef20((props, ref) => {
+  const coarse = useCoarsePointer();
+  const useNative = props.native === "always" || props.native !== "never" && coarse;
+  return useNative ? /* @__PURE__ */ jsx53(NativeDateInput, { ref, ...props }) : /* @__PURE__ */ jsx53(TypedDateInput, { ref, ...props });
+});
+DateInput.displayName = "DateInput";
+var TypedDateInput = forwardRef20(
+  ({
+    value,
+    onValueChange,
+    onInvalidChange,
+    locale = "de-CH",
+    min,
+    max,
+    showError = true,
+    labels,
+    onBlur,
+    onKeyDown,
+    onFocus,
+    placeholder,
+    className,
+    name,
+    disabled,
+    readOnly,
+    native: _native,
+    ...props
+  }, ref) => {
+    const l = { ...defaultDateInputLabels, ...labels };
+    const minDay = toDay(min);
+    const maxDay = toDay(max);
+    const [text, setText] = useState18(() => formatIsoDay(value, locale));
+    const [error, setErrorState] = useState18(null);
+    const dirty = useRef11(false);
+    const focused = useRef11(false);
+    const inputRef = useRef11(null);
+    const pickerRef = useRef11(null);
+    const messageId = useId3();
+    useImperativeHandle(ref, () => inputRef.current);
+    const errorRef = useRef11(null);
+    const setError = (next) => {
+      if (errorRef.current === next) return;
+      errorRef.current = next;
+      setErrorState(next);
+      onInvalidChange?.(next != null, next ?? void 0);
+    };
+    useEffect11(() => {
+      if (focused.current && dirty.current) return;
+      setText(formatIsoDay(value, locale));
+      setError(null);
+    }, [value, locale]);
+    const live = check(text, locale, minDay, maxDay);
+    const liveMessage = live === "invalid" ? l.invalid : live === "range" ? l.outOfRange : "";
+    useEffect11(() => {
+      inputRef.current?.setCustomValidity(liveMessage);
+    }, [liveMessage]);
+    const commitIso = (iso) => {
+      setText(formatIsoDay(iso, locale));
+      setError(null);
+      if (iso !== value.slice(0, 10)) onValueChange(iso);
+    };
+    const commit = () => {
+      if (!dirty.current) return;
+      dirty.current = false;
+      if (!text.trim()) {
+        setError(null);
+        if (value) onValueChange("");
+        return;
+      }
+      const problem = check(text, locale, minDay, maxDay);
+      setError(problem);
+      if (problem) return;
+      commitIso(parseIsoDay(text, locale));
+    };
+    const step = (key, shift) => {
+      const by = key === "ArrowUp" ? { days: 1 } : key === "ArrowDown" ? { days: -1 } : key === "PageUp" ? { months: shift ? 12 : 1 } : key === "PageDown" ? { months: shift ? -12 : -1 } : null;
+      if (!by) return null;
+      const base = parseIsoDay(text, locale) ?? (toDay(value) || toLocalIsoDay(/* @__PURE__ */ new Date()));
+      let next = text.trim() || value ? shiftIsoDay(base, by) : base;
+      if (minDay && next < minDay) next = minDay;
+      if (maxDay && next > maxDay) next = maxDay;
+      return next;
+    };
+    const openPicker = () => {
+      const el = pickerRef.current;
+      if (!el) return;
+      try {
+        el.showPicker();
+      } catch {
+        el.click();
+      }
+    };
+    const message = errorMessage(error, l);
+    const showMessage = showError && message !== "";
+    const pickable = !disabled && !readOnly;
+    const describedBy = [props["aria-describedby"], showMessage ? messageId : void 0].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs34("div", { className, children: [
+      /* @__PURE__ */ jsxs34("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx53(
+          Input,
+          {
+            ref: inputRef,
+            ...props,
+            disabled,
+            readOnly,
+            className: cn(invalidClass, pickable && "pr-9"),
+            type: "text",
+            autoComplete: "off",
+            value: text,
+            placeholder: placeholder ?? datePlaceholder(locale),
+            "aria-invalid": error != null || props["aria-invalid"] || void 0,
+            "aria-describedby": describedBy,
+            onChange: (e) => {
+              dirty.current = true;
+              setText(e.target.value);
+              setError(null);
+            },
+            onFocus: (e) => {
+              focused.current = true;
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              focused.current = false;
+              commit();
+              onBlur?.(e);
+            },
+            onKeyDown: (e) => {
+              onKeyDown?.(e);
+              if (e.defaultPrevented) return;
+              if (e.key === "Enter") commit();
+              else if (!readOnly && !disabled) {
+                if (e.key === "ArrowDown" && e.altKey) {
+                  e.preventDefault();
+                  openPicker();
+                } else if (!e.altKey && !e.ctrlKey && !e.metaKey) {
+                  const next = step(e.key, e.shiftKey);
+                  if (next) {
+                    e.preventDefault();
+                    dirty.current = false;
+                    commitIso(next);
+                  }
+                }
+              }
+            }
+          }
+        ),
+        pickable ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
+          /* @__PURE__ */ jsx53(
+            "button",
+            {
+              type: "button",
+              "aria-label": l.openCalendar,
+              onClick: openPicker,
+              className: "absolute inset-y-0 right-0 grid w-9 place-items-center rounded-r-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx53(CalendarDaysIcon, { "aria-hidden": "true", className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx53(
+            "input",
+            {
+              ref: pickerRef,
+              type: "date",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              form: "bmsui-date-input-picker",
+              "data-testid": "date-input-picker",
+              min: minDay || void 0,
+              max: maxDay || void 0,
+              value: toDay(value),
+              onChange: (e) => {
+                const iso = e.target.value;
+                dirty.current = false;
+                if (iso) commitIso(iso);
+                else {
+                  setText("");
+                  setError(null);
+                  if (value) onValueChange("");
+                }
+              },
+              className: "pointer-events-none absolute inset-0 h-full w-full opacity-0"
+            }
+          )
+        ] }) : null
+      ] }),
+      showMessage ? /* @__PURE__ */ jsx53(DateInputMessage, { id: messageId, message }) : null,
+      name ? /* @__PURE__ */ jsx53("input", { type: "hidden", name, value: toDay(value) }) : null
+    ] });
+  }
+);
+TypedDateInput.displayName = "TypedDateInput";
+
 // src/patterns/animated-brand/AnimatedBrand.tsx
 import {
-  useEffect as useEffect9,
-  useRef as useRef9,
-  useState as useState16
+  useEffect as useEffect12,
+  useRef as useRef12,
+  useState as useState19
 } from "react";
 
 // src/patterns/animated-brand/brandMotion.ts
@@ -3860,7 +4575,7 @@ function playBrandMotion(p, name, onComplete) {
 }
 
 // src/patterns/animated-brand/AnimatedBrand.tsx
-import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
 var absolute = {
   position: "absolute",
   borderRadius: "50%",
@@ -3891,17 +4606,17 @@ function AnimatedBrand({
   className,
   style
 }) {
-  const ref = useRef9(null);
-  const completion = useRef9(onComplete);
-  const [segmented, setSegmented] = useState16(null);
-  useEffect9(() => {
+  const ref = useRef12(null);
+  const completion = useRef12(onComplete);
+  const [segmented, setSegmented] = useState19(null);
+  useEffect12(() => {
     const letters2 = typeof Intl.Segmenter === "function" ? Array.from(new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(product), ({ segment }) => segment) : product ? [product] : [];
     setSegmented({ product, letters: letters2 });
   }, [product]);
-  useEffect9(() => {
+  useEffect12(() => {
     completion.current = onComplete;
   }, [onComplete]);
-  useEffect9(() => {
+  useEffect12(() => {
     const element = ref.current;
     if (!element || !autoPlay || segmented?.product !== product) return;
     let disposed = false;
@@ -3948,13 +4663,13 @@ function AnimatedBrand({
     color: textColor,
     ...style
   };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx54(
     "span",
     {
       ref,
       className,
       style: wrapperStyle,
-      children: /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsxs35(
         "span",
         {
           "data-logo-part": "logo",
@@ -3972,7 +4687,7 @@ function AnimatedBrand({
             userSelect: "none"
           },
           children: [
-            /* @__PURE__ */ jsxs31(
+            /* @__PURE__ */ jsxs35(
               "span",
               {
                 "data-logo-part": "mark",
@@ -3986,7 +4701,7 @@ function AnimatedBrand({
                   marginRight: tail ? ".04em" : 0
                 },
                 children: [
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-logo-part": "ring",
@@ -3998,7 +4713,7 @@ function AnimatedBrand({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-logo-part": "core",
@@ -4011,7 +4726,7 @@ function AnimatedBrand({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-logo-part": "trail",
@@ -4029,7 +4744,7 @@ function AnimatedBrand({
                       }
                     }
                   ),
-                  [0, 1].map((id) => /* @__PURE__ */ jsx49(
+                  [0, 1].map((id) => /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-logo-part": "echo",
@@ -4042,7 +4757,7 @@ function AnimatedBrand({
                     },
                     id
                   )),
-                  Array.from({ length: 8 }, (_, id) => /* @__PURE__ */ jsx49(
+                  Array.from({ length: 8 }, (_, id) => /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-logo-part": "particle",
@@ -4057,7 +4772,7 @@ function AnimatedBrand({
                     },
                     id
                   )),
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-logo-part": "bead",
@@ -4067,7 +4782,7 @@ function AnimatedBrand({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs31(
+            /* @__PURE__ */ jsxs35(
               "span",
               {
                 "data-logo-part": "tail",
@@ -4078,7 +4793,7 @@ function AnimatedBrand({
                   whiteSpace: "pre"
                 },
                 children: [
-                  letters.map((letter, index) => /* @__PURE__ */ jsx49(
+                  letters.map((letter, index) => /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-brand-letter": "",
@@ -4087,7 +4802,7 @@ function AnimatedBrand({
                     },
                     `${index}-${letter}`
                   )),
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx54(
                     "span",
                     {
                       "data-brand-baseline": "",
@@ -4127,6 +4842,7 @@ export {
   Checkbox,
   Combobox,
   ConfirmDialog,
+  DateInput,
   Dialog,
   DialogActions,
   DialogBody,
@@ -4152,7 +4868,9 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EmptyState,
   ErrorState,
+  FilteredEmptyState,
   FormField,
   FormModal,
   InlineError,
@@ -4162,6 +4880,7 @@ export {
   LoadingOverlay,
   LoadingSpinner,
   LoadingState,
+  MAX_TOASTS,
   Modal,
   NavGroup,
   NavItem,
@@ -4215,6 +4934,7 @@ export {
   TabsTrigger,
   TagCombobox,
   Textarea,
+  Toaster,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -4224,13 +4944,23 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  datePlaceholder,
+  defaultDateInputLabels,
   defaultErrorStateLabels,
+  defaultFilteredEmptyStateLabels,
+  defaultToasterLabels,
   describeSpeechError,
+  formatIsoDay,
   getConfirmButtonPlacement,
   isWindowsPlatform,
   loadingSpinnerIconVariants,
+  parseIsoDay,
+  resetToasts,
   sheetVariants,
+  shiftIsoDay,
   toErrorInfo,
+  toLocalIsoDay,
+  toast,
   useDelayedFlag,
   useMediaQuery,
   useSidebarCollapsed,