@oods/components-react 0.3.0

package/dist/chunk-A4T7OOIY.js

@@ -0,0 +1,1191 @@
+import { getStatusPresentation, getToneTokenSet, resolveStatusGlyph, getBannerToneTokenSet } from './chunk-G74PKSW3.js';
+import { dateTimeInputValue, currencyMinorUnits, formatDateTime, formatReadOnlyValue } from '@oods/component-contracts';
+import * as React3 from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+
+var classes = (...values) => values.filter(Boolean).join(" ");
+var describedByIds = (id, help, validation, nativeDescription) => [
+  nativeDescription,
+  help ? `${id}-description` : void 0,
+  validation?.message ? validation.id ?? `${id}-validation` : void 0
+].filter(Boolean).join(" ") || void 0;
+var RequiredIndicator = ({
+  required,
+  children
+}) => required && children !== null ? children ?? /* @__PURE__ */ jsx("span", { className: "oods-field-required form-field__required-indicator", "aria-hidden": "true", children: "*" }) : null;
+var FieldFrame = ({
+  id,
+  label,
+  help,
+  description,
+  validation,
+  density = "comfortable",
+  required,
+  requiredIndicator,
+  checkboxControl,
+  className,
+  style,
+  children
+}) => {
+  const resolvedHelp = help ?? description;
+  const validationTone = validation?.state === "error" ? "critical" : validation?.state === "warning" ? "warning" : validation?.state;
+  const validationTokens = validationTone ? getToneTokenSet(validationTone) : void 0;
+  const validationStyle = validationTokens ? {
+    "--cmp-input-message-border": validationTokens.border,
+    "--cmp-input-message-text": validationTokens.foreground,
+    "--form-field-border": validationTokens.border,
+    "--form-field-border-active": validationTokens.border,
+    "--form-field-background-active": validationTokens.background,
+    "--form-field-validation-color": validationTokens.foreground,
+    "--form-field-focus-inner": validationTokens.border,
+    "--form-field-focus-outer": validationTokens.background,
+    "--form-field-accent": validationTokens.foreground
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes(
+        "oods-field",
+        "form-field",
+        checkboxControl !== void 0 && "oods-checkbox",
+        className
+      ),
+      style: { ...validationStyle, ...style },
+      "data-density": density,
+      "data-validation-state": validation?.state,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "form-field__label",
+            htmlFor: id,
+            children: [
+              checkboxControl,
+              /* @__PURE__ */ jsx("span", { className: "oods-field-label", children: label }),
+              /* @__PURE__ */ jsx(RequiredIndicator, { required, children: requiredIndicator })
+            ]
+          }
+        ),
+        checkboxControl === void 0 ? /* @__PURE__ */ jsx("div", { className: "form-field__control", children }) : null,
+        resolvedHelp ? /* @__PURE__ */ jsx("p", { id: `${id}-description`, className: "oods-field-help form-field__description", children: resolvedHelp }) : null,
+        validation?.message ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: validation.id ?? `${id}-validation`,
+            className: "oods-field-error form-field__validation",
+            role: validation.state === "error" ? "alert" : "status",
+            "aria-live": validation.state === "error" ? "assertive" : "polite",
+            "data-state": validation.state,
+            children: validation.message
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var InputPrimitive = React3.forwardRef(
+  ({
+    id,
+    label,
+    help,
+    description,
+    validation,
+    density,
+    requiredIndicator,
+    className,
+    style,
+    inputClassName,
+    inputStyle,
+    onChange,
+    onInput,
+    onValueChange,
+    onUpdate,
+    required,
+    "aria-describedby": nativeDescription,
+    type = "text",
+    ...rest
+  }, ref) => {
+    if (type === "datetime-local") {
+      if (rest.value !== void 0) rest.value = dateTimeInputValue(rest.value);
+      if (rest.defaultValue !== void 0) rest.defaultValue = dateTimeInputValue(rest.defaultValue);
+    }
+    const resolvedHelp = help ?? description;
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        onValueChange?.(event.currentTarget.value);
+        onUpdate?.(event.currentTarget.value);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      FieldFrame,
+      {
+        id,
+        label,
+        help: resolvedHelp,
+        validation,
+        density,
+        required,
+        requiredIndicator,
+        className,
+        style,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id,
+            type,
+            className: classes("oods-field-control", "form-field__input", inputClassName),
+            style: inputStyle,
+            "data-oods-component": "Input",
+            "data-validation-state": validation?.state,
+            "aria-describedby": describedByIds(id, resolvedHelp, validation, nativeDescription),
+            "aria-invalid": validation?.state === "error" || void 0,
+            required,
+            onInput,
+            onChange: handleChange,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "OODS.Input";
+var Input = InputPrimitive;
+var DatePicker = React3.forwardRef(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      type: "date",
+      "data-oods-component": "DatePicker",
+      inputClassName: classes("form-field__date-picker", inputClassName, pickerClassName),
+      inputStyle: { ...inputStyle, ...pickerStyle },
+      ...rest
+    }
+  )
+);
+DatePicker.displayName = "OODS.DatePicker";
+var Checkbox = React3.forwardRef(
+  ({
+    id,
+    label,
+    help,
+    description,
+    validation,
+    density,
+    requiredIndicator,
+    className,
+    style,
+    checkboxClassName,
+    checkboxStyle,
+    onChange,
+    onCheckedChange,
+    onUpdate,
+    required,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const resolvedHelp = help ?? description;
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        onCheckedChange?.(event.currentTarget.checked);
+        onUpdate?.(event.currentTarget.checked);
+      }
+    };
+    const control = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id,
+        type: "checkbox",
+        className: classes("form-field__checkbox", checkboxClassName),
+        style: checkboxStyle,
+        "data-oods-component": "Checkbox",
+        "data-validation-state": validation?.state,
+        "aria-describedby": describedByIds(id, resolvedHelp, validation, nativeDescription),
+        "aria-invalid": validation?.state === "error" || void 0,
+        required,
+        onChange: handleChange,
+        ...rest
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      FieldFrame,
+      {
+        id,
+        label,
+        help: resolvedHelp,
+        validation,
+        density,
+        required,
+        requiredIndicator,
+        checkboxControl: control,
+        className,
+        style
+      }
+    );
+  }
+);
+Checkbox.displayName = "OODS.Checkbox";
+var Select = React3.forwardRef(
+  ({
+    id,
+    label,
+    help,
+    description,
+    validation,
+    density,
+    requiredIndicator,
+    className,
+    style,
+    options,
+    placeholder,
+    selectClassName,
+    selectStyle,
+    onChange,
+    onValueChange,
+    onUpdate,
+    children,
+    required,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const resolvedHelp = help ?? description;
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        onValueChange?.(event.currentTarget.value);
+        onUpdate?.(event.currentTarget.value);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      FieldFrame,
+      {
+        id,
+        label,
+        help: resolvedHelp,
+        validation,
+        density,
+        required,
+        requiredIndicator,
+        className,
+        style,
+        children: /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            id,
+            className: classes("oods-field-control", "form-field__select", selectClassName),
+            style: selectStyle,
+            "data-oods-component": "Select",
+            "data-validation-state": validation?.state,
+            "aria-describedby": describedByIds(id, resolvedHelp, validation, nativeDescription),
+            "aria-invalid": validation?.state === "error" || void 0,
+            required,
+            onChange: handleChange,
+            ...rest,
+            children: [
+              placeholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+              children ?? options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Select.displayName = "OODS.Select";
+var Textarea = React3.forwardRef(
+  ({
+    id,
+    label,
+    help,
+    description,
+    validation,
+    density,
+    requiredIndicator,
+    className,
+    style,
+    textareaClassName,
+    textareaStyle,
+    onChange,
+    onInput,
+    onValueChange,
+    onUpdate,
+    rows = 4,
+    required,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const resolvedHelp = help ?? description;
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        onValueChange?.(event.currentTarget.value);
+        onUpdate?.(event.currentTarget.value);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      FieldFrame,
+      {
+        id,
+        label,
+        help: resolvedHelp,
+        validation,
+        density,
+        required,
+        requiredIndicator,
+        className,
+        style,
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            id,
+            className: classes(
+              "oods-field-control",
+              "form-field__input",
+              "form-field__textarea",
+              textareaClassName
+            ),
+            style: textareaStyle,
+            "data-oods-component": "Textarea",
+            "data-validation-state": validation?.state,
+            "aria-describedby": describedByIds(id, resolvedHelp, validation, nativeDescription),
+            "aria-invalid": validation?.state === "error" || void 0,
+            rows,
+            required,
+            onInput,
+            onChange: handleChange,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+Textarea.displayName = "OODS.Textarea";
+var classes2 = (...values) => values.filter(Boolean).join(" ");
+var Badge = React3.forwardRef(
+  ({
+    content,
+    status,
+    domain = "subscription",
+    tone: toneOverride,
+    emphasis = "subtle",
+    icon,
+    iconPosition = "start",
+    showIcon,
+    children,
+    className,
+    style,
+    title,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const presentation = status ? getStatusPresentation(domain, status) : void 0;
+    const tone = toneOverride ?? presentation?.tone ?? "neutral";
+    const tokenSet = toneOverride !== void 0 ? getToneTokenSet(tone) : emphasis === "solid" ? presentation?.badge.solid ?? getToneTokenSet(tone) : presentation?.badge.subtle ?? getToneTokenSet(tone);
+    const resolvedContent = children ?? content ?? presentation?.label ?? status;
+    const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
+    const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-badge__icon statusable-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: classes2("oods-badge", "statusable-badge", className),
+        "data-oods-component": "Badge",
+        "data-status": status,
+        "data-domain": domain,
+        "data-tone": tone,
+        "data-emphasis": emphasis,
+        title: title ?? presentation?.description,
+        "aria-label": ariaLabel,
+        style: {
+          "--cmp-badge-background": tokenSet.background,
+          "--cmp-badge-border": tokenSet.border,
+          "--cmp-badge-text": tokenSet.foreground,
+          "--statusable-badge-background": tokenSet.background,
+          "--statusable-badge-border": tokenSet.border,
+          "--statusable-badge-foreground": tokenSet.foreground,
+          "--statusable-badge-icon-color": tokenSet.foreground,
+          ...style
+        },
+        ...rest,
+        children: [
+          iconPosition === "start" ? iconNode : null,
+          /* @__PURE__ */ jsx("span", { className: "oods-badge__label statusable-badge__label", children: resolvedContent }),
+          iconPosition === "end" ? iconNode : null
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "OODS.Badge";
+var Banner = React3.forwardRef(
+  ({
+    title,
+    detail,
+    description,
+    content,
+    status,
+    domain = "subscription",
+    tone: toneOverride,
+    emphasis = "subtle",
+    icon,
+    actions,
+    onDismiss,
+    dismissLabel = "Dismiss notification",
+    showIcon,
+    children,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const presentation = status ? getStatusPresentation(domain, status) : void 0;
+    const tone = toneOverride ?? presentation?.tone ?? "neutral";
+    const tokenSet = emphasis === "solid" ? presentation?.banner.solid ?? getToneTokenSet(tone) : presentation?.banner.subtle ?? getBannerToneTokenSet(tone);
+    const heading = title ?? presentation?.label ?? status;
+    const body = detail ?? description ?? children ?? content ?? presentation?.description;
+    const role = tone === "critical" || tone === "danger" ? "alert" : "status";
+    const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
+    const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role,
+        "aria-live": role === "alert" ? "assertive" : "polite",
+        className: classes2("oods-banner", "statusable-banner", className),
+        "data-oods-component": "Banner",
+        "data-status": status,
+        "data-domain": domain,
+        "data-tone": tone,
+        "data-emphasis": emphasis,
+        style: {
+          "--cmp-banner-background": tokenSet.background,
+          "--cmp-banner-border": tokenSet.border,
+          "--cmp-banner-text": tokenSet.foreground,
+          "--statusable-banner-background": tokenSet.background,
+          "--statusable-banner-border": tokenSet.border,
+          "--statusable-banner-foreground": tokenSet.foreground,
+          "--statusable-banner-icon-color": tokenSet.foreground,
+          ...style
+        },
+        ...rest,
+        children: [
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-banner__icon statusable-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "oods-banner__content statusable-banner__content", children: [
+            heading ? /* @__PURE__ */ jsx("strong", { className: "oods-banner__title statusable-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsx("p", { className: "oods-banner__detail statusable-banner__description", children: body }) : null,
+            actions ? /* @__PURE__ */ jsx("div", { className: "oods-banner__actions statusable-banner__actions", children: actions }) : null
+          ] }),
+          onDismiss ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              "aria-label": dismissLabel,
+              onClick: () => onDismiss(),
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "OODS.Banner";
+var Button = React3.forwardRef(
+  ({
+    asChild = false,
+    content,
+    children,
+    className,
+    intent = "neutral",
+    size = "md",
+    style,
+    type,
+    onClick,
+    onActivate,
+    ...rest
+  }, ref) => {
+    const Component = asChild ? Slot : "button";
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) onActivate?.(event);
+    };
+    const nativeProps = asChild ? {} : { type: type ?? "button" };
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: classes2("oods-button", className),
+        "data-oods-component": "Button",
+        "data-intent": intent,
+        "data-size": size,
+        style: {
+          "--cmp-button-background": "var(--sys-surface-interactive-primary-default)",
+          "--cmp-button-background-hover": "var(--sys-surface-interactive-primary-hover)",
+          "--cmp-button-background-disabled": "var(--sys-surface-disabled)",
+          "--cmp-button-border": "var(--sys-border-subtle)",
+          "--cmp-button-text": "var(--sys-text-on-interactive)",
+          "--cmp-button-text-disabled": "var(--sys-text-disabled)",
+          ...style
+        },
+        onClick: handleClick,
+        ...nativeProps,
+        ...rest,
+        children: children ?? content
+      }
+    );
+  }
+);
+Button.displayName = "OODS.Button";
+var Card = React3.forwardRef(
+  ({ as = "div", elevated = false, className, ...rest }, ref) => {
+    const Element = as;
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        ref,
+        className: classes2("oods-card", className),
+        "data-oods-component": "Card",
+        "data-elevated": elevated ? "true" : "false",
+        ...rest
+      }
+    );
+  }
+);
+Card.displayName = "OODS.Card";
+var Text = React3.forwardRef(
+  ({
+    as = "span",
+    content,
+    children,
+    label,
+    size = "md",
+    weight = "regular",
+    className,
+    "aria-description": ariaDescription,
+    ...rest
+  }, ref) => {
+    const Element = as;
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        ref,
+        className: classes2("oods-text", className),
+        "data-oods-component": "Text",
+        "data-size": size,
+        "data-weight": weight,
+        "aria-description": ariaDescription ?? label,
+        ...rest,
+        children: children ?? content
+      }
+    );
+  }
+);
+Text.displayName = "OODS.Text";
+var classes3 = (...values) => values.filter(Boolean).join(" ");
+var humanize = (value) => value.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
+var StatusBadge = React3.forwardRef(
+  ({
+    status,
+    value,
+    label,
+    children,
+    content,
+    domain = "subscription",
+    tone,
+    emphasis = "subtle",
+    showIcon = true,
+    field,
+    statusField,
+    domainField,
+    readOnly,
+    compact,
+    variant,
+    title,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const resolvedStatus = status ?? value ?? "unknown";
+    const presentation = getStatusPresentation(domain, resolvedStatus);
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        status: resolvedStatus,
+        domain,
+        tone: tone === "lifecycle" ? void 0 : tone,
+        emphasis: variant === "solid" ? "solid" : emphasis,
+        showIcon,
+        content: children ?? content,
+        title: title ?? presentation.description,
+        "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        "data-oods-component": "StatusBadge",
+        ...rest
+      }
+    );
+  }
+);
+StatusBadge.displayName = "OODS.StatusBadge";
+function formatPrice(amount, currency, fallback) {
+  if (amount === void 0 || !Number.isFinite(amount)) return fallback;
+  if (!currency) return new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(amount);
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount);
+  } catch {
+    return `${currency.toUpperCase()} ${amount.toFixed(2)}`;
+  }
+}
+var PriceBadge = React3.forwardRef(
+  ({
+    amountCents,
+    unitAmountCents,
+    minorUnits,
+    amount,
+    unitAmount,
+    currency,
+    currencyCode,
+    label,
+    value,
+    children,
+    emphasis = "subtle",
+    field,
+    amountField,
+    currencyField,
+    intervalField,
+    minorUnitsParameter,
+    className,
+    ...rest
+  }, ref) => {
+    const cents = amountCents ?? unitAmountCents;
+    const resolvedCurrency = currency ?? currencyCode;
+    const resolvedAmount = cents === void 0 ? amount ?? unitAmount : cents / currencyMinorUnits(resolvedCurrency, minorUnits);
+    const content = label ?? children ?? formatPrice(resolvedAmount, resolvedCurrency, value ?? "Price");
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        content,
+        emphasis,
+        className: classes3("oods-price-badge", className),
+        "data-oods-component": "PriceBadge",
+        "data-badge-variant": "price",
+        "data-price": "true",
+        "data-currency": resolvedCurrency?.toUpperCase(),
+        ...rest
+      }
+    );
+  }
+);
+PriceBadge.displayName = "OODS.PriceBadge";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function eventText(record, keys) {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean") return String(value);
+  }
+  return void 0;
+}
+function normalizeTimelineEvents(values) {
+  return values.flatMap((value, index) => {
+    if (!isRecord(value)) {
+      return value === void 0 || value === null ? [] : [{ label: String(value) }];
+    }
+    const from = eventText(value, ["from"]);
+    const to = eventText(value, ["to"]);
+    return [{
+      id: eventText(value, ["id"]) ?? `event-${index}`,
+      label: eventText(value, ["label", "title"]) ?? (eventText(value, ["event", "status", "state"]) ? humanize(eventText(value, ["event", "status", "state"])) : void 0) ?? eventText(value, ["text", "name"]) ?? (to ? from ? `${humanize(from)} \u2192 ${humanize(to)}` : humanize(to) : void 0) ?? "Event",
+      from,
+      to,
+      status: eventText(value, ["status"]),
+      state: eventText(value, ["state"]),
+      timestamp: eventText(value, ["timestamp", "datetime", "time", "at", "createdAt", "updatedAt"]),
+      actor: eventText(value, ["actorId", "actor_id", "actor"]),
+      actorId: eventText(value, ["actorId", "actor_id"]),
+      reason: eventText(value, ["reason"]),
+      detail: eventText(value, ["detail", "description", "message"]) ?? (to ? from ? `${humanize(from)} \u2192 ${humanize(to)}` : humanize(to) : void 0)
+    }];
+  });
+}
+var TimelinePrimitive = React3.forwardRef(
+  ({
+    componentId,
+    defaultTitle,
+    kind,
+    source,
+    title = defaultTitle,
+    events,
+    history,
+    entries,
+    stateHistory,
+    status,
+    allowedTransitions,
+    showActorId = true,
+    showReason = true,
+    maxVisible,
+    children,
+    field,
+    historyField,
+    statesParameter,
+    auditLogField,
+    createdField,
+    updatedField,
+    eventField,
+    eventTimestampField,
+    eventOptionsParameter,
+    showFromState,
+    className,
+    ...rest
+  }, ref) => {
+    const allEvents = normalizeTimelineEvents(source ?? events ?? history ?? entries ?? stateHistory ?? []);
+    const visibleEvents = Number.isFinite(maxVisible) ? allEvents.slice(0, Math.max(0, Math.floor(maxVisible ?? 0))) : allEvents;
+    const transitionCount = allowedTransitions?.length ?? 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "log",
+        "aria-label": typeof title === "string" ? title : defaultTitle,
+        className: classes3("oods-timeline", `oods-${kind}-timeline`, className),
+        "data-oods-component": componentId,
+        "data-timeline-type": kind,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("h2", { className: "oods-timeline__title", children: title }),
+          kind === "status" && status ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__current", "data-timeline-current": "true", children: [
+            "Current status: ",
+            humanize(status)
+          ] }) : null,
+          transitionCount > 0 ? /* @__PURE__ */ jsxs("p", { children: [
+            "Allowed transitions: ",
+            allowedTransitions?.join(", ")
+          ] }) : null,
+          children ?? /* @__PURE__ */ jsx("ol", { className: "oods-timeline__events", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
+            const timestamp = event.timestamp ?? event.datetime;
+            const actor = event.actor ?? event.actorId ?? event.actor_id;
+            const eventLabel = event.label ?? event.title ?? (event.from && event.to ? `${humanize(event.from)} \u2192 ${humanize(event.to)}` : void 0) ?? (event.status ? humanize(event.status) : void 0) ?? (event.state ? humanize(event.state) : void 0) ?? "Event";
+            const detail = event.detail ?? event.description;
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("article", { className: "oods-timeline__event", "data-timeline-event": "true", children: [
+              /* @__PURE__ */ jsx("p", { className: "oods-timeline__label", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsx("time", { dateTime: timestamp, children: formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsx("p", { className: "oods-timeline__detail", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__actor", children: [
+                "Actor: ",
+                actor
+              ] }) : null,
+              showReason && event.reason ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__reason", children: [
+                "Reason: ",
+                event.reason
+              ] }) : null
+            ] }) }, event.id ?? `${timestamp ?? "event"}-${index}`);
+          }) })
+        ]
+      }
+    );
+  }
+);
+TimelinePrimitive.displayName = "OODS.TimelinePrimitive";
+var StatusTimeline = React3.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(
+    TimelinePrimitive,
+    {
+      ref,
+      componentId: "StatusTimeline",
+      defaultTitle: "Status Timeline",
+      kind: "status",
+      ...props
+    }
+  )
+);
+StatusTimeline.displayName = "OODS.StatusTimeline";
+var AuditTimeline = React3.forwardRef(
+  ({ auditLog, ...props }, ref) => /* @__PURE__ */ jsx(
+    TimelinePrimitive,
+    {
+      ref,
+      componentId: "AuditTimeline",
+      defaultTitle: "Audit Timeline",
+      kind: "audit",
+      source: auditLog,
+      ...props
+    }
+  )
+);
+AuditTimeline.displayName = "OODS.AuditTimeline";
+var CancellationSummary = React3.forwardRef(
+  ({
+    label,
+    title = label ?? "Cancellation Summary",
+    cancelAtPeriodEnd,
+    requestedAt,
+    reason,
+    code,
+    children,
+    field,
+    cancelAtPeriodEndField,
+    requestedAtField,
+    reasonField,
+    codeField,
+    className,
+    ...rest
+  }, ref) => {
+    const childValue = typeof children === "boolean" ? children ? "Yes" : "No" : children;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: classes3("oods-cancellation-summary", className),
+        "data-oods-component": "CancellationSummary",
+        "data-summary-type": "cancellation",
+        "data-cancellation-state": cancelAtPeriodEnd === void 0 ? void 0 : String(cancelAtPeriodEnd),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("h2", { children: title }),
+          /* @__PURE__ */ jsxs("dl", { children: [
+            cancelAtPeriodEnd !== void 0 ? /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+              /* @__PURE__ */ jsx("dt", { children: "Cancel at period end" }),
+              /* @__PURE__ */ jsx("dd", { children: cancelAtPeriodEnd ? "Yes" : "No" })
+            ] }) : null,
+            requestedAt ? /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+              /* @__PURE__ */ jsx("dt", { children: "Requested at" }),
+              /* @__PURE__ */ jsx("dd", { children: formatDateTime(requestedAt) })
+            ] }) : null,
+            reason ? /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+              /* @__PURE__ */ jsx("dt", { children: "Reason" }),
+              /* @__PURE__ */ jsx("dd", { children: reason })
+            ] }) : null,
+            code ? /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+              /* @__PURE__ */ jsx("dt", { children: "Code" }),
+              /* @__PURE__ */ jsx("dd", { children: formatReadOnlyValue(code, "string", true) })
+            ] }) : null,
+            childValue !== void 0 && childValue !== null ? /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+              /* @__PURE__ */ jsx("dt", { children: label ?? "Cancellation" }),
+              /* @__PURE__ */ jsx("dd", { children: childValue })
+            ] }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+CancellationSummary.displayName = "OODS.CancellationSummary";
+var SearchInput = React3.forwardRef(
+  ({
+    id,
+    label = "Search",
+    value,
+    defaultValue = "",
+    placeholder = "Search\u2026",
+    clearable = true,
+    debounceMs,
+    debounce,
+    minQueryLength = 0,
+    field,
+    placeholderParameter,
+    debounceParameter,
+    minQueryLengthParameter,
+    clearableParameter,
+    disabled,
+    className,
+    onChange,
+    onValueChange,
+    onUpdate,
+    onSearch,
+    onClear,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const generatedId = React3.useId();
+    const resolvedId = id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
+    const [uncontrolledValue, setUncontrolledValue] = React3.useState(defaultValue);
+    const currentValue = value ?? uncontrolledValue;
+    const timerRef = React3.useRef(void 0);
+    const delay = Math.max(0, debounceMs ?? debounce ?? 0);
+    React3.useEffect(() => () => {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    }, []);
+    const publish = (nextValue) => {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+      const emit = () => {
+        if (nextValue.length >= minQueryLength || nextValue.length === 0) {
+          onValueChange?.(nextValue);
+          onUpdate?.(nextValue);
+          onSearch?.(nextValue);
+        }
+      };
+      if (delay === 0) emit();
+      else timerRef.current = setTimeout(emit, delay);
+    };
+    const updateValue = (nextValue) => {
+      if (value === void 0) setUncontrolledValue(nextValue);
+      publish(nextValue);
+    };
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) updateValue(event.currentTarget.value);
+    };
+    const clear = () => {
+      onClear?.();
+      updateValue("");
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "search",
+        "aria-label": label,
+        className: classes3("oods-search-input", className),
+        "data-oods-component": "SearchInput",
+        "data-behavioral": "search",
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...rest,
+              ref,
+              id: resolvedId,
+              type: "search",
+              label,
+              placeholder,
+              value: currentValue,
+              disabled,
+              inputClassName: "oods-search-input__control",
+              onChange: handleChange,
+              onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if (!event.defaultPrevented && event.key === "Escape" && currentValue) clear();
+              }
+            }
+          ),
+          clearable && currentValue ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "oods-search-input__clear",
+              "aria-label": "Clear search",
+              disabled,
+              onClick: clear,
+              children: "\xD7"
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+SearchInput.displayName = "OODS.SearchInput";
+function visiblePages(page, totalPages) {
+  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, index) => index + 1);
+  const candidates = /* @__PURE__ */ new Set([1, totalPages, page - 1, page, page + 1]);
+  const pages = [...candidates].filter((candidate) => candidate >= 1 && candidate <= totalPages).sort((a, b) => a - b);
+  const result = [];
+  for (const candidate of pages) {
+    const previous = result[result.length - 1];
+    if (typeof previous === "number" && candidate - previous > 1) result.push("ellipsis");
+    result.push(candidate);
+  }
+  return result;
+}
+var PaginationBar = React3.forwardRef(
+  ({
+    page = 1,
+    pageSize = 25,
+    totalItems = 0,
+    totalPages: suppliedTotalPages,
+    pageSizeOptions = [10, 25, 50, 100],
+    showPageSizeSelector = false,
+    showGotoPage = false,
+    showItemRange = true,
+    pageField,
+    pageSizeField,
+    totalItemsField,
+    totalPagesField,
+    pageSizeOptionsParameter,
+    showPageSizeSelectorParameter,
+    showGotoPageParameter,
+    showItemRangeParameter,
+    onPageChange,
+    onPageSizeChange,
+    onChange,
+    onUpdate,
+    className,
+    "aria-label": ariaLabel = "Pagination",
+    ...rest
+  }, ref) => {
+    const safePageSize = Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : 25;
+    const derivedTotalPages = safePageSize > 0 ? Math.ceil(Math.max(0, totalItems) / safePageSize) : 0;
+    const totalPages = Math.max(0, Math.floor(suppliedTotalPages ?? derivedTotalPages));
+    const currentPage = totalPages > 0 ? Math.max(1, Math.min(Math.floor(page), totalPages)) : 1;
+    const goToPage = (nextPage) => {
+      if (totalPages === 0) return;
+      const target = Math.max(1, Math.min(Math.floor(nextPage), totalPages));
+      if (target === currentPage) return;
+      onPageChange?.(target);
+      onChange?.(target);
+      onUpdate?.(target);
+    };
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: classes3("oods-pagination-bar", className),
+        "data-oods-component": "PaginationBar",
+        "data-behavioral": "pagination",
+        ...rest,
+        children: [
+          showItemRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "data-pagination-count": "true", children: `${totalItems} ${totalItems === 1 ? "record" : "records"}` }),
+            totalItems > 0 && totalPages > 1 && /* @__PURE__ */ jsx("span", { "data-pagination-range": "true", children: `Showing ${(currentPage - 1) * safePageSize + 1}\u2013${Math.min(currentPage * safePageSize, totalItems)} of ${totalItems}` })
+          ] }) : null,
+          totalPages > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous page",
+                "data-pagination-prev": "true",
+                disabled: totalPages === 0 || currentPage <= 1,
+                onClick: () => goToPage(currentPage - 1),
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx("ol", { className: "oods-pagination-bar__pages", children: visiblePages(currentPage, totalPages).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("li", { "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Page ${item}`,
+                "aria-current": item === currentPage ? "page" : void 0,
+                "data-pagination-page": item,
+                onClick: () => goToPage(item),
+                children: item
+              }
+            ) }, item)) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next page",
+                "data-pagination-next": "true",
+                disabled: totalPages === 0 || currentPage >= totalPages,
+                onClick: () => goToPage(currentPage + 1),
+                children: "\u203A"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "data-pagination-current": "true", children: `Page ${currentPage} of ${Math.max(1, totalPages)}` })
+          ] }) : null,
+          showPageSizeSelector ? /* @__PURE__ */ jsxs("label", { children: [
+            "Items per page",
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                "aria-label": "Items per page",
+                value: safePageSize,
+                onChange: (event) => onPageSizeChange?.(Number(event.currentTarget.value)),
+                children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+              }
+            )
+          ] }) : null,
+          showGotoPage ? /* @__PURE__ */ jsxs("label", { children: [
+            "Go to page",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: Math.max(1, totalPages),
+                defaultValue: currentPage,
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") goToPage(Number(event.currentTarget.value));
+                }
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+PaginationBar.displayName = "OODS.PaginationBar";
+function asDate(value) {
+  if (value === void 0) return void 0;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+function relativeLabel(date, now) {
+  const seconds = Math.round((date.getTime() - now.getTime()) / 1e3);
+  const units = [
+    ["year", 31536e3],
+    ["month", 2592e3],
+    ["day", 86400],
+    ["hour", 3600],
+    ["minute", 60]
+  ];
+  const [unit, divisor] = units.find(([, candidate]) => Math.abs(seconds) >= candidate) ?? ["second", 1];
+  return new Intl.RelativeTimeFormat(void 0, { numeric: "auto" }).format(
+    Math.round(seconds / divisor),
+    unit
+  );
+}
+var RelativeTimestamp = React3.forwardRef(
+  ({
+    datetime,
+    timestamp,
+    value,
+    updatedAt,
+    createdAt,
+    relative,
+    label,
+    text,
+    timezone = "UTC",
+    hideWhenEmpty,
+    now,
+    children,
+    field,
+    fallbackField,
+    timezoneParameter,
+    title,
+    className,
+    ...rest
+  }, ref) => {
+    const childRaw = typeof children === "string" || typeof children === "number" ? children : void 0;
+    const raw = datetime ?? timestamp ?? value ?? updatedAt ?? createdAt ?? childRaw;
+    const date = asDate(raw);
+    if (hideWhenEmpty && !date) return null;
+    const nowDate = asDate(now) ?? /* @__PURE__ */ new Date();
+    const iso = date?.toISOString() ?? (raw === void 0 ? void 0 : String(raw));
+    const absolute = formatDateTime(date, { timeZone: timezone });
+    const content = relative ?? label ?? text ?? (now !== void 0 && date ? relativeLabel(date, nowDate) : absolute || children || "Unknown time");
+    return /* @__PURE__ */ jsx(
+      "time",
+      {
+        ref,
+        dateTime: iso,
+        title: title ?? absolute,
+        className: classes3("oods-relative-timestamp", className),
+        "data-oods-component": "RelativeTimestamp",
+        suppressHydrationWarning: true,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+RelativeTimestamp.displayName = "OODS.RelativeTimestamp";
+
+export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Text, Textarea };