@jirawatpyk/aura-react 4.7.2 → 4.9.0

package/dist/esm/Field.js

@@ -0,0 +1,46 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.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"
+];
+export {
+  FIELD_KEYS,
+  Field,
+  describedBy
+};

package/dist/esm/FileUpload.js

@@ -4,7 +4,7 @@ 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";
+import { Field } from "./Field.js";
 function formatBytes(n) {
   if (n == null) return "";
   if (n < 1024) return n + " B";

package/dist/esm/Grid.js

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

package/dist/esm/NumberField.js

@@ -0,0 +1,175 @@
+'use client';
+import * as React from "react";
+import { Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+function decimalsOf(n) {
+  const s = String(n);
+  const i = s.indexOf(".");
+  return i < 0 ? 0 : s.length - i - 1;
+}
+function parse(text) {
+  const s = text.replace(/[,\s ]/g, "");
+  if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
+  return Number(s);
+}
+const NumberField = React.forwardRef(function NumberField2(props, ref) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto;
+  const step = props.step || 1;
+  const decimals = props.decimals != null ? props.decimals : decimalsOf(step);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const value = st[0], setValue = st[1];
+  const draftState = React.useState(null), draft = draftState[0], setDraft = draftState[1];
+  function fmt(n) {
+    if (n == null || isNaN(n)) return "";
+    return n.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  }
+  function fit(n) {
+    let v = n;
+    if (props.min != null && v < props.min) v = props.min;
+    if (props.max != null && v > props.max) v = props.max;
+    const f = Math.pow(10, decimals);
+    return Math.round(v * f) / f;
+  }
+  function nudge(by) {
+    if (props.disabled || props.readOnly) return;
+    const base = value == null ? props.min != null && props.min > 0 ? props.min - by : 0 : value;
+    const next = fit(base + by);
+    setValue(next);
+    setDraft(null);
+  }
+  function onKeyDown(e) {
+    const k = e.key;
+    let by = 0;
+    if (k === "ArrowUp") by = step;
+    else if (k === "ArrowDown") by = -step;
+    else if (k === "PageUp") by = step * 10;
+    else if (k === "PageDown") by = -step * 10;
+    else if (k === "Home" && props.min != null) {
+      e.preventDefault();
+      setValue(props.min);
+      setDraft(null);
+      return;
+    } else if (k === "End" && props.max != null) {
+      e.preventDefault();
+      setValue(props.max);
+      setDraft(null);
+      return;
+    }
+    if (by) {
+      e.preventDefault();
+      nudge(by);
+    }
+  }
+  const atMin = value != null && props.min != null && value <= props.min;
+  const atMax = value != null && props.max != null && value >= props.max;
+  const affixText = function(x) {
+    return typeof x === "string" || typeof x === "number" ? String(x) : "";
+  };
+  const valueText = value == null ? void 0 : [affixText(props.prefix), fmt(value), affixText(props.suffix)].join(" ").trim();
+  const stepper = props.stepper !== false && !props.readOnly;
+  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-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref,
+        id,
+        type: "text",
+        role: "spinbutton",
+        inputMode: decimals > 0 || props.min != null && props.min < 0 ? "decimal" : "numeric",
+        autoComplete: "off",
+        className: "aura-input__control",
+        name: props.name,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        "aria-valuenow": value == null ? void 0 : value,
+        "aria-valuemin": props.min,
+        "aria-valuemax": props.max,
+        "aria-valuetext": valueText,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props),
+        value: draft != null ? draft : fmt(value),
+        onFocus: function() {
+          setDraft(fmt(value));
+        },
+        onChange: function(e) {
+          const text = e.target.value;
+          setDraft(text);
+          if (!text.trim()) setValue(null);
+          else {
+            const n = parse(text);
+            if (!isNaN(n)) setValue(n);
+          }
+        },
+        onBlur: function(e) {
+          const n = draft == null ? value : !draft.trim() ? null : parse(draft);
+          if (n == null) {
+            if (value != null) setValue(null);
+          } else if (!isNaN(n)) {
+            const f = fit(n);
+            if (f !== value) setValue(f);
+          }
+          setDraft(null);
+          if (props.onBlur) props.onBlur(e);
+        },
+        onKeyDown
+      }
+    ), props.suffix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.decrease,
+        "aria-controls": id,
+        disabled: props.disabled || atMin,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(-step);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "minus" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.increase,
+        "aria-controls": id,
+        disabled: props.disabled || atMax,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(step);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "plus" })
+    )) : null)
+  );
+});
+export {
+  NumberField
+};

