orynn 0.1.0 → 0.5.0

package/dist/index.cjs

@@ -2,6 +2,8 @@
 
 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);
@@ -14,6 +16,171 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 function cx(...names) {
   return names.filter(Boolean).join(" ");
 }
+var base = (props) => ({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true,
+  focusable: false,
+  ...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 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" }) });
+var SpinnerIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base({ className: "orynn-spin", ...p }), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.2-8.6" }) });
+var EyeIcon = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base(p), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base(p), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.7 5.1A9.9 9.9 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.4 4.2M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20" })
+] });
+var CalendarIcon = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base(p), children: [
+  /* @__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.875rem",
+  // 14px
+  md: "1rem",
+  // 16px — shadcn size-4
+  lg: "1.125rem"
+  // 18px
+};
+var Checkbox = /* @__PURE__ */ react.forwardRef(
+  function Checkbox2(props, ref) {
+    const group = react.useContext(CheckboxGroupContext);
+    const {
+      label,
+      description,
+      checked: checkedProp,
+      defaultChecked,
+      indeterminate = false,
+      onChange,
+      value,
+      disabled: disabledProp,
+      readOnly,
+      required,
+      invalid,
+      size: sizeProp,
+      variant = "filled",
+      labelPlacement = "end",
+      card,
+      icon,
+      indeterminateIcon,
+      className,
+      id: idProp,
+      name: nameProp,
+      ...rest
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const innerRef = react.useRef(null);
+    const inGroup = group != null && value != null;
+    const groupChecked = inGroup ? group.value.includes(value) : void 0;
+    const isControlled = checkedProp !== void 0 || groupChecked !== void 0;
+    const checked = checkedProp ?? groupChecked ?? void 0;
+    const size = sizeProp ?? group?.size ?? "md";
+    const disabled = disabledProp || group?.disabled || inGroup && checked === true && group.isDisabledToUncheck(value) || inGroup && checked !== true && group.isDisabledToCheck(value) || false;
+    react.useEffect(() => {
+      if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const handleChange = (e) => {
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      const next = e.target.checked;
+      onChange?.(next, e);
+      if (inGroup) group.toggle(value, next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: cx(
+          "orynn-choice",
+          card && "orynn-choice--card",
+          variant === "outline" && "orynn-choice--outline",
+          labelPlacement === "start" && "orynn-choice--start",
+          className
+        ),
+        "data-disabled": disabled || void 0,
+        "data-invalid": invalid || void 0,
+        style: { "--orynn-check-size": sizePx[size] },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...rest,
+              ref: (n) => {
+                innerRef.current = n;
+                if (typeof ref === "function") ref(n);
+                else if (ref) ref.current = n;
+              },
+              type: "checkbox",
+              className: "orynn-choice__native",
+              id,
+              name: nameProp ?? group?.name,
+              value,
+              checked: isControlled ? Boolean(checked) : void 0,
+              defaultChecked: isControlled ? void 0 : defaultChecked,
+              disabled,
+              required,
+              "aria-invalid": invalid || void 0,
+              onChange: handleChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-choice__control orynn-choice__control--checkbox", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__mark orynn-choice__mark--check", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__mark orynn-choice__mark--dash", children: indeterminateIcon ?? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {}) })
+          ] }),
+          (label != null || description != null) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-choice__text", children: [
+            label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__label", children: label }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__desc", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+function useLatestRef(value) {
+  const ref = react.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/core/state/use-controllable-state.ts
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const isControlled = value !== void 0;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+  const current = isControlled ? value : uncontrolled;
+  const currentRef = useLatestRef(current);
+  const onChangeRef = useLatestRef(onChange);
+  const isControlledRef = useLatestRef(isControlled);
+  const setValue = react.useCallback((next) => {
+    const resolved = typeof next === "function" ? next(currentRef.current) : next;
+    if (Object.is(resolved, currentRef.current)) return;
+    if (!isControlledRef.current) setUncontrolled(resolved);
+    onChangeRef.current?.(resolved);
+  }, []);
+  return [current, setValue];
+}
 function toMessages(error) {
   if (error == null) return [];
   return (Array.isArray(error) ? error : [error]).filter((m) => Boolean(m));
@@ -23,147 +190,2707 @@ function joinIds(...ids) {
   return list.length > 0 ? list.join(" ") : void 0;
 }
 function Field(props) {
-  const { label, description, error, required, disabled, className, children } = props;
+  const { label, description, error, success, required, disabled, hideLabel, className, children } = props;
   const reactId = react.useId();
   const id = props.id ?? reactId;
   const messages = toMessages(error);
   const invalid = messages.length > 0;
+  const successMsg = !invalid && typeof success === "string" && success ? success : void 0;
+  const valid = !invalid && (success === true || Boolean(successMsg));
   const descriptionId = description != null ? `${id}-description` : void 0;
   const errorId = invalid ? `${id}-error` : void 0;
-  const describedById = joinIds(descriptionId, errorId);
-  const ctx = { id, describedById, invalid, required, disabled };
+  const successId = successMsg ? `${id}-success` : void 0;
+  const describedById = joinIds(descriptionId, errorId, successId);
+  const ctx = { id, describedById, invalid, valid, required, disabled };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cx("orynn-field", className),
       "data-invalid": invalid || void 0,
+      "data-valid": valid || void 0,
       "data-disabled": disabled || void 0,
       "data-required": required || void 0,
       children: [
-        label != null && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-field__label", htmlFor: id, children: label }),
+        label != null && !hideLabel && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-field__label", htmlFor: id, id: `${id}-label`, children: label }),
         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)) })
+        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__success", id: successId, children: successMsg })
       ]
     }
   );
 }
