@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Forms/Inputs/InputOtp/InputOtp.js

@@ -0,0 +1,114 @@
+import { jsx as N } from "react/jsx-runtime";
+import { forwardRef as Q, useState as x, useRef as O, useMemo as y, useCallback as s } from "react";
+import { cn as W } from "../../../lib/utils.js";
+import { useFieldControlGroup as X } from "../../Field/useFieldGroup.js";
+import { inputSizeClass as Y } from "../inputSize.js";
+import Z from "./InputOtp.module.css.js";
+import { InputOtpContextObject as b } from "./hooks/useInputOtp.js";
+const T = (c, g) => g === "number" ? /^\d$/.test(c) : c.length === 1, V = Q(
+  ({
+    className: c,
+    children: g,
+    dataTestid: h,
+    size: B = "md",
+    type: u = "number",
+    otp: j = !0,
+    mask: w = !1,
+    disabled: e = !1,
+    value: v,
+    defaultValue: U = "",
+    onValueChange: f,
+    onComplete: i,
+    ..._
+  }, $) => {
+    const k = X(), [q, D] = x(U), o = v ?? q, l = O(/* @__PURE__ */ new Map()), [m, H] = x(0), C = O(0), G = O(0);
+    C.current = 0, G.current = 0;
+    const [M, R] = x(() => [...o]), [J, K] = x(o), n = y(
+      () => Array.from({ length: m }, (r, t) => M[t] ?? ""),
+      [M, m]
+    );
+    o !== J && (K(o), o !== n.join("") && R([...o]));
+    const p = s(
+      (r) => {
+        R(r);
+        const t = r.join("");
+        v === void 0 && D(t), t !== o && (f == null || f(t)), r.length > 0 && r.every(Boolean) && (i == null || i(t));
+      },
+      [v, o, f, i]
+    ), z = s(
+      (r, t) => {
+        t ? l.current.set(r, t) : l.current.delete(r), H(l.current.size);
+      },
+      []
+    ), a = s((r) => {
+      var t;
+      (t = l.current.get(r)) == null || t.focus();
+    }, []), A = s(
+      (r, t) => {
+        if (e) return;
+        const S = [...t].filter((I) => T(I, u));
+        if (S.length === 0) return;
+        const d = [...n];
+        S.forEach((I, P) => {
+          const F = r + P;
+          F < d.length && (d[F] = I);
+        }), p(d), a(Math.min(r + S.length, d.length - 1));
+      },
+      [e, u, n, p, a]
+    ), E = s(
+      (r) => {
+        if (e) return;
+        const t = [...n];
+        t[r] = "", p(t);
+      },
+      [e, n, p]
+    ), L = y(
+      () => ({
+        dataTestid: h,
+        nextGroupIndex: () => C.current++,
+        nextSeparatorIndex: () => G.current++,
+        chars: n,
+        slotCount: m,
+        type: u,
+        otp: j,
+        mask: w,
+        disabled: e,
+        registerSlot: z,
+        fillFrom: A,
+        clearSlot: E,
+        focusSlot: a
+      }),
+      [
+        h,
+        n,
+        m,
+        u,
+        j,
+        w,
+        e,
+        z,
+        A,
+        E,
+        a
+      ]
+    );
+    return /* @__PURE__ */ N(b.Provider, { value: L, children: /* @__PURE__ */ N(
+      "div",
+      {
+        ref: $,
+        ...k,
+        role: "group",
+        "data-slot": "controller",
+        "data-testid": h,
+        "data-disabled": e ? "" : void 0,
+        className: W(Z.oxInputOtp, Y[B], c),
+        ..._,
+        children: g
+      }
+    ) });
+  }
+);
+V.displayName = "OxInputOtp";
+export {
+  V as InputOtp
+};

package/dist/Forms/Inputs/InputOtp/InputOtp.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputOtp_6et8o_2", o = {
+  oxInputOtp: t
+};
+export {
+  o as default,
+  t as oxInputOtp
+};

