@jirawatpyk/aura-react 4.4.1

package/dist/esm/DropdownMenu.js

@@ -0,0 +1,38 @@
+'use client';
+import * as React from "react";
+import { Menu } from "./Menu.js";
+import { useMergedRef } from "./internal.js";
+const h = React.createElement;
+const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
+  var st = React.useState(null), anchor = st[0], setAnchor = st[1];
+  var wrap = React.useRef(null), wrapMerged = useMergedRef(ref, wrap);
+  var child = React.Children.only(props.trigger);
+  function toggle(e) {
+    if (child.props.onClick) child.props.onClick(e);
+    var el = wrap.current && (wrap.current.querySelector('button, [role="button"], a') || wrap.current);
+    setAnchor(anchor ? null : el);
+  }
+  function onKeyDown(e) {
+    if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !anchor) {
+      e.preventDefault();
+      setAnchor(wrap.current.querySelector('button, [role="button"], a') || wrap.current);
+    }
+  }
+  return h(
+    "span",
+    { ref: wrapMerged, className: "aura-dropdown", onKeyDown },
+    React.cloneElement(child, { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": anchor ? true : false }),
+    anchor ? h(Menu, {
+      anchor,
+      label: props.label,
+      items: props.items,
+      onClose: function(restore) {
+        setAnchor(null);
+        if (restore && anchor.focus) anchor.focus();
+      }
+    }) : null
+  );
+});
+export {
+  DropdownMenu
+};

package/dist/esm/FileUpload.js

