orynn 0.2.0 → 0.5.0

package/dist/index.js

@@ -1,6 +1,7 @@
 import { createContext, forwardRef, useContext, useId, useRef, useEffect, useCallback, useMemo, useState, useImperativeHandle, useLayoutEffect, useReducer, memo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
+import { Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Slot, Label as Label$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from 'radix-ui';
 
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -28,8 +29,8 @@ var base = (props) => ({
 });
 var CheckIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
 var MinusIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
-var PlusIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
 var ChevronDownIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronUpIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "m6 15 6-6 6 6" }) });
 var ChevronLeftIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
 var ChevronRightIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
 var XIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base(p), children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
@@ -46,11 +47,15 @@ var CalendarIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base(p), children: [
   /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
   /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
 ] });
+var CircleIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base({ strokeWidth: 0, fill: "currentColor", ...p }), children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }) });
 var CheckboxGroupContext = createContext(null);
 var sizePx = {
-  sm: "0.95rem",
-  md: "1.125rem",
-  lg: "1.35rem"
+  sm: "0.875rem",
+  // 14px
+  md: "1rem",
+  // 16px — shadcn size-4
+  lg: "1.125rem"
+  // 18px
 };
 var Checkbox = /* @__PURE__ */ forwardRef(
   function Checkbox2(props, ref) {
@@ -208,15 +213,7 @@ function Field(props) {
         description != null && /* @__PURE__ */ jsx("p", { className: "orynn-field__description", id: descriptionId, children: description }),
         /* @__PURE__ */ jsx("div", { className: "orynn-field__control", children: typeof children === "function" ? children(ctx) : children }),
         invalid && /* @__PURE__ */ jsx("p", { className: "orynn-field__error", id: errorId, role: "alert", children: messages.length === 1 ? messages[0] : messages.map((m) => /* @__PURE__ */ jsx("span", { children: m }, m)) }),
-        successMsg && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "orynn-field__error",
-            id: successId,
-            style: { color: "var(--orynn-color-success)" },
-            children: successMsg
-          }
-        )
+        successMsg && /* @__PURE__ */ jsx("p", { className: "orynn-field__success", id: successId, children: successMsg })
       ]
     }
   );
@@ -235,8 +232,11 @@ function CheckboxGroup(props) {
     defaultValue,
     onChange,
     orientation = "vertical",
+    columns,
     min,
     max,
+    showSelectAll = false,
+    selectAllLabel = "Select all",
     options,
     children,
     className,
@@ -261,6 +261,19 @@ function CheckboxGroup(props) {
     },
     [value, setValue, onChange]
   );
+  const selectableValues = (options ?? []).filter((o) => !o.disabled).map((o) => o.value);
+  const allSelected = selectableValues.length > 0 && selectableValues.every((v) => value.includes(v));
+  const someSelected = selectableValues.some((v) => value.includes(v));
+  const toggleAll = () => {
+    if (allSelected) {
+      setValue([]);
+      onChange?.([]);
+    } else {
+      const next = max != null ? selectableValues.slice(0, max) : selectableValues;
+      setValue(next);
+      onChange?.(next);
+    }
+  };
   const ctx = useMemo(
     () => ({
       name,
@@ -284,23 +297,40 @@ function CheckboxGroup(props) {
       disabled,
       id,
       className,
-      children: () => /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      children: () => /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
         "div",
         {
           role: "group",
           "aria-labelledby": label != null ? `${id}-label` : void 0,
           className: cx("orynn-choice-group"),
-          "data-orientation": orientation,
-          children: options ? options.map((o) => /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              value: o.value,
-              label: o.label,
-              description: o.description,
-              disabled: o.disabled
-            },
-            o.value
-          )) : children
+          "data-orientation": columns ? void 0 : orientation,
+          "data-columns": columns ? "" : void 0,
+          style: columns ? { "--orynn-choice-columns": columns } : void 0,
+          children: [
+            showSelectAll && selectableValues.length > 0 && /* @__PURE__ */ jsx("div", { className: "orynn-choice-group__selectall", children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allSelected,
+                indeterminate: !allSelected && someSelected,
+                disabled,
+                label: selectAllLabel,
+                onChange: toggleAll
+              }
+            ) }),
+            options ? options.map((o) => /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                value: o.value,
+                label: o.icon != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "orynn-choice__icon", children: o.icon }),
+                  o.label
+                ] }) : o.label,
+                description: o.description,
+                disabled: o.disabled
+              },
+              o.value
+            )) : children
+          ]
         }
       ) })
     }
@@ -321,6 +351,8 @@ var FieldBox = /* @__PURE__ */ forwardRef(
       floatingLabel,
       left,
       right,
+      addonBefore,
+      addonAfter,
       textarea,
       className,
       children,
@@ -340,7 +372,8 @@ var FieldBox = /* @__PURE__ */ forwardRef(
       }
       onBlur?.(e);
     };
-    return /* @__PURE__ */ jsxs(
+    const hasAddon = addonBefore != null || addonAfter != null;
+    const box = /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -359,6 +392,8 @@ var FieldBox = /* @__PURE__ */ forwardRef(
         "data-focused": isFocused || void 0,
         "data-active": active || isFocused || void 0,
         "data-open": open || void 0,
+        "data-addon-before": addonBefore != null || void 0,
+        "data-addon-after": addonAfter != null || void 0,
         onFocus: handleFocus,
         onBlur: handleBlur,
         ...rest,
@@ -370,8 +405,137 @@ var FieldBox = /* @__PURE__ */ forwardRef(
         ]
       }
     );
+    if (!hasAddon) return box;
+    return /* @__PURE__ */ jsxs("div", { className: "orynn-box__group", "data-size": size, "data-disabled": disabled || void 0, children: [
+      addonBefore != null && /* @__PURE__ */ jsx("span", { className: "orynn-box__addon", "data-side": "before", children: addonBefore }),
+      box,
+      addonAfter != null && /* @__PURE__ */ jsx("span", { className: "orynn-box__addon", "data-side": "after", children: addonAfter })
+    ] });
   }
 );