package/dist/Forms/Inputs/InputOtp/InputOtpGroup/InputOtpGroup.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { cn as u } from "../../../../lib/utils.js";
+import { useInputOtp as d } from "../hooks/useInputOtp.js";
+import i from "./InputOtpGroup.module.css.js";
+const f = n(
+  ({ className: t, children: o, ...r }, p) => {
+    const { dataTestid: s, nextGroupIndex: a } = d(), e = a();
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: p,
+        "data-slot": "group",
+        "data-testid": `${s}-group-${e}`,
+        className: u(i.oxInputOtpGroup, t),
+        ...r,
+        children: o
+      }
+    );
+  }
+);
+f.displayName = "OxInputOtpGroup";
+export {
+  f as InputOtpGroup
+};

package/dist/Forms/Inputs/InputOtp/InputOtpGroup/InputOtpGroup.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputOtpGroup_7i8su_2", p = {
+  oxInputOtpGroup: t
+};
+export {
+  p as default,
+  t as oxInputOtpGroup
+};

package/dist/Forms/Inputs/InputOtp/InputOtpSeparator/InputOtpSeparator.js

@@ -0,0 +1,24 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { cn as n } from "../../../../lib/utils.js";
+import { useInputOtp as m } from "../hooks/useInputOtp.js";
+import f from "./InputOtpSeparator.module.css.js";
+const u = i(({ className: t, children: r, ...a }, o) => {
+  const { dataTestid: e, nextSeparatorIndex: p } = m(), s = p();
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: o,
+      "aria-hidden": "true",
+      "data-slot": "separator",
+      "data-testid": `${e}-separator-${s}`,
+      className: n(f.oxInputOtpSeparator, t),
+      ...a,
+      children: r ?? "–"
+    }
+  );
+});
+u.displayName = "OxInputOtpSeparator";
+export {
+  u as InputOtpSeparator
+};

package/dist/Forms/Inputs/InputOtp/InputOtpSeparator/InputOtpSeparator.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputOtpSeparator_krc60_2", p = {
+  oxInputOtpSeparator: t
+};
+export {
+  p as default,
+  t as oxInputOtpSeparator
+};

package/dist/Forms/Inputs/InputOtp/InputOtpSlot/InputOtpSlot.js

@@ -0,0 +1,62 @@
+import { jsx as h } from "react/jsx-runtime";
+import { forwardRef as C, useRef as D, useCallback as T, useEffect as A } from "react";
+import { cn as L } from "../../../../lib/utils.js";
+import N from "../../Input.module.css.js";
+import { useInputOtp as $ } from "../hooks/useInputOtp.js";
+import j from "./InputOtpSlot.module.css.js";
+import { useTranslate as B } from "../../../../Locale/useTranslate.js";
+const E = C(
+  ({ className: i, index: t, onKeyDown: l, onPaste: a, ...S }, o) => {
+    const {
+      dataTestid: g,
+      chars: u,
+      slotCount: e,
+      type: k,
+      otp: y,
+      mask: O,
+      disabled: b,
+      registerSlot: p,
+      fillFrom: f,
+      clearSlot: c,
+      focusSlot: s
+    } = $(), n = B(), m = D(null), I = T(
+      (r) => {
+        m.current = r, typeof o == "function" ? o(r) : o && (o.current = r);
+      },
+      [o]
+    );
+    return A(() => (p(t, m.current), () => p(t, null)), [t, p]), /* @__PURE__ */ h(
+      "input",
+      {
+        ref: I,
+        type: O ? "password" : "text",
+        inputMode: k === "number" ? "numeric" : "text",
+        autoComplete: y ? "one-time-code" : "off",
+        maxLength: 1,
+        disabled: b,
+        "aria-label": n("orxata.inputOtp.slot", {
+          index: t + 1,
+          total: e
+        }),
+        "data-slot": "controller",
+        "data-testid": `${g}-slot-${t}`,
+        value: u[t] ?? "",
+        className: L(N.oxInput, j.oxInputOtpSlot, i),
+        onChange: (r) => {
+          f(t, r.target.value);
+        },
+        onKeyDown: (r) => {
+          r.key === "Backspace" ? (r.preventDefault(), u[t] ? c(t) : t > 0 && (c(t - 1), s(t - 1))) : r.key === "ArrowLeft" && t > 0 ? (r.preventDefault(), s(t - 1)) : r.key === "ArrowRight" && t < e - 1 && (r.preventDefault(), s(t + 1)), l == null || l(r);
+        },
+        onPaste: (r) => {
+          r.preventDefault(), f(t, r.clipboardData.getData("text")), a == null || a(r);
+        },
+        ...S
+      }
+    );
+  }
+);
+E.displayName = "OxInputOtpSlot";
+export {
+  E as InputOtpSlot
+};

