@jirawatpyk/aura-react 4.7.2 → 4.9.0

package/dist/esm/forms.js

@@ -1,212 +0,0 @@
-'use client';
-import * as React from "react";
-import { useStrings } from "./locale.js";
-import { cx, omit, useMaybeControlled, uid } from "./internal.js";
-import { Icon } from "./Icon.js";
-const h = React.createElement;
-const Field = React.forwardRef(function Field2(props, ref) {
-  const t = useStrings();
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
-    },
-    props.label ? h(
-      props.labelAs || "label",
-      { className: "aura-field__label", htmlFor: props.labelAs ? void 0 : props.id, id: props.labelId },
-      props.label,
-      props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
-      props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
-    ) : null,
-    props.children,
-    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
-  );
-});
-function describedBy(id, p) {
-  return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
-}
-const FIELD_KEYS = [
-  "label",
-  "hint",
-  "error",
-  "required",
-  "optional",
-  "icon",
-  "className",
-  "id",
-  "suffix",
-  "options",
-  "placeholder"
-];
-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)
-  );
-});
-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)
-      }
-    )
-  );
-});
-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" }))
-  );
-});
-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
-  );
-});
-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 {
-  Field,
-  RadioGroup,
-  Select,
-  Switch,
-  TextField,
-  Textarea
-};

package/dist/esm/layout.js

@@ -1,183 +0,0 @@
-'use client';
-import * as React from "react";
-import { useStrings } from "./locale.js";
-import { cx, useMaybeControlled, uid } from "./internal.js";
-import { Icon } from "./Icon.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
-  );
-});
-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);
-});
-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);
-});
-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" }));
-  })));
-});
-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,
-  Breadcrumb,
-  Card,
-  SideNav,
-  Tabs
-};

package/dist/esm/layout2.js

@@ -1,138 +0,0 @@
-'use client';
-import * as React from "react";
-import { useStrings } from "./locale.js";
-import { cx } from "./internal.js";
-import { IconButton } from "./IconButton.js";
-import { Drawer } from "./Dialog.js";
-const h = React.createElement;
-const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-const ORDER = ["base", "sm", "md", "lg", "xl"];
-function useBreakpoint() {
-  return React.useSyncExternalStore(subscribe, current, function() {
-    return "lg";
-  });
-}
-function current() {
-  let w = window.innerWidth, bp = "base";
-  ORDER.slice(1).forEach(function(k) {
-    if (w >= breakpoints[k]) bp = k;
-  });
-  return bp;
-}
-function subscribe(cb) {
-  window.addEventListener("resize", cb);
-  return function() {
-    window.removeEventListener("resize", cb);
-  };
-}
-function useResponsive(value) {
-  const bp = useBreakpoint();
-  if (value == null || typeof value !== "object") return value;
-  const map = value;
-  for (let i = ORDER.indexOf(bp); i >= 0; i--) if (map[ORDER[i]] !== void 0) return map[ORDER[i]];
-  return void 0;
-}
-function respVars(prefix, value, map) {
-  const style = {};
-  if (value == null) return style;
-  if (typeof value !== "object") value = { base: value };
-  let byBp = value, cur;
-  ORDER.forEach(function(k) {
-    if (byBp[k] !== void 0) cur = map ? map(byBp[k]) : byBp[k];
-    if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
-  });
-  return style;
-}
-const space = function(v) {
-  return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
-};
-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);
-});
-const Grid = React.forwardRef(function Grid2(props, ref) {
-  const style = Object.assign(
-    {},
-    respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
-    props.minItemWidth ? { gridTemplateColumns: "repeat(auto-fill, minmax(min(" + props.minItemWidth + "px, 100%), 1fr))" } : respVars("aura-grid-cols", props.columns || 1),
-    props.style
-  );
-  return h(
-    props.as || "div",
-    { ref, className: cx("aura-grid-layout", props.minItemWidth && "is-auto", props.className), style },
-    props.children
-  );
-});
-const Container = React.forwardRef(function Container2(props, ref) {
-  return h(
-    props.as || "div",
-    {
-      ref,
-      className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className),
-      style: props.style
-    },
-    props.children
-  );
-});
-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,
-  Container,
-  Grid,
-  Stack,
-  breakpoints,
-  useBreakpoint,
-  useResponsive
-};