@jirawatpyk/aura-react 5.7.2 → 5.8.0

package/dist/esm/Alert.js

@@ -1,27 +1,14 @@
 'use client';
 import * as React from "react";
-import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cx } from "./internal.js";
+import { alertElement } from "./display.js";
 import { useStrings } from "./locale.js";
-const ALERT_ICON = {
-  info: "info",
-  success: "circle-check",
-  warning: "triangle-alert",
-  danger: "circle-alert"
-};
+import { ALERT_ICON } from "./display.js";
 const Alert = React.forwardRef(function Alert2(props, ref) {
   const t = useStrings();
-  const tone = props.tone || "info";
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cx("aura-alert", "aura-alert--" + tone, props.className),
-      role: tone === "danger" || tone === "warning" ? "alert" : "status"
-    },
-    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
-    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+  return alertElement(
+    props,
+    ref,
     props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
   );
 });

package/dist/esm/Badge.js

@@ -1,25 +1,8 @@
 'use client';
 import * as React from "react";
-import { Icon } from "./Icon.js";
-import { cx, omit, tone } from "./internal.js";
+import { badgeElement } from "./display.js";
 const Badge = React.forwardRef(function Badge2(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
-  return /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      ...rest,
-      ref,
-      className: cx(
-        "aura-badge",
-        "aura-badge--" + tone(props.tone),
-        props.variant === "solid" && "is-solid",
-        props.variant === "outline" && "is-outline",
-        props.className
-      )
-    },
-    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
-    props.children
-  );
+  return badgeElement(props, ref);
 });
 export {
   Badge

package/dist/esm/Button.js

@@ -1,6 +1,7 @@
 'use client';
 import * as React from "react";
-import { cx, omit } from "./internal.js";
+import { omit } from "./internal.js";
+import { buttonClass } from "./display.js";
 import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
 function ButtonLink(props, ref, Link) {
@@ -28,13 +29,12 @@ function ButtonLink(props, ref, Link) {
       role: disabled ? "link" : void 0,
       "aria-disabled": disabled || void 0,
       tabIndex: disabled ? -1 : props.tabIndex,
-      className: cx(
-        "aura-btn",
-        "aura-btn--" + variant,
-        props.size === "sm" && "aura-btn--sm",
-        props.fullWidth && "aura-btn--full",
-        props.className
-      ),
+      className: buttonClass({
+        variant,
+        size: props.size,
+        fullWidth: props.fullWidth,
+        className: props.className
+      }),
       onClick: disabled ? void 0 : props.onClick
     },
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
@@ -69,14 +69,13 @@ const Button = React.forwardRef(
         ...rest,
         ref,
         type: props.type || "button",
-        className: cx(
-          "aura-btn",
-          "aura-btn--" + variant,
-          props.size === "sm" && "aura-btn--sm",
-          props.fullWidth && "aura-btn--full",
-          loading && "is-loading",
-          props.className
-        ),
+        className: buttonClass({
+          variant,
+          size: props.size,
+          fullWidth: props.fullWidth,
+          loading,
+          className: props.className
+        }),
         "aria-busy": loading || void 0,
         "aria-disabled": loading || void 0,
         onClick: loading ? function(e) {

package/dist/esm/Card.js

@@ -1,25 +1,8 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
-const h = React.createElement;
+import { cardElement } from "./display.js";
 const Card = React.forwardRef(function Card2(props, ref) {
-  const creative = props.variant === "creative";
-  return h(
-    props.as || "section",
-    {
-      ref,
-      className: cx(
-        "aura-card",
-        creative && "aura-card--creative",
-        props.interactive && "is-interactive",
-        props.className
-      ),
-      "aria-labelledby": props.title && props.titleId ? props.titleId : void 0
-    },
-    props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
-    props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
-    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__foot" }, props.footer) : null
-  );
+  return cardElement(props, ref);
 });
 export {
   Card

package/dist/esm/EmptyState.js

@@ -1,21 +1,8 @@
 'use client';
 import * as React from "react";
-import { Icon } from "./Icon.js";
-import { cx } from "./internal.js";
-const h = React.createElement;
+import { emptyStateElement } from "./display.js";
 const EmptyState = React.forwardRef(function EmptyState2(props, ref) {
-  const HT = "h" + (props.headingLevel || 3);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
-    /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),
-    props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-empty__text" }, props.description) : null,
-    props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null
-  );
+  return emptyStateElement(props, ref);
 });
 export {
   EmptyState

package/dist/esm/FormErrorSummary.js

@@ -37,14 +37,50 @@ const FormErrorSummary = React.forwardRef(
     const auto = uid(), id = props.id || auto;
     const list = items(props.errors);
     const box = React.useRef(null);
+    const keyed = props.focusKey !== void 0;
+    const lastKey = React.useRef(null), armed = React.useRef(false), hadErrors = React.useRef(false);
+    const has = list.length > 0;
     React.useEffect(
       function() {
-        const has = list.length > 0;
-        if (has && box.current) box.current.focus();
+        const appeared = has && !hadErrors.current;
+        hadErrors.current = has;
+        if (!keyed) {
+          lastKey.current = null;
+          if (appeared && box.current) box.current.focus();
+          return;
+        }
+        if (!lastKey.current) {
+          lastKey.current = { v: props.focusKey };
+          armed.current = has;
+        } else if (!Object.is(lastKey.current.v, props.focusKey)) {
+          lastKey.current = { v: props.focusKey };
+          armed.current = true;
+        }
+        if (armed.current && has && box.current) {
+          armed.current = false;
+          box.current.focus();
+        }
       },
-      /* focus when errors first appear, and again whenever focusKey changes (each submit) */
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [list.length > 0, props.focusKey]
+      [has, props.focusKey, keyed]
+    );
+    React.useEffect(
+      function() {
+        if (!keyed) return;
+        function disarm() {
+          armed.current = false;
+        }
+        const events = ["input", "change", "keydown", "pointerdown"];
+        events.forEach(function(n) {
+          document.addEventListener(n, disarm, true);
+        });
+        return function() {
+          events.forEach(function(n) {
+            document.removeEventListener(n, disarm, true);
+          });
+        };
+      },
+      [keyed]
     );
     if (!list.length) return null;
     return /* @__PURE__ */ React.createElement(

package/dist/esm/Icon.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
+import { cx } from "./classes.js";
 const h = React.createElement;
 const ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]], "sun": [["circle", { "cx": "12", "cy": "12", "r": "4" }], ["path", { "d": "M12 2v2" }], ["path", { "d": "M12 20v2" }], ["path", { "d": "m4.93 4.93 1.41 1.41" }], ["path", { "d": "m17.66 17.66 1.41 1.41" }], ["path", { "d": "M2 12h2" }], ["path", { "d": "M20 12h2" }], ["path", { "d": "m6.34 17.66-1.41 1.41" }], ["path", { "d": "m19.07 4.93-1.41 1.41" }]], "moon": [["path", { "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]], "monitor": [["rect", { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }], ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }], ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]], "panel-left-close": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "m16 15-3-3 3-3" }]], "panel-left-open": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "m14 9 3 3-3 3" }]], "server": [["rect", { "width": "20", "height": "8", "x": "2", "y": "2", "rx": "2", "ry": "2" }], ["rect", { "width": "20", "height": "8", "x": "2", "y": "14", "rx": "2", "ry": "2" }], ["line", { "x1": "6", "x2": "6.01", "y1": "6", "y2": "6" }], ["line", { "x1": "6", "x2": "6.01", "y1": "18", "y2": "18" }]], "globe": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }], ["path", { "d": "M2 12h20" }]], "activity": [["path", { "d": "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" }]], "shield-alert": [["path", { "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }], ["path", { "d": "M12 8v4" }], ["path", { "d": "M12 16h.01" }]], "phone": [["path", { "d": "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" }]], "wrench": [["path", { "d": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" }]] };
 const SIZES = { sm: 16, md: 20, lg: 24 };

package/dist/esm/StatusPill.js

@@ -1,23 +1,13 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
-import { Icon } from "./Icon.js";
-const TONE_ICON = {
-  neutral: "circle",
-  progress: "circle-dot-dashed",
-  ready: "circle-check",
-  warning: "triangle-alert",
-  blocked: "ban"
-};
-import { toneFor } from "./status.js";
-import { toneFor as toneFor2, statusTone, TONE_ORDER } from "./status.js";
+import { statusPillElement } from "./display.js";
+import { toneFor, statusTone, TONE_ORDER } from "./status.js";
 const StatusPill = React.forwardRef(function StatusPill2(props, ref) {
-  const tone = props.tone || toneFor(props.children);
-  return /* @__PURE__ */ React.createElement("span", { ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: TONE_ICON[tone] || "circle", size: 12 }), props.children);
+  return statusPillElement(props, ref);
 });
 export {
   StatusPill,
   TONE_ORDER,
   statusTone,
-  toneFor2 as toneFor
+  toneFor
 };

package/dist/esm/Table.js

@@ -1,8 +1,60 @@
 'use client';
 import * as React from "react";
-import { cx, uid, useIsoLayoutEffect } from "./internal.js";
+import { cx, devWarnOnce, uid, useIsoLayoutEffect } from "./internal.js";
+const StackLabels = React.createContext(null);
+const ColumnIndex = React.createContext(-1);
+function flat(children) {
+  const out = [];
+  React.Children.toArray(children).forEach(function(c) {
+    if (React.isValidElement(c) && c.type === React.Fragment)
+      out.push.apply(out, flat(c.props.children));
+    else out.push(c);
+  });
+  return out;
+}
+function text(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    const parts = node.map(text).filter(function(x) {
+      return x != null;
+    });
+    return parts.length ? parts.join("") : void 0;
+  }
+  if (React.isValidElement(node)) {
+    const p = node.props;
+    if (p["aria-hidden"] === true || p["aria-hidden"] === "true") return void 0;
+    return text(p.children);
+  }
+  return void 0;
+}
+function headerLabels(children) {
+  let out = [];
+  flat(children).forEach(function(c) {
+    if (out.length || !React.isValidElement(c) || c.type !== THead) return;
+    const row = flat(c.props.children).find(function(r) {
+      return React.isValidElement(r);
+    });
+    if (!row) return;
+    flat(row.props.children).forEach(function(cell) {
+      if (!React.isValidElement(cell)) return;
+      const p = cell.props;
+      const t = text(p.children);
+      const label = p.label != null ? p.label : t != null ? t.replace(/\s+/g, " ").trim() || void 0 : void 0;
+      const span = Math.max(1, Number(p.colSpan) || 1);
+      for (let i = 0; i < span; i++) out.push(label);
+    });
+  });
+  return out;
+}
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, className, children, ...rest } = props;
+  const { caption, captionHidden, density, stackBelow, className, children, ...rest } = props;
+  const labels = stackBelow ? headerLabels(children) : null;
+  if (labels && !labels.length)
+    devWarnOnce(
+      "tbl-stack-labels",
+      "Table stackBelow: no THead > Tr > Th found among its children, so cells have no labels. Pass `label` on each Td."
+    );
+  const outer = React.useContext(StackLabels);
   const capId = uid();
   const wrap = React.useRef(null);
   const sc = React.useState(false), scrolls = sc[0];
@@ -23,20 +75,34 @@ const Table = React.forwardRef(function Table2(props, ref) {
     "div",
     {
       ref: wrap,
-      className: "aura-tbl-wrap",
+      className: cx("aura-tbl-wrap", stackBelow && "is-stackable"),
       "data-density": density,
       tabIndex: scrolls ? 0 : void 0,
       role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
       "aria-labelledby": scrolls && caption != null ? capId : void 0,
       "aria-label": scrolls && caption == null ? rest["aria-label"] : void 0
     },
-    /* @__PURE__ */ React.createElement("table", { ref, className: cx("aura-tbl", className), ...rest }, caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null, children)
+    /* @__PURE__ */ React.createElement(
+      "table",
+      {
+        ref,
+        className: cx("aura-tbl", stackBelow && "aura-tbl--stack-" + stackBelow, className),
+        role: stackBelow ? "table" : void 0,
+        ...rest
+      },
+      caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null,
+      labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
+    )
   );
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {
     const { className, ...rest } = props;
-    return React.createElement(tag, Object.assign({ ref, className: cx(cls, className) }, rest));
+    const stacked = React.useContext(StackLabels) != null;
+    return React.createElement(
+      tag,
+      Object.assign({ ref, className: cx(cls, className), role: stacked ? "rowgroup" : void 0 }, rest)
+    );
   });
   return C;
 }
@@ -47,8 +113,14 @@ TBody.displayName = "TBody";
 const TFoot = section("tfoot", "aura-tbl__foot");
 TFoot.displayName = "TFoot";
 const Tr = React.forwardRef(function Tr2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("tr", { ref, className: cx("aura-tbl__row", className), ...rest });
+  const { className, children, ...rest } = props;
+  const stacked = React.useContext(StackLabels) != null;
+  let col = 0;
+  return /* @__PURE__ */ React.createElement("tr", { ref, className: cx("aura-tbl__row", className), role: stacked ? "row" : void 0, ...rest }, stacked ? flat(children).map(function(c) {
+    const at = col;
+    if (React.isValidElement(c)) col += Math.max(1, Number(c.props.colSpan) || 1);
+    return /* @__PURE__ */ React.createElement(ColumnIndex.Provider, { key: React.isValidElement(c) && c.key != null ? c.key : at, value: at }, c);
+  }) : children);
 });
 function cellClass(base, p) {
   const align = p.align || (p.numeric ? "end" : void 0);
@@ -62,12 +134,33 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("th", { ref, scope: scope || "col", className: cellClass("aura-tbl__th", props), ...rest });
+  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const stacked = React.useContext(StackLabels) != null;
+  return /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      ref,
+      scope: scope || "col",
+      className: cellClass("aura-tbl__th", props),
+      role: stacked ? scope === "row" ? "rowheader" : "columnheader" : void 0,
+      ...rest
+    }
+  );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("td", { ref, className: cellClass("aura-tbl__td", props), ...rest });
+  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
+  const shown = labels ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
+  return /* @__PURE__ */ React.createElement(
+    "td",
+    {
+      ref,
+      className: cellClass("aura-tbl__td", props),
+      role: labels ? "cell" : void 0,
+      "data-label": shown || void 0,
+      ...rest
+    }
+  );
 });
 export {
   TBody,

package/dist/esm/classes.js

@@ -0,0 +1,20 @@
+'use client';
+function cx() {
+  return Array.prototype.filter.call(arguments, Boolean).join(" ");
+}
+function omit(src, keys) {
+  const out = {};
+  for (const k in src)
+    if (Object.prototype.hasOwnProperty.call(src, k) && keys.indexOf(k) < 0)
+      out[k] = src[k];
+  return out;
+}
+const TONES = ["neutral", "accent", "success", "warning", "danger"];
+function tone(t) {
+  return TONES.indexOf(t) >= 0 ? t : "neutral";
+}
+export {
+  cx,
+  omit,
+  tone
+};

package/dist/esm/display.js

@@ -0,0 +1,145 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, omit, tone as badgeTone } from "./classes.js";
+import { toneFor } from "./status.js";
+const h = React.createElement;
+const ALERT_ICON = {
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert"
+};
+function alertElement(props, ref, close) {
+  const tone = props.tone || "info";
+  const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-alert", "aura-alert--" + tone, props.className),
+      role: props.role || (tone === "danger" || tone === "warning" ? "alert" : "status")
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: props.icon || ALERT_ICON[tone], className: "aura-alert__icon" }),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    close
+  );
+}
+function cardElement(props, ref) {
+  const creative = props.variant === "creative";
+  const rest = omit(props, [
+    "title",
+    "description",
+    "actions",
+    "footer",
+    "children",
+    "variant",
+    "headingLevel",
+    "interactive",
+    "as",
+    "className",
+    "titleId"
+  ]);
+  return h(
+    props.as || "section",
+    Object.assign({}, rest, {
+      ref,
+      className: cx(
+        "aura-card",
+        creative && "aura-card--creative",
+        props.interactive && "is-interactive",
+        props.className
+      ),
+      /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
+      "aria-labelledby": props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+    }),
+    props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
+    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__foot" }, props.footer) : null
+  );
+}
+const PILL_ICON = {
+  neutral: "circle",
+  progress: "circle-dot-dashed",
+  ready: "circle-check",
+  warning: "triangle-alert",
+  blocked: "ban"
+};
+function statusPillElement(props, ref) {
+  const tone = props.tone || toneFor(props.children);
+  const rest = omit(props, ["tone", "className", "children"]);
+  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: PILL_ICON[tone] || "circle", size: 12 }), props.children);
+}
+function badgeElement(props, ref) {
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx(
+        "aura-badge",
+        "aura-badge--" + badgeTone(props.tone),
+        props.variant === "solid" && "is-solid",
+        props.variant === "outline" && "is-outline",
+        props.className
+      )
+    },
+    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.children
+  );
+}
+function emptyStateElement(props, ref) {
+  const HT = "h" + (props.headingLevel || 3);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
+    /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),
+    props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-empty__text" }, props.description) : null,
+    props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null
+  );
+}
+function buttonClass(opts = {}) {
+  return cx(
+    "aura-btn",
+    "aura-btn--" + (opts.variant || "primary"),
+    opts.size === "sm" && "aura-btn--sm",
+    opts.fullWidth && "aura-btn--full",
+    opts.loading && "is-loading",
+    opts.className
+  );
+}
+function ServerAlert(props) {
+  return alertElement(props, void 0, null);
+}
+function ServerCard(props) {
+  return cardElement(props, void 0);
+}
+function ServerStatusPill(props) {
+  return statusPillElement(props, void 0);
+}
+function ServerBadge(props) {
+  return badgeElement(props, void 0);
+}
+function ServerEmptyState(props) {
+  return emptyStateElement(props, void 0);
+}
+export {
+  ALERT_ICON,
+  ServerAlert,
+  ServerBadge,
+  ServerCard,
+  ServerEmptyState,
+  ServerStatusPill,
+  alertElement,
+  badgeElement,
+  buttonClass,
+  cardElement,
+  emptyStateElement,
+  statusPillElement
+};

package/dist/esm/index.js

@@ -25,6 +25,7 @@ import { Tooltip } from "./Tooltip.js";
 import { Dialog, Drawer } from "./Dialog.js";
 import { DataTable } from "./DataTable.js";
 import { Card } from "./Card.js";
+import { buttonClass } from "./display.js";
 import { Tabs } from "./Tabs.js";
 import { SideNav } from "./SideNav.js";
 import { Breadcrumb } from "./Breadcrumb.js";
@@ -127,6 +128,7 @@ export {
   Tr,
   scale as brandScale,
   breakpoints,
+  buttonClass,
   colorSchemeScript,
   defaultFilter as comboboxFilter,
   contrast,