package/dist/esm/Pagination.js

@@ -0,0 +1,94 @@
+'use client';
+import * as React from "react";
+import { IconButton } from "./IconButton.js";
+import { cx, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+function pageList(page, count, sib) {
+  let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
+  if (page - sib <= 3) {
+    lo = 2;
+    hi = Math.min(count - 1, Math.max(hi, 3 + 2 * sib));
+  }
+  if (page + sib >= count - 2) {
+    hi = count - 1;
+    lo = Math.max(2, Math.min(lo, count - 2 - 2 * sib));
+  }
+  out.push(1);
+  if (lo === 3) out.push(2);
+  else if (lo > 3) out.push("\u2026a");
+  for (let i = lo; i <= hi; i++) out.push(i);
+  if (hi === count - 2) out.push(count - 1);
+  else if (hi < count - 2) out.push("\u2026b");
+  if (count > 1) out.push(count);
+  return out;
+}
+const Pagination = React.forwardRef(function Pagination2(props, ref) {
+  const t = useStrings();
+  const count = Math.max(1, props.pageCount || 1);
+  const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
+  const page = Math.min(count, Math.max(1, st[0]));
+  function go(p) {
+    if (p >= 1 && p <= count && p !== page) st[1](p);
+  }
+  const link = props.getHref;
+  function item(p, label, extra) {
+    const common = Object.assign(
+      {
+        className: cx("aura-page", p === page && "is-current"),
+        "aria-current": p === page ? "page" : void 0,
+        "aria-label": t.pageN(p)
+      },
+      extra
+    );
+    return link ? /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: link(p),
+        onClick: function(e) {
+          if (props.onChange) {
+            e.preventDefault();
+            go(p);
+          }
+        },
+        ...common
+      },
+      label
+    ) : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: function() {
+          go(p);
+        },
+        ...common
+      },
+      label
+    );
+  }
+  return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "chevron-left",
+      label: t.prevPage,
+      disabled: page <= 1,
+      onClick: function() {
+        go(page - 1);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
+    return typeof p === "number" ? /* @__PURE__ */ React.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
+  })), /* @__PURE__ */ React.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "chevron-right",
+      label: t.nextPage,
+      disabled: page >= count,
+      onClick: function() {
+        go(page + 1);
+      }
+    }
+  ));
+});
+export {
+  Pagination
+};

package/dist/esm/Popover.js

@@ -0,0 +1,131 @@
+'use client';
+import * as React from "react";
+import { IconButton } from "./IconButton.js";
+import {
+  FOCUSABLE,
+  cx,
+  trapTab,
+  uid,
+  useIsoLayoutEffect,
+  useMaybeControlled,
+  useMergedRef,
+  useMounted
+} from "./internal.js";
+import { useStrings } from "./locale.js";
+import { createPortal } from "react-dom";
+function position(anchor, pop, placement) {
+  const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
+  let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
+  if (side === "bottom" && r.bottom + gap + ph > vh - 8 && r.top - gap - ph > 8) side = "top";
+  else if (side === "top" && r.top - gap - ph < 8 && r.bottom + gap + ph < vh - 8) side = "bottom";
+  const top = side === "top" ? r.top - gap - ph : r.bottom + gap;
+  const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
+  return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
+}
+const Popover = React.forwardRef(function Popover2(props, ref) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
+  const open = !!st[0];
+  const wrap = React.useRef(null), pop = React.useRef(null), popMerged = useMergedRef(ref, pop);
+  const pos = React.useState(null), mounted = useMounted();
+  function trigger() {
+    return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
+  }
+  function close(restore) {
+    st[1](false);
+    if (restore) {
+      const tr = trigger();
+      if (tr && tr.focus) tr.focus();
+    }
+  }
+  useIsoLayoutEffect(
+    function() {
+      if (!open || !pop.current || !trigger()) return;
+      function place() {
+        if (pop.current && trigger()) pos[1](position(trigger(), pop.current, props.placement));
+      }
+      place();
+      window.addEventListener("resize", place);
+      window.addEventListener("scroll", place, true);
+      return function() {
+        window.removeEventListener("resize", place);
+        window.removeEventListener("scroll", place, true);
+      };
+    },
+    [open, mounted, props.placement]
+  );
+  React.useEffect(
+    function() {
+      if (!open || !mounted) return;
+      if (props.autoFocus !== false && pop.current) {
+        const f = pop.current.querySelector("[data-autofocus]") || pop.current.querySelector(FOCUSABLE);
+        (f || pop.current).focus();
+      }
+      function outside(e) {
+        if (pop.current && pop.current.contains(e.target)) return;
+        if (wrap.current && wrap.current.contains(e.target)) return;
+        close(false);
+      }
+      document.addEventListener("pointerdown", outside, true);
+      return function() {
+        document.removeEventListener("pointerdown", outside, true);
+      };
+    },
+    [open, mounted]
+  );
+  const child = React.Children.only(props.trigger);
+  const panel = open && mounted ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: popMerged,
+        id,
+        role: "dialog",
+        "aria-modal": false,
+        "aria-label": props.title ? void 0 : props.label,
+        "aria-labelledby": props.title ? id + "-title" : void 0,
+        tabIndex: -1,
+        className: cx("aura-popover", pos[0] && "is-" + pos[0].side, props.className),
+        style: Object.assign(
+          { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 },
+          props.width ? { width: props.width } : null
+        ),
+        onKeyDown: function(e) {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            close(true);
+          } else trapTab(e, pop.current);
+        }
+      },
+      props.title ? /* @__PURE__ */ React.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: "x",
+          label: t.close,
+          onClick: function() {
+            close(true);
+          }
+        }
+      )) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
+        close: function() {
+          close(true);
+        }
+      }) : props.children)
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ React.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React.cloneElement(child, {
+    onClick: function(e) {
+      if (child.props.onClick) child.props.onClick(e);
+      st[1](!open);
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": open ? id : void 0
+  }), panel);
+});
+export {
+  Popover
+};

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/SegmentedControl.js

