orynn 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -14,6 +15,167 @@ 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 PlusIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14" }) });
+var ChevronDownIcon = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base(p), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
+var 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 CheckboxGroupContext = react.createContext(null);
+var sizePx = {
+  sm: "0.95rem",
+  md: "1.125rem",
+  lg: "1.35rem"
+};
+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,139 +185,1826 @@ 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__error",
+            id: successId,
+            style: { color: "var(--orynn-color-success)" },
+            children: successMsg
+          }
+        )
       ]
     }
   );
 }
+function CheckboxGroup(props) {
+  const {
+    label,
+    description,
+    error,
+    success,
+    required,
+    disabled,
+    name: nameProp,
+    size,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    orientation = "vertical",
+    min,
+    max,
+    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 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,
+      success,
+      required,
+      disabled,
+      id,
+      className,
+      children: () => /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "group",
+          "aria-labelledby": label != null ? `${id}-label` : void 0,
+          className: cx("orynn-choice-group"),
+          "data-orientation": orientation,
+          children: options ? options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              value: o.value,
+              label: o.label,
+              description: o.description,
+              disabled: o.disabled
+            },
+            o.value
+          )) : children
+        }
+      ) })
+    }
+  );
+}
+var FieldBox = /* @__PURE__ */ react.forwardRef(
+  function FieldBox2(props, ref) {
+    const {
+      size = "md",
+      variant = "outline",
+      radius,
+      disabled,
+      invalid,
+      valid,
+      focused,
+      active,
+      open,
+      floatingLabel,
+      left,
+      right,
+      textarea,
+      className,
+      children,
+      onFocus,
+      onBlur,
+      ...rest
+    } = props;
+    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);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        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,
+        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 })
+        ]
+      }
+    );
+  }
+);
+var useIsoLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function Popover({
+  open,
+  anchorRef,
+  onClose,
+  children,
+  matchWidth = true,
+  offset = 6,
+  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);
+  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;
+      setPos({
+        left: r.left,
+        top: placeTop ? r.top - offset : r.bottom + offset,
+        width: r.width,
+        placement: placeTop ? "top" : "bottom",
+        maxHeight: Math.max(140, (placeTop ? above : below) - 4)
+      });
+    };
+    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]);
+  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 || typeof document === "undefined" || !pos) 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
+      }
+    ),
+    document.body
+  );
+}
+
+// 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");
+function formatDate(d, fmt, locale) {
+  const monthLong = new Intl.DateTimeFormat(locale, { month: "long" }).format(d);
+  const monthShort = new Intl.DateTimeFormat(locale, { month: "short" }).format(d);
+  return fmt.replace(/yyyy/g, String(d.getFullYear())).replace(/MMMM/g, monthLong).replace(/MMM/g, monthShort).replace(/MM/g, pad(d.getMonth() + 1)).replace(/dd/g, pad(d.getDate())).replace(/\bM\b/g, String(d.getMonth() + 1)).replace(/\bd\b/g, String(d.getDate()));
+}
+function parseDate(input, fmt) {
+  const nums = input.match(/\d+/g);
+  if (!nums) return null;
+  const order = (fmt.match(/yyyy|MM|dd|M|d/g) ?? ["yyyy", "MM", "dd"]).map((t) => t[0]);
+  let y;
+  let m;
+  let dd;
+  order.forEach((t, i) => {
+    const n = Number(nums[i]);
+    if (Number.isNaN(n)) return;
+    if (t === "y") y = n < 100 ? 2e3 + n : n;
+    else if (t === "M") m = n - 1;
+    else if (t === "d") dd = n;
+  });
+  if (y == null || m == null || dd == null) return null;
+  const d = new Date(y, m, dd);
+  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) {
+  const first = new Date(viewYear, viewMonth, 1);
+  const offset = (first.getDay() - firstDayOfWeek + 7) % 7;
+  const start = addDays(first, -offset);
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+}
+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 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));
+}
+function Calendar({
+  value,
+  onSelect,
+  minDate,
+  maxDate,
+  isDisabled,
+  firstDayOfWeek = 0,
+  locale,
+  showWeekNumbers,
+  showToday,
+  showClear,
+  onClear,
+  autoFocus
+}) {
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const initial = value ?? clampDate(today, minDate, maxDate);
+  const [view, setView] = react.useState({ y: initial.getFullYear(), m: initial.getMonth() });
+  const [focused, setFocused] = react.useState(initial);
+  const gridRef = react.useRef(null);
+  react.useEffect(() => {
+    if (value) {
+      setView({ y: value.getFullYear(), m: value.getMonth() });
+      setFocused(value);
+    }
+  }, [value]);
+  react.useEffect(() => {
+    if (autoFocus) {
+      gridRef.current?.querySelector('[data-focused="true"]')?.focus();
+    }
+  }, [autoFocus]);
+  const cells = monthMatrix(view.y, view.m, firstDayOfWeek);
+  const weekdays = weekdayLabels(firstDayOfWeek, locale);
+  const monthName = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
+    new Date(view.y, view.m, 1)
+  );
+  const outOfRange = (d) => minDate != null && d < startOfDay(minDate) || maxDate != null && d > startOfDay(maxDate) || Boolean(isDisabled?.(d));
+  const goto = (d) => {
+    const c = clampDate(d, minDate, maxDate);
+    setFocused(c);
+    setView({ y: c.getFullYear(), m: c.getMonth() });
+    requestAnimationFrame(() => {
+      gridRef.current?.querySelector('[data-focused="true"]')?.focus();
+    });
+  };
+  const onKeyDown = (e) => {
+    const k = e.key;
+    let next = null;
+    if (k === "ArrowLeft") next = addDays(focused, -1);
+    else if (k === "ArrowRight") next = addDays(focused, 1);
+    else if (k === "ArrowUp") next = addDays(focused, -7);
+    else if (k === "ArrowDown") next = addDays(focused, 7);
+    else if (k === "Home") next = addDays(focused, -((focused.getDay() - firstDayOfWeek + 7) % 7));
+    else if (k === "End")
+      next = addDays(focused, 6 - (focused.getDay() - firstDayOfWeek + 7) % 7);
+    else if (k === "PageUp") next = addMonths(focused, e.shiftKey ? -12 : -1);
+    else if (k === "PageDown") next = addMonths(focused, e.shiftKey ? 12 : 1);
+    else if (k === "Enter" || k === " ") {
+      e.preventDefault();
+      if (!outOfRange(focused)) onSelect(focused);
+      return;
+    } else return;
+    e.preventDefault();
+    goto(next);
+  };
+  const years = [];
+  const minY = minDate ? minDate.getFullYear() : view.y - 10;
+  const maxY = maxDate ? maxDate.getFullYear() : view.y + 10;
+  for (let y = minY; y <= maxY; y += 1) years.push(y);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "orynn-calendar__nav",
+          "aria-label": "Previous month",
+          onClick: () => setView((v) => ({ y: v.m === 0 ? v.y - 1 : v.y, m: (v.m + 11) % 12 })),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-calendar__title", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: "orynn-calendar__select",
+            "aria-label": "Month",
+            value: view.m,
+            onChange: (e) => setView((v) => ({ ...v, m: Number(e.target.value) })),
+            children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i, children: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2023, i, 1)) }, i))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: "orynn-calendar__select",
+            "aria-label": "Year",
+            value: view.y,
+            onChange: (e) => setView((v) => ({ ...v, y: Number(e.target.value) })),
+            children: years.map((y) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: y, children: y }, y))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "orynn-calendar__nav",
+          "aria-label": "Next month",
+          onClick: () => setView((v) => ({ y: v.m === 11 ? v.y + 1 : v.y, m: (v.m + 1) % 12 })),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+        }
+      )
+    ] }),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        ref: gridRef,
+        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", { children: Array.from({ length: 6 }, (_, week) => {
+            const row = cells.slice(week * 7, week * 7 + 7);
+            const firstOfRow = row[0];
+            return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "orynn-calendar__weeknum", children: isoWeek(firstOfRow) }),
+              row.map((d) => {
+                const inMonth = d.getMonth() === view.m;
+                const disabled = outOfRange(d);
+                const selected = isSameDay(d, value);
+                const isFocused = isSameDay(d, focused);
+                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,
+                    disabled,
+                    "aria-label": new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(
+                      d
+                    ),
+                    onClick: () => {
+                      setFocused(d);
+                      onSelect(d);
+                    },
+                    children: d.getDate()
+                  }
+                ) }, d.toISOString());
+              })
+            ] }, firstOfRow.toISOString());
+          }) })
+        ]
+      }
+    ),
+    (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" })
+    ] })
+  ] });
+}
+var DatePicker = /* @__PURE__ */ react.forwardRef(
+  function DatePicker2(props, ref) {
+    const {
+      label,
+      description,
+      error,
+      success,
+      required,
+      disabled,
+      readOnly,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      clearable,
+      onClear,
+      id: idProp,
+      name,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      format = "yyyy-MM-dd",
+      minDate,
+      maxDate,
+      disabledDates,
+      firstDayOfWeek = 0,
+      locale,
+      showWeekNumbers,
+      showToday = true,
+      showClear,
+      inline = false,
+      allowInput = true,
+      closeOnSelect = true,
+      placeholder
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const panelId = `${id}-cal`;
+    const isControlled = valueProp !== void 0;
+    const [inner, setInner] = react.useState(() => toDate(defaultValue));
+    const value = isControlled ? toDate(valueProp) : inner;
+    const [open, setOpen] = react.useState(false);
+    const [gridFocus, setGridFocus] = react.useState(false);
+    const [text, setText] = react.useState(() => value ? formatDate(value, format, locale) : "");
+    const boxRef = react.useRef(null);
+    const inputRef = react.useRef(null);
+    react.useEffect(() => {
+      setText(value ? formatDate(value, format, locale) : "");
+    }, [value, format, locale]);
+    const isDisabledDate = (d) => {
+      if (Array.isArray(disabledDates))
+        return disabledDates.some((x) => isSameDay(startOfDay(x), d));
+      return Boolean(disabledDates?.(d));
+    };
+    const commit = (d) => {
+      if (!isControlled) setInner(d);
+      onChange?.(d);
+    };
+    const select = (d) => {
+      if (isDisabledDate(d)) return;
+      commit(startOfDay(d));
+      if (closeOnSelect) {
+        setOpen(false);
+        inputRef.current?.focus();
+      }
+    };
+    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") {
+        const parsed = parseDate(text, format);
+        if (parsed && !isDisabledDate(startOfDay(parsed))) select(parsed);
+      }
+    };
+    const cal = /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        value,
+        onSelect: select,
+        minDate,
+        maxDate,
+        isDisabled: isDisabledDate,
+        firstDayOfWeek,
+        locale,
+        showWeekNumbers,
+        showToday,
+        showClear,
+        onClear: () => {
+          commit(null);
+          setOpen(false);
+        },
+        autoFocus: open && gridFocus || inline
+      }
+    );
+    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 = value != null;
+    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 || 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: () => {
+                      commit(null);
+                      onClear?.();
+                    },
+                    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((o) => !o);
+                    },
+                    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: "numeric",
+                  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: !allowInput || readOnly,
+                  required,
+                  placeholder: floatingLabel ? void 0 : placeholder ?? format.toLowerCase(),
+                  onChange: (e) => setText(e.target.value),
+                  onKeyDown,
+                  onFocus: () => setOpen(true),
+                  onBlur: () => {
+                    const parsed = parseDate(text, format);
+                    if (parsed && !isDisabledDate(startOfDay(parsed))) {
+                      commit(startOfDay(parsed));
+                      setText(formatDate(startOfDay(parsed), format, locale));
+                    } else {
+                      setText(value ? formatDate(value, format, locale) : "");
+                    }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Popover,
+            {
+              open,
+              anchorRef: boxRef,
+              onClose: () => {
+                setOpen(false);
+                setGridFocus(false);
+              },
+              matchWidth: false,
+              id: panelId,
+              role: "dialog",
+              children: cal
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var toArray = (v) => v == null ? [] : Array.isArray(v) ? v : [v];
+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,
+      value: valueProp,
+      defaultValue,
       onChange,
+      multiple = false,
+      searchable = false,
+      filterMode = "contains",
+      filterFn,
+      highlightMatch,
+      renderOption,
+      renderValue,
       placeholder,
-      id,
+      emptyMessage = "No results",
+      closeOnSelect = !multiple,
+      maxSelectedLabels,
+      native = false,
+      startContent
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const listId = `${id}-listbox`;
+    const isControlled = valueProp !== void 0;
+    const [inner, setInner] = react.useState(() => toArray(defaultValue));
+    const selectedValues = isControlled ? toArray(valueProp) : inner;
+    const commit = (next) => {
+      if (!isControlled) setInner(next);
+      onChange?.(multiple ? next : next[0] ?? null);
+    };
+    const [open, setOpen] = react.useState(false);
+    const [query, setQuery] = react.useState("");
+    const [activeIndex, setActiveIndex] = react.useState(0);
+    const boxRef = react.useRef(null);
+    const inputRef = react.useRef(null);
+    const listRef = react.useRef(null);
+    const byValue = react.useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
+    const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
+    const filtered = react.useMemo(() => {
+      if (!searchable || !query) return options;
+      const q = query.toLowerCase();
+      const match = filterFn ?? ((o) => filterMode === "startsWith" ? o.label.toLowerCase().startsWith(q) : o.label.toLowerCase().includes(q));
+      return options.filter((o) => match(o, query));
+    }, [options, searchable, query, filterMode, filterFn]);
+    const rows = react.useMemo(() => {
+      const out = [];
+      let seenGroup;
+      let optionIndex = 0;
+      for (const o of filtered) {
+        if (o.group && o.group !== seenGroup) {
+          seenGroup = o.group;
+          out.push({ type: "group", label: o.group });
+        }
+        out.push({ type: "option", option: o, optionIndex });
+        optionIndex += 1;
+      }
+      return out;
+    }, [filtered]);
+    const selectableOptions = filtered;
+    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 pick = (opt) => {
+      if (opt.disabled) return;
+      if (multiple) {
+        const has = selectedValues.includes(opt.value);
+        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 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;
+    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 }),
+                options.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,
+                    name,
+                    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: !hasValue && (searchable || !floatingLabel) ? placeholder : void 0,
+                    value: query,
+                    size: 1,
+                    onChange: (e) => {
+                      setQuery(e.target.value);
+                      if (!open) setOpen(true);
+                    },
+                    onKeyDown,
+                    onFocus: openPanel
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Popover,
+            {
+              open,
+              anchorRef: boxRef,
+              onClose: () => setOpen(false),
+              popoverRef: listRef,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "orynn-listbox",
+                  id: listId,
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  children: selectableOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__empty", children: emptyMessage }) : rows.map(
+                    (row) => row.type === "group" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-listbox__group", children: row.label }, `g-${row.label}`) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        id: `${id}-opt-${row.option.value}`,
+                        role: "option",
+                        "aria-selected": selectedValues.includes(row.option.value),
+                        "aria-disabled": row.option.disabled || void 0,
+                        className: "orynn-option",
+                        "data-active": row.optionIndex === activeIndex || void 0,
+                        "data-selected": selectedValues.includes(row.option.value) || void 0,
+                        "data-disabled": row.option.disabled || void 0,
+                        onMouseEnter: () => setActiveIndex(row.optionIndex),
+                        onClick: () => pick(row.option),
+                        children: renderOption ? renderOption(row.option, {
+                          selected: selectedValues.includes(row.option.value),
+                          active: row.optionIndex === activeIndex,
+                          disabled: Boolean(row.option.disabled),
+                          query
+                        }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          row.option.icon,
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-option__body", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__label", children: doHighlight ? /* @__PURE__ */ jsxRuntime.jsx(Highlight, { text: row.option.label, query }) : row.option.label }),
+                            row.option.description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-option__desc", children: row.option.description })
+                          ] }),
+                          selectedValues.includes(row.option.value) && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "orynn-option__check" })
+                        ] })
+                      },
+                      row.option.value
+                    )
+                  )
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+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,
-      onBlur,
-      onFocus,
+      readOnly,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      startContent,
+      endContent,
+      clearable,
+      onClear,
+      loading,
+      id: idProp,
+      name,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onEnter,
+      onKeyDown,
+      type = "text",
+      prefix,
+      suffix,
+      passwordToggle,
+      showCount,
+      maxLength,
+      placeholder,
       ...rest
     } = props;
