@jirawatpyk/aura-react 4.7.1 → 4.8.0

package/dist/esm/Progress.js

@@ -0,0 +1,40 @@
+'use client';
+import * as React from "react";
+import { cx, tone, uid } from "./internal.js";
+const Progress = React.forwardRef(function Progress2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const max = props.max || 100, det = props.value != null;
+  const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
+  const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx(
+        "aura-progress",
+        "aura-progress--" + tone(props.tone || "accent"),
+        props.size === "sm" && "is-sm",
+        props.className
+      )
+    },
+    props.label || props.showValue && shown ? /* @__PURE__ */ React.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx("aura-progress__track", !det && "is-indeterminate"),
+        role: "progressbar",
+        "aria-labelledby": props.label ? id + "-label" : void 0,
+        "aria-label": props.label ? void 0 : props["aria-label"],
+        "aria-valuemin": det ? 0 : void 0,
+        "aria-valuemax": det ? max : void 0,
+        "aria-valuenow": det ? props.value : void 0,
+        "aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
+    ),
+    props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
+  );
+});
+export {
+  Progress
+};

package/dist/esm/RadioGroup.js

@@ -0,0 +1,46 @@
+'use client';
+import * as React from "react";
+import { describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+  const name = props.name || id;
+  return /* @__PURE__ */ React.createElement(
+    "fieldset",
+    {
+      ref,
+      className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
+      "aria-describedby": describedBy(id, props),
+      "aria-invalid": props.error ? true : void 0,
+      disabled: props.disabled
+    },
+    props.label ? /* @__PURE__ */ React.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
+      const v = typeof o === "object" ? o : { value: o, label: o };
+      return /* @__PURE__ */ React.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "radio",
+          className: "aura-radio",
+          name,
+          value: v.value,
+          disabled: v.disabled,
+          checked: st[0] === v.value,
+          onChange: function() {
+            st[1](v.value);
+          }
+        }
+      ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
+    })),
+    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+  );
+});
+export {
+  RadioGroup
+};

package/dist/esm/Select.js

@@ -0,0 +1,48 @@
+'use client';
+import * as React from "react";
+import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, omit, uid } from "./internal.js";
+const h = React.createElement;
+const Select = React.forwardRef(function Select2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS.concat(["children"]));
+  const opts = (props.options || []).map(function(o) {
+    const v = typeof o === "object" ? o : { value: o, label: o };
+    return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+  });
+  if (props.placeholder)
+    opts.unshift(
+      /* @__PURE__ */ React.createElement("option", { key: "__ph", value: "", disabled: true }, props.placeholder)
+    );
+  const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
+      "select",
+      Object.assign(extra, rest, {
+        ref,
+        id,
+        className: "aura-input__control",
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }),
+      opts,
+      props.children
+    ), /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-select__chevron" }))
+  );
+});
+export {
+  Select
+};

package/dist/esm/SideNav.js

@@ -0,0 +1,36 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+const SideNav = React.forwardRef(function SideNav2(props, ref) {
+  const t = useStrings();
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+  function item(it) {
+    const on = st[0] === it.id;
+    const inner = [
+      it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : null,
+      /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
+      it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
+    ];
+    const common = {
+      className: cx("aura-nav__item", on && "is-active"),
+      "aria-current": on ? "page" : void 0,
+      onClick: function(e) {
+        if (!it.href) e.preventDefault();
+        st[1](it.id);
+      }
+    };
+    return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
+  }
+  return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
+    return /* @__PURE__ */ React.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
+  })), props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
+});
+export {
+  SideNav
+};

package/dist/esm/Skeleton.js