+
+// src/theme/theme.ts
+var len = (v) => typeof v === "number" ? `${v}px` : v;
+var RADIUS_KEYWORDS = {
+  none: "0px",
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.625rem",
+  xl: "0.875rem",
+  pill: "9999px"
+};
+var DARK_FG = "#0b0d12";
+var LIGHT_FG = "#ffffff";
+function contrastFor(color) {
+  const c = color.trim().toLowerCase();
+  const hex = /^#?([\da-f]{3}|[\da-f]{6})$/.exec(c)?.[1];
+  if (hex) {
+    const full = hex.length === 3 ? hex.replace(/./g, "$&$&") : hex;
+    const n = Number.parseInt(full, 16);
+    const toLin = (v) => {
+      const x = v / 255;
+      return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+    };
+    const lum = 0.2126 * toLin(n >> 16 & 255) + 0.7152 * toLin(n >> 8 & 255) + 0.0722 * toLin(n & 255);
+    return lum > 0.42 ? DARK_FG : LIGHT_FG;
+  }
+  const okl = /^oklch\(\s*([\d.]+)(%?)/.exec(c);
+  if (okl) {
+    const l = Number.parseFloat(okl[1]) / (okl[2] ? 100 : 1);
+    return l >= 0.62 ? DARK_FG : LIGHT_FG;
+  }
+  const hsl = /^hsla?\(\s*[\d.]+(?:deg)?\s*[, ]\s*[\d.]+%\s*[, ]\s*([\d.]+)%/.exec(c)?.[1];
+  if (hsl) return Number.parseFloat(hsl) >= 60 ? DARK_FG : LIGHT_FG;
+  if (c === "white") return DARK_FG;
+  if (c === "black") return LIGHT_FG;
+  return LIGHT_FG;
+}
+function normalizeTheme(input) {
+  return typeof input === "string" ? { preset: input } : input ?? {};
+}
+function resolveThemeVars(config) {
+  const vars = {};
+  const primary = config.primary ?? config.accent;
+  if (primary) {
+    const p = primary;
+    vars["--orynn-color-primary"] = p;
+    vars["--orynn-color-primary-foreground"] = config.primaryForeground ?? config.accentContrast ?? contrastFor(p);
+    if (!config.ring) vars["--orynn-color-ring"] = p;
+  }
+  if (config.ring) vars["--orynn-color-ring"] = config.ring;
+  if (config.font) vars["--orynn-font-family"] = config.font;
+  if (config.fontSize != null) vars["--orynn-font-size"] = len(config.fontSize);
+  if (config.controlWidth != null) {
+    vars["--orynn-control-width"] = len(config.controlWidth);
+    vars["--orynn-control-max-width"] = "none";
+  }
+  if (config.controlMaxWidth != null)
+    vars["--orynn-control-max-width"] = len(config.controlMaxWidth);
+  if (config.radius != null) {
+    const r = config.radius;
+    vars["--orynn-radius"] = typeof r === "string" && r in RADIUS_KEYWORDS ? RADIUS_KEYWORDS[r] : len(r);
+  }
+  Object.assign(vars, config.vars ?? {});
+  return vars;
+}
+var OrynnContext = createContext({
+  preset: "default",
+  density: "comfortable",
+  config: {},
+  portalContainer: null
+});
+function syncThemeEl(el, preset, density, config, style) {
+  const attr = (name, value) => value == null ? el.removeAttribute(name) : el.setAttribute(name, value);
+  attr("data-orynn-theme", preset === "default" ? null : preset);
+  attr("data-orynn-density", density === "comfortable" ? null : density);
+  attr("data-orynn-color-scheme", config.colorScheme ?? null);
+  el.classList.toggle("dark", config.colorScheme === "dark");
+  el.removeAttribute("style");
+  for (const [k, v] of Object.entries(style)) {
+    if (v != null) el.style.setProperty(k, String(v));
+  }
+}
+function OrynnProvider({ theme, as = "div", className, children }) {
+  const config = useMemo(() => normalizeTheme(theme), [theme]);
+  const preset = config.preset ?? "default";
+  const density = config.density ?? "comfortable";
+  const style = useMemo(() => resolveThemeVars(config), [config]);
+  const [portalContainer, setPortalContainer] = useState(null);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.createElement("div");
+    el.className = "orynn-portal";
+    document.body.appendChild(el);
+    setPortalContainer(el);
+    return () => {
+      el.remove();
+      setPortalContainer(null);
+    };
+  }, []);
+  useEffect(() => {
+    if (portalContainer)
+      syncThemeEl(portalContainer, preset, density, config, style);
+  }, [portalContainer, preset, density, config, style]);
+  const ctx = useMemo(
+    () => ({ preset, density, config, portalContainer }),
+    [preset, density, config, portalContainer]
+  );
+  const dataProps = {
+    "data-orynn-theme": preset === "default" ? void 0 : preset,
+    "data-orynn-density": density === "comfortable" ? void 0 : density,
+    "data-orynn-color-scheme": config.colorScheme
+  };
+  const darkClass = config.colorScheme === "dark" ? "dark" : void 0;
+  return /* @__PURE__ */ jsx(OrynnContext.Provider, { value: ctx, children: as === "contents" ? /* @__PURE__ */ jsx("div", { className: darkClass, style: { display: "contents", ...style }, ...dataProps, children }) : as === "span" ? /* @__PURE__ */ jsx("span", { className: cx("orynn-root", className, darkClass), style, ...dataProps, children }) : /* @__PURE__ */ jsx("div", { className: cx("orynn-root", className, darkClass), style, ...dataProps, children }) });
+}
+function useOrynnTheme() {
+  return useContext(OrynnContext);
+}
+function usePortalContainer() {
+  const { portalContainer } = useContext(OrynnContext);
+  if (portalContainer) return portalContainer;
+  return typeof document === "undefined" ? null : document.body;
+}
 var useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function Popover({
   open,
@@ -380,6 +544,7 @@ function Popover({
   children,
   matchWidth = true,
   offset = 6,
+  maxHeight,
   className,
   popoverRef,
   role,
@@ -391,6 +556,7 @@ function Popover({
     if (popoverRef) popoverRef.current = el;
   };
   const [pos, setPos] = useState(null);
+  const container = usePortalContainer();
   useIsoLayoutEffect(() => {
     if (!open) return;
     const anchor = anchorRef.current;
@@ -402,12 +568,13 @@ function Popover({
       const above = r.top - offset;
       const wanted = innerRef.current?.scrollHeight ?? 280;
       const placeTop = below < Math.min(wanted, 240) && above > below;
+      const avail = Math.max(140, (placeTop ? above : below) - 4);
       setPos({
         left: r.left,
         top: placeTop ? r.top - offset : r.bottom + offset,
         width: r.width,
         placement: placeTop ? "top" : "bottom",
-        maxHeight: Math.max(140, (placeTop ? above : below) - 4)
+        maxHeight: maxHeight != null ? Math.min(maxHeight, avail) : avail
       });
     };
     update();
@@ -420,7 +587,7 @@ function Popover({
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     };
-  }, [open, anchorRef, offset]);
+  }, [open, anchorRef, offset, maxHeight]);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
@@ -441,7 +608,7 @@ function Popover({
       document.removeEventListener("keydown", onKey, true);
     };
   }, [open, anchorRef, onClose]);
-  if (!open || typeof document === "undefined" || !pos) return null;
+  if (!open || !pos || !container) return null;
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
@@ -461,7 +628,7 @@ function Popover({
         children
       }
     ),
-    document.body
+    container
   );
 }
 
@@ -486,27 +653,82 @@ var clampDate = (d, min, max) => {
   return d;
 };
 var pad = (n, len2 = 2) => String(n).padStart(len2, "0");
-function formatDate(d, fmt, locale) {
-  const monthLong = new Intl.DateTimeFormat(locale, { month: "long" }).format(d);
-  const monthShort = new Intl.DateTimeFormat(locale, { month: "short" }).format(d);
-  return fmt.replace(/yyyy/g, String(d.getFullYear())).replace(/MMMM/g, monthLong).replace(/MMM/g, monthShort).replace(/MM/g, pad(d.getMonth() + 1)).replace(/dd/g, pad(d.getDate())).replace(/\bM\b/g, String(d.getMonth() + 1)).replace(/\bd\b/g, String(d.getDate()));
-}
-function parseDate(input, fmt) {
-  const nums = input.match(/\d+/g);
-  if (!nums) return null;
-  const order = (fmt.match(/yyyy|MM|dd|M|d/g) ?? ["yyyy", "MM", "dd"]).map((t) => t[0]);
+var FORMAT_TOKENS = /(?<![A-Za-z])(yyyy|yy|MMMM|MMM|MM|M|dd|d|EEEE|EEE|HH|H|hh|h|mm|m|ss|s|aa|a|A)(?![A-Za-z])/g;
+function formatDate(d, fmt = "yyyy-MM-dd", locale) {
+  if (typeof fmt !== "string") return new Intl.DateTimeFormat(locale, fmt).format(d);
+  const h12 = d.getHours() % 12 || 12;
+  const map = {
+    yyyy: String(d.getFullYear()),
+    yy: pad(d.getFullYear() % 100),
+    MMMM: new Intl.DateTimeFormat(locale, { month: "long" }).format(d),
+    MMM: new Intl.DateTimeFormat(locale, { month: "short" }).format(d),
+    MM: pad(d.getMonth() + 1),
+    M: String(d.getMonth() + 1),
+    dd: pad(d.getDate()),
+    d: String(d.getDate()),
+    EEEE: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(d),
+    EEE: new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d),
+    HH: pad(d.getHours()),
+    H: String(d.getHours()),
+    hh: pad(h12),
+    h: String(h12),
+    mm: pad(d.getMinutes()),
+    m: String(d.getMinutes()),
+    ss: pad(d.getSeconds()),
+    s: String(d.getSeconds()),
+    aa: d.getHours() < 12 ? "am" : "pm",
+    a: d.getHours() < 12 ? "am" : "pm",
+    A: d.getHours() < 12 ? "AM" : "PM"
+  };
+  return fmt.replace(FORMAT_TOKENS, (t) => map[t] ?? t);
+}
+function matchMonthName(input, locale) {
+  for (let m = 0; m < 12; m += 1) {
+    for (const style of ["long", "short"]) {
+      const name = new Intl.DateTimeFormat(locale, { month: style }).format(new Date(2021, m, 1));
+      const i = input.toLowerCase().indexOf(name.toLowerCase());
+      if (i !== -1) return { month: m, rest: input.slice(0, i) + input.slice(i + name.length) };
+    }
+  }
+  return null;
+}
+function parseDate(input, fmt = "yyyy-MM-dd", locale) {
+  const pattern = typeof fmt === "string" ? fmt : "yyyy-MM-dd";
+  let text = input;
+  let monthFromName;
+  if (/MMM/.test(pattern)) {
+    const hit = matchMonthName(text, locale);
+    if (hit) {
+      monthFromName = hit.month;
+      text = hit.rest;
+    }
+  }
+  const nums = text.match(/\d+/g);
+  if (!nums && monthFromName === void 0) return null;
+  const order = (pattern.match(/yyyy|yy|MM|dd|HH|hh|mm|ss|M|d|H|h|m|s/g) ?? ["yyyy", "MM", "dd"]).map((t) => t.length === 2 ? t.charAt(0) + t.charAt(0) : t);
   let y;
-  let m;
-  let dd;
-  order.forEach((t, i) => {
-    const n = Number(nums[i]);
-    if (Number.isNaN(n)) return;
-    if (t === "y") y = n < 100 ? 2e3 + n : n;
-    else if (t === "M") m = n - 1;
-    else if (t === "d") dd = n;
-  });
-  if (y == null || m == null || dd == null) return null;
-  const d = new Date(y, m, dd);
+  let mo = monthFromName;
+  let day;
+  let hh = 0;
+  let mm = 0;
+  let ss = 0;
+  let ni = 0;
+  for (const tok of order) {
+    if ((tok === "MM" || tok === "M") && monthFromName !== void 0) continue;
+    const n = Number((nums ?? [])[ni]);
+    ni += 1;
+    if (Number.isNaN(n)) continue;
+    if (tok === "yyyy" || tok === "yy") y = n < 100 ? 2e3 + n : n;
+    else if (tok === "MM" || tok === "M") mo = n - 1;
+    else if (tok === "dd" || tok === "d") day = n;
+    else if (tok === "HH" || tok === "H" || tok === "hh" || tok === "h") hh = n;
+    else if (tok === "mm" || tok === "m") mm = n;
+    else if (tok === "ss" || tok === "s") ss = n;
+  }
+  if (/pm/i.test(input) && hh < 12) hh += 12;
+  if (/am/i.test(input) && hh === 12) hh = 0;
+  if (y == null && day == null && mo == null) return null;
+  const d = new Date(y ?? (/* @__PURE__ */ new Date()).getFullYear(), mo ?? 0, day ?? 1, hh, mm, ss);
   return Number.isNaN(d.getTime()) ? null : d;
 }
 function toDate(v) {
@@ -515,11 +737,14 @@ function toDate(v) {
   const d = new Date(v);
   return Number.isNaN(d.getTime()) ? null : startOfDay(d);
 }
-function monthMatrix(viewYear, viewMonth, firstDayOfWeek) {
+function monthMatrix(viewYear, viewMonth, firstDayOfWeek, fixedWeeks = true) {
   const first = new Date(viewYear, viewMonth, 1);
   const offset = (first.getDay() - firstDayOfWeek + 7) % 7;
   const start = addDays(first, -offset);
-  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+  if (fixedWeeks) return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+  const last = new Date(viewYear, viewMonth + 1, 0);
+  const used = Math.ceil((offset + last.getDate()) / 7);
+  return Array.from({ length: used * 7 }, (_, i) => addDays(start, i));
 }
 function weekdayLabels(firstDayOfWeek, locale) {
   const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
@@ -528,6 +753,10 @@ function weekdayLabels(firstDayOfWeek, locale) {
     (_, i) => fmt.format(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7))
   );
 }
+function decadeGrid(year) {
+  const start = Math.floor(year / 10) * 10;
+  return { start, years: Array.from({ length: 12 }, (_, i) => start - 1 + i) };
+}
 function isoWeek(d) {
   const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
   const dayNum = (date.getUTCDay() + 6) % 7;
@@ -536,9 +765,40 @@ function isoWeek(d) {
   const diff = date.getTime() - firstThursday.getTime();
   return 1 + Math.round(diff / (7 * 24 * 3600 * 1e3));
 }
+
+// src/controls/DatePicker/calendar-range.ts
+function normalizeRange(r) {
+  if (r.start && r.end && startOfDay(r.start) > startOfDay(r.end)) {
+    return { start: r.end, end: r.start };
+  }
+  return r;
+}
+function isRangeComplete(r) {
+  return !!r && !!r.start && !!r.end;
+}
+function isWithinRange(d, r) {
+  if (!isRangeComplete(r)) return false;
+  const t = startOfDay(d).getTime();
+  return t > startOfDay(r.start).getTime() && t < startOfDay(r.end).getTime();
+}
+var isRangeStart = (d, r) => !!r && isSameDay(d, r.start);
+var isRangeEnd = (d, r) => !!r && isSameDay(d, r.end);
+function previewRange(anchor, hover) {
+  if (!anchor || !hover) return null;
+  return normalizeRange({ start: anchor, end: hover });
+}
+function nextRange(current, d) {
+  if (!current.start || current.start && current.end) return { start: startOfDay(d), end: null };
+  return normalizeRange({ start: current.start, end: startOfDay(d) });
+}
 function Calendar({
   value,
   onSelect,
+  mode = "single",
+  selectedDates,
+  range,
+  previewRange: previewRange2,
+  onHoverDate,
   minDate,
   maxDate,
   isDisabled,
@@ -548,16 +808,33 @@ function Calendar({
   showToday,
   showClear,
   onClear,
-  autoFocus
+  autoFocus,
+  view: viewProp,
+  defaultView,
+  onViewChange,
+  precision = "day",
+  fixedWeeks = true,
+  defaultMonth,
+  numberOfMonths = 1
 }) {
+  const panels = Math.max(1, Math.floor(numberOfMonths));
   const today = startOfDay(/* @__PURE__ */ new Date());
-  const initial = value ?? clampDate(today, minDate, maxDate);
-  const [view, setView] = useState({ y: initial.getFullYear(), m: initial.getMonth() });
+  const anchor = value ?? (mode === "range" ? range?.start ?? range?.end ?? null : null) ?? (mode === "multiple" ? selectedDates?.[0] ?? null : null) ?? defaultMonth ?? null;
+  const initial = anchor ?? clampDate(today, minDate, maxDate);
+  const [nav, setNav] = useState({ y: initial.getFullYear(), m: initial.getMonth() });
   const [focused, setFocused] = useState(initial);
+  const [innerView, setInnerView] = useState(
+    defaultView ?? (precision === "day" ? "day" : precision)
+  );
+  const view = viewProp ?? innerView;
+  const setView = (v) => {
+    if (viewProp === void 0) setInnerView(v);
+    onViewChange?.(v);
+  };
   const gridRef = useRef(null);
   useEffect(() => {
     if (value) {
-      setView({ y: value.getFullYear(), m: value.getMonth() });
+      setNav({ y: value.getFullYear(), m: value.getMonth() });
       setFocused(value);
     }
   }, [value]);
@@ -566,94 +843,118 @@ function Calendar({
       gridRef.current?.querySelector('[data-focused="true"]')?.focus();
     }
   }, [autoFocus]);
-  const cells = monthMatrix(view.y, view.m, firstDayOfWeek);
-  const weekdays = weekdayLabels(firstDayOfWeek, locale);
-  const monthName = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
-    new Date(view.y, view.m, 1)
-  );
   const outOfRange = (d) => minDate != null && d < startOfDay(minDate) || maxDate != null && d > startOfDay(maxDate) || Boolean(isDisabled?.(d));
-  const goto = (d) => {
-    const c = clampDate(d, minDate, maxDate);
-    setFocused(c);
-    setView({ y: c.getFullYear(), m: c.getMonth() });
+  const monthOutOfRange = (y, m) => {
+    const first = new Date(y, m, 1);
+    const last = new Date(y, m + 1, 0);
+    return maxDate != null && first > startOfDay(maxDate) || minDate != null && last < startOfDay(minDate);
+  };
+  const yearOutOfRange = (y) => maxDate != null && new Date(y, 0, 1) > startOfDay(maxDate) || minDate != null && new Date(y, 11, 31) < startOfDay(minDate);
+  const focusGrid = () => {
     requestAnimationFrame(() => {
       gridRef.current?.querySelector('[data-focused="true"]')?.focus();
     });
   };
-  const onKeyDown = (e) => {
-    const k = e.key;
-    let next = null;
-    if (k === "ArrowLeft") next = addDays(focused, -1);
-    else if (k === "ArrowRight") next = addDays(focused, 1);
-    else if (k === "ArrowUp") next = addDays(focused, -7);
-    else if (k === "ArrowDown") next = addDays(focused, 7);
-    else if (k === "Home") next = addDays(focused, -((focused.getDay() - firstDayOfWeek + 7) % 7));
-    else if (k === "End")
-      next = addDays(focused, 6 - (focused.getDay() - firstDayOfWeek + 7) % 7);
-    else if (k === "PageUp") next = addMonths(focused, e.shiftKey ? -12 : -1);
-    else if (k === "PageDown") next = addMonths(focused, e.shiftKey ? 12 : 1);
-    else if (k === "Enter" || k === " ") {
-      e.preventDefault();
-      if (!outOfRange(focused)) onSelect(focused);
-      return;
-    } else return;
-    e.preventDefault();
-    goto(next);
+  const navIndex = nav.y * 12 + nav.m;
+  const goto = (d) => {
+    const c = clampDate(d, minDate, maxDate);
+    setFocused(c);
+    const ci = c.getFullYear() * 12 + c.getMonth();
+    if (ci < navIndex || ci > navIndex + panels - 1) {
+      setNav({ y: c.getFullYear(), m: c.getMonth() });
+    }
+    focusGrid();
   };
-  const years = [];
-  const minY = minDate ? minDate.getFullYear() : view.y - 10;
-  const maxY = maxDate ? maxDate.getFullYear() : view.y + 10;
-  for (let y = minY; y <= maxY; y += 1) years.push(y);
-  return /* @__PURE__ */ jsxs("div", { className: "orynn-calendar", children: [
-    /* @__PURE__ */ jsxs("div", { className: "orynn-calendar__header", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "orynn-calendar__nav",
-          "aria-label": "Previous month",
-          onClick: () => setView((v) => ({ y: v.m === 0 ? v.y - 1 : v.y, m: (v.m + 11) % 12 })),
-          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "orynn-calendar__title", children: [
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            className: "orynn-calendar__select",
-            "aria-label": "Month",
-            value: view.m,
-            onChange: (e) => setView((v) => ({ ...v, m: Number(e.target.value) })),
-            children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("option", { value: i, children: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2023, i, 1)) }, i))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            className: "orynn-calendar__select",
-            "aria-label": "Year",
-            value: view.y,
-            onChange: (e) => setView((v) => ({ ...v, y: Number(e.target.value) })),
-            children: years.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "orynn-calendar__nav",
-          "aria-label": "Next month",
-          onClick: () => setView((v) => ({ y: v.m === 11 ? v.y + 1 : v.y, m: (v.m + 1) % 12 })),
-          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-        }
-      )
-    ] }),
-    " ",
-    /* @__PURE__ */ jsxs(
+  const canDrillUp = view !== "year";
+  const dayTitle = () => {
+    const first = new Date(nav.y, nav.m, 1);
+    if (panels <= 1) {
+      return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(first);
+    }
+    const last = new Date(nav.y, nav.m + panels - 1, 1);
+    const f = new Intl.DateTimeFormat(locale, { month: "short" }).format(first);
+    const l = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric" }).format(last);
+    return first.getFullYear() === last.getFullYear() ? `${f} \u2013 ${l}` : `${f} ${first.getFullYear()} \u2013 ${l}`;
+  };
+  const titleText = view === "day" ? dayTitle() : view === "month" ? String(nav.y) : (() => {
+    const g = decadeGrid(nav.y);
+    return `${g.start} \u2013 ${g.start + 9}`;
+  })();
+  const step = (dir) => {
+    if (view === "day") setNav((v) => ({ ...addMonthNav(v, dir) }));
+    else if (view === "month") setNav((v) => ({ ...v, y: v.y + dir }));
+    else setNav((v) => ({ ...v, y: v.y + dir * 10 }));
+  };
+  const header = /* @__PURE__ */ jsxs("div", { className: "orynn-calendar__header", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "orynn-calendar__nav",
+        "aria-label": view === "day" ? "Previous month" : view === "month" ? "Previous year" : "Previous decade",
+        onClick: () => step(-1),
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "orynn-calendar__title",
+        "aria-live": "polite",
+        disabled: !canDrillUp,
+        onClick: () => {
+          if (!canDrillUp) return;
+          setView(view === "day" ? "month" : "year");
+        },
+        children: titleText
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "orynn-calendar__nav",
+        "aria-label": view === "day" ? "Next month" : view === "month" ? "Next year" : "Next decade",
+        onClick: () => step(1),
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      }
+    )
+  ] });
+  const dayGrid = (monthOffset = 0) => {
+    const panelMonth = new Date(nav.y, nav.m + monthOffset, 1);
+    const py = panelMonth.getFullYear();
+    const pm = panelMonth.getMonth();
+    const cells = monthMatrix(py, pm, firstDayOfWeek, fixedWeeks);
+    const weeks = cells.length / 7;
+    const weekdays = weekdayLabels(firstDayOfWeek, locale);
+    const monthName = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
+      panelMonth
+    );
+    const onKeyDown = (e) => {
+      const k = e.key;
+      let next = null;
+      if (k === "ArrowLeft") next = addDays(focused, -1);
+      else if (k === "ArrowRight") next = addDays(focused, 1);
+      else if (k === "ArrowUp") next = addDays(focused, -7);
+      else if (k === "ArrowDown") next = addDays(focused, 7);
+      else if (k === "Home")
+        next = addDays(focused, -((focused.getDay() - firstDayOfWeek + 7) % 7));
+      else if (k === "End")
+        next = addDays(focused, 6 - (focused.getDay() - firstDayOfWeek + 7) % 7);
+      else if (k === "PageUp") next = addMonths(focused, e.shiftKey ? -12 : -1);
+      else if (k === "PageDown") next = addMonths(focused, e.shiftKey ? 12 : 1);
+      else if (k === "Enter" || k === " ") {
+        e.preventDefault();
+        if (!outOfRange(focused)) onSelect(focused);
+        return;
+      } else return;
+      e.preventDefault();
+      goto(next);
+    };
+    return /* @__PURE__ */ jsxs(
       "table",
       {
-        ref: gridRef,
         className: "orynn-calendar__grid",
         role: "grid",
         "aria-label": monthName,
@@ -663,16 +964,29 @@ function Calendar({
             showWeekNumbers && /* @__PURE__ */ jsx("th", { "aria-hidden": "true" }),
             weekdays.map((w) => /* @__PURE__ */ jsx("th", { scope: "col", children: w }, w))
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 6 }, (_, week) => {
+          /* @__PURE__ */ jsx("tbody", { onMouseLeave: onHoverDate ? () => onHoverDate(null) : void 0, children: Array.from({ length: weeks }, (_, week) => {
             const row = cells.slice(week * 7, week * 7 + 7);
             const firstOfRow = row[0];
             return /* @__PURE__ */ jsxs("tr", { children: [
               showWeekNumbers && /* @__PURE__ */ jsx("td", { className: "orynn-calendar__weeknum", children: isoWeek(firstOfRow) }),
               row.map((d) => {
-                const inMonth = d.getMonth() === view.m;
+                const inMonth = d.getMonth() === pm;
                 const disabled = outOfRange(d);
-                const selected = isSameDay(d, value);
                 const isFocused = isSameDay(d, focused);
+                let selected;
+                let rangeStart = false;
+                let rangeEnd = false;
+                let inRange = false;
+                if (mode === "multiple") {
+                  selected = (selectedDates ?? []).some((x) => isSameDay(x, d));
+                } else if (mode === "range") {
+                  rangeStart = isRangeStart(d, range) || !!previewRange2 && isRangeStart(d, previewRange2);
+                  rangeEnd = isRangeEnd(d, range) || !!previewRange2 && isRangeEnd(d, previewRange2);
+                  inRange = isWithinRange(d, range) || !!previewRange2 && isWithinRange(d, previewRange2);
+                  selected = rangeStart || rangeEnd;
+                } else {
+                  selected = isSameDay(d, value);
+                }
                 return /* @__PURE__ */ jsx("td", { role: "gridcell", "aria-selected": selected, children: /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -683,10 +997,15 @@ function Calendar({
                     "data-outside": !inMonth || void 0,
                     "data-today": isSameDay(d, today) || void 0,
                     "data-selected": selected || void 0,
+                    "data-range-start": rangeStart || void 0,
+                    "data-range-end": rangeEnd || void 0,
+                    "data-in-range": inRange || void 0,
                     disabled,
                     "aria-label": new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(
                       d
                     ),
+                    onMouseEnter: onHoverDate ? () => onHoverDate(d) : void 0,
+                    onFocus: onHoverDate ? () => onHoverDate(d) : void 0,
                     onClick: () => {
                       setFocused(d);
                       onSelect(d);
@@ -698,25 +1017,187 @@ function Calendar({
             ] }, firstOfRow.toISOString());
           }) })
         ]
+      },
+      `${py}-${pm}`
+    );
+  };
+  const monthGrid = () => {
+    const names = Array.from(
+      { length: 12 },
+      (_, i) => new Intl.DateTimeFormat(locale, { month: "short" }).format(new Date(2021, i, 1))
+    );
+    const onKeyDown = (e) => {
+      let m = nav.m;
+      if (e.key === "ArrowLeft") m -= 1;
+      else if (e.key === "ArrowRight") m += 1;
+      else if (e.key === "ArrowUp") m -= 3;
+      else if (e.key === "ArrowDown") m += 3;
+      else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        pickMonth(nav.m);
+        return;
+      } else return;
+      e.preventDefault();
+      const d = addMonths(new Date(nav.y, nav.m, 1), m - nav.m);
+      setNav({ y: d.getFullYear(), m: d.getMonth() });
+      focusGrid();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "orynn-calendar__pickgrid",
+        role: "grid",
+        "aria-label": `Months of ${nav.y}`,
+        onKeyDown,
+        children: [0, 3, 6, 9].map((rowStart) => /* @__PURE__ */ jsx("div", { role: "row", className: "orynn-calendar__pickrow", children: names.slice(rowStart, rowStart + 3).map((name, j) => {
+          const i = rowStart + j;
+          const isFocused = i === nav.m;
+          const selected = value != null && value.getFullYear() === nav.y && value.getMonth() === i;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-calendar__cell",
+              tabIndex: isFocused ? 0 : -1,
+              "data-focused": isFocused || void 0,
+              "data-selected": selected || void 0,
+              disabled: monthOutOfRange(nav.y, i),
+              onClick: () => pickMonth(i),
+              children: name
+            },
+            name
+          );
+        }) }, rowStart))
       }
-    ),
-    (showToday || showClear) && /* @__PURE__ */ jsxs("div", { className: "orynn-calendar__footer", children: [
-      showToday ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "orynn-calendar__action",
-          disabled: outOfRange(today),
-          onClick: () => onSelect(today),
-          children: "Today"
-        }
-      ) : /* @__PURE__ */ jsx("span", {}),
-      showClear && /* @__PURE__ */ jsx("button", { type: "button", className: "orynn-calendar__action", onClick: onClear, children: "Clear" })
-    ] })
-  ] });
+    );
+  };
+  const pickMonth = (m) => {
+    if (monthOutOfRange(nav.y, m)) return;
+    setNav((v) => ({ ...v, m }));
+    if (precision === "month") {
+      onSelect(new Date(nav.y, m, 1));
+    } else {
+      setView("day");
+      setFocused(clampDate(new Date(nav.y, m, 1), minDate, maxDate));
+      focusGrid();
+    }
+  };
+  const yearGrid = () => {
+    const g = decadeGrid(nav.y);
+    const onKeyDown = (e) => {
+      let y = nav.y;
+      if (e.key === "ArrowLeft") y -= 1;
+      else if (e.key === "ArrowRight") y += 1;
+      else if (e.key === "ArrowUp") y -= 3;
+      else if (e.key === "ArrowDown") y += 3;
+      else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        pickYear(nav.y);
+        return;
+      } else return;
+      e.preventDefault();
+      setNav((v) => ({ ...v, y }));
+      focusGrid();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "orynn-calendar__pickgrid",
+        role: "grid",
+        "aria-label": `Years ${g.start}\u2013${g.start + 9}`,
+        onKeyDown,
+        children: [0, 3, 6, 9].map((rowStart) => /* @__PURE__ */ jsx("div", { role: "row", className: "orynn-calendar__pickrow", children: g.years.slice(rowStart, rowStart + 3).map((y) => {
+          const isFocused = y === nav.y;
+          const selected = value != null && value.getFullYear() === y;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-calendar__cell",
+              tabIndex: isFocused ? 0 : -1,
+              "data-focused": isFocused || void 0,
+              "data-outside": y < g.start || y > g.start + 9 || void 0,
+              "data-selected": selected || void 0,
+              disabled: yearOutOfRange(y),
+              onClick: () => pickYear(y),
+              children: y
+            },
+            y
+          );
+        }) }, rowStart))
+      }
+    );
+  };
+  const pickYear = (y) => {
+    if (yearOutOfRange(y)) return;
+    setNav((v) => ({ ...v, y }));
+    if (precision === "year") {
+      onSelect(new Date(y, 0, 1));
+    } else {
+      setView("month");
+      focusGrid();
+    }
+  };
+  const dayView = panels <= 1 ? dayGrid() : /* @__PURE__ */ jsx("div", { className: "orynn-calendar__panels", children: Array.from({ length: panels }, (_, i) => dayGrid(i)) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "orynn-calendar",
+      ref: gridRef,
+      "data-view": view,
+      "data-months": panels > 1 ? panels : void 0,
+      children: [
+        header,
+        " ",
+        view === "day" ? dayView : view === "month" ? monthGrid() : yearGrid(),
+        (showToday || showClear) && /* @__PURE__ */ jsxs("div", { className: "orynn-calendar__footer", children: [
+          showToday ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-calendar__action",
+              disabled: outOfRange(today),
+              onClick: () => onSelect(today),
+              children: "Today"
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          showClear && /* @__PURE__ */ jsx("button", { type: "button", className: "orynn-calendar__action", onClick: onClear, children: "Clear" })
+        ] })
+      ]
+    }
+  );
+}
+function addMonthNav(v, dir) {
+  const total = v.y * 12 + v.m + dir;
+  return { y: Math.floor(total / 12), m: (total % 12 + 12) % 12 };
 }
