@jirawatpyk/aura-react 5.8.0 → 5.9.0

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

@@ -1,4 +1,3 @@
-'use client';
 function cx() {
   return Array.prototype.filter.call(arguments, Boolean).join(" ");
 }
@@ -13,8 +12,22 @@ 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

@@ -3,12 +3,22 @@ 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: "info",
-  success: "circle-check",
-  warning: "triangle-alert",
-  danger: "circle-alert"
+  info: IconInfo,
+  success: IconCircleCheck,
+  warning: IconTriangleAlert,
+  danger: IconCircleAlert
 };
 function alertElement(props, ref, close) {
   const tone = props.tone || "info";
@@ -21,7 +31,7 @@ function alertElement(props, ref, close) {
       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(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
   );
@@ -60,16 +70,16 @@ function cardElement(props, ref) {
   );
 }
 const PILL_ICON = {
-  neutral: "circle",
-  progress: "circle-dot-dashed",
-  ready: "circle-check",
-  warning: "triangle-alert",
-  blocked: "ban"
+  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: PILL_ICON[tone] || "circle", size: 12 }), props.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"]);
@@ -98,7 +108,7 @@ function emptyStateElement(props, ref) {
       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("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

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
+};