@jirawatpyk/aura-react 5.7.3 → 5.9.0

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/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -22,6 +22,16 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     return t.id === cur;
   })[0] || firstOn || items[0];
   const Link = useLinkComponent(props.linkComponent);
+  const manual = props.activation === "manual";
+  const [focusId, setFocusId] = React.useState(null);
+  items.forEach(function(t) {
+    const al = t.tabProps && t.tabProps["aria-label"];
+    if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
+      devWarnOnce(
+        "tab-label-in-name",
+        'Tabs: tabProps aria-label "' + al + '" should start with the visible label "' + t.label + '" so voice control finds the tab (WCAG 2.5.3 Label in Name).'
+      );
+  });
   if (asLinks)
     return /* @__PURE__ */ React.createElement(
       "nav",
@@ -37,14 +47,37 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
           t.label,
           t.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-tab__count" }, t.count) : null
         ];
-        return t.disabled ? /* @__PURE__ */ React.createElement("span", { key: t.id, className: "aura-tab is-disabled", "aria-disabled": true }, inner) : /* @__PURE__ */ React.createElement(
+        const own = omit(t.tabProps || {}, [
+          "type",
+          "disabled",
+          "form",
+          "formAction",
+          "formEncType",
+          "formMethod",
+          "formNoValidate",
+          "formTarget",
+          "name",
+          "value"
+        ]);
+        return t.disabled ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            ...omit(own, ["onClick"]),
+            key: t.id,
+            className: cx("aura-tab is-disabled", own.className),
+            "aria-disabled": true
+          },
+          inner
+        ) : /* @__PURE__ */ React.createElement(
           Link,
           {
+            ...own,
             key: t.id,
             href: t.href,
-            className: cx("aura-tab", on && "is-active"),
+            className: cx("aura-tab", on && "is-active", own.className),
             "aria-current": on ? "page" : void 0,
             onClick: function(e) {
+              if (own.onClick) own.onClick(e);
               if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
               st[1](t.id);
             }
@@ -58,19 +91,28 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
       return !t2.disabled;
     });
     const t = enabled[(i + enabled.length) % enabled.length];
-    st[1](t.id);
+    if (manual) setFocusId(t.id);
+    else st[1](t.id);
     if (refs.current[t.id]) refs.current[t.id].focus();
   }
+  const stop = manual && focusId && items.filter(function(t) {
+    return t.id === focusId && !t.disabled;
+  })[0] || current;
   return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": props.label,
       className: "aura-tabs__list",
+      onBlur: manual ? function(e) {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocusId(null);
+      } : void 0,
       onKeyDown: function(e) {
         const enabled = items.filter(function(t) {
           return !t.disabled;
-        }), i = enabled.indexOf(current);
+        }), focused = enabled.filter(function(t) {
+          return refs.current[t.id] === e.target;
+        })[0], i = enabled.indexOf(focused || stop);
         if (e.key === "ArrowRight") {
           e.preventDefault();
           go(i + 1);
@@ -88,22 +130,31 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     },
     items.map(function(t) {
       const on = current && t.id === current.id;
+      const own = t.tabProps || {};
       return /* @__PURE__ */ React.createElement(
         "button",
         {
+          ...own,
           key: t.id,
           type: "button",
           role: "tab",
           id: base + "-tab-" + t.id,
           "aria-selected": on,
           "aria-controls": base + "-panel-" + t.id,
-          tabIndex: on ? 0 : -1,
+          tabIndex: stop && t.id === stop.id ? 0 : -1,
           disabled: t.disabled,
           ref: function(el) {
             refs.current[t.id] = el;
           },
-          className: cx("aura-tab", on && "is-active"),
-          onClick: function() {
+          className: cx("aura-tab", on && "is-active", own.className),
+          onFocus: manual ? function(e) {
+            if (own.onFocus) own.onFocus(e);
+            setFocusId(t.id);
+          } : own.onFocus,
+          onClick: function(e) {
+            if (own.onClick) own.onClick(e);
+            if (e.defaultPrevented) return;
+            if (manual && current && t.id === current.id) return;
             st[1](t.id);
           }
         },
@@ -112,7 +163,26 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
         t.count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-tab__count" }, t.count) : null
       );
     })
-  ), current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
+  ), props.keepMounted ? (
+    /* 5.9: every panel stays in the DOM (same node across switches); the inactive ones are hidden. */
+    items.map(function(t) {
+      if (t.content === void 0) return null;
+      const on = current && t.id === current.id;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: t.id,
+          role: "tabpanel",
+          id: base + "-panel-" + t.id,
+          "aria-labelledby": base + "-tab-" + t.id,
+          tabIndex: 0,
+          hidden: !on,
+          className: "aura-tabs__panel"
+        },
+        t.content
+      );
+    })
+  ) : current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
     "div",
     {
       role: "tabpanel",

package/dist/esm/Tag.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, omit } from "./internal.js";
 import { useStrings } from "./locale.js";
+import { IconCheck, IconX } from "./icons.js";
 const Tag = React.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
@@ -22,7 +23,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         disabled: props.disabled,
         className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
       },
-      props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 14 }) : inner[0],
+      props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 14 }) : inner[0],
       inner[1]
     );
   }
@@ -34,7 +35,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
       "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
       onClick: props.onRemove
     },
