@midas-ds/components 1.0.2 → 1.1.0

package/Button-DL6nqUco.js

@@ -0,0 +1,182 @@
+import { n as I, e as x, o as E, a as w, c as F, b as N, d as O, k as y } from "./useFocusRing-9PXyKy2A.js";
+import L, { createContext as A, useRef as S, useEffect as V } from "react";
+import { $ as M } from "./Hidden-CVlUgUJM.js";
+import { $ as R } from "./useFocusable-CcEBZe40.js";
+function k(n, e) {
+  let {
+    elementType: t = "button",
+    isDisabled: d,
+    onPress: i,
+    onPressStart: a,
+    onPressEnd: r,
+    onPressUp: v,
+    onPressChange: l,
+    preventFocusOnPress: $,
+    allowFocusWhenDisabled: g,
+    // @ts-ignore
+    onClick: c,
+    href: h,
+    target: P,
+    rel: u,
+    type: f = "button"
+  } = n, o;
+  t === "button" ? o = {
+    type: f,
+    disabled: d
+  } : o = {
+    role: "button",
+    tabIndex: d ? void 0 : 0,
+    href: t === "a" && !d ? h : void 0,
+    target: t === "a" ? P : void 0,
+    type: t === "input" ? f : void 0,
+    disabled: t === "input" ? d : void 0,
+    "aria-disabled": !d || t === "input" ? void 0 : d,
+    rel: t === "a" ? u : void 0
+  };
+  let { pressProps: b, isPressed: p } = I({
+    onPressStart: a,
+    onPressEnd: r,
+    onPressChange: l,
+    onPress: i,
+    onPressUp: v,
+    isDisabled: d,
+    preventFocusOnPress: $,
+    ref: e
+  }), { focusableProps: m } = R(n, e);
+  g && (m.tabIndex = d ? -1 : m.tabIndex);
+  let _ = x(m, b, E(n, {
+    labelable: !0
+  }));
+  return {
+    isPressed: p,
+    buttonProps: x(o, _, {
+      "aria-haspopup": n["aria-haspopup"],
+      "aria-expanded": n["aria-expanded"],
+      "aria-controls": n["aria-controls"],
+      "aria-pressed": n["aria-pressed"],
+      onClick: (D) => {
+        c && (c(D), console.warn("onClick is deprecated, please use onPress"));
+      }
+    })
+  };
+}
+const T = 7e3;
+let s = null;
+function C(n, e = "assertive", t = T) {
+  s ? s.announce(n, e, t) : (s = new H(), (typeof IS_REACT_ACT_ENVIRONMENT == "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest < "u") ? s.announce(n, e, t) : setTimeout(() => {
+    s != null && s.isAttached() && (s == null || s.announce(n, e, t));
+  }, 100));
+}
+function z(n) {
+  s && s.clear(n);
+}
+class H {
+  isAttached() {
+    var e;
+    return (e = this.node) === null || e === void 0 ? void 0 : e.isConnected;
+  }
+  createLog(e) {
+    let t = document.createElement("div");
+    return t.setAttribute("role", "log"), t.setAttribute("aria-live", e), t.setAttribute("aria-relevant", "additions"), t;
+  }
+  destroy() {
+    this.node && (document.body.removeChild(this.node), this.node = null);
+  }
+  announce(e, t = "assertive", d = T) {
+    var i, a;
+    if (!this.node) return;
+    let r = document.createElement("div");
+    typeof e == "object" ? (r.setAttribute("role", "img"), r.setAttribute("aria-labelledby", e["aria-labelledby"])) : r.textContent = e, t === "assertive" ? (i = this.assertiveLog) === null || i === void 0 || i.appendChild(r) : (a = this.politeLog) === null || a === void 0 || a.appendChild(r), e !== "" && setTimeout(() => {
+      r.remove();
+    }, d);
+  }
+  clear(e) {
+    this.node && ((!e || e === "assertive") && this.assertiveLog && (this.assertiveLog.innerHTML = ""), (!e || e === "polite") && this.politeLog && (this.politeLog.innerHTML = ""));
+  }
+  constructor() {
+    this.node = null, this.assertiveLog = null, this.politeLog = null, typeof document < "u" && (this.node = document.createElement("div"), this.node.dataset.liveAnnouncer = "true", Object.assign(this.node.style, {
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      width: "1px",
+      whiteSpace: "nowrap"
+    }), this.assertiveLog = this.createLog("assertive"), this.node.appendChild(this.assertiveLog), this.politeLog = this.createLog("polite"), this.node.appendChild(this.politeLog), document.body.prepend(this.node));
+  }
+}
+const U = /* @__PURE__ */ A(null), j = /* @__PURE__ */ new Set([
+  "form",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formNoValidate",
+  "formTarget",
+  "name",
+  "value"
+]), B = /* @__PURE__ */ A({}), J = /* @__PURE__ */ M(function(e, t) {
+  [e, t] = w(e, t, B), e = K(e);
+  let d = e, { isPending: i } = d, { buttonProps: a, isPressed: r } = k(e, t), { focusProps: v, isFocused: l, isFocusVisible: $ } = F(e), { hoverProps: g, isHovered: c } = N({
+    ...e,
+    isDisabled: e.isDisabled || i
+  }), h = {
+    isHovered: c,
+    isPressed: (d.isPressed || r) && !i,
+    isFocused: l,
+    isFocusVisible: $,
+    isDisabled: e.isDisabled || !1,
+    isPending: i ?? !1
+  }, P = O({
+    ...e,
+    values: h,
+    defaultClassName: "react-aria-Button"
+  }), u = y(a.id), f = y(), o = a["aria-labelledby"];
+  i && (o ? o = `${o} ${f}` : a["aria-label"] && (o = `${u} ${f}`));
+  let b = S(i);
+  return V(() => {
+    let p = {
+      "aria-labelledby": o || u
+    };
+    (!b.current && l && i || b.current && l && !i) && C(p, "assertive"), b.current = i;
+  }, [
+    i,
+    l,
+    o,
+    u
+  ]), /* @__PURE__ */ L.createElement("button", {
+    ...E(e, {
+      propNames: j
+    }),
+    ...x(a, v, g),
+    ...P,
+    type: a.type === "submit" && i ? "button" : a.type,
+    id: u,
+    ref: t,
+    "aria-labelledby": o,
+    slot: e.slot || void 0,
+    "aria-disabled": i ? "true" : a["aria-disabled"],
+    "data-disabled": e.isDisabled || void 0,
+    "data-pressed": h.isPressed || void 0,
+    "data-hovered": c || void 0,
+    "data-focused": l || void 0,
+    "data-pending": i || void 0,
+    "data-focus-visible": $ || void 0
+  }, /* @__PURE__ */ L.createElement(U.Provider, {
+    value: {
+      id: f
+    }
+  }, P.children));
+});
+function K(n) {
+  return n.isPending && (n.onPress = void 0, n.onPressStart = void 0, n.onPressEnd = void 0, n.onPressChange = void 0, n.onPressUp = void 0, n.onKeyDown = void 0, n.onKeyUp = void 0, n.onClick = void 0, n.href = void 0), n;
+}
+export {
+  J as $,
+  B as a,
+  C as b,
+  k as c,
+  z as d
+};

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 1.1.0 (2025-01-31)
+
+### 🚀 Features
+
+- **components:** new api and style for accordion
+
+### 🩹 Fixes
+
+- import/export textfield css directly from css module
+
+### ❤️ Thank You
+
+- pixelrickdreamer
+- Wilhelm Hjelm
+
 ## 1.0.2 (2025-01-27)
 
 ### 🚀 Features