package/dist/Forms/Inputs/InputOtp/InputOtpSlot/InputOtpSlot.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputOtpSlot_qaz7w_2", o = {
+  oxInputOtpSlot: t
+};
+export {
+  o as default,
+  t as oxInputOtpSlot
+};

package/dist/Forms/Inputs/InputOtp/hooks/useInputOtp.js

@@ -0,0 +1,16 @@
+import { createContext as n, useContext as e } from "react";
+const o = n(
+  null
+);
+function p() {
+  const t = e(o);
+  if (!t)
+    throw new Error(
+      "InputOtp subcomponents must be used inside an <InputOtp> root."
+    );
+  return t;
+}
+export {
+  o as InputOtpContextObject,
+  p as useInputOtp
+};

package/dist/Forms/Inputs/InputPassword/InputPassword.js

@@ -0,0 +1,53 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as z, useState as n, useCallback as p, useMemo as M } from "react";
+import { cn as O } from "../../../lib/utils.js";
+import { inputSizeClass as P } from "../inputSize.js";
+import R from "./InputPassword.module.css.js";
+import { InputPasswordContext as q } from "./useInputPassword.js";
+const A = z(
+  ({
+    className: v,
+    children: x,
+    size: a = "md",
+    field: c,
+    onFieldChange: t,
+    visible: d,
+    onVisibleChange: o,
+    dataTestid: w,
+    ...I
+  }, y) => {
+    const l = c !== void 0 && t !== void 0, m = d !== void 0 && o !== void 0, [N, S] = n(c ?? ""), [U, j] = n(
+      d ?? !1
+    ), e = l ? c : N, r = m ? d : U, f = p(
+      (s) => {
+        l || S(s), t == null || t(s);
+      },
+      [l, t]
+    ), i = p(() => {
+      const s = !r;
+      m || j(s), o == null || o(s);
+    }, [r, m, o]), k = M(
+      () => ({ field: e, setField: f, visible: r, toggle: i }),
+      [e, f, r, i]
+    );
+    return /* @__PURE__ */ u(q.Provider, { value: k, children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: y,
+        "data-slot": "controller",
+        "data-testid": w,
+        className: O(
+          R.oxInputPassword,
+          P[a],
+          v
+        ),
+        ...I,
+        children: x
+      }
+    ) });
+  }
+);
+A.displayName = "OxInputPassword";
+export {
+  A as InputPassword
+};

package/dist/Forms/Inputs/InputPassword/InputPassword.module.css.js

@@ -0,0 +1,7 @@
+const s = "_oxInputPassword_1rxp2_2", o = {
+  oxInputPassword: s
+};
+export {
+  o as default,
+  s as oxInputPassword
+};

package/dist/Forms/Inputs/InputPassword/InputPasswordInput.js

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { cn as n } from "../../../lib/utils.js";
+import { useFieldControl as f } from "../../Field/useFieldGroup.js";
+import I from "../Input.module.css.js";
+import c from "./InputPasswordInput.module.css.js";
+import { useInputPassword as w } from "./useInputPassword.js";
+const x = d(({ className: r, onChange: t, id: s, ...p }, e) => {
+  const { field: l, setField: m, visible: u } = w(), i = f(s);
+  return /* @__PURE__ */ a(
+    "input",
+    {
+      ref: e,
+      ...i,
+      type: u ? "text" : "password",
+      value: l,
+      autoComplete: "current-password",
+      "data-slot": "controller",
+      className: n(
+        I.oxInput,
+        c.oxInputPasswordInput,
+        r
+      ),
+      onChange: (o) => {
+        m(o.target.value), t == null || t(o);
+      },
+      ...p
+    }
+  );
+});
+x.displayName = "OxInputPasswordInput";
+export {
+  x as InputPasswordInput
+};