-    /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 12 })
+    /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
   ) : null);
 });
 export {

package/dist/esm/TimePicker.js

@@ -5,6 +5,7 @@ import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedR
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
+import { IconCheck, IconChevronDown, IconClock, IconX } from "./icons.js";
 function pad(n) {
   return (n < 10 ? "0" : "") + n;
 }
@@ -220,7 +221,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           }
         },
         /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, s),
-        sel ? /* @__PURE__ */ React.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+        sel ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
       );
     }))),
     document.body
@@ -237,7 +238,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconClock, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",
       {
         ref: inputMerged,
@@ -290,7 +291,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           if (inputRef.current) inputRef.current.focus();
         }
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null) })
     ) : null, /* @__PURE__ */ React.createElement(
       "button",
       {
@@ -309,7 +310,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           }
         }
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null) })
     )),
     list
   );

package/dist/esm/Toaster.js

@@ -6,6 +6,7 @@ import { IconButton } from "./IconButton.js";
 import { cx, plainClick, useIsoLayoutEffect, useMounted } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
+import { IconInfo, IconLoaderCircle, IconX } from "./icons.js";
 const MAX_VISIBLE = 3;
 const toastState = {
   list: [],
@@ -179,7 +180,7 @@ function ToastItem(props) {
     /* @__PURE__ */ React.createElement(
       Icon,
       {
-        name: t.loading ? "loader-circle" : ALERT_ICON[t.tone] || "info",
+        name: t.loading ? /* @__PURE__ */ React.createElement(IconLoaderCircle, null) : React.createElement(ALERT_ICON[t.tone] || IconInfo),
         className: cx("aura-toast__icon", t.loading && "aura-spin")
       }
     ),
@@ -213,7 +214,7 @@ function ToastItem(props) {
     /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "x",
+        icon: /* @__PURE__ */ React.createElement(IconX, null),
         label: str.dismissToast,
         className: "aura-toast__close",
         onClick: function() {

package/dist/esm/classes.js

@@ -0,0 +1,33 @@
+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";
+}
+const warned = {};
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  let dev = false;
+  try {
+    dev = true;
+  } catch (e) {
+    dev = false;
+  }
+  if (!dev) return;
+  warned[key] = true;
+  console.warn("[AURA] " + message);
+}
+export {
+  cx,
+  devWarnOnce,
+  omit,
+  tone
+};

package/dist/esm/colorScheme.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useStrings } from "./locale.js";
 import { IconButton } from "./IconButton.js";
 import { DropdownMenu } from "./DropdownMenu.js";
+import { IconMoon, IconSun } from "./icons.js";
 import { DEFAULT_KEY, SCHEMES, EVENT, valid, colorSchemeScript } from "./colorSchemeScript.js";
 function ColorSchemeScript(props) {
   return /* @__PURE__ */ React.createElement(
@@ -86,7 +87,13 @@ function ColorSchemeToggle(props) {
     DropdownMenu,
     {
       label,
-      trigger: /* @__PURE__ */ React.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
+      trigger: /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: cs.resolved === "dark" ? /* @__PURE__ */ React.createElement(IconMoon, null) : /* @__PURE__ */ React.createElement(IconSun, null),
+          label: label + ": " + names[cs.scheme]
+        }
+      ),
       items: SCHEMES.map(function(s) {
         return {
           label: names[s],

package/dist/esm/display.js

@@ -0,0 +1,155 @@
+'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";
+import {
+  IconBan,
+  IconCircle,
+  IconCircleAlert,
+  IconCircleCheck,
+  IconCircleDotDashed,
+  IconInbox,
+  IconInfo,
+  IconTriangleAlert
+} from "./icons.js";
+const h = React.createElement;
+const ALERT_ICON = {
+  info: IconInfo,
+  success: IconCircleCheck,
+  warning: IconTriangleAlert,
+  danger: IconCircleAlert
+};
+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 || h(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: IconCircle,
+  progress: IconCircleDotDashed,
+  ready: IconCircleCheck,
+  warning: IconTriangleAlert,
+  blocked: IconBan
+};
+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: h(PILL_ICON[tone] || IconCircle), 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 || /* @__PURE__ */ React.createElement(IconInbox, null), 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/iconSvg.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cx } from "./classes.js";
+const h = React.createElement;
+const SIZES = { sm: 16, md: 20, lg: 24 };
+function iconSize(size) {
+  return SIZES[size] || size || 16;
+}
+function iconSvg(shapes, props, ref) {
+  const size = iconSize(props.size);
+  const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: props.strokeWidth || 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cx("aura-icon", props.className),
+      ...a11y
+    },
+    shapes.map(function(s, i) {
+      const attrs = { key: i };
+      for (const k in s[1]) attrs[k === "stroke-width" ? "strokeWidth" : k] = s[1][k];
+      return h(s[0], attrs);
+    })
+  );
+}
+function defineIcon(name, shapes) {
+  const C = React.forwardRef(function AuraIcon(props, ref) {
+    return iconSvg(shapes, props, ref);
+  });
+  C.displayName = "Icon" + name.split("-").map(function(p) {
+    return p.charAt(0).toUpperCase() + p.slice(1);
+  }).join("");
+  return Object.assign(C, { auraShapes: shapes, iconName: name });
+}
+function shapesOf(el) {
+  if (!React.isValidElement(el)) return null;
+  const t = el.type;
+  return typeof t !== "string" && t && t.auraShapes || null;
+}
+export {
+  defineIcon,
+  iconSize,
+  iconSvg,
+  shapesOf
+};