+
+// src/controls/DatePicker/time-utils.ts
+var timeParts = (d) => ({
+  h: d.getHours(),
+  m: d.getMinutes(),
+  s: d.getSeconds()
+});
+function withTime(date, time) {
+  const r = new Date(date);
+  r.setHours(time.h, time.m, time.s, 0);
+  return r;
+}
+function minuteOptions(step) {
+  const s = Math.max(1, Math.min(30, Math.floor(step)));
+  const out = [];
+  for (let m = 0; m < 60; m += s) out.push(m);
+  return out;
+}
+var pad2 = (n) => String(n).padStart(2, "0");
+var normDates = (v) => Array.isArray(v) ? v.map((x) => toDate(x)).filter(Boolean) : [];
+var normRange = (v) => {
+  const r = v ?? {};
+  return { start: toDate(r.start ?? null), end: toDate(r.end ?? null) };
+};
 var DatePicker = /* @__PURE__ */ forwardRef(
-  function DatePicker2(props, ref) {
+  function DatePicker2(propsIn, ref) {
+    const props = propsIn;
     const {
       label,
       description,
@@ -734,6 +1215,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
       id: idProp,
       name,
       className,
+      mode = "single",
       value: valueProp,
       defaultValue,
       onChange,
@@ -741,46 +1223,123 @@ var DatePicker = /* @__PURE__ */ forwardRef(
       minDate,
       maxDate,
       disabledDates,
+      isDateUnavailable,
       firstDayOfWeek = 0,
       locale,
       showWeekNumbers,
       showToday = true,
       showClear,
+      defaultView,
+      precision = "day",
+      fixedWeeks = true,
+      numberOfMonths,
+      showTime = false,
+      timeStep = 5,
+      defaultMonth,
+      presets,
       inline = false,
       allowInput = true,
-      closeOnSelect = true,
+      closeOnSelect: closeOnSelectProp,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
       placeholder
     } = props;
     const reactId = useId();
     const id = idProp ?? reactId;
     const panelId = `${id}-cal`;
+    const withTimePicker = showTime && mode === "single";
+    const closeOnSelect = closeOnSelectProp ?? !withTimePicker;
+    const fmt = withTimePicker && format === "yyyy-MM-dd" ? "yyyy-MM-dd HH:mm" : format;
     const isControlled = valueProp !== void 0;
-    const [inner, setInner] = useState(() => toDate(defaultValue));
-    const value = isControlled ? toDate(valueProp) : inner;
-    const [open, setOpen] = useState(false);
+    const [innerRaw, setInnerRaw] = useState(() => defaultValue ?? null);
+    const raw = isControlled ? valueProp : innerRaw;
+    const toDateKeepTime = (v) => {
+      if (v == null) return null;
+      const d = new Date(v);
+      return Number.isNaN(d.getTime()) ? null : d;
+    };
+    const curDate = mode === "single" ? withTimePicker ? toDateKeepTime(raw) : toDate(raw) : null;
+    const curRange = mode === "range" ? normRange(raw) : { start: null, end: null };
+    const curDates = mode === "multiple" ? normDates(raw) : [];
+    const commit = (next) => {
+      if (!isControlled) {
+        setInnerRaw(next);
+      }
+      onChange?.(next);
+    };
+    const openIsControlled = openProp !== void 0;
+    const [innerOpen, setInnerOpen] = useState(defaultOpen);
+    const open = openIsControlled ? openProp : innerOpen;
+    const setOpen = (next) => {
+      if (!openIsControlled) setInnerOpen(next);
+      onOpenChange?.(next);
+    };
     const [gridFocus, setGridFocus] = useState(false);
-    const [text, setText] = useState(() => value ? formatDate(value, format, locale) : "");
+    const [hoverDate, setHoverDate] = useState(null);
+    const displayText = () => {
+      if (mode === "single") return curDate ? formatDate(curDate, fmt, locale) : "";
+      if (mode === "multiple") {
+        if (curDates.length === 0) return "";
+        if (curDates.length === 1) return formatDate(curDates[0], fmt, locale);
+        return `${curDates.length} selected`;
+      }
+      if (!curRange.start && !curRange.end) return "";
+      const s = curRange.start ? formatDate(curRange.start, fmt, locale) : "\u2026";
+      const e = curRange.end ? formatDate(curRange.end, fmt, locale) : "\u2026";
+      return `${s} \u2013 ${e}`;
+    };
+    const [text, setText] = useState(displayText);
     const boxRef = useRef(null);
     const inputRef = useRef(null);
+    const skipFocusOpen = useRef(false);
+    const valueKey = [
+      mode,
+      typeof fmt === "string" ? fmt : JSON.stringify(fmt),
+      locale ?? "",
+      curDate?.getTime() ?? "",
+      curRange.start?.getTime() ?? "",
+      curRange.end?.getTime() ?? "",
+      curDates.map((d) => d.getTime()).join(",")
+    ].join("|");
     useEffect(() => {
-      setText(value ? formatDate(value, format, locale) : "");
-    }, [value, format, locale]);
+      setText(displayText());
+    }, [valueKey]);
     const isDisabledDate = (d) => {
+      if (isDateUnavailable?.(d)) return true;
       if (Array.isArray(disabledDates))
         return disabledDates.some((x) => isSameDay(startOfDay(x), d));
       return Boolean(disabledDates?.(d));
     };
-    const commit = (d) => {
-      if (!isControlled) setInner(d);
-      onChange?.(d);
+    const closeAndRefocus = () => {
+      setOpen(false);
+      setGridFocus(false);
+      skipFocusOpen.current = true;
+      inputRef.current?.focus();
     };
     const select = (d) => {
       if (isDisabledDate(d)) return;
-      commit(startOfDay(d));
-      if (closeOnSelect) {
-        setOpen(false);
-        inputRef.current?.focus();
+      const day = startOfDay(d);
+      if (mode === "single") {
+        const picked = withTimePicker ? withTime(day, curDate ? timeParts(curDate) : { h: 0, m: 0, s: 0 }) : day;
+        commit(picked);
+        if (closeOnSelect) closeAndRefocus();
+        return;
+      }
+      if (mode === "multiple") {
+        const has = curDates.some((x) => isSameDay(x, day));
+        commit(has ? curDates.filter((x) => !isSameDay(x, day)) : [...curDates, day]);
+        return;
       }
+      const next = nextRange(curRange, day);
+      commit(next);
+      if (isRangeComplete(next) && closeOnSelect) closeAndRefocus();
+    };
+    const clearValue = () => {
+      if (mode === "single") commit(null);
+      else if (mode === "multiple") commit([]);
+      else commit({ start: null, end: null });
+      onClear?.();
     };
     const onKeyDown = (e) => {
       if (disabled || readOnly) return;
@@ -791,31 +1350,96 @@ var DatePicker = /* @__PURE__ */ forwardRef(
       } else if (e.key === "Escape" && open) {
         e.preventDefault();
         setOpen(false);
-      } else if (e.key === "Enter") {
-        const parsed = parseDate(text, format);
+      } else if (e.key === "Enter" && mode === "single") {
+        const parsed = parseDate(text, fmt, locale);
         if (parsed && !isDisabledDate(startOfDay(parsed))) select(parsed);
       }
     };
-    const cal = /* @__PURE__ */ jsx(
+    const preview = mode === "range" && curRange.start && !curRange.end ? previewRange(curRange.start, hoverDate) : null;
+    const applyPreset = (p) => {
+      const resolved = p.getValue ? p.getValue() : p.value;
+      if (resolved == null) return;
+      commit(resolved);
+      if (closeOnSelect && !inline) closeAndRefocus();
+    };
+    const setTimeField = (part, n) => {
+      const base2 = curDate ?? startOfDay(/* @__PURE__ */ new Date());
+      const t = timeParts(base2);
+      commit(withTime(base2, { ...t, [part]: n, s: 0 }));
+    };
+    const timeColumn = withTimePicker ? /* @__PURE__ */ jsxs("div", { className: "orynn-datepicker__time", children: [
+      /* @__PURE__ */ jsx("span", { className: "orynn-datepicker__time-label", children: "Time" }),
+      /* @__PURE__ */ jsxs("div", { className: "orynn-datepicker__time-fields", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": "Hour",
+            className: "orynn-datepicker__time-select",
+            value: curDate ? curDate.getHours() : 0,
+            onChange: (e) => setTimeField("h", Number(e.target.value)),
+            children: Array.from({ length: 24 }, (_, h) => /* @__PURE__ */ jsx("option", { value: h, children: pad2(h) }, h))
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: ":" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": "Minute",
+            className: "orynn-datepicker__time-select",
+            value: curDate ? curDate.getMinutes() - curDate.getMinutes() % timeStep : 0,
+            onChange: (e) => setTimeField("m", Number(e.target.value)),
+            children: minuteOptions(timeStep).map((m) => /* @__PURE__ */ jsx("option", { value: m, children: pad2(m) }, m))
+          }
+        )
+      ] })
+    ] }) : null;
+    const calendar = /* @__PURE__ */ jsx(
       Calendar,
       {
-        value,
+        value: curDate,
         onSelect: select,
+        mode,
+        selectedDates: mode === "multiple" ? curDates : void 0,
+        range: mode === "range" ? curRange : void 0,
+        previewRange: preview,
+        onHoverDate: mode === "range" ? setHoverDate : void 0,
         minDate,
         maxDate,
         isDisabled: isDisabledDate,
         firstDayOfWeek,
         locale,
         showWeekNumbers,
-        showToday,
+        showToday: showToday && mode === "single",
         showClear,
+        defaultView,
+        precision,
+        fixedWeeks,
+        numberOfMonths,
+        defaultMonth,
         onClear: () => {
-          commit(null);
+          clearValue();
           setOpen(false);
         },
         autoFocus: open && gridFocus || inline
       }
     );
+    const body = timeColumn ? /* @__PURE__ */ jsxs("div", { className: "orynn-datepicker__withtime", children: [
+      calendar,
+      timeColumn
+    ] }) : calendar;
+    const cal = presets && presets.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "orynn-datepicker__panel", children: [
+      /* @__PURE__ */ jsx("div", { className: "orynn-datepicker__presets", children: presets.map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "orynn-datepicker__preset",
+          onClick: () => applyPreset(p),
+          children: p.label
+        },
+        p.label
+      )) }),
+      body
+    ] }) : body;
     if (inline) {
       return /* @__PURE__ */ jsx(
         Field,
@@ -832,7 +1456,8 @@ var DatePicker = /* @__PURE__ */ forwardRef(
         }
       );
     }
-    const hasValue = value != null;
+    const hasValue = mode === "single" ? curDate != null : mode === "multiple" ? curDates.length > 0 : Boolean(curRange.start || curRange.end);
+    const typingAllowed = mode === "single" && allowInput && !readOnly;
     return /* @__PURE__ */ jsx(
       Field,
       {
@@ -867,10 +1492,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
                     className: "orynn-box__iconbtn",
                     "aria-label": "Clear",
                     tabIndex: -1,
-                    onClick: () => {
-                      commit(null);
-                      onClear?.();
-                    },
+                    onClick: clearValue,
                     children: /* @__PURE__ */ jsx(XIcon, {})
                   }
                 ),
@@ -886,7 +1508,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
                     onClick: () => {
                       if (disabled || readOnly) return;
                       setGridFocus(true);
-                      setOpen((o) => !o);
+                      setOpen(!open);
                     },
                     children: /* @__PURE__ */ jsx(CalendarIcon, {})
                   }
@@ -905,7 +1527,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
                   name,
                   className: "orynn-box__field",
                   type: "text",
-                  inputMode: "numeric",
+                  inputMode: typingAllowed ? "numeric" : void 0,
                   autoComplete: "off",
                   role: "combobox",
                   "aria-expanded": open,
@@ -915,19 +1537,26 @@ var DatePicker = /* @__PURE__ */ forwardRef(
                   "aria-describedby": describedById,
                   value: text,
                   disabled,
-                  readOnly: !allowInput || readOnly,
+                  readOnly: !typingAllowed,
                   required,
-                  placeholder: floatingLabel ? void 0 : placeholder ?? format.toLowerCase(),
+                  placeholder: floatingLabel ? void 0 : placeholder ?? (typeof fmt === "string" ? fmt.toLowerCase() : void 0),
                   onChange: (e) => setText(e.target.value),
                   onKeyDown,
-                  onFocus: () => setOpen(true),
+                  onFocus: () => {
+                    if (skipFocusOpen.current) {
+                      skipFocusOpen.current = false;
+                      return;
+                    }
+                    setOpen(true);
+                  },
                   onBlur: () => {
-                    const parsed = parseDate(text, format);
+                    if (mode !== "single") return;
+                    const parsed = parseDate(text, fmt, locale);
                     if (parsed && !isDisabledDate(startOfDay(parsed))) {
                       commit(startOfDay(parsed));
-                      setText(formatDate(startOfDay(parsed), format, locale));
+                      setText(formatDate(startOfDay(parsed), fmt, locale));
                     } else {
-                      setText(value ? formatDate(value, format, locale) : "");
+                      setText(curDate ? formatDate(curDate, fmt, locale) : "");
                     }
                   }
                 }
