orynn 0.2.0 → 0.5.0

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
+var radixUi = require('radix-ui');
 
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -30,8 +31,8 @@ var base = (props) => ({
 });
 var CheckIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) });
 var MinusIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
-var PlusIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14" }) });
 var ChevronDownIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronUpIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 15 6-6 6 6" }) });
 var ChevronLeftIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) });
 var ChevronRightIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
 var XIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
@@ -48,11 +49,15 @@ var CalendarIcon = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base(p), c
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
 ] });
+var CircleIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base({ strokeWidth: 0, fill: "currentColor", ...p }), children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "6" }) });
 var CheckboxGroupContext = react.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__ */ react.forwardRef(
   function Checkbox2(props, ref) {
@@ -210,15 +215,7 @@ function Field(props) {
         description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "orynn-field__description", id: descriptionId, children: description }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-field__control", children: typeof children === "function" ? children(ctx) : children }),
         invalid && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "orynn-field__error", id: errorId, role: "alert", children: messages.length === 1 ? messages[0] : messages.map((m) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: m }, m)) }),
-        successMsg && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: "orynn-field__error",
-            id: successId,
-            style: { color: "var(--orynn-color-success)" },
-            children: successMsg
-          }
-        )
+        successMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "orynn-field__success", id: successId, children: successMsg })
       ]
     }
   );
@@ -237,8 +234,11 @@ function CheckboxGroup(props) {
     defaultValue,
     onChange,
     orientation = "vertical",
+    columns,
     min,
     max,
+    showSelectAll = false,
+    selectAllLabel = "Select all",
     options,
     children,
     className,
@@ -263,6 +263,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 = react.useMemo(
     () => ({
       name,
@@ -286,23 +299,40 @@ function CheckboxGroup(props) {
       disabled,
       id,
       className,
-      children: () => /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: () => /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "orynn-choice-group__selectall", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                checked: allSelected,
+                indeterminate: !allSelected && someSelected,
+                disabled,
+                label: selectAllLabel,
+                onChange: toggleAll
+              }
+            ) }),
+            options ? options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                value: o.value,
+                label: o.icon != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__icon", children: o.icon }),
+                  o.label
+                ] }) : o.label,
+                description: o.description,
+                disabled: o.disabled
+              },
+              o.value
+            )) : children
+          ]
         }
       ) })
     }
@@ -323,6 +353,8 @@ var FieldBox = /* @__PURE__ */ react.forwardRef(
       floatingLabel,
       left,
       right,
+      addonBefore,
+      addonAfter,
       textarea,
       className,
       children,
@@ -342,7 +374,8 @@ var FieldBox = /* @__PURE__ */ react.forwardRef(
       }
       onBlur?.(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const hasAddon = addonBefore != null || addonAfter != null;
+    const box = /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
@@ -361,6 +394,8 @@ var FieldBox = /* @__PURE__ */ react.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,
@@ -372,8 +407,137 @@ var FieldBox = /* @__PURE__ */ react.forwardRef(
         ]
       }
     );
+    if (!hasAddon) return box;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-box__group", "data-size": size, "data-disabled": disabled || void 0, children: [
+      addonBefore != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__addon", "data-side": "before", children: addonBefore }),
+      box,
+      addonAfter != null && /* @__PURE__ */ jsxRuntime.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 = react.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 = react.useMemo(() => normalizeTheme(theme), [theme]);
+  const preset = config.preset ?? "default";
+  const density = config.density ?? "comfortable";
+  const style = react.useMemo(() => resolveThemeVars(config), [config]);
+  const [portalContainer, setPortalContainer] = react.useState(null);
+  react.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);
+    };
+  }, []);
+  react.useEffect(() => {
+    if (portalContainer)
+      syncThemeEl(portalContainer, preset, density, config, style);
+  }, [portalContainer, preset, density, config, style]);
+  const ctx = react.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__ */ jsxRuntime.jsx(OrynnContext.Provider, { value: ctx, children: as === "contents" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: darkClass, style: { display: "contents", ...style }, ...dataProps, children }) : as === "span" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("orynn-root", className, darkClass), style, ...dataProps, children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("orynn-root", className, darkClass), style, ...dataProps, children }) });
+}
+function useOrynnTheme() {
+  return react.useContext(OrynnContext);
+}
+function usePortalContainer() {
+  const { portalContainer } = react.useContext(OrynnContext);
+  if (portalContainer) return portalContainer;
+  return typeof document === "undefined" ? null : document.body;
+}
 var useIsoLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 function Popover({
   open,
@@ -382,6 +546,7 @@ function Popover({
   children,
   matchWidth = true,
   offset = 6,
+  maxHeight,
   className,
   popoverRef,
   role,
@@ -393,6 +558,7 @@ function Popover({
     if (popoverRef) popoverRef.current = el;
   };
   const [pos, setPos] = react.useState(null);
+  const container = usePortalContainer();
   useIsoLayoutEffect(() => {
     if (!open) return;
     const anchor = anchorRef.current;
@@ -404,12 +570,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();
@@ -422,7 +589,7 @@ function Popover({
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     };
-  }, [open, anchorRef, offset]);
+  }, [open, anchorRef, offset, maxHeight]);
   react.useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
@@ -443,7 +610,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 reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -463,7 +630,7 @@ function Popover({
         children
       }
     ),
-    document.body
+    container
   );
 }
 
@@ -488,27 +655,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) {
@@ -517,11 +739,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" });
@@ -530,6 +755,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;
@@ -538,9 +767,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,
@@ -550,16 +810,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] = react.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] = react.useState({ y: initial.getFullYear(), m: initial.getMonth() });
   const [focused, setFocused] = react.useState(initial);
