@oods/components-react 0.3.2 → 0.4.0

package/README.md

@@ -32,4 +32,4 @@ Use matching versions of the OODS packages. These packages are separate from the
 
 ## License
 
-Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.3.2/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.3.2/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
+Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.4.0/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.4.0/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.

package/dist/chunk-2VEQWKGK.js

@@ -0,0 +1 @@
+export { STATUS_DOMAINS, getBannerToneTokenSet, getStatusPresentation, getToneTokenSet, listStatuses } from '@oods/component-contracts';

package/dist/{chunk-A4T7OOIY.js → chunk-OFTMKX3W.js}

@@ -1,5 +1,5 @@
-import { getStatusPresentation, getToneTokenSet, resolveStatusGlyph, getBannerToneTokenSet } from './chunk-G74PKSW3.js';
-import { dateTimeInputValue, currencyMinorUnits, formatDateTime, formatReadOnlyValue } from '@oods/component-contracts';
+import { getStatusPresentation, getToneTokenSet, getBannerToneTokenSet } from './chunk-2VEQWKGK.js';
+import { dateTimeInputValue, STATUS_ICON_SVG_ATTRS, resolveStatusIcon, currencyMinorUnits, formatDateTime, formatReadOnlyValue, STATUS_ICON_SHAPES } from '@oods/component-contracts';
 import * as React3 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