@@ -954,7 +1583,13 @@ var DatePicker = /* @__PURE__ */ forwardRef(
     );
   }
 );
+var CREATE_VALUE = "\0orynn-create";
 var toArray = (v) => v == null ? [] : Array.isArray(v) ? v : [v];
+var isGrouped = (o) => {
+  const first = o[0];
+  return first != null && "items" in first && Array.isArray(first.items);
+};
+var flattenOptions = (o) => isGrouped(o) ? o.flatMap((g) => g.items.map((it) => ({ ...it, group: it.group ?? g.group }))) : o;
 function Highlight({ text, query }) {
   if (!query) return /* @__PURE__ */ jsx(Fragment, { children: text });
   const i = text.toLowerCase().indexOf(query.toLowerCase());
@@ -996,52 +1631,103 @@ var Dropdown = /* @__PURE__ */ forwardRef(
       highlightMatch,
       renderOption,
       renderValue,
+      renderGroupLabel,
       placeholder,
       emptyMessage = "No results",
+      loadingMessage = "Loading\u2026",
       closeOnSelect = !multiple,
       maxSelectedLabels,
+      maxValues,
+      hidePickedOptions = false,
+      showSelectAll = false,
       native = false,
-      startContent
+      startContent,
+      creatable = false,
+      onCreate,
+      isValidNewOption,
+      formatCreateLabel,
+      createPosition = "last",
+      onSearch,
+      searchDebounce = 0,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      maxHeight
     } = props;
     const reactId = useId();
     const id = idProp ?? reactId;
     const listId = `${id}-listbox`;
-    const isControlled = valueProp !== void 0;
-    const [inner, setInner] = useState(() => toArray(defaultValue));
-    const selectedValues = isControlled ? toArray(valueProp) : inner;
-    const commit = (next) => {
-      if (!isControlled) setInner(next);
-      onChange?.(multiple ? next : next[0] ?? null);
+    const baseOptions = useMemo(() => flattenOptions(options), [options]);
+    const [createdOptions, setCreatedOptions] = useState([]);
+    const allOptions = useMemo(
+      () => [...baseOptions, ...createdOptions],
+      [baseOptions, createdOptions]
+    );
+    const [selectedValues, setSelectedValues] = useControllableState({
+      value: valueProp === void 0 ? void 0 : toArray(valueProp),
+      defaultValue: toArray(defaultValue),
+      onChange: void 0
+    });
+    const commit = (next) => {
+      setSelectedValues(next);
+      onChange?.(multiple ? next : next[0] ?? null);
+    };
+    const openIsControlled = openProp !== void 0;
+    const [innerOpen, setInnerOpen] = useState(defaultOpen);
+    const open = openIsControlled ? openProp : innerOpen;
+    const setOpen = (next) => {
+      if (!openIsControlled) setInnerOpen(next);
+      onOpenChange?.(next);
     };
-    const [open, setOpen] = useState(false);
     const [query, setQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(0);
     const boxRef = useRef(null);
     const inputRef = useRef(null);
     const listRef = useRef(null);
-    const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
-    const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
+    const byValue = useMemo(() => new Map(allOptions.map((o) => [o.value, o])), [allOptions]);
+    const selectedOptions = selectedValues.map((v) => byValue.get(v) ?? { label: v, value: v }).filter(Boolean);
+    useEffect(() => {
+      if (!onSearch) return;
+      const t = setTimeout(() => onSearch(query), searchDebounce);
+      return () => clearTimeout(t);
+    }, [query, onSearch, searchDebounce]);
     const filtered = useMemo(() => {
-      if (!searchable || !query) return options;
-      const q = query.toLowerCase();
-      const match = filterFn ?? ((o) => filterMode === "startsWith" ? o.label.toLowerCase().startsWith(q) : o.label.toLowerCase().includes(q));
-      return options.filter((o) => match(o, query));
-    }, [options, searchable, query, filterMode, filterFn]);
+      let list = allOptions;
+      if (searchable && query && !onSearch) {
+        const q = query.toLowerCase();
+        const match = filterFn ?? ((o) => filterMode === "startsWith" ? o.label.toLowerCase().startsWith(q) : o.label.toLowerCase().includes(q));
+        list = list.filter((o) => match(o, query));
+      }
+      if (multiple && hidePickedOptions) {
+        list = list.filter((o) => !selectedValues.includes(o.value));
+      }
+      return list;
+    }, [
+      allOptions,
+      searchable,
+      query,
+      onSearch,
+      filterMode,
+      filterFn,
+      multiple,
+      hidePickedOptions,
+      selectedValues
+    ]);
+    const showCreateRow = creatable && searchable && query.trim().length > 0 && (isValidNewOption ? isValidNewOption(query.trim(), allOptions) : !allOptions.some((o) => o.label.toLowerCase() === query.trim().toLowerCase()));
+    const createRow = { value: CREATE_VALUE, label: query.trim() };
+    const selectableOptions = showCreateRow ? createPosition === "first" ? [createRow, ...filtered] : [...filtered, createRow] : filtered;
     const rows = useMemo(() => {
       const out = [];
       let seenGroup;
-      let optionIndex = 0;
-      for (const o of filtered) {
-        if (o.group && o.group !== seenGroup) {
+      selectableOptions.forEach((o, optionIndex) => {
+        if (o.value !== CREATE_VALUE && o.group && o.group !== seenGroup) {
           seenGroup = o.group;
           out.push({ type: "group", label: o.group });
         }
         out.push({ type: "option", option: o, optionIndex });
-        optionIndex += 1;
-      }
+      });
       return out;
-    }, [filtered]);
-    const selectableOptions = filtered;
+    }, [selectableOptions]);
     useEffect(() => {
       setActiveIndex((i) => Math.min(Math.max(0, i), Math.max(0, selectableOptions.length - 1)));
     }, [selectableOptions.length]);
@@ -1062,10 +1748,34 @@ var Dropdown = /* @__PURE__ */ forwardRef(
       setActiveIndex(firstRelevantIndex());
       setOpen(true);
     };
+    const handleCreate = (raw) => {
+      const input = raw.trim();
+      if (!input) return;
+      onCreate?.(input);
+      setCreatedOptions(
+        (prev) => prev.some((o) => o.value === input) || baseOptions.some((o) => o.value === input) ? prev : [...prev, { label: input, value: input }]
+      );
+      if (multiple) {
+        if (maxValues != null && selectedValues.length >= maxValues) return;
+        commit([...selectedValues, input]);
+      } else {
+        commit([input]);
+      }
+      setQuery("");
+      if (closeOnSelect) {
+        setOpen(false);
+        inputRef.current?.focus();
+      }
+    };
     const pick = (opt) => {
+      if (opt.value === CREATE_VALUE) {
+        handleCreate(opt.label);
+        return;
+      }
       if (opt.disabled) return;
       if (multiple) {
         const has = selectedValues.includes(opt.value);
+        if (!has && maxValues != null && selectedValues.length >= maxValues) return;
         commit(
           has ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value]
         );
@@ -1083,6 +1793,16 @@ var Dropdown = /* @__PURE__ */ forwardRef(
       onClear?.();
       setQuery("");
     };
+    const selectAllTargets = filtered.filter((o) => !o.disabled).map((o) => o.value);
+    const allSelected = selectAllTargets.length > 0 && selectAllTargets.every((v) => selectedValues.includes(v));
+    const toggleSelectAll = () => {
+      if (allSelected) {
+        commit(selectedValues.filter((v) => !selectAllTargets.includes(v)));
+      } else {
+        const merged = Array.from(/* @__PURE__ */ new Set([...selectedValues, ...selectAllTargets]));
+        commit(maxValues != null ? merged.slice(0, maxValues) : merged);
+      }
+    };
     const onKeyDown = (e) => {
       if (disabled || readOnly) return;
       switch (e.key) {
@@ -1147,6 +1867,7 @@ var Dropdown = /* @__PURE__ */ forwardRef(
     };
     const hasValue = selectedValues.length > 0;
     const doHighlight = highlightMatch ?? searchable;
+    const isLoadingEmpty = Boolean(loading) && selectableOptions.length === 0;
     if (native && !multiple && !searchable) {
       return /* @__PURE__ */ jsx(
         Field,
@@ -1173,7 +1894,7 @@ var Dropdown = /* @__PURE__ */ forwardRef(
               onChange: (e) => commit(e.target.value ? [e.target.value] : []),
               children: [
                 placeholder != null && /* @__PURE__ */ jsx("option", { value: "", disabled: required, children: placeholder }),
-                options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+                baseOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
               ]
             }
           )
@@ -1260,7 +1981,6 @@ var Dropdown = /* @__PURE__ */ forwardRef(
                   {
                     ...ref ? { ref: setRefs(ref, inputRef) } : { ref: inputRef },
                     id,
-                    name,
                     className: "orynn-select__search",
                     role: "combobox",
                     "aria-expanded": open,
@@ -1272,7 +1992,11 @@ var Dropdown = /* @__PURE__ */ forwardRef(
                     autoComplete: "off",
                     readOnly: !searchable || readOnly,
                     disabled,
-                    placeholder: !hasValue && (searchable || !floatingLabel) ? placeholder : void 0,
+                    placeholder: (
+                      // only the search input shows the placeholder; when not
+                      // searchable the sibling span owns it (avoids a double render)
+                      !hasValue && searchable ? placeholder : void 0
+                    ),
                     value: query,
                     size: 1,
                     onChange: (e) => {
@@ -1282,7 +2006,8 @@ var Dropdown = /* @__PURE__ */ forwardRef(
                     onKeyDown,
                     onFocus: openPanel
                   }
-                )
+                ),
+                name != null && (multiple ? selectedValues.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, v)) : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValues[0] ?? "" }))
               ] })
             }
           ),
@@ -1293,44 +2018,61 @@ var Dropdown = /* @__PURE__ */ forwardRef(
               anchorRef: boxRef,
               onClose: () => setOpen(false),
               popoverRef: listRef,
-              children: /* @__PURE__ */ jsx(
+              maxHeight,
+              children: /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: "orynn-listbox",
                   id: listId,
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
-                  children: selectableOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "orynn-listbox__empty", children: emptyMessage }) : rows.map(
-                    (row) => row.type === "group" ? /* @__PURE__ */ jsx("div", { className: "orynn-listbox__group", children: row.label }, `g-${row.label}`) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        id: `${id}-opt-${row.option.value}`,
-                        role: "option",
-                        "aria-selected": selectedValues.includes(row.option.value),
-                        "aria-disabled": row.option.disabled || void 0,
-                        className: "orynn-option",
-                        "data-active": row.optionIndex === activeIndex || void 0,
-                        "data-selected": selectedValues.includes(row.option.value) || void 0,
-                        "data-disabled": row.option.disabled || void 0,
-                        onMouseEnter: () => setActiveIndex(row.optionIndex),
-                        onClick: () => pick(row.option),
-                        children: renderOption ? renderOption(row.option, {
-                          selected: selectedValues.includes(row.option.value),
-                          active: row.optionIndex === activeIndex,
-                          disabled: Boolean(row.option.disabled),
-                          query
-                        }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                          row.option.icon,
-                          /* @__PURE__ */ jsxs("span", { className: "orynn-option__body", children: [
-                            /* @__PURE__ */ jsx("span", { className: "orynn-option__label", children: doHighlight ? /* @__PURE__ */ jsx(Highlight, { text: row.option.label, query }) : row.option.label }),
-                            row.option.description != null && /* @__PURE__ */ jsx("span", { className: "orynn-option__desc", children: row.option.description })
-                          ] }),
-                          selectedValues.includes(row.option.value) && /* @__PURE__ */ jsx(CheckIcon, { className: "orynn-option__check" })
-                        ] })
-                      },
-                      row.option.value
+                  children: [
+                    multiple && showSelectAll && selectAllTargets.length > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: "orynn-listbox__action", onClick: toggleSelectAll, children: allSelected ? "Clear all" : "Select all" }),
+                    isLoadingEmpty ? /* @__PURE__ */ jsx("div", { className: "orynn-listbox__empty", children: loadingMessage }) : selectableOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "orynn-listbox__empty", children: emptyMessage }) : rows.map(
+                      (row) => row.type === "group" ? /* @__PURE__ */ jsx("div", { className: "orynn-listbox__group", children: renderGroupLabel ? renderGroupLabel(row.label) : row.label }, `g-${row.label}`) : row.option.value === CREATE_VALUE ? /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          id: `${id}-opt-${CREATE_VALUE}`,
+                          role: "option",
+                          "aria-selected": false,
+                          className: "orynn-option orynn-option--create",
+                          "data-active": row.optionIndex === activeIndex || void 0,
+                          onMouseEnter: () => setActiveIndex(row.optionIndex),
+                          onClick: () => pick(row.option),
+                          children: /* @__PURE__ */ jsx("span", { className: "orynn-option__body", children: /* @__PURE__ */ jsx("span", { className: "orynn-option__label", children: formatCreateLabel ? formatCreateLabel(row.option.label) : `Create "${row.option.label}"` }) })
+                        },
+                        CREATE_VALUE
+                      ) : /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          id: `${id}-opt-${row.option.value}`,
+                          role: "option",
+                          "aria-selected": selectedValues.includes(row.option.value),
+                          "aria-disabled": row.option.disabled || void 0,
+                          className: "orynn-option",
+                          "data-active": row.optionIndex === activeIndex || void 0,
+                          "data-selected": selectedValues.includes(row.option.value) || void 0,
+                          "data-disabled": row.option.disabled || void 0,
+                          onMouseEnter: () => setActiveIndex(row.optionIndex),
+                          onClick: () => pick(row.option),
+                          children: renderOption ? renderOption(row.option, {
+                            selected: selectedValues.includes(row.option.value),
+                            active: row.optionIndex === activeIndex,
+                            disabled: Boolean(row.option.disabled),
+                            query
+                          }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            row.option.icon,
+                            /* @__PURE__ */ jsxs("span", { className: "orynn-option__body", children: [
+                              /* @__PURE__ */ jsx("span", { className: "orynn-option__label", children: doHighlight ? /* @__PURE__ */ jsx(Highlight, { text: row.option.label, query }) : row.option.label }),
+                              row.option.description != null && /* @__PURE__ */ jsx("span", { className: "orynn-option__desc", children: row.option.description })
+                            ] }),
+                            selectedValues.includes(row.option.value) && /* @__PURE__ */ jsx(CheckIcon, { className: "orynn-option__check" })
+                          ] })
+                        },
+                        row.option.value
+                      )
                     )
-                  )
+                  ]
                 }
               )
             }
@@ -1378,8 +2120,14 @@ var Input = /* @__PURE__ */ forwardRef(
       type = "text",
       prefix,
       suffix,
+      addonBefore,
+      addonAfter,
       passwordToggle,
+      passwordVisible,
+      onPasswordVisibleChange,
+      visibilityToggleIcon,
       showCount,
+      debounce,
       maxLength,
       placeholder,
       ...rest
@@ -1391,14 +2139,32 @@ var Input = /* @__PURE__ */ forwardRef(
       defaultValue: defaultValue ?? "",
       onChange: void 0
     });
-    const [reveal, setReveal] = useState(false);
+    const revealIsControlled = passwordVisible !== void 0;
+    const [innerReveal, setInnerReveal] = useState(false);
+    const reveal = revealIsControlled ? passwordVisible : innerReveal;
+    const setReveal = (next) => {
+      if (!revealIsControlled) setInnerReveal(next);
+      onPasswordVisibleChange?.(next);
+    };
+    const debounceTimer = useRef();
+    useEffect(() => () => clearTimeout(debounceTimer.current), []);
+    const emitChange = (v, e) => {
+      if (debounce && debounce > 0) {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = setTimeout(() => onChange?.(v, e), debounce);
+      } else {
+        onChange?.(v, e);
+      }
+    };
     const showToggle = (passwordToggle ?? type === "password") && !disabled && !readOnly;
     const effectiveType = type === "password" && reveal ? "text" : type;
     const hasValue = value.length > 0;
     const showClear = clearable && hasValue && !disabled && !readOnly;
