@midas-ds/components 1.0.3 → 1.1.0

package/index79.js

@@ -1,274 +1,314 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { LinkButton as f } from "./index78.js";
-import { Button as k } from "./index69.js";
-import { c as h } from "./clsx-OuTLNxxd.js";
-import { FlexItem as N } from "./index47.js";
-import { Logo as g } from "./index73.js";
-import b from "react";
-import { m as v } from "./tokens-CjXmpXTi.js";
-import { Dropdown as x, DropdownItem as C } from "./index76.js";
-import { $ as L } from "./useFocusRing-BKGhL91C.js";
-import { c as y } from "./createLucideIcon-DeWljiyi.js";
-import { X as T } from "./x-JK7i-TQC.js";
-import './Layout.css';/**
- * @license lucide-react v0.453.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const I = y("Menu", [
-  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
-  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
-  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
-]);
-/**
- * @license lucide-react v0.453.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const B = y("PanelLeftClose", [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
-]);
-/**
- * @license lucide-react v0.453.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const M = y("PanelRightClose", [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M15 3v18", key: "14nvp0" }],
-  ["path", { d: "m8 9 3 3-3 3", key: "12hl5m" }]
-]), P = '"../theme/tokens.css"', H = '"Inter", sans-serif', O = "#143c50", z = "#f2f2f2", E = "#d9d9d9", F = "#b3b3b3", $ = "#a6a6a6", G = "#5d5d5d", S = "(min-width: 768px)", j = "#b90835", D = "_baseLayout_1w6p5_4", R = "_mainContent_1w6p5_13", q = "_header_1w6p5_18", X = "_headerContent_1w6p5_35", A = "_headerItems_1w6p5_52", J = "_logo_1w6p5_53", K = "_headerMenu_1w6p5_61", Q = "_toggleButton_1w6p5_69", U = "_sidebar_1w6p5_77", V = "_main_1w6p5_13", W = "_app_1w6p5_112", Y = "_sidebarOpened_1w6p5_121", Z = "_sidebarHeader_1w6p5_125", ee = "_sidebarFooter_1w6p5_134", ae = "_sidebarCollapsed_1w6p5_148", te = "_userName_1w6p5_165", se = "_abbr_1w6p5_177", ne = "_userTitle_1w6p5_183", ie = "_title_1w6p5_194", re = "_sidebarNav_1w6p5_205", oe = "_list_1w6p5_211", le = "_listGroupTitle_1w6p5_218", de = "_listItem_1w6p5_227", ce = "_listItemCollapsed_1w6p5_231", me = "_listLink_1w6p5_235", pe = "_linkText_1w6p5_242", _e = "_linkTextCollapsed_1w6p5_252", he = "_listLinkCollapsed_1w6p5_263", be = "_collapseButton_1w6p5_267", ye = "_backdrop_1w6p5_272", ue = "_backdropOpened_1w6p5_281", a = {
-  tokens: P,
-  display: H,
-  primaryBackground: O,
-  gray10: z,
-  gray30: E,
-  gray60: F,
-  gray70: $,
-  gray130: G,
-  mdBreakpoint: S,
-  logoPrimary: j,
-  baseLayout: D,
-  mainContent: R,
-  header: q,
-  headerContent: X,
-  headerItems: A,
-  logo: J,
-  headerMenu: K,
-  toggleButton: Q,
-  sidebar: U,
-  main: V,
-  app: W,
-  sidebarOpened: Y,
-  sidebarHeader: Z,
-  sidebarFooter: ee,
-  sidebarCollapsed: ae,
-  userName: te,
-  abbr: se,
-  userTitle: ne,
-  title: ie,
-  sidebarNav: re,
-  list: oe,
-  listGroupTitle: le,
-  listItem: de,
-  listItemCollapsed: ce,
-  listLink: me,
-  linkText: pe,
-  linkTextCollapsed: _e,
-  listLinkCollapsed: he,
-  collapseButton: be,
-  backdrop: ye,
-  backdropOpened: ue
-}, He = ({
-  items: p,
-  title: r,
-  user: d,
-  app: t,
-  children: i,
-  headerChildren: o,
-  clientSideRouter: c
-}) => {
-  const [m, s] = b.useState(!1), [n, _] = b.useState(!1);
-  return b.useEffect(() => {
-    const u = (w) => {
-      w.key === "Escape" && _(!1);
-    };
-    return window.addEventListener("keydown", u), () => {
-      window.removeEventListener("keydown", u);
-    };
-  }, []), /* @__PURE__ */ l("div", { className: a.baseLayout, children: [
-    /* @__PURE__ */ e(
-      we,
-      {
-        title: r,
-        headerChildren: o,
-        user: d,
-        app: t,
-        isOpened: n,
-        setIsOpened: _,
-        setIsCollapsed: s
-      }
-    ),
-    /* @__PURE__ */ l("div", { className: a.mainContent, children: [
-      /* @__PURE__ */ e(
-        ke,
-        {
-          items: p,
-          app: t,
-          isOpened: n,
-          isCollapsed: m,
-          setIsCollapsed: s,
-          clientSideRouter: c
-        }
-      ),
-      /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: i }) }) }),
-      /* @__PURE__ */ e(
-        "div",
+import { jsx as I } from "react/jsx-runtime";
+import { $ as L } from "./Group-D7_8007y.js";
+import { n as w, e as y, o as F, f as E, k as G, a as _, y as N, z as T, d as S, B as W, i as A, F as H, A as j, c as K, b as z } from "./useFocusRing-9PXyKy2A.js";
+import { d as U, e as J, c as Q, $ as X, a as Y } from "./Form-BWBjJC6v.js";
+import { b as Z, $ as ee } from "./useField-DMzJIIN4.js";
+import { $ as ae } from "./Text-BCF0xvqL.js";
+import V, { useMemo as ie, useState as de, forwardRef as M, createContext as q } from "react";
+import { $ as re } from "./useControlledState-Kv9K2AYu.js";
+import { $ as le } from "./FocusScope-B7CkxXNC.js";
+import { $ as se } from "./context-BpJLnOuu.js";
+import { $ as ne } from "./useFocusable-CcEBZe40.js";
+import { a as te } from "./VisuallyHidden-Dhr5caPC.js";
+import { I as oe } from "./TextField-CX4eOQf6.js";
+import './Radio.css';const C = /* @__PURE__ */ new WeakMap();
+function ce(a, e, d) {
+  let { value: r, children: s, "aria-label": l, "aria-labelledby": n } = a;
+  const i = a.isDisabled || e.isDisabled;
+  let u = s != null, f = l != null || n != null;
+  !u && !f && console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  let t = e.selectedValue === r, v = (B) => {
+    B.stopPropagation(), e.setSelectedValue(r);
+  }, { pressProps: m, isPressed: x } = w({
+    isDisabled: i
+  }), { pressProps: P, isPressed: $ } = w({
+    isDisabled: i,
+    onPress() {
+      e.setSelectedValue(r);
+    }
+  }), { focusableProps: D } = ne(y(a, {
+    onFocus: () => e.setLastFocusedValue(r)
+  }), d), R = y(m, D), g = F(a, {
+    labelable: !0
+  }), p = -1;
+  e.selectedValue != null ? e.selectedValue === r && (p = 0) : (e.lastFocusedValue === r || e.lastFocusedValue == null) && (p = 0), i && (p = void 0);
+  let { name: b, descriptionId: o, errorMessageId: h, validationBehavior: c } = C.get(e);
+  return U(d, e.selectedValue, e.setSelectedValue), J({
+    validationBehavior: c
+  }, e, d), {
+    labelProps: y(P, {
+      onClick: (B) => B.preventDefault()
+    }),
+    inputProps: y(g, {
+      ...R,
+      type: "radio",
+      name: b,
+      tabIndex: p,
+      disabled: i,
+      required: e.isRequired && c === "native",
+      checked: t,
+      value: r,
+      onChange: v,
+      "aria-describedby": [
+        a["aria-describedby"],
+        e.isInvalid ? h : null,
+        o
+      ].filter(Boolean).join(" ") || void 0
+    }),
+    isDisabled: i,
+    isSelected: t,
+    isPressed: x || $
+  };
+}
+function fe(a, e) {
+  let { name: d, isReadOnly: r, isRequired: s, isDisabled: l, orientation: n = "vertical", validationBehavior: i = "aria" } = a, { direction: u } = se(), { isInvalid: f, validationErrors: t, validationDetails: v } = e.displayValidation, { labelProps: m, fieldProps: x, descriptionProps: P, errorMessageProps: $ } = Z({
+    ...a,
+    // Radio group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span",
+    isInvalid: e.isInvalid,
+    errorMessage: a.errorMessage || t
+  }), D = F(a, {
+    labelable: !0
+  }), { focusWithinProps: R } = E({
+    onBlurWithin(b) {
+      var o;
+      (o = a.onBlur) === null || o === void 0 || o.call(a, b), e.selectedValue || e.setLastFocusedValue(null);
+    },
+    onFocusWithin: a.onFocus,
+    onFocusWithinChange: a.onFocusChange
+  }), g = (b) => {
+    let o;
+    switch (b.key) {
+      case "ArrowRight":
+        u === "rtl" && n !== "vertical" ? o = "prev" : o = "next";
+        break;
+      case "ArrowLeft":
+        u === "rtl" && n !== "vertical" ? o = "next" : o = "prev";
+        break;
+      case "ArrowDown":
+        o = "next";
+        break;
+      case "ArrowUp":
+        o = "prev";
+        break;
+      default:
+        return;
+    }
+    b.preventDefault();
+    let h = le(b.currentTarget, {
+      from: b.target
+    }), c;
+    o === "next" ? (c = h.nextNode(), c || (h.currentNode = b.currentTarget, c = h.firstChild())) : (c = h.previousNode(), c || (h.currentNode = b.currentTarget, c = h.lastChild())), c && (c.focus(), e.setSelectedValue(c.value));
+  }, p = G(d);
+  return C.set(e, {
+    name: p,
+    descriptionId: P.id,
+    errorMessageId: $.id,
+    validationBehavior: i
+  }), {
+    radioGroupProps: y(D, {
+      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
+      role: "radiogroup",
+      onKeyDown: g,
+      "aria-invalid": e.isInvalid || void 0,
+      "aria-errormessage": a["aria-errormessage"],
+      "aria-readonly": r || void 0,
+      "aria-required": s || void 0,
+      "aria-disabled": l || void 0,
+      "aria-orientation": n,
+      ...x,
+      ...R
+    }),
+    labelProps: m,
+    descriptionProps: P,
+    errorMessageProps: $,
+    isInvalid: f,
+    validationErrors: t,
+    validationDetails: v
+  };
+}
+let ue = Math.round(Math.random() * 1e10), be = 0;
+function $e(a) {
+  let e = ie(() => a.name || `radio-group-${ue}-${++be}`, [
+    a.name
+  ]);
+  var d;
+  let [r, s] = re(a.value, (d = a.defaultValue) !== null && d !== void 0 ? d : null, a.onChange), [l, n] = de(null), i = Q({
+    ...a,
+    value: r
+  }), u = (t) => {
+    !a.isReadOnly && !a.isDisabled && (s(t), i.commitValidation());
+  }, f = i.displayValidation.isInvalid;
+  return {
+    ...i,
+    name: e,
+    selectedValue: r,
+    setSelectedValue: u,
+    lastFocusedValue: l,
+    setLastFocusedValue: n,
+    isDisabled: a.isDisabled || !1,
+    isReadOnly: a.isReadOnly || !1,
+    isRequired: a.isRequired || !1,
+    validationState: a.validationState || (f ? "invalid" : null),
+    isInvalid: f
+  };
+}
+const pe = /* @__PURE__ */ q(null), ve = /* @__PURE__ */ q(null), O = /* @__PURE__ */ q(null), me = /* @__PURE__ */ M(function(e, d) {
+  [e, d] = _(e, d, pe);
+  let { validationBehavior: r } = N(X) || {};
+  var s, l;
+  let n = (l = (s = e.validationBehavior) !== null && s !== void 0 ? s : r) !== null && l !== void 0 ? l : "native", i = $e({
+    ...e,
+    validationBehavior: n
+  }), [u, f] = T(), { radioGroupProps: t, labelProps: v, descriptionProps: m, errorMessageProps: x, ...P } = fe({
+    ...e,
+    label: f,
+    validationBehavior: n
+  }, i), $ = S({
+    ...e,
+    values: {
+      orientation: e.orientation || "vertical",
+      isDisabled: i.isDisabled,
+      isReadOnly: i.isReadOnly,
+      isRequired: i.isRequired,
+      isInvalid: i.isInvalid,
+      state: i
+    },
+    defaultClassName: "react-aria-RadioGroup"
+  });
+  return /* @__PURE__ */ V.createElement("div", {
+    ...t,
+    ...$,
+    ref: d,
+    slot: e.slot || void 0,
+    "data-orientation": e.orientation || "vertical",
+    "data-invalid": i.isInvalid || void 0,
+    "data-disabled": i.isDisabled || void 0,
+    "data-readonly": i.isReadOnly || void 0,
+    "data-required": i.isRequired || void 0
+  }, /* @__PURE__ */ V.createElement(W, {
+    values: [
+      [
+        O,
+        i
+      ],
+      [
+        ee,
         {
-          className: h(a.backdrop, n && a.backdropOpened),
-          onClick: () => _(!1),
-          "aria-hidden": !0
+          ...v,
+          ref: u,
+          elementType: "span"
         }
-      )
-    ] })
-  ] });
-}, ke = ({
-  items: p,
-  app: r,
-  isOpened: d,
-  isCollapsed: t,
-  setIsCollapsed: i,
-  clientSideRouter: o
-}) => {
-  const c = () => /* @__PURE__ */ e("div", { className: a.sidebarHeader, children: t ? /* @__PURE__ */ e("p", { className: a.name, children: r.shortName }) : /* @__PURE__ */ e("p", { className: a.abbr, children: r.name }) }), m = ({ group: s }) => /* @__PURE__ */ e("ul", { className: a.list, children: s.items.map((n, _) => /* @__PURE__ */ e(
-    "li",
-    {
-      className: h(
-        a.listItem,
-        t && a.listItemCollapsed
-      ),
-      children: /* @__PURE__ */ e(
-        f,
+      ],
+      [
+        ae,
         {
-          iconPlacement: "left",
-          href: n.href,
-          icon: n.icon,
-          className: h(
-            a.listLink,
-            t && a.listLinkCollapsed
-          ),
-          variant: "tertiary",
-          children: /* @__PURE__ */ e(
-            "span",
-            {
-              className: h(
-                a.linkText,
-                t && a.linkTextCollapsed
-              ),
-              children: n.title
-            }
-          )
-        }
-      )
-    },
-    "link_" + _
-  )) });
-  return /* @__PURE__ */ l(
-    "aside",
-    {
-      id: "midasMainMenu",
-      className: h(
-        a.sidebar,
-        t && a.sidebarCollapsed,
-        d && a.sidebarOpened
-      ),
-      children: [
-        /* @__PURE__ */ e(c, {}),
-        /* @__PURE__ */ e("nav", { className: a.sidebarNav, children: /* @__PURE__ */ e("ul", { className: a.list, children: p.map((s, n) => /* @__PURE__ */ l("li", { children: [
-          s.title && !t && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: s.title }),
-          o ? /* @__PURE__ */ e(L, { navigate: o, children: /* @__PURE__ */ e(m, { group: s }) }) : /* @__PURE__ */ e(m, { group: s })
-        ] }, "list_" + n)) }) }),
-        /* @__PURE__ */ e("div", { className: a.sidebarFooter, children: /* @__PURE__ */ e(
-          k,
-          {
-            variant: "tertiary",
-            "aria-label": t ? "Maximera sidomenyn" : "Minimera sidomenyn",
-            onPress: () => i(!t),
-            className: a.collapseButton,
-            children: t ? /* @__PURE__ */ e(M, {}) : /* @__PURE__ */ e(B, {})
+          slots: {
+            description: m,
+            errorMessage: x
           }
-        ) })
+        }
+      ],
+      [
+        Y,
+        P
       ]
+    ]
+  }, $.children));
+}), xe = /* @__PURE__ */ M(function(e, d) {
+  let { inputRef: r = null, ...s } = e;
+  [e, d] = _(s, d, ve);
+  let l = V.useContext(O), n = A(H(r, e.inputRef !== void 0 ? e.inputRef : null)), { labelProps: i, inputProps: u, isSelected: f, isDisabled: t, isPressed: v } = ce({
+    ...j(e),
+    // ReactNode type doesn't allow function children.
+    children: typeof e.children == "function" ? !0 : e.children
+  }, l, n), { isFocused: m, isFocusVisible: x, focusProps: P } = K(), $ = t || l.isReadOnly, { hoverProps: D, isHovered: R } = z({
+    ...e,
+    isDisabled: $
+  }), g = S({
+    ...e,
+    defaultClassName: "react-aria-Radio",
+    values: {
+      isSelected: f,
+      isPressed: v,
+      isHovered: R,
+      isFocused: m,
+      isFocusVisible: x,
+      isDisabled: t,
+      isReadOnly: l.isReadOnly,
+      isInvalid: l.isInvalid,
+      isRequired: l.isRequired
     }
-  );
-}, we = ({
-  title: p,
-  user: r,
-  app: d,
-  headerChildren: t,
-  isOpened: i,
-  setIsOpened: o,
-  setIsCollapsed: c
-}) => /* @__PURE__ */ l(
-  "header",
+  }), p = F(e);
+  return delete p.id, /* @__PURE__ */ V.createElement("label", {
+    ...y(p, i, D, g),
+    ref: d,
+    "data-selected": f || void 0,
+    "data-pressed": v || void 0,
+    "data-hovered": R || void 0,
+    "data-focused": m || void 0,
+    "data-focus-visible": x || void 0,
+    "data-disabled": t || void 0,
+    "data-readonly": l.isReadOnly || void 0,
+    "data-invalid": l.isInvalid || void 0,
+    "data-required": l.isRequired || void 0
+  }, /* @__PURE__ */ V.createElement(te, {
+    elementType: "span"
+  }, /* @__PURE__ */ V.createElement("input", {
+    ...y(u, P),
+    ref: n
+  })), g.children);
+}), Pe = '"../theme/tokens.css"', he = '"Inter", sans-serif', ye = "undefined", Re = "#1f1f1f", ge = "#000000", Ve = "#143c50", De = "#bfbfbf", Ie = "#b3b3b3", Be = "#ffdfdf", ke = "#e62323", Fe = "undefined", qe = "#1f1f1f", we = "undefined", _e = "(max-width: 767px)", Se = "0 0 0 2px #ffffff, 0 0 0 4px #000000", Me = "(min-width: 768px)", Ce = "#b3b3b3", Oe = "_radioGroup_1vn0q_4", Le = "_wrap_1vn0q_17", Ee = "_radio_1vn0q_4", k = {
+  tokens: Pe,
+  display: he,
+  inputLabel: ye,
+  inputText: Re,
+  black: ge,
+  blue150: Ve,
+  gray50: De,
+  gray60: Ie,
+  signalRed10: Be,
+  signalRed100: ke,
+  medium: Fe,
+  gray150: qe,
+  regular: we,
+  smBreakpoint: _e,
+  focus: Se,
+  mdBreakpoint: Me,
+  borderSecondary: Ce,
+  radioGroup: Oe,
+  wrap: Le,
+  radio: Ee
+}, Ye = ({
+  label: a,
+  description: e,
+  errorMessage: d,
+  children: r,
+  ...s
+}) => /* @__PURE__ */ I(
+  me,
   {
-    className: a.header,
-    style: {
-      borderTop: `solid 4px ${d.color ? d.color : v.logoPrimary}`
-    },
-    children: [
-      /* @__PURE__ */ l("div", { className: a.headerContent, children: [
-        /* @__PURE__ */ e(
-          g,
-          {
-            padding: !1,
-            size: "small",
-            className: a.logo
-          }
-        ),
-        i !== void 0 && c && o && /* @__PURE__ */ e(
-          k,
-          {
-            variant: "icon",
-            className: a.toggleButton,
-            "aria-label": i ? "Stäng meny" : "Öppna meny",
-            "aria-controls": "midasMainMenu",
-            onPress: () => {
-              c(!1), o(!i);
-            },
-            children: i ? /* @__PURE__ */ e(
-              T,
-              {
-                size: 20,
-                "aria-hidden": !0
-              }
-            ) : /* @__PURE__ */ e(
-              I,
-              {
-                size: 20,
-                "aria-hidden": !0
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ e("p", { className: a.userName, children: r.name }),
-          /* @__PURE__ */ e("p", { className: a.userTitle, children: r.title }),
-          /* @__PURE__ */ e("p", { className: a.title, children: p })
-        ] })
-      ] }),
-      /* @__PURE__ */ e("div", { className: a.headerItems, children: t }),
-      /* @__PURE__ */ e("div", { className: a.headerMenu, children: /* @__PURE__ */ e(x, { children: b.Children.map(t, (m) => /* @__PURE__ */ e(C, { children: m })) }) })
-    ]
+    ...s,
+    className: k.radioGroup,
+    children: /* @__PURE__ */ I(
+      oe,
+      {
+        label: a,
+        description: e,
+        errorMessage: d,
+        children: /* @__PURE__ */ I(L, { className: k.wrap, children: r })
+      }
+    )
+  }
+), Ze = (a) => /* @__PURE__ */ I(
+  xe,
+  {
+    className: k.radio,
+    ...a
   }
 );
 export {
-  we as Header,
-  He as Layout,
-  ke as Sidebar
+  Ze as Radio,
+  Ye as RadioGroup
 };

package/index8.js

@@ -1,4 +1,4 @@
-import { Spinner as n } from "./index75.js";
+import { Spinner as n } from "./index72.js";
 export {
   n as Spinner
 };