@@ -155,17 +155,16 @@ var InputPrimitive = React3.forwardRef(
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
 var DatePicker = React3.forwardRef(
-  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsx(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: classes("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__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(
@@ -231,6 +230,84 @@ var Checkbox = React3.forwardRef(
   }
 );
 Checkbox.displayName = "OODS.Checkbox";
+var Switch = React3.forwardRef(
+  ({
+    id,
+    label,
+    checked,
+    defaultChecked = false,
+    required,
+    help,
+    validation,
+    size = "md",
+    className,
+    style,
+    onClick,
+    onCheckedChange,
+    onUpdate,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const [internalChecked, setInternalChecked] = React3.useState(defaultChecked);
+    const on = checked ?? internalChecked;
+    const validationId = validation?.id ?? `${id}-validation`;
+    const describedBy = [nativeDescription, help ? `${id}-help` : void 0, validation?.message ? validationId : void 0].filter(Boolean).join(" ") || void 0;
+    const tone = validation ? validation.state === "error" ? "critical" : validation.state : void 0;
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      const next = !on;
+      if (checked === void 0) setInternalChecked(next);
+      onCheckedChange?.(next);
+      onUpdate?.(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes("oods-field", "oods-switch", className),
+        style: {
+          ...tone ? {
+            "--cmp-input-message-border": `var(--sys-status-${tone}-border)`,
+            "--cmp-input-message-text": `var(--sys-status-${tone}-text)`
+          } : {},
+          ...style
+        },
+        "data-oods-component": "Switch",
+        "data-size": size,
+        "data-validation-state": validation?.state,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "oods-switch__row", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref,
+                id,
+                type: "button",
+                role: "switch",
+                className: "oods-switch__control",
+                "aria-checked": on,
+                "aria-labelledby": `${id}-label`,
+                "aria-describedby": describedBy,
+                "aria-required": required || void 0,
+                "aria-invalid": validation?.state === "error" || void 0,
+                onClick: handleClick,
+                ...rest,
+                children: /* @__PURE__ */ jsx("span", { className: "oods-switch__thumb", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { id: `${id}-label`, className: "oods-field-label oods-switch__label", htmlFor: id, children: [
+              label,
+              required ? /* @__PURE__ */ jsx("span", { className: "oods-field-required", "aria-hidden": "true", children: "*" }) : null
+            ] })
+          ] }),
+          help ? /* @__PURE__ */ jsx("p", { id: `${id}-help`, className: "oods-field-help", children: help }) : null,
+          validation?.message ? /* @__PURE__ */ jsx("p", { id: validationId, className: "oods-field-error", role: validation.state === "error" ? "alert" : void 0, children: validation.message }) : null
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "OODS.Switch";
 var Select = React3.forwardRef(
   ({
     id,
@@ -369,6 +446,20 @@ var Textarea = React3.forwardRef(
   }
 );
 Textarea.displayName = "OODS.Textarea";
+var REACT_NAMES = {
+  viewBox: "viewBox",
+  fill: "fill",
+  stroke: "stroke",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "aria-hidden": "aria-hidden",
+  focusable: "focusable"
+};
+var svgProps = Object.fromEntries(Object.entries(STATUS_ICON_SVG_ATTRS).map(([name, value]) => [REACT_NAMES[name] ?? name, value]));
+function StatusIcon({ name }) {
+  return /* @__PURE__ */ jsx("svg", { ...svgProps, children: STATUS_ICON_SHAPES[name].map((shape, index) => React3.createElement(shape.tag, { key: index, ...shape.attrs })) });
+}
 var classes2 = (...values) => values.filter(Boolean).join(" ");
 var Badge = React3.forwardRef(
   ({
@@ -391,14 +482,15 @@ var Badge = React3.forwardRef(
     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 statusIcon = resolveStatusIcon(presentation?.iconName);
+    const resolvedIcon = icon ?? (statusIcon ? /* @__PURE__ */ jsx(StatusIcon, { name: statusIcon }) : void 0);
     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;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
-        className: classes2("oods-badge", "statusable-badge", className),
+        className: classes2("oods-badge", className),
         "data-oods-component": "Badge",
         "data-status": status,
         "data-domain": domain,
@@ -410,16 +502,12 @@ var Badge = React3.forwardRef(
           "--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 }),
+          /* @__PURE__ */ jsx("span", { className: "oods-badge__label", children: resolvedContent }),
           iconPosition === "end" ? iconNode : null
         ]
       }
@@ -453,7 +541,8 @@ var Banner = React3.forwardRef(
     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 statusIcon = resolveStatusIcon(presentation?.iconName);
+    const resolvedIcon = icon ?? (statusIcon ? /* @__PURE__ */ jsx(StatusIcon, { name: statusIcon }) : void 0);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -461,7 +550,7 @@ var Banner = React3.forwardRef(
         ref,
         role,
         "aria-live": role === "alert" ? "assertive" : "polite",
-        className: classes2("oods-banner", "statusable-banner", className),
+        className: classes2("oods-banner", className),
         "data-oods-component": "Banner",
         "data-status": status,
         "data-domain": domain,
@@ -471,28 +560,24 @@ var Banner = React3.forwardRef(
           "--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
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "oods-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "oods-banner__content", children: [
+            heading ? /* @__PURE__ */ jsx("strong", { className: "oods-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsx("p", { className: "oods-banner__detail", children: body }) : null,
+            actions ? /* @__PURE__ */ jsx("div", { className: "oods-banner__actions", children: actions }) : null
           ] }),
           onDismiss ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              className: "oods-banner-dismiss oods-banner__dismiss",
               "aria-label": dismissLabel,
               onClick: () => onDismiss(),
-              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+              children: /* @__PURE__ */ jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -547,6 +632,84 @@ var Button = React3.forwardRef(
   }
 );
 Button.displayName = "OODS.Button";
+var noSubscription = () => () => void 0;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React3.useEffect : React3.useLayoutEffect;
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var Dialog = React3.forwardRef(
+  ({
+    id,
+    open = false,
+    modal = true,
+    title,
+    description,
+    dismissLabel = "Close",
+    size = "md",
+    actions,
+    children,
+    className,
+    onClose,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const generatedId = React3.useId().replace(/[^\w-]/g, "");
+    const dialogId = id ?? `oods-dialog-${generatedId}`;
+    const element = React3.useRef(null);
+    const openRef = React3.useRef(open);
+    const serverMarkup = React3.useSyncExternalStore(noSubscription, () => false, () => true);
+    const managed = modal && !serverMarkup && canShowModal();
+    const setRef = React3.useCallback((node) => {
+      element.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }, [ref]);
+    useIsomorphicLayoutEffect(() => {
+      openRef.current = open;
+      const dialog = element.current;
+      if (!dialog || !managed) return;
+      if (open && !dialog.open) dialog.showModal();
+      else if (!open && dialog.open) dialog.close();
+    }, [open, managed]);
+    const requestClose = (event) => {
+      event.preventDefault();
+      onClose?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        ref: setRef,
+        id: dialogId,
+        className: classes2("oods-dialog", className),
+        "data-oods-component": "Dialog",
+        "data-size": size,
+        "aria-labelledby": `${dialogId}-title`,
+        "aria-describedby": hasContent(description) ? `${dialogId}-description` : void 0,
+        open: managed ? void 0 : open,
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
+        },
+        onCancel: requestClose,
+        onClose: () => {
+          if (openRef.current && !element.current?.open) onClose?.();
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "oods-dialog__header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "oods-dialog__heading", children: [
+              /* @__PURE__ */ jsx("h2", { id: `${dialogId}-title`, className: "oods-dialog__title", children: title }),
+              hasContent(description) ? /* @__PURE__ */ jsx("p", { id: `${dialogId}-description`, className: "oods-dialog__description", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "oods-dialog__close", "aria-label": dismissLabel, onClick: () => onClose?.(), children: /* @__PURE__ */ jsx(StatusIcon, { name: "x" }) })
+          ] }),
+          hasContent(children) ? /* @__PURE__ */ jsx("div", { className: "oods-dialog__body", children }) : null,
+          hasContent(actions) ? /* @__PURE__ */ jsx("div", { className: "oods-dialog__footer", children: actions }) : null
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "OODS.Dialog";
 var Card = React3.forwardRef(
   ({ as = "div", elevated = false, className, ...rest }, ref) => {
     const Element = as;
@@ -612,6 +775,7 @@ var StatusBadge = React3.forwardRef(
     compact,
     variant,
     title,
+    className,
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
@@ -629,6 +793,7 @@ var StatusBadge = React3.forwardRef(
         content: children ?? content,
         title: title ?? presentation.description,
         "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        className: classes3("oods-status-badge", className),
         "data-oods-component": "StatusBadge",
         ...rest
       }
@@ -767,29 +932,29 @@ var TimelinePrimitive = React3.forwardRef(
         "data-timeline-type": kind,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("h2", { className: "oods-timeline__title", children: title }),
+          /* @__PURE__ */ jsx("h2", { className: "oods-timeline__title", "data-timeline-title": "true", 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: [
+          transitionCount > 0 ? /* @__PURE__ */ jsxs("p", { "data-timeline-transitions": "true", 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) => {
+          children ?? /* @__PURE__ */ jsx("ol", { className: "oods-timeline__events", "data-timeline-events": "true", 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: [
+              /* @__PURE__ */ jsx("p", { className: "oods-timeline__label", "data-timeline-label": "true", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsx("time", { "data-timeline-time": "true", dateTime: timestamp, children: formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsx("p", { className: "oods-timeline__detail", "data-timeline-detail": "true", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__actor", "data-timeline-actor": "true", children: [
                 "Actor: ",
                 actor
               ] }) : null,
-              showReason && event.reason ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__reason", children: [
+              showReason && event.reason ? /* @__PURE__ */ jsxs("p", { className: "oods-timeline__reason", "data-timeline-reason": "true", children: [
                 "Reason: ",
                 event.reason
               ] }) : null
@@ -980,7 +1145,7 @@ var SearchInput = React3.forwardRef(
               "aria-label": "Clear search",
               disabled,
               onClick: clear,
-              children: "\xD7"
+              children: /* @__PURE__ */ jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -1168,7 +1333,7 @@ var RelativeTimestamp = React3.forwardRef(
     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 iso = date?.toISOString() ?? (raw === void 0 || raw === "" ? 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(
@@ -1188,4 +1353,4 @@ var RelativeTimestamp = React3.forwardRef(
 );
 RelativeTimestamp.displayName = "OODS.RelativeTimestamp";
 
-export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Text, Textarea };
+export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Dialog, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Switch, Text, Textarea };

package/dist/{chunk-YCI5AEWL.js → chunk-XEX22E24.js}

@@ -1,4 +1,4 @@
-import { getStatusPresentation, getToneTokenSet } from './chunk-G74PKSW3.js';
+import { getStatusPresentation, getToneTokenSet } from './chunk-2VEQWKGK.js';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -120,6 +120,7 @@ TableCell.displayName = "OODS.Table.Cell";
 var TableRoot = React.forwardRef(
   ({
     caption,
+    showCaption = true,
     columns,
     rows,
     density = "comfortable",
@@ -145,8 +146,8 @@ var TableRoot = React.forwardRef(
           "data-density": density,
           ...rest,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
-            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            caption ? /* @__PURE__ */ jsx(TableCaption, { "data-visually-hidden": showCaption ? void 0 : "true", children: caption }) : null,
+            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsx(
               "tr",
               {