+  const [innerView, setInnerView] = react.useState(
+    defaultView ?? (precision === "day" ? "day" : precision)
+  );
+  const view = viewProp ?? innerView;
+  const setView = (v) => {
+    if (viewProp === void 0) setInnerView(v);
+    onViewChange?.(v);
+  };
   const gridRef = react.useRef(null);
   react.useEffect(() => {
     if (value) {
-      setView({ y: value.getFullYear(), m: value.getMonth() });
+      setNav({ y: value.getFullYear(), m: value.getMonth() });
       setFocused(value);
     }
   }, [value]);
@@ -568,94 +845,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__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__header", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__title", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: i, children: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2023, i, 1)) }, i))
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: y, children: y }, y))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChevronRightIcon, {})
-        }
-      )
-    ] }),
-    " ",
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__header", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
       "table",
       {
-        ref: gridRef,
         className: "orynn-calendar__grid",
         role: "grid",
         "aria-label": monthName,
@@ -665,16 +966,29 @@ function Calendar({
             showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true" }),
             weekdays.map((w) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: w }, w))
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 6 }, (_, week) => {
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("tr", { children: [
               showWeekNumbers && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { role: "gridcell", "aria-selected": selected, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -685,10 +999,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);
@@ -700,25 +1019,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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "orynn-calendar__pickgrid",
+        role: "grid",
+        "aria-label": `Months of ${nav.y}`,
+        onKeyDown,
+        children: [0, 3, 6, 9].map((rowStart) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__footer", children: [
-      showToday ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "orynn-calendar__action",
-          disabled: outOfRange(today),
-          onClick: () => onSelect(today),
-          children: "Today"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-      showClear && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "orynn-calendar__panels", children: Array.from({ length: panels }, (_, i) => dayGrid(i)) });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__footer", children: [
+          showToday ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-calendar__action",
+              disabled: outOfRange(today),
+              onClick: () => onSelect(today),
+              children: "Today"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          showClear && /* @__PURE__ */ jsxRuntime.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__ */ react.forwardRef(
-  function DatePicker2(props, ref) {
+  function DatePicker2(propsIn, ref) {
+    const props = propsIn;
     const {
       label,
       description,
@@ -736,6 +1217,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
       id: idProp,
       name,
       className,
+      mode = "single",
       value: valueProp,
       defaultValue,
       onChange,
@@ -743,46 +1225,123 @@ var DatePicker = /* @__PURE__ */ react.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 = react.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] = react.useState(() => toDate(defaultValue));
-    const value = isControlled ? toDate(valueProp) : inner;
-    const [open, setOpen] = react.useState(false);
+    const [innerRaw, setInnerRaw] = react.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] = react.useState(defaultOpen);
+    const open = openIsControlled ? openProp : innerOpen;
+    const setOpen = (next) => {
+      if (!openIsControlled) setInnerOpen(next);
+      onOpenChange?.(next);
+    };
     const [gridFocus, setGridFocus] = react.useState(false);
-    const [text, setText] = react.useState(() => value ? formatDate(value, format, locale) : "");
+    const [hoverDate, setHoverDate] = react.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] = react.useState(displayText);
     const boxRef = react.useRef(null);
     const inputRef = react.useRef(null);
+    const skipFocusOpen = react.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("|");
     react.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;
@@ -793,31 +1352,96 @@ var DatePicker = /* @__PURE__ */ react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "orynn-datepicker__time", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-datepicker__time-label", children: "Time" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-datepicker__time-fields", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: h, children: pad2(h) }, h))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: ":" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: m, children: pad2(m) }, m))
+          }
+        )
+      ] })
+    ] }) : null;
+    const calendar = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "orynn-datepicker__withtime", children: [
+      calendar,
+      timeColumn
+    ] }) : calendar;
+    const cal = presets && presets.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-datepicker__panel", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-datepicker__presets", children: presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "orynn-datepicker__preset",
+          onClick: () => applyPreset(p),
+          children: p.label
+        },
+        p.label
+      )) }),
+      body
+    ] }) : body;
     if (inline) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Field,
@@ -834,7 +1458,8 @@ var DatePicker = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
       Field,
       {
@@ -869,10 +1494,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
                     className: "orynn-box__iconbtn",
                     "aria-label": "Clear",
                     tabIndex: -1,
-                    onClick: () => {
-                      commit(null);
-                      onClear?.();
-                    },
+                    onClick: clearValue,
                     children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
                   }
                 ),
@@ -888,7 +1510,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
                     onClick: () => {
                       if (disabled || readOnly) return;
                       setGridFocus(true);
-                      setOpen((o) => !o);
+                      setOpen(!open);
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {})
                   }
@@ -907,7 +1529,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
                   name,
                   className: "orynn-box__field",
                   type: "text",
-                  inputMode: "numeric",
+                  inputMode: typingAllowed ? "numeric" : void 0,
                   autoComplete: "off",
                   role: "combobox",
                   "aria-expanded": open,
@@ -917,19 +1539,26 @@ var DatePicker = /* @__PURE__ */ react.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) : "");
                     }
                   }
                 }
@@ -956,7 +1585,13 @@ var DatePicker = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
   const i = text.toLowerCase().indexOf(query.toLowerCase());