+    const countMax = showCount && typeof showCount === "object" ? showCount.max ?? maxLength : maxLength;
+    const countNode = showCount && typeof showCount === "object" && showCount.formatter ? showCount.formatter(value.length, countMax) : `${value.length}${countMax ? `/${countMax}` : ""}`;
     const handleChange = (e) => {
       setValue(e.target.value);
-      onChange?.(e.target.value, e);
+      emitChange(e.target.value, e);
     };
     const handleKeyDown = (e) => {
       if (e.key === "Enter") onEnter?.(value);
@@ -1430,16 +2196,15 @@ var Input = /* @__PURE__ */ forwardRef(
             invalid,
             valid,
             active: hasValue,
+            addonBefore,
+            addonAfter,
             left: startContent != null || prefix != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
               startContent,
               prefix != null && /* @__PURE__ */ jsx("span", { className: "orynn-box__adornment--affix", children: prefix })
             ] }) : void 0,
             right: /* @__PURE__ */ jsxs(Fragment, { children: [
               suffix != null && /* @__PURE__ */ jsx("span", { className: "orynn-box__adornment--affix", children: suffix }),
-              showCount && /* @__PURE__ */ jsxs("span", { className: "orynn-box__adornment--affix", children: [
-                value.length,
-                maxLength ? `/${maxLength}` : ""
-              ] }),
+              showCount && /* @__PURE__ */ jsx("span", { className: "orynn-box__adornment--affix", children: countNode }),
               showClear && /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -1459,8 +2224,8 @@ var Input = /* @__PURE__ */ forwardRef(
                   "aria-label": reveal ? "Hide" : "Show",
                   "aria-pressed": reveal,
                   tabIndex: -1,
-                  onClick: () => setReveal((v) => !v),
-                  children: reveal ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+                  onClick: () => setReveal(!reveal),
+                  children: visibilityToggleIcon ? visibilityToggleIcon(reveal) : reveal ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
                 }
               ),
               loading && /* @__PURE__ */ jsx(SpinnerIcon, {}),
@@ -1497,6 +2262,11 @@ var Input = /* @__PURE__ */ forwardRef(
 );
 var clamp = (n, min, max) => Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, n));
 var round = (n, p) => p == null ? n : Math.round(n * 10 ** p) / 10 ** p;
+var SENTINEL_GROUP = "[[g]]";
+var SENTINEL_DECIMAL = "[[d]]";
+function swapSeparators(out, seps, thousandSeparator, decimalSeparator) {
+  return out.split(seps.group).join(SENTINEL_GROUP).split(seps.decimal).join(SENTINEL_DECIMAL).split(SENTINEL_GROUP).join(thousandSeparator ?? seps.group).split(SENTINEL_DECIMAL).join(decimalSeparator ?? seps.decimal);
+}
 var NumberField = /* @__PURE__ */ forwardRef(
   function NumberField2(props, ref) {
     const {
@@ -1519,19 +2289,37 @@ var NumberField = /* @__PURE__ */ forwardRef(
       value: valueProp,
       defaultValue = null,
       onChange,
+      onValueChange,
       min,
       max,
       step = 1,
       shiftStep,
+      smallStep,
       precision,
+      decimalScale,
+      fixedDecimalScale,
       buttons = "stacked",
+      hideControls,
       grouping,
+      thousandSeparator,
+      decimalSeparator,
       locale,
+      style,
       currency,
+      unit,
+      formatOptions,
+      format: formatFn,
+      parse: parseFn,
       prefix,
       suffix,
-      clampOnBlur = true,
+      allowNegative = true,
+      clampBehavior,
+      clampOnBlur,
+      emptyValue = null,
       allowMouseWheel,
+      isWheelDisabled,
+      stepHoldDelay = 300,
+      stepHoldInterval = 60,
       placeholder,
       ...rest
     } = props;
@@ -1542,15 +2330,45 @@ var NumberField = /* @__PURE__ */ forwardRef(
       defaultValue,
       onChange: void 0
     });
-    const fmt = useMemo(
-      () => new Intl.NumberFormat(locale, {
-        ...currency ? { style: "currency", currency } : {},
-        useGrouping: grouping ?? Boolean(currency),
-        maximumFractionDigits: precision ?? (currency ? 2 : 20),
-        minimumFractionDigits: currency ? 2 : 0
-      }),
-      [locale, currency, grouping, precision]
-    );
+    const resolvedStyle = style ?? (currency ? "currency" : "decimal");
+    const scale = decimalScale ?? precision;
+    const clampMode = clampBehavior ?? (clampOnBlur === false ? "none" : "blur");
+    const effMin = allowNegative ? min : Math.max(0, min ?? 0);
+    const showButtons = hideControls ? false : buttons;
+    const wheelEnabled = isWheelDisabled != null ? !isWheelDisabled : Boolean(allowMouseWheel);
+    const fmt = useMemo(() => {
+      if (formatOptions) return new Intl.NumberFormat(locale, formatOptions);
+      const opts = {
+        useGrouping: grouping ?? (thousandSeparator != null || resolvedStyle === "currency")
+      };
+      if (resolvedStyle === "currency") {
+        opts.style = "currency";
+        opts.currency = currency ?? "USD";
+      } else if (resolvedStyle === "percent") {
+        opts.style = "percent";
+      } else if (resolvedStyle === "unit" && unit) {
+        opts.style = "unit";
+        opts.unit = unit;
+      }
+      if (scale != null) {
+        opts.maximumFractionDigits = scale;
+        if (fixedDecimalScale) opts.minimumFractionDigits = scale;
+      } else {
+        opts.maximumFractionDigits = resolvedStyle === "currency" ? 2 : 20;
+        opts.minimumFractionDigits = resolvedStyle === "currency" ? 2 : 0;
+      }
+      return new Intl.NumberFormat(locale, opts);
+    }, [
+      locale,
+      formatOptions,
+      grouping,
+      thousandSeparator,
+      resolvedStyle,
+      currency,
+      unit,
+      scale,
+      fixedDecimalScale
+    ]);
     const seps = useMemo(() => {
       const parts = new Intl.NumberFormat(locale).formatToParts(11111.1);
       return {
@@ -1559,23 +2377,47 @@ var NumberField = /* @__PURE__ */ forwardRef(
       };
     }, [locale]);
     const display = useCallback(
-      (n) => n == null || Number.isNaN(n) ? "" : `${prefix ?? ""}${fmt.format(n)}${suffix ?? ""}`,
-      [fmt, prefix, suffix]
+      (n) => {
+        if (n == null || Number.isNaN(n)) return "";
+        if (formatFn) return formatFn(n);
+        let out = fmt.format(n);
+        if (thousandSeparator != null || decimalSeparator != null) {
+          out = swapSeparators(out, seps, thousandSeparator, decimalSeparator);
+        }
+        return `${prefix ?? ""}${out}${suffix ?? ""}`;
+      },
+      [fmt, formatFn, prefix, suffix, seps, thousandSeparator, decimalSeparator]
     );
     const parse = useCallback(
       (raw) => {
+        if (parseFn) return parseFn(raw);
         let s = raw;
         if (prefix) s = s.split(prefix).join("");
         if (suffix) s = s.split(suffix).join("");
-        s = s.split(seps.group).join("").split(seps.decimal).join(".");
+        const grp = thousandSeparator ?? seps.group;
+        const dec = decimalSeparator ?? seps.decimal;
+        s = s.split(grp).join("").split(dec).join(".");
         s = s.replace(/[^\d.\-]/g, "");
+        if (!allowNegative) s = s.replace(/-/g, "");
         if (s === "" || s === "-" || s === ".") return null;
         const first = s.indexOf(".");
         if (first !== -1) s = s.slice(0, first + 1) + s.slice(first + 1).replace(/\./g, "");
-        const n = Number(s);
-        return Number.isNaN(n) ? null : n;
+        let n = Number(s);
+        if (Number.isNaN(n)) return null;
+        if (resolvedStyle === "percent" && !formatFn) n = n / 100;
+        return n;
       },
-      [prefix, suffix, seps]
+      [
+        parseFn,
+        prefix,
+        suffix,
+        seps,
+        thousandSeparator,
+        decimalSeparator,
+        allowNegative,
+        resolvedStyle,
+        formatFn
+      ]
     );
     const [text, setText] = useState(() => display(value));
     const [editing, setEditing] = useState(false);
@@ -1585,65 +2427,76 @@ var NumberField = /* @__PURE__ */ forwardRef(
     const commit = (n) => {
       setValue(n);
       onChange?.(n);
+      onValueChange?.({ value: n, formatted: display(n) });
     };
     const setNumber = (n) => {
       commit(n);
       setText(display(n));
     };
-    const bump = (dir, big = false) => {
-      const delta = (big ? shiftStep ?? step * 10 : step) * dir;
-      const base2 = value ?? (dir > 0 ? min ?? 0 : max ?? 0);
-      setNumber(round(clamp(base2 + delta, min, max), precision));
+    const bump = (dir, mode = "n") => {
+      const amount = mode === "l" ? shiftStep ?? step * 10 : mode === "s" ? smallStep ?? step / 10 : step;
+      const base2 = value ?? (dir > 0 ? effMin ?? 0 : max ?? 0);
+      let next = round(base2 + amount * dir, scale);
+      if (clampMode !== "none") next = clamp(next, effMin, max);
+      else if (!allowNegative && next < 0) next = 0;
+      setNumber(next);
     };
     const innerRef = useRef(null);
     useEffect(() => {
       const el = innerRef.current;
-      if (!el || !allowMouseWheel) return;
+      if (!el || !wheelEnabled) return;
       const onWheel = (e) => {
         if (document.activeElement !== el) return;
         e.preventDefault();
-        bump(e.deltaY < 0 ? 1 : -1, e.shiftKey);
+        bump(e.deltaY < 0 ? 1 : -1, e.shiftKey ? "l" : e.altKey ? "s" : "n");
       };
       el.addEventListener("wheel", onWheel, { passive: false });
       return () => el.removeEventListener("wheel", onWheel);
     });
     const onKeyDown = (e) => {
       if (disabled || readOnly) return;
+      const mode = e.shiftKey ? "l" : e.altKey ? "s" : "n";
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        bump(1, e.shiftKey);
+        bump(1, mode);
       } else if (e.key === "ArrowDown") {
         e.preventDefault();
-        bump(-1, e.shiftKey);
+        bump(-1, mode);
       } else if (e.key === "PageUp") {
         e.preventDefault();
-        bump(1, true);
+        bump(1, "l");
       } else if (e.key === "PageDown") {
         e.preventDefault();
-        bump(-1, true);
-      } else if (e.key === "Home" && min != null) {
+        bump(-1, "l");
+      } else if (e.key === "Home" && effMin != null) {
         e.preventDefault();
-        setNumber(min);
+        setNumber(effMin);
       } else if (e.key === "End" && max != null) {
         e.preventDefault();
         setNumber(max);
       }
     };
     const holdTimer = useRef();
+    const holdDelay = useRef();
     const startHold = (dir) => {
       bump(dir);
       let count = 0;
-      holdTimer.current = setInterval(() => {
-        count += 1;
-        bump(dir, count > 6);
-      }, 110);
+      holdDelay.current = setTimeout(() => {
+        holdTimer.current = setInterval(() => {
+          count += 1;
+          bump(dir, count > 6 ? "l" : "n");
+        }, stepHoldInterval);
+      }, stepHoldDelay);
     };
-    const stopHold = () => clearInterval(holdTimer.current);
-    useEffect(() => () => clearInterval(holdTimer.current), []);
-    const StepButtons = buttons && /* @__PURE__ */ jsxs(
+    const stopHold = () => {
+      clearTimeout(holdDelay.current);
+      clearInterval(holdTimer.current);
+    };
+    useEffect(() => stopHold, []);
+    const StepButtons = showButtons && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `orynn-number__buttons${buttons === "horizontal" ? " orynn-number__buttons--horizontal" : ""}`,
+        className: `orynn-number__buttons${showButtons === "horizontal" ? " orynn-number__buttons--horizontal" : ""}`,
         children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -1656,7 +2509,7 @@ var NumberField = /* @__PURE__ */ forwardRef(
               onPointerDown: () => startHold(1),
               onPointerUp: stopHold,
               onPointerLeave: stopHold,
-              children: /* @__PURE__ */ jsx(PlusIcon, {})
+              children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "orynn-number__caret" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1666,11 +2519,11 @@ var NumberField = /* @__PURE__ */ forwardRef(
               className: "orynn-number__btn",
               "aria-label": "Decrement",
               tabIndex: -1,
-              disabled: disabled || readOnly || min != null && (value ?? 0) <= min,
+              disabled: disabled || readOnly || effMin != null && (value ?? 0) <= effMin,
               onPointerDown: () => startHold(-1),
               onPointerUp: stopHold,
               onPointerLeave: stopHold,
-              children: /* @__PURE__ */ jsx(MinusIcon, {})
+              children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "orynn-number__caret" })
             }
           )
         ]
@@ -1721,7 +2574,7 @@ var NumberField = /* @__PURE__ */ forwardRef(
                 inputMode: "decimal",
                 role: "spinbutton",
                 "aria-valuenow": value ?? void 0,
-                "aria-valuemin": min,
+                "aria-valuemin": effMin,
                 "aria-valuemax": max,
                 value: text,
                 disabled,
@@ -1733,13 +2586,16 @@ var NumberField = /* @__PURE__ */ forwardRef(
                 onFocus: () => setEditing(true),
                 onChange: (e) => {
                   setText(e.target.value);
-                  commit(parse(e.target.value));
+                  const parsed = parse(e.target.value);
+                  commit(
+                    parsed == null ? null : clampMode === "strict" ? clamp(parsed, effMin, max) : parsed
+                  );
                 },
                 onKeyDown,
                 onBlur: () => {
                   setEditing(false);
                   const parsed = parse(text);
-                  const final = parsed == null ? null : round(clampOnBlur ? clamp(parsed, min, max) : parsed, precision);
+                  const final = parsed == null ? emptyValue : round(clampMode !== "none" ? clamp(parsed, effMin, max) : parsed, scale);
                   if (final !== value) commit(final);
                   setText(display(final));
                 }
@@ -1752,7 +2608,7 @@ var NumberField = /* @__PURE__ */ forwardRef(
   }
 );
 var RadioGroupContext = createContext(null);
-var sizePx2 = { sm: "0.95rem", md: "1.125rem", lg: "1.35rem" };
+var sizePx2 = { sm: "0.875rem", md: "1rem", lg: "1.125rem" };
 var Radio = /* @__PURE__ */ forwardRef(
   function Radio2(props, ref) {
     const group = useContext(RadioGroupContext);
@@ -1829,6 +2685,7 @@ function RadioGroup(props) {
     defaultValue = null,
     onChange,
     orientation = "vertical",
+    columns,
     options,
     children,
     className,
@@ -1864,12 +2721,17 @@ function RadioGroup(props) {
           "aria-labelledby": label != null ? `${id}-label` : void 0,
           "aria-required": required || void 0,
           className: "orynn-choice-group",
-          "data-orientation": orientation,
+          "data-orientation": columns ? void 0 : orientation,
+          "data-columns": columns ? "" : void 0,
+          style: columns ? { "--orynn-choice-columns": columns } : void 0,
           children: options ? options.map((o) => /* @__PURE__ */ jsx(
             Radio,
             {
               value: o.value,
-              label: o.label,
+              label: o.icon != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "orynn-choice__icon", children: o.icon }),
+                o.label
+              ] }) : o.label,
               description: o.description,
               disabled: o.disabled
             },
@@ -1896,12 +2758,17 @@ var Textarea = /* @__PURE__ */ forwardRef(
       floatingLabel,
       clearable,
       onClear,
+      loading,
+      endContent,
       id: idProp,
       name,
       className,
       value: valueProp,
       defaultValue,
       onChange,
+      onEnter,
+      submitOnEnter,
+      onKeyDown,
       autoResize,
       minRows = 3,
       maxRows = 10,
@@ -1926,9 +2793,9 @@ var Textarea = /* @__PURE__ */ forwardRef(
       el.style.height = "auto";
       const cs = getComputedStyle(el);
       const line = Number.parseFloat(cs.lineHeight) || 20;
-      const pad2 = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
-      const min = line * minRows + pad2;
-      const max = line * maxRows + pad2;
+      const pad3 = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+      const min = line * minRows + pad3;
+      const max = line * maxRows + pad3;
       el.style.height = `${Math.min(Math.max(el.scrollHeight, min), max)}px`;
       el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
     }, [autoResize, minRows, maxRows]);
@@ -1937,7 +2804,16 @@ var Textarea = /* @__PURE__ */ forwardRef(
       setValue(e.target.value);
       onChange?.(e.target.value, e);
     };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey && (onEnter || submitOnEnter)) {
+        if (submitOnEnter) e.preventDefault();
+        onEnter?.(value);
+      }
+      onKeyDown?.(e);
+    };
     const hasValue = value.length > 0;
+    const countMax = showCount && typeof showCount === "object" ? showCount.max ?? maxLength : maxLength;
+    const countNode = showCount && typeof showCount === "object" && showCount.formatter ? showCount.formatter(value.length, countMax) : `${value.length}${countMax ? `/${countMax}` : ""}`;
     return /* @__PURE__ */ jsx(
       Field,
       {
@@ -1962,20 +2838,24 @@ var Textarea = /* @__PURE__ */ forwardRef(
             valid,
             active: hasValue,
             floatingLabel: floatingLabel ? /* @__PURE__ */ jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
-            right: clearable && hasValue && !disabled && !readOnly ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "orynn-box__iconbtn",
-                "aria-label": "Clear",
-                tabIndex: -1,
-                onClick: () => {
-                  setValue("");
-                  onClear?.();
-                },
-                children: "\u2715"
-              }
-            ) : void 0,
+            right: clearable && hasValue || loading || endContent != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "orynn-box__iconbtn",
+                  "aria-label": "Clear",
+                  tabIndex: -1,
+                  onClick: () => {
+                    setValue("");
+                    onClear?.();
+                  },
+                  children: /* @__PURE__ */ jsx(XIcon, {})
+                }
+              ),
+              loading && /* @__PURE__ */ jsx(SpinnerIcon, {}),
+              endContent
+            ] }) : void 0,
             children: [
               /* @__PURE__ */ jsx(
                 "textarea",
@@ -1995,13 +2875,11 @@ var Textarea = /* @__PURE__ */ forwardRef(
                   placeholder: floatingLabel ? void 0 : placeholder,
                   "aria-invalid": invalid || void 0,
                   "aria-describedby": describedById,
-                  onChange: handleChange
+                  onChange: handleChange,
+                  onKeyDown: handleKeyDown
                 }
               ),
-              showCount && /* @__PURE__ */ jsxs("span", { className: "orynn-box__footer", children: [
-                value.length,
-                maxLength ? `/${maxLength}` : ""
-              ] })
+              showCount && /* @__PURE__ */ jsx("span", { className: "orynn-box__footer", children: countNode })
             ]
           }
         )