-var Dropdown = /* @__PURE__ */ react.forwardRef(
-  function Dropdown2(props, ref) {
-    const {
+function CheckboxGroup(props) {
+  const {
+    label,
+    description,
+    error,
+    success,
+    required,
+    disabled,
+    name: nameProp,
+    size,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    orientation = "vertical",
+    columns,
+    min,
+    max,
+    showSelectAll = false,
+    selectAllLabel = "Select all",
+    options,
+    children,
+    className,
+    id: idProp
+  } = props;
+  const reactId = react.useId();
+  const id = idProp ?? reactId;
+  const name = nameProp ?? id;
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? [],
+    onChange: void 0
+  });
+  const toggle = react.useCallback(
+    (v, next) => {
+      const set = new Set(value);
+      if (next) set.add(v);
+      else set.delete(v);
+      const arr = [...set];
+      setValue(arr);
+      onChange?.(arr);
+    },
+    [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,
+      value,
+      toggle,
+      disabled,
+      size,
+      isDisabledToUncheck: () => min != null && value.length <= min,
+      isDisabledToCheck: (v) => max != null && value.length >= max && !value.includes(v)
+    }),
+    [name, value, toggle, disabled, size, min, max]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
+    {
       label,
       description,
       error,
-      className,
-      options,
-      value,
-      onChange,
-      placeholder,
-      id,
+      success,
       required,
       disabled,
-      onBlur,
+      id,
+      className,
+      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": 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
+          ]
+        }
+      ) })
+    }
+  );
+}
+var FieldBox = /* @__PURE__ */ react.forwardRef(
+  function FieldBox2(props, ref) {
+    const {
+      size = "md",
+      variant = "outline",
+      radius,
+      disabled,
+      invalid,
+      valid,
+      focused,
+      active,
+      open,
+      floatingLabel,
+      left,
+      right,
+      addonBefore,
+      addonAfter,
+      textarea,
+      className,
+      children,
       onFocus,
+      onBlur,
       ...rest
     } = props;
-    const handleChange = react.useCallback(
-      (event) => onChange?.(event.target.value, event),
-      [onChange]
-    );
-    const controlled = value !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Field,
+    const [focusWithin, setFocusWithin] = react.useState(false);
+    const isFocused = focused ?? focusWithin;
+    const handleFocus = (e) => {
+      if (focused === void 0) setFocusWithin(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      if (focused === void 0 && !e.currentTarget.contains(e.relatedTarget)) {
+        setFocusWithin(false);
+      }
+      onBlur?.(e);
+    };
+    const hasAddon = addonBefore != null || addonAfter != null;
+    const box = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        label,
-        description,
-        error,
-        required,
-        disabled,
-        id,
-        className,
-        children: ({ id: fieldId, describedById, invalid }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
-          {
-            ...rest,
-            ref,
-            id: fieldId,
-            className: "orynn-dropdown",
-            required,
-            disabled,
-            "aria-invalid": invalid || void 0,
-            "aria-describedby": describedById,
-            ...controlled ? { value } : {},
-            onChange: handleChange,
-            onBlur,
-            onFocus,
-            children: [
-              placeholder != null && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: required, children: placeholder }),
-              options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
-            ]
-          }
-        )
+        ref,
+        className: cx(
+          "orynn-box",
+          floatingLabel != null && "orynn-box--floating",
+          textarea && "orynn-box--textarea",
+          className
+        ),
+        "data-size": size,
+        "data-variant": variant,
+        "data-radius": radius,
+        "data-disabled": disabled || void 0,
+        "data-invalid": invalid || void 0,
+        "data-valid": valid || void 0,
+        "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,
+        children: [
+          left != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment", children: left }),
+          children,
+          floatingLabel,
+          right != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment", children: right })
+        ]
       }
     );
+    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 })
+    ] });
   }
 );