package/dist/Forms/Inputs/InputPassword/InputPasswordInput.module.css.js

@@ -0,0 +1,7 @@
+const s = "_oxInputPasswordInput_1lf41_2", t = {
+  oxInputPasswordInput: s
+};
+export {
+  t as default,
+  s as oxInputPasswordInput
+};

package/dist/Forms/Inputs/InputPassword/InputPasswordToggle.js

@@ -0,0 +1,34 @@
+import { jsx as s } from "react/jsx-runtime";
+import { IconEye as l } from "@sesame/orxata-icons/IconEye";
+import { IconEyeOff as u } from "@sesame/orxata-icons/IconEyeOff";
+import { Icon as e } from "@sesame/orxata-icons/react";
+import { forwardRef as c } from "react";
+import { cn as d } from "../../../lib/utils.js";
+import a from "./InputPasswordToggle.module.css.js";
+import { useInputPassword as I } from "./useInputPassword.js";
+import { useTranslate as w } from "../../../Locale/useTranslate.js";
+const x = c(({ className: m, children: t, onClick: r, ...p }, n) => {
+  const { visible: o, toggle: i } = I(), f = w();
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      ref: n,
+      type: "button",
+      "data-slot": "toggle",
+      "aria-pressed": o,
+      "aria-label": f(
+        o ? "orxata.inputPassword.hide" : "orxata.inputPassword.show"
+      ),
+      className: d(a.oxInputPasswordToggle, m),
+      onClick: (g) => {
+        i(), r == null || r(g);
+      },
+      ...p,
+      children: typeof t == "function" ? t({ visible: o }) : t ?? (o ? /* @__PURE__ */ s(e, { icon: u, className: a.oxToggleIcon }) : /* @__PURE__ */ s(e, { icon: l, className: a.oxToggleIcon }))
+    }
+  );
+});
+x.displayName = "OxInputPasswordToggle";
+export {
+  x as InputPasswordToggle
+};

package/dist/Forms/Inputs/InputPassword/InputPasswordToggle.module.css.js

@@ -0,0 +1,9 @@
+const o = "_oxInputPasswordToggle_y5ewv_2", g = "_oxToggleIcon_y5ewv_2", s = {
+  oxInputPasswordToggle: o,
+  oxToggleIcon: g
+};
+export {
+  s as default,
+  o as oxInputPasswordToggle,
+  g as oxToggleIcon
+};

package/dist/Forms/Inputs/InputPassword/useInputPassword.js

@@ -0,0 +1,16 @@
+import { createContext as o, useContext as n } from "react";
+const s = o(
+  null
+);
+function r() {
+  const t = n(s);
+  if (!t)
+    throw new Error(
+      "InputPassword subcomponents must be used inside an <InputPassword> root."
+    );
+  return t;
+}
+export {
+  s as InputPasswordContext,
+  r as useInputPassword
+};

package/dist/Forms/Inputs/InputText/InputText.d.ts

@@ -1,6 +1,11 @@
 import { InputSize } from '../inputSize.ts';
 export interface InputTextProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: InputSize;
+    /**
+     * `ghost` keeps every metric `default` has — height, side padding, corner —
+     * and drops the box, so a focused field is the only one drawing a border.
+     */
+    variant?: 'default' | 'ghost';
     /** Controlled value. Pair with `onFieldChange`; omit for uncontrolled. */
     field?: string;
     /** Called on every input with the next value. */

package/dist/Forms/Inputs/InputText/InputText.js