@@ -0,0 +1,173 @@
+'use client';
+import * as React from "react";
+import { cx, uid, useMaybeControlled, useMergedRef } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Field } from "./forms.js";
+const h = React.createElement;
+function formatBytes(n) {
+  if (n == null) return "";
+  if (n < 1024) return n + " B";
+  var u = ["KB", "MB", "GB"], i = -1;
+  do {
+    n /= 1024;
+    i++;
+  } while (n >= 1024 && i < u.length - 1);
+  return (n >= 10 || Math.round(n) === n ? Math.round(n) : n.toFixed(1)) + " " + u[i];
+}
+function matches(file, accept) {
+  if (!accept) return true;
+  var name = (file.name || "").toLowerCase(), type = (file.type || "").toLowerCase();
+  return accept.split(",").some(function(a) {
+    a = a.trim().toLowerCase();
+    if (!a) return false;
+    if (a[0] === ".") return name.slice(-a.length) === a;
+    if (a.slice(-2) === "/*") return type.indexOf(a.slice(0, -1)) === 0;
+    return type === a;
+  });
+}
+function describeAccept(accept, t) {
+  if (!accept) return "";
+  return accept.split(",").map(function(a) {
+    a = a.trim();
+    if (a === "image/*") return t.images;
+    if (a === "application/pdf") return "PDF";
+    return a.replace(/^\./, "").toUpperCase();
+  }).filter(function(x, i, arr) {
+    return arr.indexOf(x) === i;
+  }).join(", ");
+}
+var seq = 0;
+const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
+  var t = useStrings();
+  var auto = uid(), id = props.id || auto;
+  var st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
+  var items = st[0] || [];
+  var dragState = React.useState(false), over = dragState[0];
+  var inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  var urls = React.useRef({});
+  var maxFiles = props.multiple ? props.maxFiles : 1;
+  var note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
+  React.useEffect(function() {
+    return function() {
+      Object.keys(urls.current).forEach(function(k) {
+        URL.revokeObjectURL(urls.current[k]);
+      });
+    };
+  }, []);
+  function thumb(it) {
+    if (!it.file || !/^image\//.test(it.type || "") || typeof URL === "undefined" || !URL.createObjectURL) return null;
+    if (!urls.current[it.id]) urls.current[it.id] = URL.createObjectURL(it.file);
+    return urls.current[it.id];
+  }
+  function add(list) {
+    var files = Array.prototype.slice.call(list || []);
+    if (!files.length || props.disabled) return;
+    var keep = props.multiple ? items.slice() : [];
+    var room = maxFiles ? maxFiles - keep.filter(function(i) {
+      return !i.error;
+    }).length : Infinity;
+    files.forEach(function(f) {
+      var err = null;
+      if (!matches(f, props.accept)) err = t.fileWrongType;
+      else if (props.maxSize && f.size > props.maxSize) err = t.fileTooBig(formatBytes(props.maxSize));
+      else if (room <= 0) err = t.tooManyFiles(maxFiles);
+      else room--;
+      keep.push({ id: "f" + ++seq, file: f, name: f.name, size: f.size, type: f.type, status: err ? "error" : "ready", error: err || void 0 });
+    });
+    st[1](keep);
+  }
+  function remove(it) {
+    if (urls.current[it.id]) {
+      URL.revokeObjectURL(urls.current[it.id]);
+      delete urls.current[it.id];
+    }
+    st[1](items.filter(function(x) {
+      return x.id !== it.id;
+    }));
+    if (props.onRemove) props.onRemove(it);
+    if (inputRef.current) inputRef.current.focus();
+  }
+  var error = props.error;
+  return h(
+    Field,
+    { id, label: props.label, hint: props.hint, error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
+    h(
+      "div",
+      {
+        className: cx("aura-upload", over && "is-over", props.disabled && "is-disabled", error && "is-invalid"),
+        onClick: function(e) {
+          if (!props.disabled && e.target !== inputRef.current && inputRef.current) inputRef.current.click();
+        },
+        onDragOver: function(e) {
+          if (props.disabled) return;
+          e.preventDefault();
+          if (!over) dragState[1](true);
+        },
+        onDragLeave: function(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) dragState[1](false);
+        },
+        onDrop: function(e) {
+          e.preventDefault();
+          dragState[1](false);
+          add(e.dataTransfer && e.dataTransfer.files);
+        }
+      },
+      h(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
+      h("span", { className: "aura-upload__text" }, t.dropFiles, " "),
+      /* The real input: visually hidden, still the labelled, focusable control (keyboard and screen readers use it). */
+      h("input", {
+        ref: inputMerged,
+        id,
+        type: "file",
+        className: "aura-upload__input",
+        accept: props.accept,
+        multiple: !!props.multiple,
+        disabled: props.disabled,
+        name: props.name,
+        required: props.required && !items.some(function(i) {
+          return !i.error;
+        }),
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": [error ? id + "-error" : props.hint ? id + "-hint" : null, note ? id + "-note" : null].filter(Boolean).join(" ") || void 0,
+        onChange: function(e) {
+          add(e.target.files);
+          e.target.value = "";
+        }
+      }),
+      h("span", { className: "aura-upload__browse", "aria-hidden": true }, props.multiple ? t.browse : t.browseOne),
+      note ? h("span", { className: "aura-upload__note", id: id + "-note" }, note) : null
+    ),
+    items.length ? h("ul", { className: "aura-upload__list", "aria-live": "polite" }, items.map(function(it) {
+      var src = thumb(it);
+      return h(
+        "li",
+        { key: it.id, className: cx("aura-upload__item", it.error && "is-error") },
+        src ? h("img", { className: "aura-upload__thumb", src, alt: "" }) : h("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, h(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })),
+        h(
+          "span",
+          { className: "aura-upload__meta" },
+          h("span", { className: "aura-upload__name" }, it.name),
+          h(
+            "span",
+            { className: "aura-upload__sub" },
+            it.error ? h(React.Fragment, null, h(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? h(React.Fragment, null, h(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)
+          ),
+          it.status === "uploading" ? h(
+            "span",
+            { className: "aura-upload__bar", role: "progressbar", "aria-label": it.name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": it.progress != null ? Math.round(it.progress) : void 0 },
+            h("span", { style: { width: (it.progress || 0) + "%" } })
+          ) : null
+        ),
+        h(IconButton, { icon: "x", label: t.remove(it.name), onClick: function() {
+          remove(it);
+        } })
+      );
+    })) : null
+  );
+});
+export {
+  FileUpload,
+  formatBytes
+};

package/dist/esm/Icon.js

@@ -0,0 +1,35 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const h = React.createElement;
+var 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" }]] };
+var SIZES = { sm: 16, md: 20, lg: 24 };
+const Icon = React.forwardRef(function Icon2(props, ref) {
+  var shapes = ICONS[props.name];
+  if (!shapes) return null;
+  var size = SIZES[props.size] || props.size || 16;
+  var a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
+  return h("svg", Object.assign({
+    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) {
+    var attrs = { key: i };
+    for (var k in s[1]) attrs[k === "stroke-width" ? "strokeWidth" : k] = s[1][k];
+    return h(s[0], attrs);
+  }));
+});
+const iconNames = Object.keys(ICONS);
+export {
+  ICONS,
+  Icon,
+  iconNames
+};

package/dist/esm/IconButton.js

@@ -0,0 +1,18 @@
+'use client';
+import * as React from "react";
+import { cx, omit } from "./internal.js";
+import { Icon } from "./Icon.js";
+const h = React.createElement;
+const IconButton = React.forwardRef(function IconButton2(props, ref) {
+  var rest = omit(props, ["icon", "label", "className", "size"]);
+  return h("button", Object.assign({}, rest, {
+    ref,
+    type: props.type || "button",
+    "aria-label": props.label,
+    title: props.label,
+    className: cx("aura-icon-btn", props.className)
+  }), h(Icon, { name: props.icon, size: props.size || "sm" }));
+});
+export {
+  IconButton
+};

package/dist/esm/Menu.js

@@ -0,0 +1,98 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cx, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
+import { Icon } from "./Icon.js";
+const h = React.createElement;
+const Menu = React.forwardRef(function Menu2(props, ref) {
+  var own = React.useRef(null), merged = useMergedRef(ref, own);
+  var posState = React.useState(null);
+  var pos = posState[0], setPos = posState[1];
+  var items = props.items || [];
+  var mounted = useMounted();
+  useIsoLayoutEffect(function() {
+    var a = props.anchor, m = own.current;
+    if (!a || !m) return;
+    var r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
+    var top = r.bottom + 4;
+    if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
+    var left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
+    setPos({ top, left });
+  }, [props.anchor, mounted]);
+  React.useEffect(function() {
+    if (!mounted) return;
+    var first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
+    if (first && props.autoFocus !== false) first.focus();
+    function outside(e) {
+      if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target))) props.onClose(false);
+    }
+    function onScroll(e) {
+      if (own.current && !own.current.contains(e.target)) props.onClose(false);
+    }
+    document.addEventListener("pointerdown", outside, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return function() {
+      document.removeEventListener("pointerdown", outside, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [mounted]);
+  function onKeyDown(e) {
+    var list = Array.prototype.slice.call(own.current.querySelectorAll('[role^="menuitem"]:not([disabled])'));
+    var i = list.indexOf(document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      list[(i + 1) % list.length].focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      list[(i - 1 + list.length) % list.length].focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      list[0].focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      list[list.length - 1].focus();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      props.onClose(true);
+    } else if (e.key === "Tab") {
+      props.onClose(true);
+    }
+    e.stopPropagation();
+  }
+  var el = h("div", {
+    ref: merged,
+    role: "menu",
+    "aria-label": props.label,
+    className: "aura-menu",
+    onKeyDown,
+    style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
+  }, items.map(function(it, i) {
+    if (it.separator) return h("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
+    var isCheck = it.checked !== void 0;
+    return h(
+      "button",
+      {
+        key: i,
+        type: "button",
+        tabIndex: -1,
+        disabled: it.disabled,
+        role: isCheck ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": isCheck ? !!it.checked : void 0,
+        className: "aura-menu__item",
+        onClick: function() {
+          it.onSelect();
+          if (!it.keepOpen) props.onClose(true);
+        }
+      },
+      isCheck ? h("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? h(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? h(Icon, { name: it.icon }) : h("span", { className: "aura-menu__blank" }),
+      h("span", { className: "aura-menu__label" }, it.label),
+      it.hint ? h("span", { className: "aura-menu__hint" }, it.hint) : null
+    );
+  }));
+  return mounted ? createPortal(el, document.body) : null;
+});
+export {
+  Menu
+};

package/dist/esm/Stat.js

@@ -0,0 +1,45 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+import { Icon } from "./Icon.js";
+const h = React.createElement;
+const Stat = React.forwardRef(function Stat2(props, ref) {
+  var ch = props.change;
+  var dir = ch && (ch.direction || "flat");
+  var tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
+  var Tag = props.href ? "a" : props.onClick ? "button" : "div";
+  var interactive = Tag !== "div";
+  return h(
+    Tag,
+    {
+      ref,
+      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
+      href: props.href,
+      onClick: props.onClick,
+      type: Tag === "button" ? "button" : void 0,
+      "aria-busy": props.loading || void 0
+    },
+    h(
+      "span",
+      { className: "aura-stat__head" },
+      h("span", { className: "aura-stat__label" }, props.label),
+      props.icon ? h("span", { className: "aura-stat__icon" }, h(Icon, { name: props.icon })) : null
+    ),
+    props.loading ? h("span", { className: "aura-stat__value" }, h("span", { className: "aura-skel aura-stat__skel" })) : h("span", { className: "aura-stat__value" }, props.value, props.unit ? h("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? h(
+      "span",
+      { className: "aura-stat__foot" },
+      ch && !props.loading ? h(
+        "span",
+        { className: cx("aura-stat__change", "is-" + tone) },
+        h(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }),
+        h("span", null, ch.value)
+      ) : null,
+      ch && ch.label && !props.loading ? h("span", { className: "aura-stat__caption" }, ch.label) : null,
+      props.caption ? h("span", { className: "aura-stat__caption" }, props.caption) : null
+    ) : null
+  );
+});
+export {
+  Stat
+};

package/dist/esm/StatusPill.js

@@ -0,0 +1,32 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+import { Icon } from "./Icon.js";
+const h = React.createElement;
+var TONE_ICON = { neutral: "circle", progress: "circle-dot-dashed", ready: "circle-check", blocked: "ban" };
+var TONE_WORDS = {
+  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
+  progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
+  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
+};
+function toneFor(status) {
+  var s = String(status == null ? "" : status).trim().toLowerCase();
+  for (var t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
+  return "neutral";
+}
+var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
+const StatusPill = React.forwardRef(function StatusPill2(props, ref) {
+  var tone = props.tone || toneFor(props.children);
+  return h(
+    "span",
+    { ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) },
+    h(Icon, { name: TONE_ICON[tone] || "circle", size: 12 }),
+    props.children
+  );
+});
+export {
+  StatusPill,
+  TONE_ORDER,
+  toneFor as statusTone,
+  toneFor
+};

package/dist/esm/Surface.js

@@ -0,0 +1,22 @@
+'use client';
+import * as React from "react";
+import { cx, omit } from "./internal.js";
+const h = React.createElement;
+const Surface = React.forwardRef(function Surface2(props, ref) {
+  var t = props.texture || "mesh";
+  var rest = omit(props, ["texture", "className", "children", "as"]);
+  return h(props.as || "div", Object.assign({}, rest, {
+    ref,
+    /* Textures stay light in every theme, so everything on them uses the light tokens. */
+    "data-theme": "light",
+    className: cx(
+      "aura-surface",
+      (t === "mesh" || t === "mesh-grain") && "aura-mesh",
+      (t === "grain" || t === "mesh-grain") && "aura-grain",
+      props.className
+    )
+  }), props.children);
+});
+export {
+  Surface
+};

package/dist/esm/ThemeStyle.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from "react";
+import { createTheme } from "./theme.js";
+const h = React.createElement;
+function ThemeStyle(props) {
+  var css = React.useMemo(function() {
+    return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(props.selector);
+  }, [props.brand, props.signal, props.primary, props.name, props.selector]);
+  return h("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
+}
+export {
+  ThemeStyle
+};