@@ -2058,24 +2936,63 @@ function registerField(type, registration) {
 
 // src/layout/resolve-columns.ts
 var DEFAULT_COLUMNS = { desktop: 3, tablet: 2, mobile: 1 };
+var DEFAULT_MIN_COL = 192;
 var clampCount = (n, fallback) => typeof n === "number" && Number.isFinite(n) && n >= 1 ? Math.floor(n) : fallback;
-function resolveColumns(partial) {
+function resolveColumns(input) {
+  if (typeof input === "number") {
+    const n = clampCount(input, DEFAULT_COLUMNS.desktop);
+    return { desktop: n, tablet: n, mobile: n };
+  }
   return {
-    desktop: clampCount(partial?.desktop, DEFAULT_COLUMNS.desktop),
-    tablet: clampCount(partial?.tablet, DEFAULT_COLUMNS.tablet),
-    mobile: clampCount(partial?.mobile, DEFAULT_COLUMNS.mobile)
+    desktop: clampCount(input?.desktop, DEFAULT_COLUMNS.desktop),
+    tablet: clampCount(input?.tablet, DEFAULT_COLUMNS.tablet),
+    mobile: clampCount(input?.mobile, DEFAULT_COLUMNS.mobile)
   };
 }
+function resolveGrid(width, cols, minColWidth = DEFAULT_MIN_COL) {
+  const { desktop: d, tablet: t, mobile: m } = cols;
+  if (!width || !Number.isFinite(width) || width <= 0) {
+    return { count: d, tier: "desktop" };
+  }
+  const per = minColWidth > 0 ? minColWidth : DEFAULT_MIN_COL;
+  const maxFit = Math.max(1, Math.floor(width / per));
+  if (d === t && t === m) {
+    const count = Math.min(d, maxFit);
+    return { count, tier: count >= d ? "desktop" : count > 1 ? "tablet" : "mobile" };
+  }
+  if (maxFit >= d) return { count: d, tier: "desktop" };
+  if (t < d && maxFit >= t) return { count: t, tier: "tablet" };
+  if (maxFit >= m) return { count: m, tier: "mobile" };
+  return { count: Math.min(m, maxFit), tier: "mobile" };
+}
 function clampSpan(span, columnCount) {
   const n = clampCount(span, 1);
   return Math.min(n, Math.max(columnCount, 1));
 }
+function pickSpan(layout, tier) {
+  if (!layout) return 1;
+  const v = layout[tier] ?? layout.desktop ?? layout.tablet ?? layout.mobile;
+  return typeof v === "number" && Number.isFinite(v) && v >= 1 ? Math.floor(v) : 1;
+}
 
 // src/core/config/normalize.ts
 function normalizeGap(gap) {
   if (gap == null) return void 0;
   return typeof gap === "number" ? `${gap}px` : gap;
 }
+function normalizeMinColWidth(value) {
+  if (typeof value === "number") return value > 0 ? value : DEFAULT_MIN_COL;
+  if (typeof value === "string") {
+    const n = Number.parseFloat(value);
+    if (!Number.isFinite(n) || n <= 0) return DEFAULT_MIN_COL;
+    if (/rem|em/i.test(value)) {
+      const root = typeof document !== "undefined" ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16 : 16;
+      return n * root;
+    }
+    return n;
+  }
+  return DEFAULT_MIN_COL;
+}
 function normalizeConfig(config, registry2) {
   invariant(
     config != null && typeof config === "object" && Array.isArray(config.fields),
@@ -2109,18 +3026,52 @@ function normalizeConfig(config, registry2) {
   return {
     fields: config.fields,
     columns: resolveColumns(config.columns),
+    minColWidth: normalizeMinColWidth(config.minColumnWidth),
     gap: normalizeGap(config.gap),
     legend: config.legend,
     id: config.id
   };
 }
 
+// src/core/config/conditions.ts
+function evalCondition(when, values) {
+  if (when == null) return true;
+  if (typeof when === "function") return Boolean(when(values));
+  const actual = values[when.field];
+  if ("eq" in when) return actual === when.eq;
+  if ("ne" in when) return actual !== when.ne;
+  if ("in" in when) return Array.isArray(when.in) && when.in.includes(actual);
+  if ("notIn" in when) return Array.isArray(when.notIn) && !when.notIn.includes(actual);
+  if ("truthy" in when) return Boolean(actual) === Boolean(when.truthy);
+  return Boolean(actual);
+}
+
 // src/core/validation/messages.ts
 var plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+var dateStr = (p) => {
+  const d = p instanceof Date ? p : new Date(String(p));
+  return Number.isNaN(d.getTime()) ? String(p) : d.toLocaleDateString();
+};
 var defaultMessages = {
   required: ({ label }) => `${label} is required`,
   minLength: ({ param, label }) => `${label} must be at least ${plural(param, "character")}`,
-  maxLength: ({ param, label }) => `${label} must be at most ${plural(param, "character")}`
+  maxLength: ({ param, label }) => `${label} must be at most ${plural(param, "character")}`,
+  minItems: ({ param, label }) => `Select at least ${plural(param, "option")} for ${label}`,
+  maxItems: ({ param, label }) => `Select at most ${plural(param, "option")} for ${label}`,
+  min: ({ param, label }) => `${label} must be at least ${param}`,
+  max: ({ param, label }) => `${label} must be at most ${param}`,
+  integer: ({ label }) => `${label} must be a whole number`,
+  minDate: ({ param, label }) => `${label} must be on or after ${dateStr(param)}`,
+  maxDate: ({ param, label }) => `${label} must be on or before ${dateStr(param)}`,
+  minRangeDays: ({ param, label }) => `${label} must span at least ${plural(param, "day")}`,
+  maxRangeDays: ({ param, label }) => `${label} must span at most ${plural(param, "day")}`,
+  email: ({ label }) => `${label} must be a valid email address`,
+  url: ({ label }) => `${label} must be a valid URL`,
+  pattern: ({ label }) => `${label} is not in the expected format`,
+  oneOf: ({ label }) => `${label} is not an allowed value`,
+  equals: ({ label }) => `${label} does not match`,
+  validate: ({ label }) => `${label} is invalid`,
+  schema: ({ label }) => `${label} is invalid`
 };
 var FALLBACK_LABEL = "This field";
 function resolveMessage(token, param, label, overrides) {
@@ -2134,6 +3085,50 @@ function resolveMessage(token, param, label, overrides) {
 // src/core/validation/rules.ts
 var isEmpty = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
 var asLength = (value) => typeof value === "string" || Array.isArray(value) ? value.length : String(value ?? "").length;
+var toNumber = (value) => {
+  if (typeof value === "number") return Number.isNaN(value) ? null : value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const n = Number(value);
+    return Number.isNaN(n) ? null : n;
+  }
+  return null;
+};
+var toTime = (value) => {
+  if (value == null || value === "") return null;
+  const d = value instanceof Date ? value : new Date(value);
+  const t = d.getTime();
+  return Number.isNaN(t) ? null : t;
+};
+var rangeSpanDays = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const { start, end } = value;
+  const s = toTime(start);
+  const e = toTime(end);
+  if (s == null || e == null) return null;
+  return Math.abs(Math.round((e - s) / 864e5)) + 1;
+};
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var URL_RE = /^(https?:\/\/)[^\s.]+\.\S{2,}$/i;
+function toRegExp(param) {
+  if (param instanceof RegExp) return param;
+  if (typeof param === "string") {
+    try {
+      return new RegExp(param);
+    } catch {
+      return null;
+    }
+  }
+  if (param && typeof param === "object" && "value" in param) {
+    const { value, flags } = param;
+    if (value instanceof RegExp) return value;
+    try {
+      return new RegExp(value, flags);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
 var builtInRules = {
   required: (value, param) => {
     if (param === false) return null;
@@ -2146,6 +3141,84 @@ var builtInRules = {
   maxLength: (value, param) => {
     if (typeof param !== "number" || isEmpty(value)) return null;
     return asLength(value) > param ? "maxLength" : null;
+  },
+  minItems: (value, param) => {
+    if (typeof param !== "number" || !Array.isArray(value)) return null;
+    return value.length < param ? "minItems" : null;
+  },
+  maxItems: (value, param) => {
+    if (typeof param !== "number" || !Array.isArray(value)) return null;
+    return value.length > param ? "maxItems" : null;
+  },
+  email: (value, param) => {
+    if (param === false || isEmpty(value)) return null;
+    return EMAIL_RE.test(String(value)) ? null : "email";
+  },
+  url: (value, param) => {
+    if (param === false || isEmpty(value)) return null;
+    return URL_RE.test(String(value)) ? null : "url";
+  },
+  pattern: (value, param) => {
+    if (isEmpty(value)) return null;
+    const re = toRegExp(param);
+    if (!re) return null;
+    return re.test(String(value)) ? null : "pattern";
+  },
+  integer: (value, param) => {
+    if (param === false || isEmpty(value)) return null;
+    const n = toNumber(value);
+    return n != null && Number.isInteger(n) ? null : "integer";
+  },
+  min: (value, param) => {
+    if (typeof param !== "number" || isEmpty(value)) return null;
+    const n = toNumber(value);
+    return n != null && n < param ? "min" : null;
+  },
+  max: (value, param) => {
+    if (typeof param !== "number" || isEmpty(value)) return null;
+    const n = toNumber(value);
+    return n != null && n > param ? "max" : null;
+  },
+  minDate: (value, param) => {
+    if (isEmpty(value)) return null;
+    const v = toTime(value);
+    const p = toTime(param);
+    return v != null && p != null && v < p ? "minDate" : null;
+  },
+  maxDate: (value, param) => {
+    if (isEmpty(value)) return null;
+    const v = toTime(value);
+    const p = toTime(param);
+    return v != null && p != null && v > p ? "maxDate" : null;
+  },
+  minRangeDays: (value, param) => {
+    if (typeof param !== "number") return null;
+    const span = rangeSpanDays(value);
+    return span != null && span < param ? "minRangeDays" : null;
+  },
+  maxRangeDays: (value, param) => {
+    if (typeof param !== "number") return null;
+    const span = rangeSpanDays(value);
+    return span != null && span > param ? "maxRangeDays" : null;
+  },
+  oneOf: (value, param) => {
+    if (isEmpty(value) || !Array.isArray(param)) return null;
+    return param.includes(value) ? null : "oneOf";
+  },
+  equals: (value, param, allValues) => {
+    if (isEmpty(value)) return null;
+    const target = param && typeof param === "object" && "field" in param ? allValues[param.field] : param;
+    return value == target ? null : "equals";
+  },
+  validate: (value, param, allValues) => {
+    if (typeof param !== "function") return null;
+    const out = param(value, allValues);
+    if (out instanceof Promise) {
+      return out.then(
+        (r) => typeof r === "string" ? r : r === false ? "validate" : null
+      );
+    }
+    return typeof out === "string" ? out : out === false ? "validate" : null;
   }
 };
 var registry = new Map(Object.entries(builtInRules));
@@ -2159,12 +3232,12 @@ function getRule(name) {
 // src/core/validation/resolver.ts
 function createRuleResolver() {
   return (values, config) => {
-    const result = {};
+    const pending = [];
     for (const field of config.fields) {
       const validation = field.validation;
       if (!validation) continue;
+      if (!evalCondition(field.when, values)) continue;
       const value = values[field.name];
-      const errors = [];
       for (const key of Object.keys(validation)) {
         if (key === "messages") continue;
         const param = validation[key];
@@ -2176,16 +3249,34 @@ function createRuleResolver() {
           }
           continue;
         }
-        const token = rule(value, param, values);
-        if (token == null) continue;
-        errors.push({
+        pending.push({
+          field: field.name,
           rule: key,
-          message: resolveMessage(token, param, field.label, validation.messages)
+          param,
+          label: field.label,
+          overrides: validation.messages,
+          token: rule(value, param, values)
         });
       }
-      if (errors.length > 0) result[field.name] = errors;
     }
-    return result;
+    const collect = (settled) => {
+      const result = {};
+      pending.forEach((p, i) => {
+        const token = settled[i];
+        if (token == null) return;
+        const bucket = result[p.field] ?? [];
+        bucket.push({
+          rule: p.rule,
+          message: resolveMessage(token, p.param, p.label, p.overrides)
+        });
+        result[p.field] = bucket;
+      });
+      return result;
+    };
+    if (pending.some((p) => p.token instanceof Promise)) {
+      return Promise.all(pending.map((p) => Promise.resolve(p.token))).then(collect);
+    }
+    return collect(pending.map((p) => p.token));
   };
 }
 var defaultResolver = /* @__PURE__ */ createRuleResolver();
@@ -2417,23 +3508,43 @@ function useFieldsetState(config, options = {}) {
     getFieldProps
   };
 }
-function FieldGrid({ columns, gap, className, children }) {
+var useBrowserLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var GridContext = createContext({ count: 1, tier: "desktop" });
+function FieldGrid({ columns, minColWidth, gap, className, children }) {
+  const ref = useRef(null);
+  const per = minColWidth && minColWidth > 0 ? minColWidth : DEFAULT_MIN_COL;
+  const { desktop, tablet, mobile } = columns;
+  const [grid, setGrid] = useState(() => resolveGrid(0, columns, per));
+  useBrowserLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const cols = { desktop, tablet, mobile };
+    const apply = (width) => {
+      const next = resolveGrid(width, cols, per);
+      setGrid((cur) => cur.count === next.count && cur.tier === next.tier ? cur : next);
+    };
+    apply(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const box = entry.contentBoxSize?.[0];
+        apply(box ? box.inlineSize : entry.contentRect.width);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [desktop, tablet, mobile, per]);
   const style = {
-    "--orynn-cols-desktop": columns.desktop,
-    "--orynn-cols-tablet": columns.tablet,
-    "--orynn-cols-mobile": columns.mobile,
+    "--orynn-cols": grid.count,
     ...gap ? { "--orynn-grid-gap": gap } : {}
   };
-  return /* @__PURE__ */ jsx("div", { className: cx("orynn-grid", className), style, children: /* @__PURE__ */ jsx("div", { className: "orynn-grid__track", children }) });
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("orynn-grid", className), style, children: /* @__PURE__ */ jsx(GridContext.Provider, { value: grid, children: /* @__PURE__ */ jsx("div", { className: "orynn-grid__track", children }) }) });
 }
-function FieldGridItem({ span, columns, children }) {
-  if (!span) return /* @__PURE__ */ jsx(Fragment, { children });
-  const style = {
-    "--orynn-span-desktop": clampSpan(span.desktop, columns.desktop),
-    "--orynn-span-tablet": clampSpan(span.tablet, columns.tablet),
-    "--orynn-span-mobile": clampSpan(span.mobile, columns.mobile)
-  };
-  return /* @__PURE__ */ jsx("div", { className: "orynn-grid__item", style, children });
+function FieldGridItem({ span, children }) {
+  const { count, tier } = useContext(GridContext);
+  const effective = span ? clampSpan(pickSpan(span, tier), count) : 1;
+  if (effective <= 1) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx("div", { className: "orynn-grid__item", style: { "--orynn-span": effective }, children });
 }
 var noop = () => {
 };
@@ -2443,6 +3554,7 @@ function FieldRendererImpl({ field, registry: registry2, slice, disabled }) {
     registration,
     `No control registered for field type "${field.type}" (field "${field.name}").`
   );
+  const fallbackId = useId();
   if (!registration) return null;
   const Control = registration.component;
   const required = field.validation?.required === true;
@@ -2452,6 +3564,36 @@ function FieldRendererImpl({ field, registry: registry2, slice, disabled }) {
   const handleChange = (next) => {
     slice.setValue(registration.formatValue ? registration.formatValue(next) : next);
   };
+  if (registration.selfContained) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { display: "contents" },
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) slice.markTouched();
+        },
+        children: /* @__PURE__ */ jsx(
+          Control,
+          {
+            id: fallbackId,
+            name: field.name,
+            value,
+            onChange: handleChange,
+            onBlur: slice.markTouched,
+            onFocus: noop,
+            disabled: isDisabled,
+            readOnly: field.readOnly === true,
+            required,
+            invalid: messages.length > 0,
+            label: field.label,
+            description: field.description,
+            errors: messages,
+            config: field
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Field,
     {
@@ -2484,90 +3626,290 @@ var FieldRenderer = /* @__PURE__ */ memo(
   FieldRendererImpl,
   (prev, next) => prev.field === next.field && prev.registry === next.registry && prev.disabled === next.disabled && prev.slice.value === next.slice.value && prev.slice.touched === next.slice.touched && prev.slice.errors === next.slice.errors && prev.slice.setValue === next.slice.setValue && prev.slice.markTouched === next.slice.markTouched
 );
-var toStringValue = (value) => typeof value === "string" ? value : value == null ? "" : String(value);
-var InputControl = ({
-  id,
-  name,
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  disabled,
-  readOnly,
-  required,
-  invalid,
-  describedById,
-  config
-}) => {
-  const field = config;
+function FieldsetView({ state, registry: registry2, disabled, className, id }) {
+  const activeRegistry = registry2 ?? defaultRegistry;
+  const { columns, minColWidth, gap, legend, fields, id: configId } = state.config;
+  const visible = fields.filter((f) => evalCondition(f.when, state.values));
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: cx("orynn-fieldset", className),
+      id: id ?? configId,
+      disabled: disabled || void 0,
+      children: [
+        legend != null && /* @__PURE__ */ jsx("legend", { className: "orynn-fieldset__legend", children: legend }),
+        /* @__PURE__ */ jsx(FieldGrid, { columns, minColWidth, gap, children: visible.map((field) => /* @__PURE__ */ jsx(FieldGridItem, { span: field.layout, children: /* @__PURE__ */ jsx(
+          FieldRenderer,
+          {
+            field,
+            registry: activeRegistry,
+            slice: state.getFieldProps(field.name),
+            disabled: disabled === true
+          }
+        ) }, field.name)) })
+      ]
+    }
+  );
+}
+var str = (v) => typeof v === "string" ? v : v == null ? "" : String(v);
+var toISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+function shell(p) {
+  const c = p.config;
+  return {
+    id: p.id,
+    name: p.name,
+    label: p.label,
+    description: p.description,
+    error: p.errors,
+    required: p.required,
+    disabled: p.disabled,
+    readOnly: p.readOnly,
+    size: c.size,
+    variant: c.variant,
+    floatingLabel: c.floatingLabel
+  };
+}
+var InputControl = (p) => {
+  const c = p.config;
   return /* @__PURE__ */ jsx(
-    "input",
+    Input,
     {
-      id,
-      name,
-      className: "orynn-input",
-      type: field.inputType ?? "text",
-      value: toStringValue(value),
-      placeholder: field.placeholder,
-      required,
-      disabled,
-      readOnly,
-      "aria-invalid": invalid || void 0,
-      "aria-describedby": describedById,
-      onChange: (event) => onChange(event.target.value, event),
-      onBlur,
-      onFocus,
-      ...field.props
+      ...shell(p),
+      type: c.inputType ?? "text",
+      prefix: c.prefix,
+      suffix: c.suffix,
+      addonBefore: c.addonBefore,
+      addonAfter: c.addonAfter,
+      clearable: c.clearable,
+      maxLength: c.maxLength,
+      showCount: c.showCount,
+      debounce: c.debounce,
+      inputMode: c.inputMode,
+      pattern: c.pattern,
+      placeholder: c.placeholder,
+      value: str(p.value),
+      onChange: (v) => p.onChange(v),
+      ...c.props
     }
   );
 };
-var DropdownControl = ({
-  id,
-  name,
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  disabled,
-  required,
-  invalid,
-  describedById,
-  config
-}) => {
-  const field = config;
-  return /* @__PURE__ */ jsxs(
-    "select",
+var TextareaControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsx(
+    Textarea,
     {
-      id,
-      name,
-      className: "orynn-dropdown",
-      value: toStringValue(value),
-      required,
-      disabled,
-      "aria-invalid": invalid || void 0,
-      "aria-describedby": describedById,
-      onChange: (event) => onChange(event.target.value, event),
-      onBlur,
-      onFocus,
-      ...field.props,
-      children: [
-        field.placeholder != null && /* @__PURE__ */ jsx("option", { value: "", disabled: required, children: field.placeholder }),
-        field.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
-      ]
+      ...shell(p),
+      minRows: c.rows,
+      maxRows: c.maxRows,
+      autoResize: c.autoResize,
+      resize: c.resize,
+      submitOnEnter: c.submitOnEnter,
+      maxLength: c.maxLength,
+      showCount: c.showCount,
+      placeholder: c.placeholder,
+      value: str(p.value),
+      onChange: (v) => p.onChange(v),
+      ...c.props
     }
   );
 };
-function registerBuiltins(registry2) {
-  if (!registry2.has("input")) {
-    registry2.register("input", { component: InputControl, defaultValue: "" });
+var NumberFieldControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsx(
+    NumberField,
+    {
+      ...shell(p),
+      min: c.min,
+      max: c.max,
+      step: c.step,
+      precision: c.precision,
+      decimalScale: c.decimalScale,
+      currency: c.currency,
+      style: c.style,
+      locale: c.locale,
+      prefix: c.prefix,
+      suffix: c.suffix,
+      thousandSeparator: c.thousandSeparator,
+      allowNegative: c.allowNegative,
+      clampBehavior: c.clampBehavior,
+      hideControls: c.hideControls,
+      placeholder: c.placeholder,
+      value: typeof p.value === "number" ? p.value : null,
+      onChange: (v) => p.onChange(v),
+      ...c.props
+    }
+  );
+};
+var DropdownControl = (p) => {
+  const c = p.config;
+  const value = c.multiple ? Array.isArray(p.value) ? p.value : [] : Array.isArray(p.value) ? p.value[0] ?? "" : str(p.value);
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      ...shell(p),
+      options: c.options,
+      searchable: c.searchable,
+      multiple: c.multiple,
+      clearable: c.clearable,
+      creatable: c.creatable,
+      maxValues: c.maxValues,
+      hidePickedOptions: c.hidePickedOptions,
+      showSelectAll: c.showSelectAll,
+      searchDebounce: c.searchDebounce,
+      placeholder: c.placeholder,
+      value,
+      onChange: (v) => p.onChange(v ?? (c.multiple ? [] : "")),
+      ...c.props
+    }
+  );
+};
+var DateControl = (p) => {
+  const c = p.config;
+  const toDate2 = (x) => x == null ? void 0 : x instanceof Date ? x : new Date(x);
+  const mode = c.mode ?? "single";
+  const common = {
+    ...shell(p),
+    format: c.format,
+    precision: c.precision,
+    minDate: toDate2(c.minDate),
+    maxDate: toDate2(c.maxDate),
+    showToday: c.showToday,
+    clearable: c.clearable,
+    placeholder: c.placeholder,
+    presets: c.presets,
+    ...c.props
+  };
+  if (mode === "range") {
+    const v = p.value ?? {};
+    return /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        ...common,
+        mode: "range",
+        value: { start: v.start ?? null, end: v.end ?? null },
+        onChange: (r) => p.onChange({
+          start: r.start ? toISO(r.start) : "",
+          end: r.end ? toISO(r.end) : ""
+        })
+      }
+    );
   }
-  if (!registry2.has("dropdown")) {
-    registry2.register("dropdown", {
-      component: DropdownControl,
-      defaultValue: "",
-      validateConfig: (config) => Array.isArray(config.options) ? null : "a dropdown field requires an `options` array"
-    });
+  if (mode === "multiple") {
+    return /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        ...common,
+        mode: "multiple",
+        value: Array.isArray(p.value) ? p.value : [],
+        onChange: (arr) => p.onChange(arr.map(toISO))
+      }
+    );
   }
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      ...common,
+      value: typeof p.value === "string" && p.value ? p.value : null,
+      onChange: (d) => p.onChange(d instanceof Date ? toISO(d) : "")
+    }
+  );
+};
+var CheckboxControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsxs("div", { className: "orynn-field", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: p.id,
+        name: p.name,
+        label: c.checkboxLabel ?? c.label,
+        description: c.description,
+        checked: Boolean(p.value),
+        onChange: (v) => p.onChange(v),
+        disabled: p.disabled,
+        required: p.required,
+        invalid: (p.errors?.length ?? 0) > 0,
+        ...c.props
+      }
+    ),
+    p.errors?.[0] && /* @__PURE__ */ jsx("p", { className: "orynn-field__error", role: "alert", children: p.errors[0] })
+  ] });
+};
+var CheckboxGroupControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsx(
+    CheckboxGroup,
+    {
+      id: p.id,
+      name: p.name,
+      label: p.label,
+      description: p.description,
+      error: p.errors,
+      required: p.required,
+      disabled: p.disabled,
+      options: c.options.map((o) => ({
+        label: o.label,
+        value: o.value,
+        description: o.description,
+        icon: o.icon,
+        disabled: o.disabled
+      })),
+      orientation: c.orientation,
+      columns: c.columns,
+      showSelectAll: c.showSelectAll,
+      min: c.min,
+      max: c.max,
+      value: Array.isArray(p.value) ? p.value : [],
+      onChange: (v) => p.onChange(v),
+      ...c.props
+    }
+  );
+};
+var RadioControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      id: p.id,
+      name: p.name,
+      label: p.label,
+      description: p.description,
+      error: p.errors,
+      required: p.required,
+      disabled: p.disabled,
+      options: c.options.map((o) => ({
+        label: o.label,
+        value: o.value,
+        description: o.description,
+        icon: o.icon,
+        disabled: o.disabled
+      })),
+      orientation: c.orientation,
+      columns: c.columns,
+      variant: c.radioVariant,
+      value: typeof p.value === "string" && p.value ? p.value : null,
+      onChange: (v) => p.onChange(v),
+      ...c.props
+    }
+  );
+};
+var needsOptions = (config) => Array.isArray(config.options) ? null : "requires an `options` array";
+function registerBuiltins(registry2) {
+  const add = (type, component, extra = {}) => {
+    if (!registry2.has(type)) {
+      registry2.register(type, { component, selfContained: true, defaultValue: "", ...extra });
+    }
+  };
+  add("input", InputControl);
+  add("textarea", TextareaControl);
+  add("number", NumberFieldControl, {
+    parseValue: (raw) => typeof raw === "number" ? raw : raw === "" || raw == null ? null : Number(raw)
+  });
+  add("dropdown", DropdownControl, { validateConfig: needsOptions });
+  add("date", DateControl);
+  add("checkbox", CheckboxControl, { defaultValue: false });
+  add("checkbox-group", CheckboxGroupControl, { defaultValue: [], validateConfig: needsOptions });
+  add("radio", RadioControl, { validateConfig: needsOptions });
 }
 var seeded = false;
 function ensureBuiltins(defaultRegistry2) {
@@ -2601,95 +3943,857 @@ function Fieldset(props) {
     ...validateOn ? { validateOn } : {}
   };
   const fs = useFieldsetState(config, options);
-  const { columns, gap, legend, fields, id: configId } = fs.config;
-  return /* @__PURE__ */ jsxs(
-    "fieldset",
+  return /* @__PURE__ */ jsx(
+    FieldsetView,
     {
-      className: cx("orynn-fieldset", className),
-      id: id ?? configId,
-      disabled: disabled || void 0,
-      children: [
-        legend != null && /* @__PURE__ */ jsx("legend", { className: "orynn-fieldset__legend", children: legend }),
-        /* @__PURE__ */ jsx(FieldGrid, { columns, gap, children: fields.map((field) => /* @__PURE__ */ jsx(FieldGridItem, { span: field.layout, columns, children: /* @__PURE__ */ jsx(
-          FieldRenderer,
-          {
-            field,
-            registry: activeRegistry,
-            slice: fs.getFieldProps(field.name),
-            disabled: disabled === true
-          }
-        ) }, field.name)) })
-      ]
+      state: fs,
+      registry: activeRegistry,
+      disabled: disabled === true,
+      className,
+      id
     }
   );
 }
-
-// src/theme/theme.ts
-var RADIUS_KEYWORDS = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "pill"]);
-var len = (v) => typeof v === "number" ? `${v}px` : v;
-function contrastFor(color) {
-  const m = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(color.trim());
-  if (!m?.[1]) return "#ffffff";
-  const hex = m[1].length === 3 ? m[1].replace(/./g, "$&$&") : m[1];
-  const n = Number.parseInt(hex, 16);
-  const toLin = (v) => {
-    const c = v / 255;
-    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-  };
-  const lum = 0.2126 * toLin(n >> 16 & 255) + 0.7152 * toLin(n >> 8 & 255) + 0.0722 * toLin(n & 255);
-  return lum > 0.42 ? "#0b0d12" : "#ffffff";
-}
-function normalizeTheme(input) {
-  return typeof input === "string" ? { preset: input } : input ?? {};
-}
-function resolveThemeVars(config) {
-  const vars = {};
-  if (config.accent) {
-    vars["--orynn-color-accent"] = config.accent;
-    vars["--orynn-color-accent-hover"] = `color-mix(in srgb, ${config.accent} 86%, #000)`;
-    vars["--orynn-color-accent-contrast"] = config.accentContrast ?? contrastFor(config.accent);
-  }
-  if (config.ring) vars["--orynn-color-focus-ring"] = config.ring;
-  if (config.font) vars["--orynn-font-family"] = config.font;
-  if (config.fontSize != null) vars["--orynn-font-size"] = len(config.fontSize);
-  if (config.controlWidth != null) vars["--orynn-control-width"] = len(config.controlWidth);
-  if (config.radius != null) {
-    const r = config.radius;
-    if (r === "md") vars["--orynn-radius"] = "10px";
-    else if (typeof r === "string" && RADIUS_KEYWORDS.has(r))
-      vars["--orynn-radius"] = `var(--orynn-radius-${r})`;
-    else vars["--orynn-radius"] = len(r);
-  }
-  Object.assign(vars, config.vars ?? {});
-  return vars;
+function Form(props) {
+  const {
+    config,
+    value,
+    defaultValue,
+    onChange,
+    onSubmit,
+    onInvalid,
+    resolver,
+    validateOn,
+    disabled,
+    children,
+    className,
+    ...rest
+  } = props;
+  ensureBuiltins(defaultRegistry);
+  const fs = useFieldsetState(config, {
+    registry: defaultRegistry,
+    ...value !== void 0 ? { value } : {},
+    ...defaultValue !== void 0 ? { defaultValue } : {},
+    ...onChange ? { onChange } : {},
+    ...resolver ? { resolver } : {},
+    ...validateOn ? { validateOn } : {}
+  });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ...rest,
+      className: cx("orynn-form", className),
+      noValidate: true,
+      onSubmit: fs.handleSubmit(
+        (values) => onSubmit(values, fs),
+        (errors) => onInvalid?.(errors)
+      ),
+      children: [
+        /* @__PURE__ */ jsx(FieldsetView, { state: fs, disabled }),
+        typeof children === "function" ? children(fs) : children
+      ]
+    }
+  );
 }