-    const handleChange = react.useCallback(
-      (event) => onChange?.(event.target.value, event),
-      [onChange]
-    );
-    const controlled = value !== void 0;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue ?? "",
+      onChange: void 0
+    });
+    const [reveal, setReveal] = react.useState(false);
+    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 handleChange = (e) => {
+      setValue(e.target.value);
+      onChange?.(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: ({ id: fieldId, describedById, invalid }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsx(
+          FieldBox,
           {
-            ...rest,
-            ref,
-            id: fieldId,
-            className: "orynn-dropdown",
-            required,
+            size,
+            variant,
+            radius,
             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))
-            ]
+            invalid,
+            valid,
+            active: hasValue,
+            left: startContent != null || prefix != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              startContent,
+              prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment--affix", children: prefix })
+            ] }) : void 0,
+            right: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-box__adornment--affix", children: suffix }),
+              showCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-box__adornment--affix", children: [
+                value.length,
+                maxLength ? `/${maxLength}` : ""
+              ] }),
+              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((v) => !v),
+                  children: 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 Input = /* @__PURE__ */ react.forwardRef(
-  function Input2(props, ref) {
+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 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,
+      value: valueProp,
+      defaultValue = null,
       onChange,
-      type = "text",
+      min,
+      max,
+      step = 1,
+      shiftStep,
+      precision,
+      buttons = "stacked",
+      grouping,
+      locale,
+      currency,
+      prefix,
+      suffix,
+      clampOnBlur = true,
+      allowMouseWheel,
+      placeholder,
+      ...rest
+    } = props;
+    const reactId = react.useId();
+    const id = idProp ?? reactId;
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue,
+      onChange: void 0
+    });
+    const fmt = react.useMemo(
+      () => new Intl.NumberFormat(locale, {
+        ...currency ? { style: "currency", currency } : {},
+        useGrouping: grouping ?? Boolean(currency),
+        maximumFractionDigits: precision ?? (currency ? 2 : 20),
+        minimumFractionDigits: currency ? 2 : 0
+      }),
+      [locale, currency, grouping, precision]
+    );
+    const 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) => n == null || Number.isNaN(n) ? "" : `${prefix ?? ""}${fmt.format(n)}${suffix ?? ""}`,
+      [fmt, prefix, suffix]
+    );
+    const parse = react.useCallback(
+      (raw) => {
+        let s = raw;
+        if (prefix) s = s.split(prefix).join("");
+        if (suffix) s = s.split(suffix).join("");
+        s = s.split(seps.group).join("").split(seps.decimal).join(".");
+        s = s.replace(/[^\d.\-]/g, "");
+        if (s === "" || s === "-" || s === ".") return null;
+        const first = s.indexOf(".");
+        if (first !== -1) s = s.slice(0, first + 1) + s.slice(first + 1).replace(/\./g, "");
+        const n = Number(s);
+        return Number.isNaN(n) ? null : n;
+      },
+      [prefix, suffix, seps]
+    );
+    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);
+    };
+    const setNumber = (n) => {
+      commit(n);
+      setText(display(n));
+    };
+    const bump = (dir, big = false) => {
+      const delta = (big ? shiftStep ?? step * 10 : step) * dir;
+      const base2 = value ?? (dir > 0 ? min ?? 0 : max ?? 0);
+      setNumber(round(clamp(base2 + delta, min, max), precision));
+    };
+    const innerRef = react.useRef(null);
+    react.useEffect(() => {
+      const el = innerRef.current;
+      if (!el || !allowMouseWheel) return;
+      const onWheel = (e) => {
+        if (document.activeElement !== el) return;
+        e.preventDefault();
+        bump(e.deltaY < 0 ? 1 : -1, e.shiftKey);
+      };
+      el.addEventListener("wheel", onWheel, { passive: false });
+      return () => el.removeEventListener("wheel", onWheel);
+    });
+    const onKeyDown = (e) => {
+      if (disabled || readOnly) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        bump(1, e.shiftKey);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        bump(-1, e.shiftKey);
+      } else if (e.key === "PageUp") {
+        e.preventDefault();
+        bump(1, true);
+      } else if (e.key === "PageDown") {
+        e.preventDefault();
+        bump(-1, true);
+      } else if (e.key === "Home" && min != null) {
+        e.preventDefault();
+        setNumber(min);
+      } else if (e.key === "End" && max != null) {
+        e.preventDefault();
+        setNumber(max);
+      }
+    };
+    const holdTimer = react.useRef();
+    const startHold = (dir) => {
+      bump(dir);
+      let count = 0;
+      holdTimer.current = setInterval(() => {
+        count += 1;
+        bump(dir, count > 6);
+      }, 110);
+    };
+    const stopHold = () => clearInterval(holdTimer.current);
+    react.useEffect(() => () => clearInterval(holdTimer.current), []);
+    const StepButtons = buttons && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `orynn-number__buttons${buttons === "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(PlusIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "orynn-number__btn",
+              "aria-label": "Decrement",
+              tabIndex: -1,
+              disabled: disabled || readOnly || min != null && (value ?? 0) <= min,
+              onPointerDown: () => startHold(-1),
+              onPointerUp: stopHold,
+              onPointerLeave: stopHold,
+              children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {})
+            }
+          )
+        ]
+      }
+    );
+    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": min,
+                "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);
+                  commit(parse(e.target.value));
+                },
+                onKeyDown,
+                onBlur: () => {
+                  setEditing(false);
+                  const parsed = parse(text);
+                  const final = parsed == null ? null : round(clampOnBlur ? clamp(parsed, min, max) : parsed, precision);
+                  if (final !== value) commit(final);
+                  setText(display(final));
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var RadioGroupContext = react.createContext(null);
+var sizePx2 = { sm: "0.95rem", md: "1.125rem", lg: "1.35rem" };
+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",
+    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": orientation,
+          children: options ? options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+            Radio,
+            {
+              value: o.value,
+              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,
-      onBlur,
-      onFocus,
+      size,
+      variant,
+      radius,
+      floatingLabel,
+      clearable,
+      onClear,
+      id: idProp,
+      name,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      autoResize,
+      minRows = 3,
+      maxRows = 10,
+      resize,
+      showCount,
+      maxLength,
+      placeholder,
       ...rest
     } = props;
-    const handleChange = react.useCallback(
-      (event) => onChange?.(event.target.value, event),
-      [onChange]
-    );
-    const controlled = value !== void 0;
+    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 pad2 = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+      const min = line * minRows + pad2;
+      const max = line * maxRows + pad2;
+      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 hasValue = value.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Field,
       {
         label,
         description,
         error,
+        success,
         required,
         disabled,
+        hideLabel: floatingLabel,
         id,
         className,
-        children: ({ id: fieldId, describedById, invalid }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+        children: ({ describedById, invalid, valid }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          FieldBox,
           {
-            ...rest,
-            ref,
-            id: fieldId,
-            className: "orynn-input",
-            type,
-            required,
+            textarea: true,
+            size,
+            variant,
+            radius,
             disabled,
-            readOnly,
-            "aria-invalid": invalid || void 0,
-            "aria-describedby": describedById,
-            ...controlled ? { value } : {},
-            onChange: handleChange,
-            onBlur,
-            onFocus
+            invalid,
+            valid,
+            active: hasValue,
+            floatingLabel: floatingLabel ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "orynn-box__label", htmlFor: id, children: label }) : void 0,
+            right: clearable && hasValue && !disabled && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "orynn-box__iconbtn",
+                "aria-label": "Clear",
+                tabIndex: -1,
+                onClick: () => {
+                  setValue("");
+                  onClear?.();
+                },
+                children: "\u2715"
+              }
+            ) : void 0,
+            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
+                }
+              ),
+              showCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "orynn-box__footer", children: [
+                value.length,
+                maxLength ? `/${maxLength}` : ""
+              ] })
+            ]
           }
         )
       }
@@ -389,32 +2238,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([]);
@@ -803,14 +2626,87 @@ function Fieldset(props) {
   );
 }
 
+// src/theme/theme.ts
+var RADIUS_KEYWORDS = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "pill"]);
+var len = (v) => typeof v === "number" ? `${v}px` : v;
+function contrastFor(color) {
+  const m = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(color.trim());
+  if (!m?.[1]) return "#ffffff";
+  const hex = m[1].length === 3 ? m[1].replace(/./g, "$&$&") : m[1];
+  const n = Number.parseInt(hex, 16);
+  const toLin = (v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const lum = 0.2126 * toLin(n >> 16 & 255) + 0.7152 * toLin(n >> 8 & 255) + 0.0722 * toLin(n & 255);
+  return lum > 0.42 ? "#0b0d12" : "#ffffff";
+}
+function normalizeTheme(input) {
+  return typeof input === "string" ? { preset: input } : input ?? {};
+}
+function resolveThemeVars(config) {
+  const vars = {};
+  if (config.accent) {
+    vars["--orynn-color-accent"] = config.accent;
+    vars["--orynn-color-accent-hover"] = `color-mix(in srgb, ${config.accent} 86%, #000)`;
+    vars["--orynn-color-accent-contrast"] = config.accentContrast ?? contrastFor(config.accent);
+  }
+  if (config.ring) vars["--orynn-color-focus-ring"] = config.ring;
+  if (config.font) vars["--orynn-font-family"] = config.font;
+  if (config.fontSize != null) vars["--orynn-font-size"] = len(config.fontSize);
+  if (config.controlWidth != null) vars["--orynn-control-width"] = len(config.controlWidth);
+  if (config.radius != null) {
+    const r = config.radius;
+    if (r === "md") vars["--orynn-radius"] = "10px";
+    else if (typeof r === "string" && RADIUS_KEYWORDS.has(r))
+      vars["--orynn-radius"] = `var(--orynn-radius-${r})`;
+    else vars["--orynn-radius"] = len(r);
+  }
+  Object.assign(vars, config.vars ?? {});
+  return vars;
+}
+var OrynnContext = react.createContext({
+  preset: "default",
+  density: "comfortable",
+  config: {}
+});
+function OrynnProvider({ theme, as = "div", className, children }) {
+  const config = react.useMemo(() => normalizeTheme(theme), [theme]);
+  const preset = config.preset ?? "default";
+  const density = config.density ?? "comfortable";
+  const style = react.useMemo(() => resolveThemeVars(config), [config]);
+  const ctx = react.useMemo(
+    () => ({ preset, density, config }),
+    [preset, density, config]
+  );
+  const dataProps = {
+    "data-orynn-theme": preset === "default" ? void 0 : preset,
+    "data-orynn-density": density === "comfortable" ? void 0 : density
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(OrynnContext.Provider, { value: ctx, children: as === "contents" ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "contents" }, ...dataProps, children }) : as === "span" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("orynn-root", className), style, ...dataProps, children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("orynn-root", className), style, ...dataProps, children }) });
+}
+function useOrynnTheme() {
+  return react.useContext(OrynnContext);
+}
+
 // src/types/validation.ts
 var FORM_ERROR_KEY = "$form";
 
+exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
+exports.DatePicker = DatePicker;
 exports.Dropdown = Dropdown;
 exports.FORM_ERROR_KEY = FORM_ERROR_KEY;
 exports.Field = Field;
+exports.FieldBox = FieldBox;
 exports.Fieldset = Fieldset;
 exports.Input = Input;
+exports.NumberField = NumberField;
+exports.OrynnProvider = OrynnProvider;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.Select = Dropdown;
+exports.Textarea = Textarea;
 exports.createRegistry = createRegistry;
 exports.createRuleResolver = createRuleResolver;
 exports.defaultRegistry = defaultRegistry;
@@ -818,6 +2714,8 @@ exports.defaultResolver = defaultResolver;
 exports.normalizeConfig = normalizeConfig;
 exports.registerField = registerField;
 exports.registerRule = registerRule;
+exports.resolveThemeVars = resolveThemeVars;
 exports.useFieldsetState = useFieldsetState;
+exports.useOrynnTheme = useOrynnTheme;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map