@@ -0,0 +1,29 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const Skeleton = React.forwardRef(function Skeleton2(props, ref) {
+  const v = props.variant || "text";
+  if (v === "text" && (props.lines || 1) > 1) {
+    const n = props.lines, rows = [];
+    for (let i = 0; i < n; i++)
+      rows.push(/* @__PURE__ */ React.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n - 1 ? "60%" : "100%" } }));
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref,
+        className: cx("aura-skel-lines", props.className),
+        "aria-hidden": true,
+        style: props.width ? { width: props.width } : void 0
+      },
+      rows
+    );
+  }
+  const style = { width: props.width, height: props.height };
+  if (v === "circle") {
+    style.width = style.height = props.size || props.width || 40;
+  }
+  return /* @__PURE__ */ React.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
+});
+export {
+  Skeleton
+};

package/dist/esm/Stack.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+import { respVars, space } from "./responsive.js";
+const h = React.createElement;
+const Stack = React.forwardRef(function Stack2(props, ref) {
+  const style = Object.assign(
+    {},
+    respVars("aura-stack-dir", props.direction || "column"),
+    respVars("aura-stack-gap", props.gap == null ? 4 : props.gap, space),
+    respVars("aura-stack-align", props.align || "stretch"),
+    props.justify ? { justifyContent: props.justify } : null,
+    props.wrap ? { flexWrap: "wrap" } : null,
+    props.style
+  );
+  return h(props.as || "div", { ref, className: cx("aura-stack", props.className), style }, props.children);
+});
+export {
+  Stack
+};

package/dist/esm/Switch.js

@@ -0,0 +1,30 @@
+'use client';
+import * as React from "react";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const Switch = React.forwardRef(function Switch2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
+  const on = !!st[0];
+  return /* @__PURE__ */ React.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": on,
+      disabled: props.disabled,
+      "aria-labelledby": props.label ? id + "-label" : void 0,
+      "aria-label": props.label ? void 0 : props["aria-label"],
+      "aria-describedby": props.description ? id + "-desc" : void 0,
+      className: cx("aura-switch", on && "is-on"),
+      onClick: function() {
+        st[1](!on);
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
+  ), props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
+});
+export {
+  Switch
+};

package/dist/esm/Tabs.js

@@ -0,0 +1,89 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const Tabs = React.forwardRef(function Tabs2(props, ref) {
+  const items = props.tabs || [], base = uid();
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue || items[0] && items[0].id,
+    props.onChange
+  );
+  const refs = React.useRef({});
+  const current = items.filter(function(t) {
+    return t.id === st[0];
+  })[0] || items[0];
+  function go(i) {
+    const enabled = items.filter(function(t2) {
+      return !t2.disabled;
+    });
+    const t = enabled[(i + enabled.length) % enabled.length];
+    st[1](t.id);
+    if (refs.current[t.id]) refs.current[t.id].focus();
+  }
+  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",
+      onKeyDown: function(e) {
+        const enabled = items.filter(function(t) {
+          return !t.disabled;
+        }), i = enabled.indexOf(current);
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(i + 1);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(i - 1);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          go(0);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          go(enabled.length - 1);
+        }
+      }
+    },
+    items.map(function(t) {
+      const on = current && t.id === current.id;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          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,
+          disabled: t.disabled,
+          ref: function(el) {
+            refs.current[t.id] = el;
+          },
+          className: cx("aura-tab", on && "is-active"),
+          onClick: function() {
+            st[1](t.id);
+          }
+        },
+        t.icon ? /* @__PURE__ */ React.createElement(Icon, { name: t.icon }) : null,
+        t.label,
+        t.count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-tab__count" }, t.count) : null
+      );
+    })
+  ), current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      id: base + "-panel-" + current.id,
+      "aria-labelledby": base + "-tab-" + current.id,
+      tabIndex: 0,
+      className: "aura-tabs__panel"
+    },
+    current.content
+  ) : null);
+});
+export {
+  Tabs
+};

package/dist/esm/Tag.js

@@ -0,0 +1,42 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, omit } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Tag = React.forwardRef(function Tag2(props, ref) {
+  const t = useStrings();
+  const selectable = props.onClick != null || props.selected != null;
+  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  const inner = [
+    props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
+    /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
+  ];
+  if (selectable) {
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        "aria-pressed": !!props.selected,
+        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],
+      inner[1]
+    );
+  }
+  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "aura-tag__remove",
+      "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
+      onClick: props.onRemove
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 12 })
+  ) : null);
+});
+export {
+  Tag
+};