-var Input = /* @__PURE__ */ react.forwardRef(
-  function Input2(props, ref) {
+
+// 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,
+  anchorRef,
+  onClose,
+  children,
+  matchWidth = true,
+  offset = 6,
+  maxHeight,
+  className,
+  popoverRef,
+  role,
+  id
+}) {
+  const innerRef = react.useRef(null);
+  const setRef = (el) => {
+    innerRef.current = el;
+    if (popoverRef) popoverRef.current = el;
+  };
+  const [pos, setPos] = react.useState(null);
+  const container = usePortalContainer();
+  useIsoLayoutEffect(() => {
+    if (!open) return;
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const update = () => {
+      const r = anchor.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const below = vh - r.bottom - offset;
+      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: maxHeight != null ? Math.min(maxHeight, avail) : avail
+      });
+    };
+    update();
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : void 0;
+    ro?.observe(anchor);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorRef, offset, maxHeight]);
+  react.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const t = e.target;
+      if (innerRef.current?.contains(t) || anchorRef.current?.contains(t)) return;
+      onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [open, anchorRef, onClose]);
+  if (!open || !pos || !container) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setRef,
+        id,
+        role,
+        className: cx("orynn-popover", className),
+        style: {
+          left: pos.left,
+          top: pos.top,
+          width: matchWidth ? pos.width : void 0,
+          minWidth: pos.width,
+          maxHeight: pos.maxHeight,
+          transform: pos.placement === "top" ? "translateY(-100%)" : void 0
+        },
+        children
+      }
+    ),
+    container
+  );
+}
+
+// src/controls/DatePicker/date-utils.ts
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var isSameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var addDays = (d, n) => {
+  const r = new Date(d);
+  r.setDate(r.getDate() + n);
+  return r;
+};
+var addMonths = (d, n) => {
+  const r = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const day = Math.min(d.getDate(), daysInMonth(r.getFullYear(), r.getMonth()));
+  r.setDate(day);
+  return r;
+};
+var daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var clampDate = (d, min, max) => {
+  if (min && d < startOfDay(min)) return startOfDay(min);
+  if (max && d > startOfDay(max)) return startOfDay(max);
+  return d;
+};
+var pad = (n, len2 = 2) => String(n).padStart(len2, "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 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) {
+  if (v == null) return null;
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : startOfDay(v);
+  const d = new Date(v);
+  return Number.isNaN(d.getTime()) ? null : startOfDay(d);
+}
+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);
+  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" });
+  return Array.from(
+    { length: 7 },
+    (_, 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;
+  date.setUTCDate(date.getUTCDate() - dayNum + 3);
+  const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4));
+  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,
+  firstDayOfWeek = 0,
+  locale,
+  showWeekNumbers,
+  showToday,
+  showClear,
+  onClear,
+  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 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) {
+      setNav({ y: value.getFullYear(), m: value.getMonth() });
+      setFocused(value);
+    }
+  }, [value]);
+  react.useEffect(() => {
+    if (autoFocus) {
+      gridRef.current?.querySelector('[data-focused="true"]')?.focus();
+    }
+  }, [autoFocus]);
+  const outOfRange = (d) => minDate != null && d < startOfDay(minDate) || maxDate != null && d > startOfDay(maxDate) || Boolean(isDisabled?.(d));
+  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 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 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",
+      {
+        className: "orynn-calendar__grid",
+        role: "grid",
+        "aria-label": monthName,
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true" }),
+            weekdays.map((w) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: w }, w))
+          ] }) }),
+          /* @__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() === pm;
+                const disabled = outOfRange(d);
+                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",
+                  {
+                    type: "button",
+                    className: "orynn-calendar__day",
+                    tabIndex: isFocused ? 0 : -1,
+                    "data-focused": isFocused || void 0,
+                    "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);
+                    },
+                    children: d.getDate()
+                  }
+                ) }, d.toISOString());
+              })
+            ] }, 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))
+      }
+    );
+  };
+  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(propsIn, ref) {
+    const props = propsIn;
     const {
       label,
       description,
       error,
-      className,
-      value,
-      onChange,
-      type = "text",
-      id,
+      success,
       required,
       disabled,
       readOnly,
-      onBlur,
-      onFocus,
-      ...rest
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      clearable,
+      onClear,
+      id: idProp,
+      name,
+      className,
+      mode = "single",
+      value: valueProp,
+      defaultValue,
+      onChange,
+      format = "yyyy-MM-dd",
+      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: closeOnSelectProp,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      placeholder
     } = props;
-    const handleChange = react.useCallback(
-      (event) => onChange?.(event.target.value, event),
-      [onChange]
+    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 [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 [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(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 closeAndRefocus = () => {
+      setOpen(false);
+      setGridFocus(false);
+      skipFocusOpen.current = true;
+      inputRef.current?.focus();
+    };
+    const select = (d) => {
+      if (isDisabledDate(d)) return;
+      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;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+        setGridFocus(true);
+      } else if (e.key === "Escape" && open) {
+        e.preventDefault();
+        setOpen(false);
+      } else if (e.key === "Enter" && mode === "single") {
+        const parsed = parseDate(text, fmt, locale);
+        if (parsed && !isDisabledDate(startOfDay(parsed))) select(parsed);
+      }
+    };
+    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: 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 && mode === "single",
+        showClear,
+        defaultView,
+        precision,
+        fixedWeeks,
+        numberOfMonths,
+        defaultMonth,
+        onClear: () => {
+          clearValue();
+          setOpen(false);
+        },
+        autoFocus: open && gridFocus || inline
+      }
     );
-    const controlled = value !== void 0;
+    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,
+        {
+          label,
+          description,
+          error,
+          success,
+          required,
+          disabled,
+          id,
+          className,
+          children: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-popover", style: { position: "static" }, children: cal })
+        }
+      );
+    }
+    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,
       {
         label,
         description,
         error,
+        success,
         required,
         disabled,
+        hideLabel: floatingLabel,
         id,
         className,
-        children: ({ id: fieldId, describedById, invalid }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ...rest,
-            ref,
-            id: fieldId,
-            className: "orynn-input",
-            type,
-            required,
-            disabled,
-            readOnly,
-            "aria-invalid": invalid || void 0,
-            "aria-describedby": describedById,
-            ...controlled ? { value } : {},
-            onChange: handleChange,
-            onBlur,
-            onFocus
-          }
-        )
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldBox,
+            {
+              ref: boxRef,
+              size,
+              variant,
+              radius,
+              disabled,
+              invalid,
+              valid,
+              open,
+              active: hasValue || text.length > 0,
+              floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
+              right: /* @__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: clearValue,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "orynn-box__iconbtn",
+                    "aria-label": "Open calendar",
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": open,
+                    disabled,
+                    onClick: () => {
+                      if (disabled || readOnly) return;
+                      setGridFocus(true);
+                      setOpen(!open);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {})
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: (n) => {
+                    inputRef.current = n;
+                    if (typeof ref === "function") ref(n);
+                    else if (ref)
+                      ref.current = n;
+                  },
+                  id,
+                  name,
+                  className: "orynn-box__field",
+                  type: "text",
+                  inputMode: typingAllowed ? "numeric" : void 0,
+                  autoComplete: "off",
+                  role: "combobox",
+                  "aria-expanded": open,
+                  "aria-controls": panelId,
+                  "aria-haspopup": "dialog",
+                  "aria-invalid": invalid || void 0,
+                  "aria-describedby": describedById,
+                  value: text,
+                  disabled,
+                  readOnly: !typingAllowed,
+                  required,
+                  placeholder: floatingLabel ? void 0 : placeholder ?? (typeof fmt === "string" ? fmt.toLowerCase() : void 0),
+                  onChange: (e) => setText(e.target.value),
+                  onKeyDown,
+                  onFocus: () => {
+                    if (skipFocusOpen.current) {
+                      skipFocusOpen.current = false;
+                      return;
+                    }
+                    setOpen(true);
+                  },
+                  onBlur: () => {
+                    if (mode !== "single") return;
+                    const parsed = parseDate(text, fmt, locale);
+                    if (parsed && !isDisabledDate(startOfDay(parsed))) {
+                      commit(startOfDay(parsed));
+                      setText(formatDate(startOfDay(parsed), fmt, locale));
+                    } else {
+                      setText(curDate ? formatDate(curDate, fmt, locale) : "");
+                    }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Popover,
+            {
+              open,
+              anchorRef: boxRef,
+              onClose: () => {
+                setOpen(false);
+                setGridFocus(false);
+              },
+              matchWidth: false,
+              id: panelId,
+              role: "dialog",
+              children: cal
+            }
+          )
+        ] })
       }
     );
   }
 );
-
-// src/internal/dev.ts
+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());
+  if (i < 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    text.slice(0, i),
+    /* @__PURE__ */ jsxRuntime.jsx("mark", { children: text.slice(i, i + query.length) }),
+    text.slice(i + query.length)
+  ] });
+}
+var Dropdown = /* @__PURE__ */ react.forwardRef(
+  function Dropdown2(props, ref) {
+    const {
+      label,
+      description,
+      error,
+      success,
+      required,
+      disabled,
+      readOnly,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      clearable,
+      onClear,
+      loading,
+      id: idProp,
+      name,
+      className,
+      options,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      multiple = false,
+      searchable = false,
+      filterMode = "contains",
+      filterFn,
+      highlightMatch,
+      renderOption,
+      renderValue,
+      renderGroupLabel,
+      placeholder,
+      emptyMessage = "No results",
+      loadingMessage = "Loading\u2026",
+      closeOnSelect = !multiple,
+      maxSelectedLabels,
+      maxValues,
+      hidePickedOptions = false,
+      showSelectAll = false,
+      native = false,
+      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 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 [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(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(() => {
+      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;
+      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 });
+      });
+      return out;
+    }, [selectableOptions]);
+    react.useEffect(() => {
+      setActiveIndex((i) => Math.min(Math.max(0, i), Math.max(0, selectableOptions.length - 1)));
+    }, [selectableOptions.length]);
+    react.useEffect(() => {
+      if (!open) setQuery("");
+    }, [open]);
+    const firstRelevantIndex = () => {
+      const sel = selectableOptions.findIndex((o) => selectedValues.includes(o.value));
+      return sel >= 0 ? sel : 0;
+    };
+    react.useEffect(() => {
+      if (!open) return;
+      const el = listRef.current?.querySelector('[data-active="true"]');
+      el?.scrollIntoView?.({ block: "nearest" });
+    }, [activeIndex, open]);
+    const openPanel = () => {
+      if (disabled || readOnly || open) return;
+      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]
+        );
+        setQuery("");
+      } else {
+        commit([opt.value]);
+      }
+      if (closeOnSelect) {
+        setOpen(false);
+        inputRef.current?.focus();
+      }
+    };
+    const clearAll = () => {
+      commit([]);
+      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) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!open) {
+            openPanel();
+            setActiveIndex(firstRelevantIndex());
+          } else {
+            setActiveIndex((i) => Math.min(selectableOptions.length - 1, i + 1));
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!open) {
+            openPanel();
+            setActiveIndex(firstRelevantIndex());
+          } else {
+            setActiveIndex((i) => Math.max(0, i - 1));
+          }
+          break;
+        case "Home":
+          if (open) {
+            e.preventDefault();
+            setActiveIndex(0);
+          }
+          break;
+        case "End":
+          if (open) {
+            e.preventDefault();
+            setActiveIndex(selectableOptions.length - 1);
+          }
+          break;
+        case "Enter":
+          if (open && selectableOptions[activeIndex]) {
+            e.preventDefault();
+            pick(selectableOptions[activeIndex]);
+          }
+          break;
+        case "Escape":
+          if (open) {
+            e.preventDefault();
+            setOpen(false);
+          }
+          break;
+        case " ":
+          if (!searchable) {
+            e.preventDefault();
+            if (!open) openPanel();
+            else if (selectableOptions[activeIndex]) pick(selectableOptions[activeIndex]);
+          }
+          break;
+        case "Backspace":
+          if (multiple && query === "" && selectedValues.length > 0) {
+            commit(selectedValues.slice(0, -1));
+          }
+          break;
+        case "Tab":
+          setOpen(false);
+          break;
+      }
+    };
+    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,
+        {
+          label,
+          description,
+          error,
+          success,
+          required,
+          disabled,
+          id,
+          className,
+          children: ({ describedById, invalid }) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id,
+              name,
+              className: "orynn-dropdown",
+              value: selectedValues[0] ?? "",
+              disabled,
+              required,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": describedById,
+              onChange: (e) => commit(e.target.value ? [e.target.value] : []),
+              children: [
+                placeholder != null && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: required, children: placeholder }),
+                baseOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+              ]
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Field,
+      {
+        label,
+        description,
+        error,
+        success,
+        required,
+        disabled,
+        hideLabel: floatingLabel,
+        id,
+        className,
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldBox,
+            {
+              ref: boxRef,
+              size,
+              variant,
+              radius,
+              disabled,
+              invalid,
+              valid,
+              open,
+              active: hasValue,
+              onClick: () => {
+                inputRef.current?.focus();
+                openPanel();
+              },
+              floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
+              right: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+                clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "orynn-box__iconbtn",
+                    "aria-label": "Clear",
+                    tabIndex: -1,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      clearAll();
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+                  }
+                ),
+                valid && !loading && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "orynn-icon-success" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "orynn-select__chevron" })
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-select__value", children: [
+                startContent,
+                multiple && selectedOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-select__chips", children: [
+                  (maxSelectedLabels ? selectedOptions.slice(0, maxSelectedLabels) : selectedOptions).map((o) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-select__chip", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: o.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Remove ${o.label}`,
+                        tabIndex: -1,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          commit(selectedValues.filter((v) => v !== o.value));
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+                      }
+                    )
+                  ] }, o.value)),
+                  maxSelectedLabels && selectedOptions.length > maxSelectedLabels && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-select__chip", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "+",
+                    selectedOptions.length - maxSelectedLabels
+                  ] }) })
+                ] }),
+                !multiple && hasValue && query === "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-select__single", children: renderValue ? renderValue(selectedOptions) : selectedOptions[0]?.label }),
+                !hasValue && !searchable && query === "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-select__value--placeholder orynn-select__single", children: floatingLabel ? "" : placeholder }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ...ref ? { ref: setRefs(ref, inputRef) } : { ref: inputRef },
+                    id,
+                    className: "orynn-select__search",
+                    role: "combobox",
+                    "aria-expanded": open,
+                    "aria-controls": listId,
+                    "aria-autocomplete": searchable ? "list" : "none",
+                    "aria-activedescendant": open && selectableOptions[activeIndex] ? `${id}-opt-${selectableOptions[activeIndex].value}` : void 0,
+                    "aria-invalid": invalid || void 0,
+                    "aria-describedby": describedById,
+                    autoComplete: "off",
+                    readOnly: !searchable || readOnly,
+                    disabled,
+                    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) => {
+                      setQuery(e.target.value);
+                      if (!open) setOpen(true);
+                    },
+                    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] ?? "" }))
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Popover,
+            {
+              open,
+              anchorRef: boxRef,
+              onClose: () => setOpen(false),
+              popoverRef: listRef,
+              maxHeight,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "orynn-listbox",
+                  id: listId,
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  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
+                      )
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+function setRefs(...refs) {
+  return (node) => {
+    for (const r of refs) {
+      if (typeof r === "function") r(node);
+      else if (r && typeof r === "object") r.current = node;
+    }
+  };
+}
+var Input = /* @__PURE__ */ react.forwardRef(
+  function Input2(props, ref) {
+    const {
+      label,
+      description,
+      error,
+      success,
+      required,
+      disabled,
+      readOnly,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      startContent,
+      endContent,
+      clearable,
+      onClear,
+      loading,
+      id: idProp,
+      name,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onEnter,
+      onKeyDown,
+      type = "text",
+      prefix,
+      suffix,
+      addonBefore,
+      addonAfter,
+      passwordToggle,
+      passwordVisible,
+      onPasswordVisibleChange,
+      visibilityToggleIcon,
+      showCount,
+      debounce,
+      maxLength,
+      placeholder,
+      ...rest
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue ?? "",
+      onChange: void 0
+    });
+    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);
+      emitChange(e.target.value, e);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") onEnter?.(value);
+      onKeyDown?.(e);
+    };
+    const clear = () => {
+      setValue("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Field,
+      {
+        label,
+        description,
+        error,
+        success,
+        required,
+        disabled,
+        hideLabel: floatingLabel,
+        id,
+        className,
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsx(
+          FieldBox,
+          {
+            size,
+            variant,
+            radius,
+            disabled,
+            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.jsx("span", { className: "orynn-box__adornment--affix", children: countNode }),
+              showClear && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "orynn-box__iconbtn",
+                  "aria-label": "Clear",
+                  tabIndex: -1,
+                  onClick: clear,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+                }
+              ),
+              showToggle && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "orynn-box__iconbtn",
+                  "aria-label": reveal ? "Hide" : "Show",
+                  "aria-pressed": reveal,
+                  tabIndex: -1,
+                  onClick: () => setReveal(!reveal),
+                  children: visibilityToggleIcon ? visibilityToggleIcon(reveal) : reveal ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
+                }
+              ),
+              loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+              endContent,
+              valid && !loading && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "orynn-icon-success" })
+            ] }),
+            floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...rest,
+                ref,
+                id,
+                name,
+                className: "orynn-box__field",
+                type: effectiveType,
+                value,
+                disabled,
+                readOnly,
+                required,
+                maxLength,
+                placeholder: floatingLabel ? void 0 : placeholder,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": describedById,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+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 {
+      label,
+      description,
+      error,
+      success,
+      required,
+      disabled,
+      readOnly,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      startContent,
+      endContent,
+      id: idProp,
+      name,
+      className,
+      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,
+      allowNegative = true,
+      clampBehavior,
+      clampOnBlur,
+      emptyValue = null,
+      allowMouseWheel,
+      isWheelDisabled,
+      stepHoldDelay = 300,
+      stepHoldInterval = 60,
+      placeholder,
+      ...rest
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue,
+      onChange: void 0
+    });
+    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 {
+        group: parts.find((p) => p.type === "group")?.value ?? ",",
+        decimal: parts.find((p) => p.type === "decimal")?.value ?? "."
+      };
+    }, [locale]);
+    const display = react.useCallback(
+      (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("");
+        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, "");
+        let n = Number(s);
+        if (Number.isNaN(n)) return null;
+        if (resolvedStyle === "percent" && !formatFn) n = n / 100;
+        return n;
+      },
+      [
+        parseFn,
+        prefix,
+        suffix,
+        seps,
+        thousandSeparator,
+        decimalSeparator,
+        allowNegative,
+        resolvedStyle,
+        formatFn
+      ]
+    );
+    const [text, setText] = react.useState(() => display(value));
+    const [editing, setEditing] = react.useState(false);
+    react.useEffect(() => {
+      if (!editing) setText(display(value));
+    }, [value, editing, display]);
+    const commit = (n) => {
+      setValue(n);
+      onChange?.(n);
+      onValueChange?.({ value: n, formatted: display(n) });
+    };
+    const setNumber = (n) => {
+      commit(n);
+      setText(display(n));
+    };
+    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 || !wheelEnabled) return;
+      const onWheel = (e) => {
+        if (document.activeElement !== el) return;
+        e.preventDefault();
+        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, mode);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        bump(-1, mode);
+      } else if (e.key === "PageUp") {
+        e.preventDefault();
+        bump(1, "l");
+      } else if (e.key === "PageDown") {
+        e.preventDefault();
+        bump(-1, "l");
+      } else if (e.key === "Home" && effMin != null) {
+        e.preventDefault();
+        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;
+      holdDelay.current = setTimeout(() => {
+        holdTimer.current = setInterval(() => {
+          count += 1;
+          bump(dir, count > 6 ? "l" : "n");
+        }, stepHoldInterval);
+      }, stepHoldDelay);
+    };
+    const stopHold = () => {
+      clearTimeout(holdDelay.current);
+      clearInterval(holdTimer.current);
+    };
+    react.useEffect(() => stopHold, []);
+    const StepButtons = showButtons && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `orynn-number__buttons${showButtons === "horizontal" ? " orynn-number__buttons--horizontal" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-number__btn",
+              "aria-label": "Increment",
+              tabIndex: -1,
+              disabled: disabled || readOnly || max != null && (value ?? 0) >= max,
+              onPointerDown: () => startHold(1),
+              onPointerUp: stopHold,
+              onPointerLeave: stopHold,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, { className: "orynn-number__caret" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-number__btn",
+              "aria-label": "Decrement",
+              tabIndex: -1,
+              disabled: disabled || readOnly || effMin != null && (value ?? 0) <= effMin,
+              onPointerDown: () => startHold(-1),
+              onPointerUp: stopHold,
+              onPointerLeave: stopHold,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "orynn-number__caret" })
+            }
+          )
+        ]
+      }
+    );
+    const hasValue = value != null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Field,
+      {
+        label,
+        description,
+        error,
+        success,
+        required,
+        disabled,
+        hideLabel: floatingLabel,
+        id,
+        className,
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsx(
+          FieldBox,
+          {
+            size,
+            variant,
+            radius,
+            disabled,
+            invalid,
+            valid,
+            active: hasValue,
+            left: startContent,
+            right: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              endContent,
+              StepButtons
+            ] }),
+            floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...rest,
+                ref: (n) => {
+                  innerRef.current = n;
+                  if (typeof ref === "function") ref(n);
+                  else if (ref) ref.current = n;
+                },
+                id,
+                name,
+                className: "orynn-box__field",
+                type: "text",
+                inputMode: "decimal",
+                role: "spinbutton",
+                "aria-valuenow": value ?? void 0,
+                "aria-valuemin": effMin,
+                "aria-valuemax": max,
+                value: text,
+                disabled,
+                readOnly,
+                required,
+                placeholder: floatingLabel ? void 0 : placeholder,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": describedById,
+                onFocus: () => setEditing(true),
+                onChange: (e) => {
+                  setText(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 ? emptyValue : round(clampMode !== "none" ? clamp(parsed, effMin, max) : parsed, scale);
+                  if (final !== value) commit(final);
+                  setText(display(final));
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var RadioGroupContext = react.createContext(null);
+var sizePx2 = { sm: "0.875rem", md: "1rem", lg: "1.125rem" };
+var Radio = /* @__PURE__ */ react.forwardRef(
+  function Radio2(props, ref) {
+    const group = react.useContext(RadioGroupContext);
+    const {
+      value,
+      label,
+      description,
+      disabled: disabledProp,
+      size: sizeProp,
+      card: cardProp,
+      labelPlacement = "end",
+      className,
+      id: idProp,
+      ...rest
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const checked = group ? group.value === value : void 0;
+    const disabled = disabledProp || group?.disabled || false;
+    const size = sizeProp ?? group?.size ?? "md";
+    const card = cardProp ?? group?.variant === "card";
+    const onChange = (e) => {
+      if (e.target.checked) group?.select(value);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: cx(
+          "orynn-choice",
+          card && "orynn-choice--card",
+          labelPlacement === "start" && "orynn-choice--start",
+          className
+        ),
+        "data-disabled": disabled || void 0,
+        style: { "--orynn-check-size": sizePx2[size] },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              type: "radio",
+              className: "orynn-choice__native",
+              id,
+              name: group?.name,
+              value,
+              checked: group ? checked : void 0,
+              disabled,
+              onChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__control orynn-choice__control--radio", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__mark orynn-choice__mark--dot" }) }),
+          (label != null || description != null) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-choice__text", children: [
+            label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__label", children: label }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-choice__desc", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+function RadioGroup(props) {
+  const {
+    label,
+    description,
+    error,
+    success,
+    required,
+    disabled,
+    name: nameProp,
+    size,
+    variant = "default",
+    value: valueProp,
+    defaultValue = null,
+    onChange,
+    orientation = "vertical",
+    columns,
+    options,
+    children,
+    className,
+    id: idProp
+  } = props;
+  const reactId = react.useId();
+  const id = idProp ?? reactId;
+  const name = nameProp ?? id;
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: void 0
+  });
+  const select = (v) => {
+    setValue(v);
+    onChange?.(v);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
+    {
+      label,
+      description,
+      error,
+      success,
+      required,
+      disabled,
+      id,
+      className,
+      children: () => /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { name, value, select, disabled, size, variant }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-labelledby": label != null ? `${id}-label` : void 0,
+          "aria-required": required || void 0,
+          className: "orynn-choice-group",
+          "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.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
+        }
+      ) })
+    }
+  );
+}
+var Textarea = /* @__PURE__ */ react.forwardRef(
+  function Textarea2(props, ref) {
+    const {
+      label,
+      description,
+      error,
+      success,
+      required,
+      disabled,
+      readOnly,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      clearable,
+      onClear,
+      loading,
+      endContent,
+      id: idProp,
+      name,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onEnter,
+      submitOnEnter,
+      onKeyDown,
+      autoResize,
+      minRows = 3,
+      maxRows = 10,
+      resize,
+      showCount,
+      maxLength,
+      placeholder,
+      ...rest
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue ?? "",
+      onChange: void 0
+    });
+    const innerRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => innerRef.current);
+    const resizeToFit = react.useCallback(() => {
+      const el = innerRef.current;
+      if (!el || !autoResize) return;
+      el.style.height = "auto";
+      const cs = getComputedStyle(el);
+      const line = Number.parseFloat(cs.lineHeight) || 20;
+      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]);
+    react.useLayoutEffect(resizeToFit, [value, resizeToFit]);
+    const handleChange = (e) => {
+      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,
+      {
+        label,
+        description,
+        error,
+        success,
+        required,
+        disabled,
+        hideLabel: floatingLabel,
+        id,
+        className,
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          FieldBox,
+          {
+            textarea: true,
+            size,
+            variant,
+            radius,
+            disabled,
+            invalid,
+            valid,
+            active: hasValue,
+            floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : 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",
+                {
+                  ...rest,
+                  ref: innerRef,
+                  id,
+                  name,
+                  className: "orynn-textarea",
+                  "data-resize": resize ?? (autoResize ? "none" : "vertical"),
+                  rows: minRows,
+                  value,
+                  disabled,
+                  readOnly,
+                  required,
+                  maxLength,
+                  placeholder: floatingLabel ? void 0 : placeholder,
+                  "aria-invalid": invalid || void 0,
+                  "aria-describedby": describedById,
+                  onChange: handleChange,
+                  onKeyDown: handleKeyDown
+                }
+              ),
+              showCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__footer", children: countNode })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/internal/dev.ts
 var __DEV__ = typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 function invariant(condition, message) {
   if (condition) return;
@@ -211,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),
@@ -262,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) {
@@ -287,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;
@@ -299,25 +3143,103 @@ var builtInRules = {
   maxLength: (value, param) => {
     if (typeof param !== "number" || isEmpty(value)) return null;
     return asLength(value) > param ? "maxLength" : null;
-  }
-};
-var registry = new Map(Object.entries(builtInRules));
-function registerRule(name, fn) {
-  registry.set(name, fn);
-}
-function getRule(name) {
-  return registry.get(name);
-}
-
-// src/core/validation/resolver.ts
-function createRuleResolver() {
-  return (values, config) => {
-    const result = {};
-    for (const field of config.fields) {
-      const validation = field.validation;
-      if (!validation) continue;
-      const value = values[field.name];
-      const errors = [];
+  },
+  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));
+function registerRule(name, fn) {
+  registry.set(name, fn);
+}
+function getRule(name) {
+  return registry.get(name);
+}
+
+// src/core/validation/resolver.ts
+function createRuleResolver() {
+  return (values, config) => {
+    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];
       for (const key of Object.keys(validation)) {
         if (key === "messages") continue;
         const param = validation[key];
@@ -329,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();
@@ -389,32 +3329,6 @@ function computeDirty(values, initial) {
   }
   return dirty;
 }
-function useLatestRef(value) {
-  const ref = react.useRef(value);
-  ref.current = value;
-  return ref;
-}
-
-// src/core/state/use-controllable-state.ts
-function useControllableState({
-  value,
-  defaultValue,
-  onChange
-}) {
-  const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
-  const current = isControlled ? value : uncontrolled;
-  const currentRef = useLatestRef(current);
-  const onChangeRef = useLatestRef(onChange);
-  const isControlledRef = useLatestRef(isControlled);
-  const setValue = react.useCallback((next) => {
-    const resolved = typeof next === "function" ? next(currentRef.current) : next;
-    if (Object.is(resolved, currentRef.current)) return;
-    if (!isControlledRef.current) setUncontrolled(resolved);
-    onChangeRef.current?.(resolved);
-  }, []);
-  return [current, setValue];
-}
 
 // src/core/state/use-fieldset-state.ts
 var NO_ERRORS = Object.freeze([]);
@@ -596,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 = () => {
 };
@@ -622,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;
@@ -631,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,
     {
@@ -663,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: "" });
-  }
-  if (!registry2.has("dropdown")) {
-    registry2.register("dropdown", {
-      component: DropdownControl,
-      defaultValue: "",
-      validateConfig: (config) => Array.isArray(config.options) ? null : "a dropdown field requires an `options` array"
-    });
+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 (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) {
@@ -780,37 +3945,938 @@ function Fieldset(props) {
     ...validateOn ? { validateOn } : {}
   };
   const fs = useFieldsetState(config, options);
-  const { columns, gap, legend, fields, id: configId } = fs.config;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldsetView,
+    {
+      state: fs,
+      registry: activeRegistry,
+      disabled: disabled === true,
+      className,
+      id
+    }
+  );
+}
+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(
-    "fieldset",
+    "form",
     {
-      className: cx("orynn-fieldset", className),
-      id: id ?? configId,
-      disabled: disabled || void 0,
+      ...rest,
+      className: cx("orynn-form", className),
+      noValidate: true,
+      onSubmit: fs.handleSubmit(
+        (values) => onSubmit(values, fs),
+        (errors) => onInvalid?.(errors)
+      ),
       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,
+        /* @__PURE__ */ jsxRuntime.jsx(FieldsetView, { state: fs, disabled }),
+        typeof children === "function" ? children(fs) : children
+      ]
+    }
+  );
+}
+
+// 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
+      ]
+    }
+  );
+});
+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 })
+      ]
+    }
+  );
+});
+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
+  };
+  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",
           {
-            field,
-            registry: activeRegistry,
-            slice: fs.getFieldProps(field.name),
-            disabled: disabled === true
+            type: "button",
+            className: "orynn-alert__dismiss",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
           }
-        ) }, field.name)) })
+        )
+      ]
+    }
+  );
+});
+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 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;
@@ -818,6 +4884,10 @@ exports.defaultResolver = defaultResolver;
 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