@oods/components-react 0.3.3 → 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.3/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.3.3/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-BPEHI36W.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';
@@ -230,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,
@@ -368,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(
   ({
@@ -390,7 +482,8 @@ 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", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxs(
@@ -448,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",
@@ -483,7 +577,7 @@ var Banner = React3.forwardRef(
               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
         ]
@@ -538,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;
@@ -973,7 +1145,7 @@ var SearchInput = React3.forwardRef(
               "aria-label": "Clear search",
               disabled,
               onClick: clear,
-              children: "\xD7"
+              children: /* @__PURE__ */ jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -1161,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(
@@ -1181,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-XAWAMZUQ.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,7 +146,7 @@ var TableRoot = React.forwardRef(
           "data-density": density,
           ...rest,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
+            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",