@@ -0,0 +1,49 @@
+import { jsx as T } from "react/jsx-runtime";
+import { forwardRef as y, useState as u } from "react";
+import { cn as N } from "../../../lib/utils.js";
+import { useFieldControl as O } from "../../Field/useFieldGroup.js";
+import j from "../Input.module.css.js";
+import { inputSizeClass as z } from "../inputSize.js";
+import G from "./InputText.module.css.js";
+const R = y(
+  ({
+    className: e,
+    size: c = "md",
+    variant: i = "default",
+    field: t,
+    onFieldChange: o,
+    value: l,
+    onChange: r,
+    type: x = "text",
+    id: a,
+    ...f
+  }, n) => {
+    const I = O(a), [S, p] = u(t ?? ""), [d, v] = u(t), s = t !== void 0 && o !== void 0;
+    !s && t !== d && (v(t), p(t ?? ""));
+    const w = s ? t : l ?? S;
+    return /* @__PURE__ */ T(
+      "input",
+      {
+        ref: n,
+        ...I,
+        type: x,
+        "data-slot": "controller",
+        className: N(
+          j.oxInput,
+          z[c],
+          i === "ghost" && G.oxInputTextGhost,
+          e
+        ),
+        value: w,
+        onChange: (m) => {
+          s || p(m.target.value), o == null || o(m.target.value), r == null || r(m);
+        },
+        ...f
+      }
+    );
+  }
+);
+R.displayName = "OxInputText";
+export {
+  R as InputText
+};

package/dist/Forms/Inputs/InputText/InputText.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputTextGhost_y29bi_2", o = {
+  oxInputTextGhost: t
+};
+export {
+  o as default,
+  t as oxInputTextGhost
+};

package/dist/Forms/Inputs/MonthPicker/MonthPicker.d.ts

@@ -0,0 +1,61 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+export interface MonthPickerProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** The chosen month, or `undefined` for none. Controlled. */
+    value?: Date;
+    /** The initially chosen month, for the uncontrolled case. */
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    /**
+     * The year the panel shows, to follow or drive the view from outside. Left
+     * unbound it is the chosen month's year, or the current one, re-read each
+     * time the panel opens.
+     */
+    visibleYear?: number;
+    onVisibleYearChange?: (year: number) => void;
+    /** What can be picked, and where paging stops. Passed straight through. */
+    constraints?: CalendarConstraints;
+    /**
+     * The board's `Show arrows`: a ‹ › pair outside the field that steps the
+     * chosen month without opening the panel, for a report header or a monthly
+     * view. Off by default.
+     */
+    showArrows?: boolean;
+    disabled?: boolean;
+    /**
+     * What the trigger shows. Falls back to the month from `Intl`, and to nothing
+     * while none is chosen — pass one to put a placeholder there.
+     */
+    children?: (state: {
+        value: Date | undefined;
+    }) => React.ReactNode;
+    /** The trailing glyph. Falls back to a calendar. */
+    icon?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * A field that shows the chosen month and opens a grid of them to change it.
+ * Mirrors `@sesame/orxata-core` MonthPicker.
+ *
+ * `OxDatePicker` one unit up, and built from the same parts: `OxPopover` for
+ * the surface, `OxDatePickerTrigger` for the closed control — the same trigger,
+ * not a copy of it, so two pickers in one form cannot disagree about a radius —
+ * and `OxMonthPickerPanel` for the board's `Calendar / Months`.
+ *
+ * A `Date` at the boundary means a calendar month, the way `OxCalendar`'s means
+ * a day.
+ *
+ * **Four of the board's ten properties are not props here.** `Show label`,
+ * `Label`, `Show helper` and `Helper` are an `OxFieldGroup` with an
+ * `OxFieldLabel` and an `OxFieldMessage` composed around this, which is how
+ * every field in the package is labelled; `State` is hover, focus and open in
+ * CSS, `disabled` natively, and error from the field context. `Size` is the
+ * `inputSizeClass[size]` class on any ancestor, which is how every control in
+ * the package is sized.
+ *
+ * It ships no strings: the trigger is `Intl` in the locale `LocaleProvider`
+ * publishes, and a placeholder is words, so it is `children`'s to supply.
+ */
+export declare const MonthPicker: {
+    ({ className, value, defaultValue, onValueChange, visibleYear, onVisibleYearChange, constraints, showArrows, disabled, children, icon, dataTestid, }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};