@@ -998,52 +1633,103 @@ var Dropdown = /* @__PURE__ */ react.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 = react.useId();
     const id = idProp ?? reactId;
     const listId = `${id}-listbox`;
-    const isControlled = valueProp !== void 0;
-    const [inner, setInner] = react.useState(() => toArray(defaultValue));
-    const selectedValues = isControlled ? toArray(valueProp) : inner;
-    const commit = (next) => {
-      if (!isControlled) setInner(next);
-      onChange?.(multiple ? next : next[0] ?? null);
+    const baseOptions = react.useMemo(() => flattenOptions(options), [options]);
+    const [createdOptions, setCreatedOptions] = react.useState([]);
+    const allOptions = react.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] = react.useState(defaultOpen);
+    const open = openIsControlled ? openProp : innerOpen;
+    const setOpen = (next) => {
+      if (!openIsControlled) setInnerOpen(next);
+      onOpenChange?.(next);
     };
-    const [open, setOpen] = react.useState(false);
     const [query, setQuery] = react.useState("");
     const [activeIndex, setActiveIndex] = react.useState(0);
     const boxRef = react.useRef(null);
     const inputRef = react.useRef(null);
     const listRef = react.useRef(null);
-    const byValue = react.useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
-    const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
+    const byValue = react.useMemo(() => new Map(allOptions.map((o) => [o.value, o])), [allOptions]);
+    const selectedOptions = selectedValues.map((v) => byValue.get(v) ?? { label: v, value: v }).filter(Boolean);
+    react.useEffect(() => {
+      if (!onSearch) return;
+      const t = setTimeout(() => onSearch(query), searchDebounce);
+      return () => clearTimeout(t);
+    }, [query, onSearch, searchDebounce]);
     const filtered = react.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 = react.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]);
     react.useEffect(() => {
       setActiveIndex((i) => Math.min(Math.max(0, i), Math.max(0, selectableOptions.length - 1)));
     }, [selectableOptions.length]);
@@ -1064,10 +1750,34 @@ var Dropdown = /* @__PURE__ */ react.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]
         );
@@ -1085,6 +1795,16 @@ var Dropdown = /* @__PURE__ */ react.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) {
@@ -1149,6 +1869,7 @@ var Dropdown = /* @__PURE__ */ react.forwardRef(
     };
     const hasValue = selectedValues.length > 0;
     const doHighlight = highlightMatch ?? searchable;
+    const isLoadingEmpty = Boolean(loading) && selectableOptions.length === 0;
     if (native && !multiple && !searchable) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Field,
@@ -1175,7 +1896,7 @@ var Dropdown = /* @__PURE__ */ react.forwardRef(
               onChange: (e) => commit(e.target.value ? [e.target.value] : []),
               children: [
                 placeholder != null && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: required, children: placeholder }),
-                options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+                baseOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
               ]
             }
           )
@@ -1262,7 +1983,6 @@ var Dropdown = /* @__PURE__ */ react.forwardRef(
                   {
                     ...ref ? { ref: setRefs(ref, inputRef) } : { ref: inputRef },
                     id,
-                    name,
                     className: "orynn-select__search",
                     role: "combobox",
                     "aria-expanded": open,
@@ -1274,7 +1994,11 @@ var Dropdown = /* @__PURE__ */ react.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) => {
@@ -1284,7 +2008,8 @@ var Dropdown = /* @__PURE__ */ react.forwardRef(
                     onKeyDown,
                     onFocus: openPanel
                   }
-                )
+                ),
+                name != null && (multiple ? selectedValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v }, v)) : /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selectedValues[0] ?? "" }))
               ] })
             }
           ),
@@ -1295,44 +2020,61 @@ var Dropdown = /* @__PURE__ */ react.forwardRef(
               anchorRef: boxRef,
               onClose: () => setOpen(false),
               popoverRef: listRef,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+              maxHeight,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   className: "orynn-listbox",
                   id: listId,
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
-                  children: selectableOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__empty", children: emptyMessage }) : rows.map(
-                    (row) => row.type === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__group", children: row.label }, `g-${row.label}`) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                          row.option.icon,
-                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-option__body", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__label", children: doHighlight ? /* @__PURE__ */ jsxRuntime.jsx(Highlight, { text: row.option.label, query }) : row.option.label }),
-                            row.option.description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__desc", children: row.option.description })
-                          ] }),
-                          selectedValues.includes(row.option.value) && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "orynn-option__check" })
-                        ] })
-                      },
-                      row.option.value
+                  children: [
+                    multiple && showSelectAll && selectAllTargets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "orynn-listbox__action", onClick: toggleSelectAll, children: allSelected ? "Clear all" : "Select all" }),
+                    isLoadingEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__empty", children: loadingMessage }) : selectableOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__empty", children: emptyMessage }) : rows.map(
+                      (row) => row.type === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__group", children: renderGroupLabel ? renderGroupLabel(row.label) : row.label }, `g-${row.label}`) : row.option.value === CREATE_VALUE ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "orynn-option__body", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__label", children: formatCreateLabel ? formatCreateLabel(row.option.label) : `Create "${row.option.label}"` }) })
+                        },
+                        CREATE_VALUE
+                      ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            row.option.icon,
+                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-option__body", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__label", children: doHighlight ? /* @__PURE__ */ jsxRuntime.jsx(Highlight, { text: row.option.label, query }) : row.option.label }),
+                              row.option.description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__desc", children: row.option.description })
+                            ] }),
+                            selectedValues.includes(row.option.value) && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "orynn-option__check" })
+                          ] })
+                        },
+                        row.option.value
+                      )
                     )