package/Checkbox-q0dugR2t.js

@@ -0,0 +1,402 @@
+import { jsx as P, jsxs as K, Fragment as Q } from "react/jsx-runtime";
+import { c as U } from "./clsx-OuTLNxxd.js";
+import { a as X } from "./RSPContexts-BW2SEIqe.js";
+import { n as D, e as g, o as S, f as Y, a as w, y as M, z as Z, d as E, B as ee, i as ae, F as ie, A as q, c as de, b as le } from "./useFocusRing-9PXyKy2A.js";
+import { d as ne, c as B, e as te, f as F, g as se, h as re, $ as W, a as oe } from "./Form-BWBjJC6v.js";
+import { b as ce, $ as fe } from "./useField-DMzJIIN4.js";
+import { $ as ue } from "./Text-BCF0xvqL.js";
+import R, { useEffect as G, useRef as N, forwardRef as L, useContext as be, createContext as j } from "react";
+import { $ as H } from "./useControlledState-Kv9K2AYu.js";
+import { $ as ve } from "./useFocusable-CcEBZe40.js";
+import { a as $e } from "./VisuallyHidden-Dhr5caPC.js";
+import './Checkbox.css';function he(a, e, d) {
+  let { isDisabled: t = !1, isReadOnly: s = !1, value: r, name: o, children: l, "aria-label": f, "aria-labelledby": i, validationState: n = "valid", isInvalid: c } = a, v = (y) => {
+    y.stopPropagation(), e.setSelected(y.target.checked);
+  }, $ = l != null, u = f != null || i != null;
+  !$ && !u && console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  let { pressProps: b, isPressed: h } = D({
+    isDisabled: t
+  }), { pressProps: m, isPressed: x } = D({
+    isDisabled: t || s,
+    onPress() {
+      e.toggle();
+    }
+  }), { focusableProps: I } = ve(a, d), p = g(b, I), V = S(a, {
+    labelable: !0
+  });
+  return ne(d, e.isSelected, e.setSelected), {
+    labelProps: g(m, {
+      onClick: (y) => y.preventDefault()
+    }),
+    inputProps: g(V, {
+      "aria-invalid": c || n === "invalid" || void 0,
+      "aria-errormessage": a["aria-errormessage"],
+      "aria-controls": a["aria-controls"],
+      "aria-readonly": s || void 0,
+      onChange: v,
+      disabled: t,
+      ...r == null ? {} : {
+        value: r
+      },
+      name: o,
+      type: "checkbox",
+      ...p
+    }),
+    isSelected: e.isSelected,
+    isPressed: h || x,
+    isDisabled: t,
+    isReadOnly: s,
+    isInvalid: c || n === "invalid"
+  };
+}
+function T(a, e, d) {
+  let t = B({
+    ...a,
+    value: e.isSelected
+  }), { isInvalid: s, validationErrors: r, validationDetails: o } = t.displayValidation, { labelProps: l, inputProps: f, isSelected: i, isPressed: n, isDisabled: c, isReadOnly: v } = he({
+    ...a,
+    isInvalid: s
+  }, e, d);
+  te(a, t, d);
+  let { isIndeterminate: $, isRequired: u, validationBehavior: b = "aria" } = a;
+  G(() => {
+    d.current && (d.current.indeterminate = !!$);
+  });
+  let { pressProps: h } = D({
+    isDisabled: c || v,
+    onPress() {
+      let { [F]: m } = a, { commitValidation: x } = m || t;
+      x();
+    }
+  });
+  return {
+    labelProps: g(l, h),
+    inputProps: {
+      ...f,
+      checked: i,
+      "aria-required": u && b === "aria" || void 0,
+      required: u && b === "native"
+    },
+    isSelected: i,
+    isPressed: n,
+    isDisabled: c,
+    isReadOnly: v,
+    isInvalid: s,
+    validationErrors: r,
+    validationDetails: o
+  };
+}
+const A = /* @__PURE__ */ new WeakMap();
+function me(a, e) {
+  let { isDisabled: d, name: t, validationBehavior: s = "aria" } = a, { isInvalid: r, validationErrors: o, validationDetails: l } = e.displayValidation, { labelProps: f, fieldProps: i, descriptionProps: n, errorMessageProps: c } = ce({
+    ...a,
+    // Checkbox group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span",
+    isInvalid: r,
+    errorMessage: a.errorMessage || o
+  });
+  A.set(e, {
+    name: t,
+    descriptionId: n.id,
+    errorMessageId: c.id,
+    validationBehavior: s
+  });
+  let v = S(a, {
+    labelable: !0
+  }), { focusWithinProps: $ } = Y({
+    onBlurWithin: a.onBlur,
+    onFocusWithin: a.onFocus,
+    onFocusWithinChange: a.onFocusChange
+  });
+  return {
+    groupProps: g(v, {
+      role: "group",
+      "aria-disabled": d || void 0,
+      ...i,
+      ...$
+    }),
+    labelProps: f,
+    descriptionProps: n,
+    errorMessageProps: c,
+    isInvalid: r,
+    validationErrors: o,
+    validationDetails: l
+  };
+}
+function z(a = {}) {
+  let { isReadOnly: e } = a, [d, t] = H(a.isSelected, a.defaultSelected || !1, a.onChange);
+  function s(o) {
+    e || t(o);
+  }
+  function r() {
+    e || t(!d);
+  }
+  return {
+    isSelected: d,
+    setSelected: s,
+    toggle: r
+  };
+}
+function ge(a, e, d) {
+  const t = z({
+    isReadOnly: a.isReadOnly || e.isReadOnly,
+    isSelected: e.isSelected(a.value),
+    onChange(h) {
+      h ? e.addValue(a.value) : e.removeValue(a.value), a.onChange && a.onChange(h);
+    }
+  });
+  let { name: s, descriptionId: r, errorMessageId: o, validationBehavior: l } = A.get(e);
+  var f;
+  l = (f = a.validationBehavior) !== null && f !== void 0 ? f : l;
+  let { realtimeValidation: i } = B({
+    ...a,
+    value: t.isSelected,
+    // Server validation is handled at the group level.
+    name: void 0,
+    validationBehavior: "aria"
+  }), n = N(se), c = () => {
+    e.setInvalid(a.value, i.isInvalid ? i : n.current);
+  };
+  G(c);
+  let v = e.realtimeValidation.isInvalid ? e.realtimeValidation : i, $ = l === "native" ? e.displayValidation : v;
+  var u;
+  let b = T({
+    ...a,
+    isReadOnly: a.isReadOnly || e.isReadOnly,
+    isDisabled: a.isDisabled || e.isDisabled,
+    name: a.name || s,
+    isRequired: (u = a.isRequired) !== null && u !== void 0 ? u : e.isRequired,
+    validationBehavior: l,
+    [F]: {
+      realtimeValidation: v,
+      displayValidation: $,
+      resetValidation: e.resetValidation,
+      commitValidation: e.commitValidation,
+      updateValidation(h) {
+        n.current = h, c();
+      }
+    }
+  }, t, d);
+  return {
+    ...b,
+    inputProps: {
+      ...b.inputProps,
+      "aria-describedby": [
+        a["aria-describedby"],
+        e.isInvalid ? o : null,
+        r
+      ].filter(Boolean).join(" ") || void 0
+    }
+  };
+}
+function xe(a = {}) {
+  let [e, d] = H(a.value, a.defaultValue || [], a.onChange), t = !!a.isRequired && e.length === 0, s = N(/* @__PURE__ */ new Map()), r = B({
+    ...a,
+    value: e
+  }), o = r.displayValidation.isInvalid;
+  var l;
+  return {
+    ...r,
+    value: e,
+    setValue(i) {
+      a.isReadOnly || a.isDisabled || d(i);
+    },
+    isDisabled: a.isDisabled || !1,
+    isReadOnly: a.isReadOnly || !1,
+    isSelected(i) {
+      return e.includes(i);
+    },
+    addValue(i) {
+      a.isReadOnly || a.isDisabled || e.includes(i) || d(e.concat(i));
+    },
+    removeValue(i) {
+      a.isReadOnly || a.isDisabled || e.includes(i) && d(e.filter((n) => n !== i));
+    },
+    toggleValue(i) {
+      a.isReadOnly || a.isDisabled || (e.includes(i) ? d(e.filter((n) => n !== i)) : d(e.concat(i)));
+    },
+    setInvalid(i, n) {
+      let c = new Map(s.current);
+      n.isInvalid ? c.set(i, n) : c.delete(i), s.current = c, r.updateValidation(re(...c.values()));
+    },
+    validationState: (l = a.validationState) !== null && l !== void 0 ? l : o ? "invalid" : null,
+    isInvalid: o,
+    isRequired: t
+  };
+}
+const ye = /* @__PURE__ */ j(null), J = /* @__PURE__ */ j(null), da = /* @__PURE__ */ L(function(e, d) {
+  [e, d] = w(e, d, ye);
+  let { validationBehavior: t } = M(W) || {};
+  var s, r;
+  let o = (r = (s = e.validationBehavior) !== null && s !== void 0 ? s : t) !== null && r !== void 0 ? r : "native", l = xe({
+    ...e,
+    validationBehavior: o
+  }), [f, i] = Z(), { groupProps: n, labelProps: c, descriptionProps: v, errorMessageProps: $, ...u } = me({
+    ...e,
+    label: i,
+    validationBehavior: o
+  }, l), b = E({
+    ...e,
+    values: {
+      isDisabled: l.isDisabled,
+      isReadOnly: l.isReadOnly,
+      isRequired: e.isRequired || !1,
+      isInvalid: l.isInvalid,
+      state: l
+    },
+    defaultClassName: "react-aria-CheckboxGroup"
+  });
+  return /* @__PURE__ */ R.createElement("div", {
+    ...n,
+    ...b,
+    ref: d,
+    slot: e.slot || void 0,
+    "data-readonly": l.isReadOnly || void 0,
+    "data-required": e.isRequired || void 0,
+    "data-invalid": l.isInvalid || void 0,
+    "data-disabled": e.isDisabled || void 0
+  }, /* @__PURE__ */ R.createElement(ee, {
+    values: [
+      [
+        J,
+        l
+      ],
+      [
+        fe,
+        {
+          ...c,
+          ref: f,
+          elementType: "span"
+        }
+      ],
+      [
+        ue,
+        {
+          slots: {
+            description: v,
+            errorMessage: $
+          }
+        }
+      ],
+      [
+        oe,
+        u
+      ]
+    ]
+  }, b.children));
+}), Pe = /* @__PURE__ */ L(function(e, d) {
+  let { inputRef: t = null, ...s } = e;
+  [e, d] = w(s, d, X);
+  let { validationBehavior: r } = M(W) || {};
+  var o, l;
+  let f = (l = (o = e.validationBehavior) !== null && o !== void 0 ? o : r) !== null && l !== void 0 ? l : "native", i = be(J), n = ae(ie(t, e.inputRef !== void 0 ? e.inputRef : null)), { labelProps: c, inputProps: v, isSelected: $, isDisabled: u, isReadOnly: b, isPressed: h, isInvalid: m } = i ? ge({
+    ...q(e),
+    // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+    // it's passed explicitly here to avoid typescript error (requires ignore).
+    // @ts-ignore
+    value: e.value,
+    // ReactNode type doesn't allow function children.
+    children: typeof e.children == "function" ? !0 : e.children
+  }, i, n) : T({
+    ...q(e),
+    children: typeof e.children == "function" ? !0 : e.children,
+    validationBehavior: f
+  }, z(e), n), { isFocused: x, isFocusVisible: I, focusProps: p } = de(), V = u || b, { hoverProps: y, isHovered: k } = le({
+    ...e,
+    isDisabled: V
+  }), O = E({
+    ...e,
+    defaultClassName: "react-aria-Checkbox",
+    values: {
+      isSelected: $,
+      isIndeterminate: e.isIndeterminate || !1,
+      isPressed: h,
+      isHovered: k,
+      isFocused: x,
+      isFocusVisible: I,
+      isDisabled: u,
+      isReadOnly: b,
+      isInvalid: m,
+      isRequired: e.isRequired || !1
+    }
+  }), _ = S(e);
+  return delete _.id, /* @__PURE__ */ R.createElement("label", {
+    ...g(_, c, y, O),
+    ref: d,
+    slot: e.slot || void 0,
+    "data-selected": $ || void 0,
+    "data-indeterminate": e.isIndeterminate || void 0,
+    "data-pressed": h || void 0,
+    "data-hovered": k || void 0,
+    "data-focused": x || void 0,
+    "data-focus-visible": I || void 0,
+    "data-disabled": u || void 0,
+    "data-readonly": b || void 0,
+    "data-invalid": m || void 0,
+    "data-required": e.isRequired || void 0
+  }, /* @__PURE__ */ R.createElement($e, {
+    elementType: "span"
+  }, /* @__PURE__ */ R.createElement("input", {
+    ...g(v, p),
+    ref: n
+  })), O.children);
+}), Re = '"../theme/tokens.css"', Ie = '"Inter", sans-serif', pe = "#000000", Ve = "#143c50", De = "#5897b8", Se = "#25607f", Be = "#ffdfdf", ke = "#e62323", Oe = "0 0 0 2px #ffffff, 0 0 0 4px #000000", _e = "#b31b1b", qe = "#ffffff", Ce = "#f2f2f2", we = "#cccccc", Me = "#808080", Ee = "#bfbfbf", Fe = "#e6e6e6", We = "400", Ge = "500", Ne = "(max-width: 767px)", Le = "#b3b3b3", je = "_wrap_qn5vw_4", He = "_checkboxInner_qn5vw_11", Te = "_checkbox_qn5vw_11", Ae = "_checkboxGroup_qn5vw_129", C = {
+  tokens: Re,
+  display: Ie,
+  black: pe,
+  primaryBackground: Ve,
+  blue80: De,
+  blue130: Se,
+  signalRed10: Be,
+  signalRed100: ke,
+  focus: Oe,
+  signalRed130: _e,
+  white: qe,
+  gray10: Ce,
+  gray40: we,
+  gray100: Me,
+  gray50: Ee,
+  gray20: Fe,
+  regularWeight: We,
+  mediumWeight: Ge,
+  smBreakpoint: Ne,
+  borderSecondary: Le,
+  wrap: je,
+  checkboxInner: He,
+  checkbox: Te,
+  checkboxGroup: Ae
+}, la = ({ children: a, ...e }) => /* @__PURE__ */ P(
+  Pe,
+  {
+    className: U(C.checkbox, e.className),
+    ...e,
+    children: ({ isIndeterminate: d }) => /* @__PURE__ */ K(Q, { children: [
+      /* @__PURE__ */ P("div", { className: C.checkboxInner, children: /* @__PURE__ */ P(
+        "svg",
+        {
+          width: 16,
+          height: 16,
+          viewBox: "0 0 18 18",
+          "aria-hidden": "true",
+          children: d ? /* @__PURE__ */ P(
+            "rect",
+            {
+              x: 4,
+              y: 8,
+              width: 10,
+              height: 2
+            }
+          ) : /* @__PURE__ */ P("polyline", { points: "3,9 7,13 15,4" })
+        }
+      ) }),
+      a
+    ] })
+  }
+);
+export {
+  da as $,
+  la as C,
+  J as a,
+  C as s
+};