-var OrynnContext = createContext({
-  preset: "default",
-  density: "comfortable",
-  config: {}
+
+// src/primitives/shared/classes.ts
+var mod = (base2, key, fallback) => key === fallback ? void 0 : `${base2}--${key}`;
+function buttonClasses(variant = "default", size = "default") {
+  return cx(
+    "orynn-button",
+    mod("orynn-button", variant, "default"),
+    mod("orynn-button", size, "default")
+  );
+}
+function badgeClasses(variant = "default") {
+  return cx("orynn-badge", mod("orynn-badge", variant, "default"));
+}
+var Button = /* @__PURE__ */ forwardRef(function Button2({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  type,
+  loading = false,
+  loadingText,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  disabled,
+  children,
+  ...props
+}, ref) {
+  const shared = {
+    "data-slot": "button",
+    "data-variant": variant,
+    "data-size": size,
+    "data-loading": loading || void 0,
+    "data-full-width": fullWidth || void 0,
+    className: cx(buttonClasses(variant, size), className),
+    ...props
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot.Root, { ref, "aria-busy": loading || void 0, ...shared, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...shared,
+      children: [
+        loading ? /* @__PURE__ */ jsx(SpinnerIcon, { className: "orynn-button__spinner" }) : leftIcon,
+        loading && loadingText != null ? loadingText : children,
+        !loading && rightIcon
+      ]
+    }
+  );
 });
-function OrynnProvider({ theme, as = "div", className, children }) {
-  const config = useMemo(() => normalizeTheme(theme), [theme]);
-  const preset = config.preset ?? "default";
-  const density = config.density ?? "comfortable";
-  const style = useMemo(() => resolveThemeVars(config), [config]);
-  const ctx = useMemo(
-    () => ({ preset, density, config }),
-    [preset, density, config]
+var Label = /* @__PURE__ */ forwardRef(function Label2({ className, required, optional, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    Label$1.Root,
+    {
+      ref,
+      "data-slot": "label",
+      className: cx("orynn-label", className),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "orynn-label__required", "aria-hidden": "true", children: "*" }),
+        !required && optional && /* @__PURE__ */ jsx("span", { className: "orynn-label__optional", children: optional === true ? "(optional)" : optional })
+      ]
+    }
   );
-  const dataProps = {
-    "data-orynn-theme": preset === "default" ? void 0 : preset,
-    "data-orynn-density": density === "comfortable" ? void 0 : density
+});
+var Card = /* @__PURE__ */ forwardRef(function Card2({ className, asChild = false, interactive = false, ...props }, ref) {
+  const shared = {
+    "data-slot": "card",
+    "data-interactive": interactive || void 0,
+    className: cx("orynn-card", className),
+    ...props
+  };
+  return asChild ? /* @__PURE__ */ jsx(Slot.Root, { ref, ...shared }) : /* @__PURE__ */ jsx("div", { ref, ...shared });
+});
+var CardHeader = /* @__PURE__ */ forwardRef(function CardHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-header",
+      className: cx("orynn-card__header", className),
+      ...props
+    }
+  );
+});
+var CardTitle = /* @__PURE__ */ forwardRef(function CardTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-title",
+      className: cx("orynn-card__title", className),
+      ...props
+    }
+  );
+});
+var CardDescription = /* @__PURE__ */ forwardRef(
+  function CardDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-description",
+        className: cx("orynn-card__description", className),
+        ...props
+      }
+    );
+  }
+);
+var CardAction = /* @__PURE__ */ forwardRef(function CardAction2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-action",
+      className: cx("orynn-card__action", className),
+      ...props
+    }
+  );
+});
+var CardContent = /* @__PURE__ */ forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-content",
+        className: cx("orynn-card__content", className),
+        ...props
+      }
+    );
+  }
+);
+var CardFooter = /* @__PURE__ */ forwardRef(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-footer",
+      className: cx("orynn-card__footer", className),
+      ...props
+    }
+  );
+});
+var Badge = /* @__PURE__ */ forwardRef(function Badge2({
+  className,
+  variant = "default",
+  size = "md",
+  dot = false,
+  icon,
+  removable = false,
+  onRemove,
+  asChild = false,
+  children,
+  ...props
+}, ref) {
+  const shared = {
+    "data-slot": "badge",
+    "data-variant": variant,
+    "data-size": size,
+    className: cx(badgeClasses(variant), className),
+    ...props
   };
-  return /* @__PURE__ */ jsx(OrynnContext.Provider, { value: ctx, children: as === "contents" ? /* @__PURE__ */ jsx("div", { style: { display: "contents" }, ...dataProps, children }) : as === "span" ? /* @__PURE__ */ jsx("span", { className: cx("orynn-root", className), style, ...dataProps, children }) : /* @__PURE__ */ jsx("div", { className: cx("orynn-root", className), style, ...dataProps, children }) });
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot.Root, { ref, ...shared, children });
+  }
+  return /* @__PURE__ */ jsxs("span", { ref, ...shared, children: [
+    dot && /* @__PURE__ */ jsx("span", { className: "orynn-badge__dot", "aria-hidden": "true" }),
+    icon,
+    children,
+    removable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "orynn-badge__remove",
+        "aria-label": "Remove",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx(XIcon, {})
+      }
+    )
+  ] });
+});
+var Alert = /* @__PURE__ */ forwardRef(function Alert2({ className, variant = "default", icon, title, dismissible, onDismiss, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "alert",
+      "data-variant": variant,
+      "data-dismissible": dismissible || void 0,
+      role: "alert",
+      className: cx("orynn-alert", variant !== "default" && `orynn-alert--${variant}`, className),
+      ...props,
+      children: [
+        icon,
+        title != null && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+        children,
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "orynn-alert__dismiss",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsx(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var AlertTitle = /* @__PURE__ */ forwardRef(
+  function AlertTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "alert-title",
+        className: cx("orynn-alert__title", className),
+        ...props
+      }
+    );
+  }
+);
+var AlertDescription = /* @__PURE__ */ forwardRef(
+  function AlertDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "alert-description",
+        className: cx("orynn-alert__description", className),
+        ...props
+      }
+    );
+  }
+);
+var Separator = /* @__PURE__ */ forwardRef(
+  function Separator2({
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    variant = "solid",
+    children,
+    ...props
+  }, ref) {
+    if (children != null && orientation === "horizontal") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          "data-slot": "separator",
+          "data-orientation": "horizontal",
+          "data-variant": variant,
+          className: cx("orynn-separator", "orynn-separator--labelled", className),
+          ...props,
+          children: /* @__PURE__ */ jsx("span", { className: "orynn-separator__label", children })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Separator$1.Root,
+      {
+        ref,
+        "data-slot": "separator",
+        "data-variant": variant,
+        orientation,
+        decorative,
+        className: cx("orynn-separator", className),
+        ...props
+      }
+    );
+  }
+);
+var Table = /* @__PURE__ */ forwardRef(function Table2({ className, size, dense, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "orynn-table__wrap", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      "data-slot": "table",
+      "data-size": dense ? "sm" : size,
+      className: cx("orynn-table", className),
+      ...props
+    }
+  ) });
+});
+var TableHeader = /* @__PURE__ */ forwardRef(
+  function TableHeader2({ className, sticky, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        "data-slot": "table-header",
+        "data-sticky": sticky || void 0,
+        className: cx("orynn-table__header", className),
+        ...props
+      }
+    );
+  }
+);
+var TableBody = /* @__PURE__ */ forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      "data-slot": "table-body",
+      className: cx("orynn-table__body", className),
+      ...props
+    }
+  );
+});
+var TableFooter = /* @__PURE__ */ forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      ref,
+      "data-slot": "table-footer",
+      className: cx("orynn-table__footer", className),
+      ...props
+    }
+  );
+});
+var TableRow = /* @__PURE__ */ forwardRef(
+  function TableRow2({ className, selected, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref,
+        "data-slot": "table-row",
+        "data-state": selected ? "selected" : void 0,
+        className: cx("orynn-table__row", className),
+        ...props
+      }
+    );
+  }
+);
+var TableHead = /* @__PURE__ */ forwardRef(
+  function TableHead2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        "data-slot": "table-head",
+        className: cx("orynn-table__head", className),
+        ...props
+      }
+    );
+  }
+);
+var TableCell = /* @__PURE__ */ forwardRef(
+  function TableCell2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        "data-slot": "table-cell",
+        className: cx("orynn-table__cell", className),
+        ...props
+      }
+    );
+  }
+);
+var TableCaption = /* @__PURE__ */ forwardRef(function TableCaption2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      ref,
+      "data-slot": "table-caption",
+      className: cx("orynn-table__caption", className),
+      ...props
+    }
+  );
+});
+var Switch = /* @__PURE__ */ forwardRef(function Switch2({
+  className,
+  size = "default",
+  label,
+  description,
+  labelPlacement = "end",
+  onLabel,
+  offLabel,
+  thumbIcon,
+  id: idProp,
+  ...props
+}, ref) {
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const control = /* @__PURE__ */ jsxs(
+    Switch$1.Root,
+    {
+      ref,
+      id,
+      "data-slot": "switch",
+      "data-size": size,
+      className: cx("orynn-switch", className),
+      ...props,
+      children: [
+        offLabel != null && /* @__PURE__ */ jsx("span", { className: "orynn-switch__text orynn-switch__text--off", "aria-hidden": "true", children: offLabel }),
+        onLabel != null && /* @__PURE__ */ jsx("span", { className: "orynn-switch__text orynn-switch__text--on", "aria-hidden": "true", children: onLabel }),
+        /* @__PURE__ */ jsx(Switch$1.Thumb, { "data-slot": "switch-thumb", className: "orynn-switch__thumb", children: thumbIcon })
+      ]
+    }
+  );
+  if (label == null && description == null) return control;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: "orynn-switch-field",
+      "data-slot": "switch-field",
+      "data-placement": labelPlacement,
+      htmlFor: id,
+      children: [
+        control,
+        /* @__PURE__ */ jsxs("span", { className: "orynn-switch-field__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "orynn-switch-field__label", children: label }),
+          description != null && /* @__PURE__ */ jsx("span", { className: "orynn-switch-field__description", children: description })
+        ] })
+      ]
+    }
+  );
+});
+var Tabs = /* @__PURE__ */ forwardRef(function Tabs2({ className, variant = "pill", size = "md", fitted = false, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      ref,
+      "data-slot": "tabs",
+      "data-variant": variant,
+      "data-size": size,
+      "data-fitted": fitted || void 0,
+      className: cx("orynn-tabs", className),
+      ...props
+    }
+  );
+});
+var TabsList = /* @__PURE__ */ forwardRef(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      className: cx("orynn-tabs__list", className),
+      ...props
+    }
+  );
+});
+var TabsTrigger = /* @__PURE__ */ forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Trigger,
+    {
+      ref,
+      "data-slot": "tabs-trigger",
+      className: cx("orynn-tabs__trigger", className),
+      ...props
+    }
+  );
+});
+var TabsContent = /* @__PURE__ */ forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Content,
+    {
+      ref,
+      "data-slot": "tabs-content",
+      className: cx("orynn-tabs__content", className),
+      ...props
+    }
+  );
+});
+var Dialog = (props) => /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+var DialogTrigger = (props) => /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
+var DialogClose = (props) => /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
+var DialogPortal = Dialog$1.Portal;
+var DialogContent = /* @__PURE__ */ forwardRef(
+  function DialogContent2({ className, children, showCloseButton = true, size = "lg", scrollable, container, ...props }, ref) {
+    const themed = usePortalContainer();
+    return /* @__PURE__ */ jsxs(Dialog$1.Portal, { container: container ?? themed ?? void 0, children: [
+      /* @__PURE__ */ jsx(
+        Dialog$1.Overlay,
+        {
+          "data-slot": "dialog-overlay",
+          className: "orynn-overlay orynn-dialog__overlay"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog$1.Content,
+        {
+          ref,
+          "data-slot": "dialog-content",
+          "data-size": size,
+          "data-scrollable": scrollable || void 0,
+          className: cx("orynn-dialog__content", className),
+          ...props,
+          children: [
+            children,
+            showCloseButton && /* @__PURE__ */ jsx(
+              Dialog$1.Close,
+              {
+                "data-slot": "dialog-close",
+                className: "orynn-dialog__close",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(XIcon, {})
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className: cx("orynn-dialog__header", className), ...props });
 }
-function useOrynnTheme() {
-  return useContext(OrynnContext);
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-footer", className: cx("orynn-dialog__footer", className), ...props });
+}
+var DialogTitle = /* @__PURE__ */ forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      ref,
+      "data-slot": "dialog-title",
+      className: cx("orynn-dialog__title", className),
+      ...props
+    }
+  );
+});
+var DialogDescription = /* @__PURE__ */ forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      ref,
+      "data-slot": "dialog-description",
+      className: cx("orynn-dialog__description", className),
+      ...props
+    }
+  );
+});
+var Popover2 = (props) => /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+var PopoverTrigger = (props) => /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+var PopoverAnchor = (props) => /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+var PopoverClose = Popover$1.Close;
+var PopoverArrow = (props) => /* @__PURE__ */ jsx(Popover$1.Arrow, { "data-slot": "popover-arrow", className: "orynn-popover__arrow", ...props });
+var PopoverContent = /* @__PURE__ */ forwardRef(
+  function PopoverContent2({ className, align = "center", sideOffset = 4, arrow = false, container, children, ...props }, ref) {
+    const themed = usePortalContainer();
+    return /* @__PURE__ */ jsx(Popover$1.Portal, { container: container ?? themed ?? void 0, children: /* @__PURE__ */ jsxs(
+      Popover$1.Content,
+      {
+        ref,
+        "data-slot": "popover-content",
+        align,
+        sideOffset,
+        className: cx("orynn-content orynn-popover__content", className),
+        ...props,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsx(PopoverArrow, {})
+        ]
+      }
+    ) });
+  }
+);
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  delayDuration = 0,
+  skipDelayDuration,
+  disableHoverableContent,
+  disableProvider = false,
+  ...props
+}) {
+  const root = /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      "data-slot": "tooltip",
+      delayDuration,
+      disableHoverableContent,
+      ...props
+    }
+  );
+  if (disableProvider) return root;
+  return /* @__PURE__ */ jsx(
+    TooltipProvider,
+    {
+      delayDuration,
+      skipDelayDuration,
+      disableHoverableContent,
+      children: root
+    }
+  );
+}
+var TooltipTrigger = (props) => /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+var TooltipContent = /* @__PURE__ */ forwardRef(
+  function TooltipContent2({ className, sideOffset = 0, arrow = true, arrowSize = 11, container, children, ...props }, ref) {
+    const themed = usePortalContainer();
+    return /* @__PURE__ */ jsx(Tooltip$1.Portal, { container: container ?? themed ?? void 0, children: /* @__PURE__ */ jsxs(
+      Tooltip$1.Content,
+      {
+        ref,
+        "data-slot": "tooltip-content",
+        sideOffset,
+        className: cx("orynn-content orynn-tooltip__content", className),
+        ...props,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsx(
+            Tooltip$1.Arrow,
+            {
+              width: arrowSize,
+              height: Math.round(arrowSize / 2.2),
+              className: "orynn-tooltip__arrow"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var DropdownMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+var DropdownMenuTrigger = (props) => /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+var DropdownMenuGroup = DropdownMenu$1.Group;
+var DropdownMenuPortal = DropdownMenu$1.Portal;
+var DropdownMenuSub = DropdownMenu$1.Sub;
+var DropdownMenuRadioGroup = DropdownMenu$1.RadioGroup;
+var DropdownMenuContent = /* @__PURE__ */ forwardRef(function DropdownMenuContent2({ className, sideOffset = 4, container, ...props }, ref) {
+  const themed = usePortalContainer();
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { container: container ?? themed ?? void 0, children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      ref,
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cx("orynn-content orynn-menu__content", className),
+      ...props
+    }
+  ) });
+});
+var DropdownMenuItem = /* @__PURE__ */ forwardRef(
+  function DropdownMenuItem2({ className, inset, variant = "default", icon, shortcut, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      DropdownMenu$1.Item,
+      {
+        ref,
+        "data-slot": "dropdown-menu-item",
+        "data-inset": inset || void 0,
+        "data-variant": variant,
+        className: cx("orynn-menu__item", className),
+        ...props,
+        children: [
+          icon,
+          children,
+          shortcut != null && /* @__PURE__ */ jsx("span", { className: "orynn-menu__shortcut", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef(function DropdownMenuCheckboxItem2({ className, children, checked, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.CheckboxItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cx("orynn-menu__item", "orynn-menu__item--check", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "orynn-menu__indicator", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  );
+});
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef(function DropdownMenuRadioItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.RadioItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-radio-item",
+      className: cx("orynn-menu__item", "orynn-menu__item--check", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "orynn-menu__indicator", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "orynn-menu__dot" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var DropdownMenuLabel = /* @__PURE__ */ forwardRef(
+  function DropdownMenuLabel2({ className, inset, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      DropdownMenu$1.Label,
+      {
+        ref,
+        "data-slot": "dropdown-menu-label",
+        "data-inset": inset || void 0,
+        className: cx("orynn-menu__label", className),
+        ...props
+      }
+    );
+  }
+);
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Separator,
+    {
+      ref,
+      "data-slot": "dropdown-menu-separator",
+      className: cx("orynn-menu__separator", className),
+      ...props
+    }
+  );
+});
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cx("orynn-menu__shortcut", className),
+      ...props
+    }
+  );
 }
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef(function DropdownMenuSubTrigger2({ className, inset, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.SubTrigger,
+    {
+      ref,
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset || void 0,
+      className: cx("orynn-menu__item", "orynn-menu__sub-trigger", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "orynn-menu__sub-chevron" })
+      ]
+    }
+  );
+});
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef(function DropdownMenuSubContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.SubContent,
+    {
+      ref,
+      "data-slot": "dropdown-menu-sub-content",
+      className: cx("orynn-content", "orynn-menu__content", "orynn-menu__sub-content", className),
+      ...props
+    }
+  );
+});
 
 // src/types/validation.ts
 var FORM_ERROR_KEY = "$form";
 
-export { Checkbox, CheckboxGroup, DatePicker, Dropdown, FORM_ERROR_KEY, Field, FieldBox, Fieldset, Input, NumberField, OrynnProvider, Radio, RadioGroup, Dropdown as Select, Textarea, createRegistry, createRuleResolver, defaultRegistry, defaultResolver, normalizeConfig, registerField, registerRule, resolveThemeVars, useFieldsetState, useOrynnTheme };
+// src/core/validation/standard-schema.ts
+function pathToField(path) {
+  if (!path || path.length === 0) return { field: FORM_ERROR_KEY, rest: "" };
+  const seg = (p) => String(typeof p === "object" && p !== null && "key" in p ? p.key : p);
+  const parts = path.map(seg);
+  return { field: parts[0] ?? FORM_ERROR_KEY, rest: parts.slice(1).join(".") };
+}
+function standardSchemaResolver(schema) {
+  return (values) => {
+    const out = schema["~standard"].validate(values);
+    const toResult = (r) => {
+      const result = {};
+      if (!("issues" in r) || !r.issues) return result;
+      for (const issue of r.issues) {
+        const { field, rest } = pathToField(issue.path);
+        const bucket = result[field] ?? [];
+        bucket.push({ rule: "schema", message: issue.message, ...rest ? { path: rest } : {} });
+        result[field] = bucket;
+      }
+      return result;
+    };
+    return out instanceof Promise ? out.then(toResult) : toResult(out);
+  };
+}
+
+export { Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FORM_ERROR_KEY, Field, FieldBox, Fieldset, FieldsetView, Form, Input, Label, NumberField, OrynnProvider, Popover2 as Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Radio, RadioGroup, Dropdown as Select, Separator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeClasses, builtInRules, buttonClasses, createRegistry, createRuleResolver, defaultRegistry, defaultResolver, normalizeConfig, registerField, registerRule, resolveThemeVars, standardSchemaResolver, useFieldsetState, useOrynnTheme, usePortalContainer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map