package/dist/esm/TextField.js

@@ -0,0 +1,39 @@
+'use client';
+import * as React from "react";
+import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, omit, uid } from "./internal.js";
+const TextField = React.forwardRef(function TextField2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS);
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        ...rest,
+        ref,
+        id,
+        className: "aura-input__control",
+        placeholder: props.placeholder,
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }
+    ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
+  );
+});
+export {
+  TextField
+};

package/dist/esm/Textarea.js

@@ -0,0 +1,38 @@
+'use client';
+import * as React from "react";
+import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { omit, uid } from "./internal.js";
+const Textarea = React.forwardRef(function Textarea2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS);
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        rows: 4,
+        ...rest,
+        ref,
+        id,
+        className: "aura-input aura-textarea",
+        placeholder: props.placeholder,
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }
+    )
+  );
+});
+export {
+  Textarea
+};

package/dist/esm/TimePicker.js

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
-import { Field } from "./forms.js";
+import { Field } from "./Field.js";
 function pad(n) {
   return (n < 10 ? "0" : "") + n;
 }

package/dist/esm/Toaster.js

@@ -0,0 +1,124 @@
+'use client';
+import * as React from "react";
+import { ALERT_ICON } from "./Alert.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { cx, useMounted } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { createPortal } from "react-dom";
+const toastState = {
+  list: [],
+  subs: [],
+  n: 0
+};
+function emitToasts() {
+  toastState.subs.forEach(function(f) {
+    f(toastState.list.slice());
+  });
+}
+function toast(opts) {
+  if (typeof opts === "string") opts = { title: opts };
+  const id = opts.id || "t" + ++toastState.n;
+  toastState.list = toastState.list.filter(function(t) {
+    return t.id !== id;
+  }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
+  emitToasts();
+  return id;
+}
+toast.dismiss = function(id) {
+  toastState.list = toastState.list.filter(function(t) {
+    return t.id !== id;
+  });
+  emitToasts();
+};
+function ToastItem(props) {
+  const str = useStrings();
+  const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
+  function start() {
+    if (left.current === Infinity) return;
+    since.current = Date.now();
+    timer.current = setTimeout(function() {
+      toast.dismiss(t.id);
+    }, left.current);
+  }
+  function pause() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+      left.current -= Date.now() - since.current;
+    }
+  }
+  React.useEffect(function() {
+    start();
+    return pause;
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx("aura-toast", "aura-toast--" + t.tone),
+      role: t.tone === "danger" ? "alert" : "status",
+      onMouseEnter: pause,
+      onMouseLeave: start,
+      onFocus: pause,
+      onBlur: start
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
+    t.action ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-toast__action",
+        onClick: function() {
+          t.action.onClick && t.action.onClick();
+          toast.dismiss(t.id);
+        }
+      },
+      t.action.label
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "x",
+        label: str.dismissToast,
+        className: "aura-toast__close",
+        onClick: function() {
+          toast.dismiss(t.id);
+        }
+      }
+    )
+  );
+}
+function Toaster(props) {
+  const t = useStrings();
+  const mounted = useMounted();
+  const s = React.useState(toastState.list);
+  React.useEffect(function() {
+    toastState.subs.push(s[1]);
+    return function() {
+      toastState.subs = toastState.subs.filter(function(f) {
+        return f !== s[1];
+      });
+    };
+  }, []);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+        role: "region",
+        "aria-live": "polite",
+        "aria-label": t.notifications
+      },
+      s[0].map(function(t2) {
+        return /* @__PURE__ */ React.createElement(ToastItem, { key: t2.id, toast: t2 });
+      })
+    ),
+    document.body
+  );
+}
+export {
+  Toaster,
+  toast
+};