-                  )
+                  ]
                 }
               )
             }
@@ -1380,8 +2122,14 @@ var Input = /* @__PURE__ */ react.forwardRef(
       type = "text",
       prefix,
       suffix,
+      addonBefore,
+      addonAfter,
       passwordToggle,
+      passwordVisible,
+      onPasswordVisibleChange,
+      visibilityToggleIcon,
       showCount,
+      debounce,
       maxLength,
       placeholder,
       ...rest
@@ -1393,14 +2141,32 @@ var Input = /* @__PURE__ */ react.forwardRef(
       defaultValue: defaultValue ?? "",
       onChange: void 0
     });
-    const [reveal, setReveal] = react.useState(false);
+    const revealIsControlled = passwordVisible !== void 0;
+    const [innerReveal, setInnerReveal] = react.useState(false);
+    const reveal = revealIsControlled ? passwordVisible : innerReveal;
+    const setReveal = (next) => {
+      if (!revealIsControlled) setInnerReveal(next);
+      onPasswordVisibleChange?.(next);
+    };
+    const debounceTimer = react.useRef();
+    react.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);
@@ -1432,16 +2198,15 @@ var Input = /* @__PURE__ */ react.forwardRef(
             invalid,
             valid,
             active: hasValue,
+            addonBefore,
+            addonAfter,
             left: startContent != null || prefix != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               startContent,
               prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment--affix", children: prefix })
             ] }) : void 0,
             right: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment--affix", children: suffix }),
-              showCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-box__adornment--affix", children: [
-                value.length,
-                maxLength ? `/${maxLength}` : ""
-              ] }),
+              showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment--affix", children: countNode }),
               showClear && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -1461,8 +2226,8 @@ var Input = /* @__PURE__ */ react.forwardRef(
                   "aria-label": reveal ? "Hide" : "Show",
                   "aria-pressed": reveal,
                   tabIndex: -1,
-                  onClick: () => setReveal((v) => !v),
-                  children: reveal ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
+                  onClick: () => setReveal(!reveal),
+                  children: visibilityToggleIcon ? visibilityToggleIcon(reveal) : reveal ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
                 }
               ),
               loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
