@jirawatpyk/aura-react 4.7.2 → 4.9.0

package/dist/esm/Accordion.js

@@ -0,0 +1,66 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const h = React.createElement;
+const Accordion = React.forwardRef(function Accordion2(props, ref) {
+  const auto = uid(), base = props.id || auto;
+  const multiple = props.type === "multiple";
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue != null ? props.defaultValue : multiple ? [] : null,
+    props.onChange
+  );
+  const open = multiple ? st[0] || [] : st[0] ? [st[0]] : [];
+  const HT = "h" + (props.headingLevel || 3);
+  const items = props.items || [];
+  function toggle(id) {
+    const isOpen = open.indexOf(id) >= 0;
+    if (multiple)
+      st[1](
+        isOpen ? open.filter(function(x) {
+          return x !== id;
+        }) : open.concat([id])
+      );
+    else st[1](isOpen ? props.collapsible === false ? id : null : id);
+  }
+  function onKey(e) {
+    const btns = Array.prototype.slice.call(
+      e.currentTarget.querySelectorAll(
+        ":scope > .aura-accordion__item > .aura-accordion__heading > button:not([disabled])"
+      )
+    );
+    let i = btns.indexOf(document.activeElement), k = e.key, n = null;
+    if (i < 0) return;
+    if (k === "ArrowDown") n = btns[(i + 1) % btns.length];
+    else if (k === "ArrowUp") n = btns[(i - 1 + btns.length) % btns.length];
+    else if (k === "Home") n = btns[0];
+    else if (k === "End") n = btns[btns.length - 1];
+    if (n) {
+      e.preventDefault();
+      n.focus();
+    }
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items.map(function(it) {
+    const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
+    return /* @__PURE__ */ React.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        id: bid,
+        "aria-expanded": on,
+        "aria-controls": pid,
+        disabled: it.disabled,
+        onClick: function() {
+          toggle(it.id);
+        }
+      },
+      it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
+      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
+      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
+    )), /* @__PURE__ */ React.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
+  }));
+});
+export {
+  Accordion
+};

package/dist/esm/Alert.js

@@ -0,0 +1,31 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const ALERT_ICON = {
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert"
+};
+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),
+    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+  );
+});
+export {
+  ALERT_ICON,
+  Alert
+};

package/dist/esm/AppShell.js

@@ -0,0 +1,55 @@
+'use client';
+import * as React from "react";
+import { Drawer } from "./Dialog.js";
+import { IconButton } from "./IconButton.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { useBreakpoint } from "./responsive.js";
+const AppShell = React.forwardRef(function AppShell2(props, ref) {
+  const t = useStrings();
+  const bp = useBreakpoint();
+  const compact = bp === "base" || bp === "sm" || bp === "md";
+  const st = React.useState(false), open = st[0], setOpen = st[1];
+  React.useEffect(
+    function() {
+      if (!compact) setOpen(false);
+    },
+    [compact]
+  );
+  const navEl = props.nav;
+  const nav = props.nav && React.isValidElement(props.nav) && compact ? React.cloneElement(navEl, {
+    onChange: function(id) {
+      if (navEl.props.onChange) navEl.props.onChange(id);
+      setOpen(false);
+    },
+    className: cx(navEl.props.className, "is-in-drawer")
+  }) : props.nav;
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      open,
+      onClose: function() {
+        setOpen(false);
+      },
+      side: "left",
+      size: "nav",
+      "aria-label": props.navLabel || t.navigation,
+      dismissible: true
+    },
+    nav
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "menu",
+      label: props.menuLabel || t.openNav,
+      size: "md",
+      onClick: function() {
+        setOpen(true);
+      },
+      "aria-expanded": open
+    }
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
+});
+export {
+  AppShell
+};

package/dist/esm/Avatar.js

@@ -0,0 +1,39 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
+function initials(name) {
+  const parts = String(name || "?").trim().split(/\s+/);
+  return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
+}
+const Avatar = React.forwardRef(function Avatar2(props, ref) {
+  const size = props.size || "md", errState = React.useState(false);
+  let hash = 0;
+  String(props.name || "").split("").forEach(function(ch) {
+    hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+  });
+  const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone, props.className),
+      role: "img",
+      "aria-label": props.name + (props.status ? ", " + props.status : "")
+    },
+    props.src && !errState[0] ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: props.src,
+        alt: "",
+        onError: function() {
+          errState[1](true);
+        }
+      }
+    ) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+  );
+});
+export {
+  Avatar
+};

package/dist/esm/Badge.js

@@ -0,0 +1,26 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, omit, tone } from "./internal.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
+  );
+});
+export {
+  Badge
+};

package/dist/esm/Breadcrumb.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
+  const t = useStrings();
+  const items = props.items || [];
+  return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
+    const last = i === items.length - 1;
+    return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+  })));
+});
+export {
+  Breadcrumb
+};

package/dist/esm/Card.js

@@ -0,0 +1,26 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const h = React.createElement;
+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
+  );
+});
+export {
+  Card
+};