@@ -0,0 +1,104 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+function toOpt(o) {
+  return typeof o === "object" ? o : { value: o, label: o };
+}
+const SegmentedControl = React.forwardRef(
+  function SegmentedControl2(props, ref) {
+    const options = (props.options || []).map(toOpt);
+    const firstEnabled = options.filter(function(o) {
+      return !o.disabled;
+    })[0];
+    const st = useMaybeControlled(
+      props.value,
+      props.defaultValue != null ? props.defaultValue : firstEnabled ? firstEnabled.value : void 0,
+      props.onChange
+    );
+    const value = st[0], setValue = st[1];
+    const auto = uid(), id = props.id || auto;
+    const refs = React.useRef([]);
+    const selIdx = options.findIndex(function(o) {
+      return o.value === value;
+    });
+    const tabIdx = selIdx >= 0 && !options[selIdx].disabled ? selIdx : options.indexOf(firstEnabled);
+    function move(from, dir) {
+      const n = options.length;
+      for (let k = 1; k <= n; k++) {
+        const i = ((from + dir * k) % n + n) % n;
+        if (!options[i].disabled) {
+          setValue(options[i].value);
+          const el = refs.current[i];
+          if (el) el.focus();
+          return;
+        }
+      }
+    }
+    function onKeyDown(e, i) {
+      const k = e.key;
+      if (k === "ArrowRight" || k === "ArrowDown") {
+        e.preventDefault();
+        move(i, 1);
+      } else if (k === "ArrowLeft" || k === "ArrowUp") {
+        e.preventDefault();
+        move(i, -1);
+      } else if (k === "Home") {
+        e.preventDefault();
+        move(-1, 1);
+      } else if (k === "End") {
+        e.preventDefault();
+        move(options.length, -1);
+      }
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        id,
+        role: "radiogroup",
+        "aria-label": props.label,
+        "aria-disabled": props.disabled || void 0,
+        className: cx(
+          "aura-segmented",
+          props.size === "sm" && "aura-segmented--sm",
+          props.fullWidth && "is-full",
+          props.disabled && "is-disabled",
+          props.className
+        )
+      },
+      options.map(function(o, i) {
+        const on = o.value === value;
+        const off = props.disabled || o.disabled;
+        return /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            key: o.value,
+            ref: function(el) {
+              refs.current[i] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            "aria-label": o.iconOnly ? o.label : void 0,
+            title: o.iconOnly ? o.label : void 0,
+            tabIndex: i === tabIdx && !props.disabled ? 0 : -1,
+            disabled: off,
+            className: cx("aura-segmented__option", on && "is-selected", o.iconOnly && "is-icon"),
+            onClick: function() {
+              setValue(o.value);
+            },
+            onKeyDown: function(e) {
+              onKeyDown(e, i);
+            }
+          },
+          o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
+          o.iconOnly ? null : /* @__PURE__ */ React.createElement("span", null, o.label)
+        );
+      })
+    );
+  }
+);
+export {
+  SegmentedControl
+};