@@ -1499,6 +2264,11 @@ var Input = /* @__PURE__ */ react.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__ */ react.forwardRef(
   function NumberField2(props, ref) {
     const {
@@ -1521,19 +2291,37 @@ var NumberField = /* @__PURE__ */ react.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;
@@ -1544,15 +2332,45 @@ var NumberField = /* @__PURE__ */ react.forwardRef(
       defaultValue,
       onChange: void 0
     });
-    const fmt = react.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 = react.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 = react.useMemo(() => {
       const parts = new Intl.NumberFormat(locale).formatToParts(11111.1);
       return {
@@ -1561,23 +2379,47 @@ var NumberField = /* @__PURE__ */ react.forwardRef(
       };
     }, [locale]);
     const display = react.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 = react.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] = react.useState(() => display(value));
     const [editing, setEditing] = react.useState(false);
@@ -1587,65 +2429,76 @@ var NumberField = /* @__PURE__ */ react.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 = react.useRef(null);
     react.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 = react.useRef();
+    const holdDelay = react.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);
-    react.useEffect(() => () => clearInterval(holdTimer.current), []);
-    const StepButtons = buttons && /* @__PURE__ */ jsxRuntime.jsxs(
+    const stopHold = () => {
+      clearTimeout(holdDelay.current);
+      clearInterval(holdTimer.current);
+    };
+    react.useEffect(() => stopHold, []);
+    const StepButtons = showButtons && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: `orynn-number__buttons${buttons === "horizontal" ? " orynn-number__buttons--horizontal" : ""}`,
+        className: `orynn-number__buttons${showButtons === "horizontal" ? " orynn-number__buttons--horizontal" : ""}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -1658,7 +2511,7 @@ var NumberField = /* @__PURE__ */ react.forwardRef(
               onPointerDown: () => startHold(1),
               onPointerUp: stopHold,
               onPointerLeave: stopHold,
-              children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, { className: "orynn-number__caret" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1668,11 +2521,11 @@ var NumberField = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(MinusIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "orynn-number__caret" })
             }
           )
         ]
@@ -1723,7 +2576,7 @@ var NumberField = /* @__PURE__ */ react.forwardRef(
                 inputMode: "decimal",
                 role: "spinbutton",
                 "aria-valuenow": value ?? void 0,
-                "aria-valuemin": min,
+                "aria-valuemin": effMin,
                 "aria-valuemax": max,
                 value: text,
                 disabled,
@@ -1735,13 +2588,16 @@ var NumberField = /* @__PURE__ */ react.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));
                 }
@@ -1754,7 +2610,7 @@ var NumberField = /* @__PURE__ */ react.forwardRef(
   }
 );
 var RadioGroupContext = react.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__ */ react.forwardRef(
   function Radio2(props, ref) {
     const group = react.useContext(RadioGroupContext);
@@ -1831,6 +2687,7 @@ function RadioGroup(props) {
     defaultValue = null,
     onChange,
     orientation = "vertical",
+    columns,
     options,
     children,
     className,
@@ -1866,12 +2723,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__ */ jsxRuntime.jsx(
             Radio,
             {
               value: o.value,
-              label: o.label,
+              label: o.icon != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__icon", children: o.icon }),
+                o.label
+              ] }) : o.label,
               description: o.description,
               disabled: o.disabled
             },
@@ -1898,12 +2760,17 @@ var Textarea = /* @__PURE__ */ react.forwardRef(
       floatingLabel,
       clearable,
       onClear,
+      loading,
+      endContent,
       id: idProp,
       name,
       className,
       value: valueProp,
       defaultValue,
       onChange,
+      onEnter,
+      submitOnEnter,
+      onKeyDown,
       autoResize,
       minRows = 3,
       maxRows = 10,
@@ -1928,9 +2795,9 @@ var Textarea = /* @__PURE__ */ react.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]);
@@ -1939,7 +2806,16 @@ var Textarea = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
       Field,
       {
@@ -1964,20 +2840,24 @@ var Textarea = /* @__PURE__ */ react.forwardRef(
             valid,
             active: hasValue,
             floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
-            right: clearable && hasValue && !disabled && !readOnly ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "orynn-box__iconbtn",
+                  "aria-label": "Clear",
+                  tabIndex: -1,
+                  onClick: () => {
+                    setValue("");
+                    onClear?.();
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+                }
+              ),
+              loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+              endContent
+            ] }) : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "textarea",
@@ -1997,13 +2877,11 @@ var Textarea = /* @__PURE__ */ react.forwardRef(
                   placeholder: floatingLabel ? void 0 : placeholder,
                   "aria-invalid": invalid || void 0,
                   "aria-describedby": describedById,
-                  onChange: handleChange
+                  onChange: handleChange,
+                  onKeyDown: handleKeyDown
                 }
               ),
-              showCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-box__footer", children: [
-                value.length,
-                maxLength ? `/${maxLength}` : ""
-              ] })
+              showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__footer", children: countNode })
             ]
           }
         )
@@ -2060,24 +2938,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),
@@ -2111,18 +3028,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) {
@@ -2136,6 +3087,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;
@@ -2148,6 +3143,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));
@@ -2161,12 +3234,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];
@@ -2178,16 +3251,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();
@@ -2419,23 +3510,43 @@ function useFieldsetState(config, options = {}) {
     getFieldProps
   };
 }
-function FieldGrid({ columns, gap, className, children }) {
+var useBrowserLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+var GridContext = react.createContext({ count: 1, tier: "desktop" });
+function FieldGrid({ columns, minColWidth, gap, className, children }) {
+  const ref = react.useRef(null);
+  const per = minColWidth && minColWidth > 0 ? minColWidth : DEFAULT_MIN_COL;
+  const { desktop, tablet, mobile } = columns;
+  const [grid, setGrid] = react.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__ */ jsxRuntime.jsx("div", { className: cx("orynn-grid", className), style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-grid__track", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx("orynn-grid", className), style, children: /* @__PURE__ */ jsxRuntime.jsx(GridContext.Provider, { value: grid, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-grid__track", children }) }) });
 }
-function FieldGridItem({ span, columns, children }) {
-  if (!span) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "orynn-grid__item", style, children });
+function FieldGridItem({ span, children }) {
+  const { count, tier } = react.useContext(GridContext);
+  const effective = span ? clampSpan(pickSpan(span, tier), count) : 1;
+  if (effective <= 1) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-grid__item", style: { "--orynn-span": effective }, children });
 }
 var noop = () => {
 };
@@ -2445,6 +3556,7 @@ function FieldRendererImpl({ field, registry: registry2, slice, disabled }) {
     registration,
     `No control registered for field type "${field.type}" (field "${field.name}").`
   );
+  const fallbackId = react.useId();
   if (!registration) return null;
   const Control = registration.component;
   const required = field.validation?.required === true;
@@ -2454,6 +3566,36 @@ function FieldRendererImpl({ field, registry: registry2, slice, disabled }) {
   const handleChange = (next) => {
     slice.setValue(registration.formatValue ? registration.formatValue(next) : next);
   };
+  if (registration.selfContained) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { display: "contents" },
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) slice.markTouched();
+        },
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     Field,
     {
@@ -2486,90 +3628,290 @@ var FieldRenderer = /* @__PURE__ */ react.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__ */ jsxRuntime.jsxs(
+    "fieldset",
+    {
+      className: cx("orynn-fieldset", className),
+      id: id ?? configId,
+      disabled: disabled || void 0,
+      children: [
+        legend != null && /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "orynn-fieldset__legend", children: legend }),
+        /* @__PURE__ */ jsxRuntime.jsx(FieldGrid, { columns, minColWidth, gap, children: visible.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldGridItem, { span: field.layout, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "select",
+var TextareaControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", disabled: required, children: field.placeholder }),
-        field.options.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      DatePicker,
+      {
+        ...common,
+        mode: "multiple",
+        value: Array.isArray(p.value) ? p.value : [],
+        onChange: (arr) => p.onChange(arr.map(toISO))
+      }
+    );
   }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "orynn-field", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "orynn-field__error", role: "alert", children: p.errors[0] })
+  ] });
+};
+var CheckboxGroupControl = (p) => {
+  const c = p.config;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -2603,110 +3945,938 @@ function Fieldset(props) {
     ...validateOn ? { validateOn } : {}
   };
   const fs = useFieldsetState(config, options);
-  const { columns, gap, legend, fields, id: configId } = fs.config;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "fieldset",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldsetView,
     {
-      className: cx("orynn-fieldset", className),
-      id: id ?? configId,
-      disabled: disabled || void 0,
-      children: [
-        legend != null && /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "orynn-fieldset__legend", children: legend }),
-        /* @__PURE__ */ jsxRuntime.jsx(FieldGrid, { columns, gap, children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldGridItem, { span: field.layout, columns, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ...rest,
+      className: cx("orynn-form", className),
+      noValidate: true,
+      onSubmit: fs.handleSubmit(
+        (values) => onSubmit(values, fs),
+        (errors) => onInvalid?.(errors)
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FieldsetView, { state: fs, disabled }),
+        typeof children === "function" ? children(fs) : children
+      ]
+    }
+  );
 }
-var OrynnContext = react.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__ */ react.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__ */ jsxRuntime.jsx(radixUi.Slot.Root, { ref, "aria-busy": loading || void 0, ...shared, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...shared,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "orynn-button__spinner" }) : leftIcon,
+        loading && loadingText != null ? loadingText : children,
+        !loading && rightIcon
+      ]
+    }
+  );
 });
-function OrynnProvider({ theme, as = "div", className, children }) {
-  const config = react.useMemo(() => normalizeTheme(theme), [theme]);
-  const preset = config.preset ?? "default";
-  const density = config.density ?? "comfortable";
-  const style = react.useMemo(() => resolveThemeVars(config), [config]);
-  const ctx = react.useMemo(
-    () => ({ preset, density, config }),
-    [preset, density, config]
+var Label = /* @__PURE__ */ react.forwardRef(function Label2({ className, required, optional, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Label.Root,
+    {
+      ref,
+      "data-slot": "label",
+      className: cx("orynn-label", className),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-label__required", "aria-hidden": "true", children: "*" }),
+        !required && optional && /* @__PURE__ */ jsxRuntime.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__ */ react.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__ */ jsxRuntime.jsx(radixUi.Slot.Root, { ref, ...shared }) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...shared });
+});
+var CardHeader = /* @__PURE__ */ react.forwardRef(function CardHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-header",
+      className: cx("orynn-card__header", className),
+      ...props
+    }
+  );
+});
+var CardTitle = /* @__PURE__ */ react.forwardRef(function CardTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-title",
+      className: cx("orynn-card__title", className),
+      ...props
+    }
+  );
+});
+var CardDescription = /* @__PURE__ */ react.forwardRef(
+  function CardDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-description",
+        className: cx("orynn-card__description", className),
+        ...props
+      }
+    );
+  }
+);
+var CardAction = /* @__PURE__ */ react.forwardRef(function CardAction2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-action",
+      className: cx("orynn-card__action", className),
+      ...props
+    }
+  );
+});
+var CardContent = /* @__PURE__ */ react.forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-content",
+        className: cx("orynn-card__content", className),
+        ...props
+      }
+    );
+  }
+);
+var CardFooter = /* @__PURE__ */ react.forwardRef(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-footer",
+      className: cx("orynn-card__footer", className),
+      ...props
+    }
+  );
+});
+var Badge = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(OrynnContext.Provider, { value: ctx, children: as === "contents" ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "contents" }, ...dataProps, children }) : as === "span" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("orynn-root", className), style, ...dataProps, children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("orynn-root", className), style, ...dataProps, children }) });
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Slot.Root, { ref, ...shared, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, ...shared, children: [
+    dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-badge__dot", "aria-hidden": "true" }),
+    icon,
+    children,
+    removable && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "orynn-badge__remove",
+        "aria-label": "Remove",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+      }
+    )
+  ] });
+});
+var Alert = /* @__PURE__ */ react.forwardRef(function Alert2({ className, variant = "default", icon, title, dismissible, onDismiss, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AlertTitle, { children: title }),
+        children,
+        dismissible && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "orynn-alert__dismiss",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var AlertTitle = /* @__PURE__ */ react.forwardRef(
+  function AlertTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "alert-title",
+        className: cx("orynn-alert__title", className),
+        ...props
+      }
+    );
+  }
+);
+var AlertDescription = /* @__PURE__ */ react.forwardRef(
+  function AlertDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "alert-description",
+        className: cx("orynn-alert__description", className),
+        ...props
+      }
+    );
+  }
+);
+var Separator = /* @__PURE__ */ react.forwardRef(
+  function Separator2({
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    variant = "solid",
+    children,
+    ...props
+  }, ref) {
+    if (children != null && orientation === "horizontal") {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "orynn-separator__label", children })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Separator.Root,
+      {
+        ref,
+        "data-slot": "separator",
+        "data-variant": variant,
+        orientation,
+        decorative,
+        className: cx("orynn-separator", className),
+        ...props
+      }
+    );
+  }
+);
+var Table = /* @__PURE__ */ react.forwardRef(function Table2({ className, size, dense, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "table-container", className: "orynn-table__wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      ref,
+      "data-slot": "table",
+      "data-size": dense ? "sm" : size,
+      className: cx("orynn-table", className),
+      ...props
+    }
+  ) });
+});
+var TableHeader = /* @__PURE__ */ react.forwardRef(
+  function TableHeader2({ className, sticky, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "thead",
+      {
+        ref,
+        "data-slot": "table-header",
+        "data-sticky": sticky || void 0,
+        className: cx("orynn-table__header", className),
+        ...props
+      }
+    );
+  }
+);
+var TableBody = /* @__PURE__ */ react.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      ref,
+      "data-slot": "table-body",
+      className: cx("orynn-table__body", className),
+      ...props
+    }
+  );
+});
+var TableFooter = /* @__PURE__ */ react.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tfoot",
+    {
+      ref,
+      "data-slot": "table-footer",
+      className: cx("orynn-table__footer", className),
+      ...props
+    }
+  );
+});
+var TableRow = /* @__PURE__ */ react.forwardRef(
+  function TableRow2({ className, selected, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ref,
+        "data-slot": "table-row",
+        "data-state": selected ? "selected" : void 0,
+        className: cx("orynn-table__row", className),
+        ...props
+      }
+    );
+  }
+);
+var TableHead = /* @__PURE__ */ react.forwardRef(
+  function TableHead2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        ref,
+        "data-slot": "table-head",
+        className: cx("orynn-table__head", className),
+        ...props
+      }
+    );
+  }
+);
+var TableCell = /* @__PURE__ */ react.forwardRef(
+  function TableCell2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        ref,
+        "data-slot": "table-cell",
+        className: cx("orynn-table__cell", className),
+        ...props
+      }
+    );
+  }
+);
+var TableCaption = /* @__PURE__ */ react.forwardRef(function TableCaption2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "caption",
+    {
+      ref,
+      "data-slot": "table-caption",
+      className: cx("orynn-table__caption", className),
+      ...props
+    }
+  );
+});
+var Switch = /* @__PURE__ */ react.forwardRef(function Switch2({
+  className,
+  size = "default",
+  label,
+  description,
+  labelPlacement = "end",
+  onLabel,
+  offLabel,
+  thumbIcon,
+  id: idProp,
+  ...props
+}, ref) {
+  const reactId = react.useId();
+  const id = idProp ?? reactId;
+  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Switch.Root,
+    {
+      ref,
+      id,
+      "data-slot": "switch",
+      "data-size": size,
+      className: cx("orynn-switch", className),
+      ...props,
+      children: [
+        offLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-switch__text orynn-switch__text--off", "aria-hidden": "true", children: offLabel }),
+        onLabel != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-switch__text orynn-switch__text--on", "aria-hidden": "true", children: onLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Switch.Thumb, { "data-slot": "switch-thumb", className: "orynn-switch__thumb", children: thumbIcon })
+      ]
+    }
+  );
+  if (label == null && description == null) return control;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "orynn-switch-field",
+      "data-slot": "switch-field",
+      "data-placement": labelPlacement,
+      htmlFor: id,
+      children: [
+        control,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-switch-field__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-switch-field__label", children: label }),
+          description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-switch-field__description", children: description })
+        ] })
+      ]
+    }
+  );
+});
+var Tabs = /* @__PURE__ */ react.forwardRef(function Tabs2({ className, variant = "pill", size = "md", fitted = false, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.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__ */ react.forwardRef(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      className: cx("orynn-tabs__list", className),
+      ...props
+    }
+  );
+});
+var TabsTrigger = /* @__PURE__ */ react.forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Trigger,
+    {
+      ref,
+      "data-slot": "tabs-trigger",
+      className: cx("orynn-tabs__trigger", className),
+      ...props
+    }
+  );
+});
+var TabsContent = /* @__PURE__ */ react.forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Content,
+    {
+      ref,
+      "data-slot": "tabs-content",
+      className: cx("orynn-tabs__content", className),
+      ...props
+    }
+  );
+});
+var Dialog = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "dialog", ...props });
+var DialogTrigger = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+var DialogClose = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", ...props });
+var DialogPortal = radixUi.Dialog.Portal;
+var DialogContent = /* @__PURE__ */ react.forwardRef(
+  function DialogContent2({ className, children, showCloseButton = true, size = "lg", scrollable, container, ...props }, ref) {
+    const themed = usePortalContainer();
+    return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { container: container ?? themed ?? void 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Dialog.Overlay,
+        {
+          "data-slot": "dialog-overlay",
+          className: "orynn-overlay orynn-dialog__overlay"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        radixUi.Dialog.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__ */ jsxRuntime.jsx(
+              radixUi.Dialog.Close,
+              {
+                "data-slot": "dialog-close",
+                className: "orynn-dialog__close",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "dialog-header", className: cx("orynn-dialog__header", className), ...props });
 }
-function useOrynnTheme() {
-  return react.useContext(OrynnContext);
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "dialog-footer", className: cx("orynn-dialog__footer", className), ...props });
+}
+var DialogTitle = /* @__PURE__ */ react.forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Title,
+    {
+      ref,
+      "data-slot": "dialog-title",
+      className: cx("orynn-dialog__title", className),
+      ...props
+    }
+  );
+});
+var DialogDescription = /* @__PURE__ */ react.forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Description,
+    {
+      ref,
+      "data-slot": "dialog-description",
+      className: cx("orynn-dialog__description", className),
+      ...props
+    }
+  );
+});
+var Popover2 = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
+var PopoverTrigger = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+var PopoverAnchor = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+var PopoverClose = radixUi.Popover.Close;
+var PopoverArrow = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Arrow, { "data-slot": "popover-arrow", className: "orynn-popover__arrow", ...props });
+var PopoverContent = /* @__PURE__ */ react.forwardRef(
+  function PopoverContent2({ className, align = "center", sideOffset = 4, arrow = false, container, children, ...props }, ref) {
+    const themed = usePortalContainer();
+    return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container: container ?? themed ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.Popover.Content,
+      {
+        ref,
+        "data-slot": "popover-content",
+        align,
+        sideOffset,
+        className: cx("orynn-content orynn-popover__content", className),
+        ...props,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow, {})
+        ]
+      }
+    ) });
+  }
+);
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  delayDuration = 0,
+  skipDelayDuration,
+  disableHoverableContent,
+  disableProvider = false,
+  ...props
+}) {
+  const root = /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tooltip.Root,
+    {
+      "data-slot": "tooltip",
+      delayDuration,
+      disableHoverableContent,
+      ...props
+    }
+  );
+  if (disableProvider) return root;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipProvider,
+    {
+      delayDuration,
+      skipDelayDuration,
+      disableHoverableContent,
+      children: root
+    }
+  );
+}
+var TooltipTrigger = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+var TooltipContent = /* @__PURE__ */ react.forwardRef(
+  function TooltipContent2({ className, sideOffset = 0, arrow = true, arrowSize = 11, container, children, ...props }, ref) {
+    const themed = usePortalContainer();
+    return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { container: container ?? themed ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.Tooltip.Content,
+      {
+        ref,
+        "data-slot": "tooltip-content",
+        sideOffset,
+        className: cx("orynn-content orynn-tooltip__content", className),
+        ...props,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsxRuntime.jsx(
+            radixUi.Tooltip.Arrow,
+            {
+              width: arrowSize,
+              height: Math.round(arrowSize / 2.2),
+              className: "orynn-tooltip__arrow"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var DropdownMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+var DropdownMenuTrigger = (props) => /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+var DropdownMenuGroup = radixUi.DropdownMenu.Group;
+var DropdownMenuPortal = radixUi.DropdownMenu.Portal;
+var DropdownMenuSub = radixUi.DropdownMenu.Sub;
+var DropdownMenuRadioGroup = radixUi.DropdownMenu.RadioGroup;
+var DropdownMenuContent = /* @__PURE__ */ react.forwardRef(function DropdownMenuContent2({ className, sideOffset = 4, container, ...props }, ref) {
+  const themed = usePortalContainer();
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { container: container ?? themed ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.DropdownMenu.Content,
+    {
+      ref,
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cx("orynn-content orynn-menu__content", className),
+      ...props
+    }
+  ) });
+});
+var DropdownMenuItem = /* @__PURE__ */ react.forwardRef(
+  function DropdownMenuItem2({ className, inset, variant = "default", icon, shortcut, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.DropdownMenu.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__ */ jsxRuntime.jsx("span", { className: "orynn-menu__shortcut", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+var DropdownMenuCheckboxItem = /* @__PURE__ */ react.forwardRef(function DropdownMenuCheckboxItem2({ className, children, checked, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.DropdownMenu.CheckboxItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cx("orynn-menu__item", "orynn-menu__item--check", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-menu__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  );
+});
+var DropdownMenuRadioItem = /* @__PURE__ */ react.forwardRef(function DropdownMenuRadioItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.DropdownMenu.RadioItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-radio-item",
+      className: cx("orynn-menu__item", "orynn-menu__item--check", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-menu__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, { className: "orynn-menu__dot" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var DropdownMenuLabel = /* @__PURE__ */ react.forwardRef(
+  function DropdownMenuLabel2({ className, inset, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.DropdownMenu.Label,
+      {
+        ref,
+        "data-slot": "dropdown-menu-label",
+        "data-inset": inset || void 0,
+        className: cx("orynn-menu__label", className),
+        ...props
+      }
+    );
+  }
+);
+var DropdownMenuSeparator = /* @__PURE__ */ react.forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.DropdownMenu.Separator,
+    {
+      ref,
+      "data-slot": "dropdown-menu-separator",
+      className: cx("orynn-menu__separator", className),
+      ...props
+    }
+  );
+});
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cx("orynn-menu__shortcut", className),
+      ...props
+    }
+  );
 }
+var DropdownMenuSubTrigger = /* @__PURE__ */ react.forwardRef(function DropdownMenuSubTrigger2({ className, inset, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.DropdownMenu.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__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "orynn-menu__sub-chevron" })
+      ]
+    }
+  );
+});
+var DropdownMenuSubContent = /* @__PURE__ */ react.forwardRef(function DropdownMenuSubContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.DropdownMenu.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";
 
+// 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);
+  };
+}
+
+exports.Alert = Alert;
+exports.AlertDescription = AlertDescription;
+exports.AlertTitle = AlertTitle;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.DatePicker = DatePicker;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
 exports.Dropdown = Dropdown;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.FORM_ERROR_KEY = FORM_ERROR_KEY;
 exports.Field = Field;
 exports.FieldBox = FieldBox;
 exports.Fieldset = Fieldset;
+exports.FieldsetView = FieldsetView;
+exports.Form = Form;
 exports.Input = Input;
+exports.Label = Label;
 exports.NumberField = NumberField;
 exports.OrynnProvider = OrynnProvider;
+exports.Popover = Popover2;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverArrow = PopoverArrow;
+exports.PopoverClose = PopoverClose;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Dropdown;
+exports.Separator = Separator;
+exports.Switch = Switch;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
+exports.badgeClasses = badgeClasses;
+exports.builtInRules = builtInRules;
+exports.buttonClasses = buttonClasses;
 exports.createRegistry = createRegistry;
 exports.createRuleResolver = createRuleResolver;
 exports.defaultRegistry = defaultRegistry;
@@ -2715,7 +4885,9 @@ exports.normalizeConfig = normalizeConfig;
 exports.registerField = registerField;
 exports.registerRule = registerRule;
 exports.resolveThemeVars = resolveThemeVars;
+exports.standardSchemaResolver = standardSchemaResolver;
 exports.useFieldsetState = useFieldsetState;
 exports.useOrynnTheme = useOrynnTheme;
+exports.usePortalContainer = usePortalContainer;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map