@sesamehr/react-design-system 3.10.0 → 3.10.1

package/dist/Forms/Inputs/Textarea/Textarea.js

@@ -0,0 +1,92 @@
+import { jsxs as w, jsx as u } from "react/jsx-runtime";
+import { forwardRef as M, useState as N, useRef as k } from "react";
+import { cn as q } from "../../../lib/utils.js";
+import { useFieldControl as E } from "../../Field/useFieldGroup.js";
+import n from "./Textarea.module.css.js";
+import { useAutoGrow as F } from "../../../hooks/useAutoGrow/useAutoGrow.js";
+import { Scrollbar as H } from "../../../Layout/Scrollbar/Scrollbar.js";
+import { Counter as J } from "../../Field/Counter/Counter.js";
+const K = M(
+  ({
+    className: y,
+    maxRows: $ = 4,
+    counterMax: x,
+    resizable: D = !1,
+    field: o,
+    onFieldChange: s,
+    counter: r,
+    value: S,
+    onChange: i,
+    dataTestid: e,
+    id: j,
+    ...O
+  }, a) => {
+    const R = E(j), [z, d] = N(o ?? ""), [A, B] = N(o), f = o !== void 0 && s !== void 0;
+    !f && o !== A && (B(o), d(o ?? ""));
+    const l = f ? o : S ?? z, c = k(null);
+    F(c, l, $);
+    const p = {
+      value: l,
+      length: l.length
+    }, G = x === void 0 ? null : /* @__PURE__ */ u(
+      J,
+      {
+        value: p.length,
+        max: x,
+        dataTestid: `${e}-counter`
+      }
+    ), v = r == null ? G : typeof r == "function" ? r(p) : r, I = (t) => {
+      var b;
+      const m = t.target;
+      m != null && m.closest(
+        'button, a, input, textarea, select, [tabindex], [data-slot="scrollbar"]'
+      ) || (t.preventDefault(), (b = c.current) == null || b.focus());
+    };
+    return /* @__PURE__ */ w(
+      "div",
+      {
+        className: q(n["ox-textarea"], y),
+        "data-slot": "controller",
+        "data-testid": e,
+        onMouseDown: I,
+        children: [
+          /* @__PURE__ */ w("div", { className: n["ox-textarea-surface-box"], children: [
+            /* @__PURE__ */ u(
+              "textarea",
+              {
+                ref: (t) => {
+                  c.current = t, typeof a == "function" ? a(t) : a && (a.current = t);
+                },
+                ...R,
+                rows: 1,
+                className: n["ox-textarea-surface"],
+                "data-resizable": D || void 0,
+                "data-slot": "controller",
+                "data-testid": `${e}-surface`,
+                value: l,
+                onChange: (t) => {
+                  f || d(t.target.value), s == null || s(t.target.value), i == null || i(t);
+                },
+                ...O
+              }
+            ),
+            /* @__PURE__ */ u(H, { port: c, dataTestid: `${e}-scrollbar` })
+          ] }),
+          v === null ? null : /* @__PURE__ */ u(
+            "div",
+            {
+              className: n["ox-textarea-footer"],
+              "data-slot": "footer",
+              "data-testid": `${e}-footer`,
+              children: v
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+K.displayName = "OxTextarea";
+export {
+  K as Textarea
+};

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

@@ -0,0 +1,9 @@
+const e = {
+  "ox-textarea": "_ox-textarea_1l77n_2",
+  "ox-textarea-surface": "_ox-textarea-surface_1l77n_2",
+  "ox-textarea-surface-box": "_ox-textarea-surface-box_1l77n_2",
+  "ox-textarea-footer": "_ox-textarea-footer_1l77n_2"
+};
+export {
+  e as default
+};

package/dist/Forms/Inputs/TimePicker/TimePicker.js

@@ -0,0 +1,71 @@
+import { jsx as t, jsxs as H } from "react/jsx-runtime";
+import * as n from "@radix-ui/react-popover";
+import { useState as u, useEffect as I, useCallback as M, useMemo as O } from "react";
+import L from "./TimePicker.module.css.js";
+import { TimePickerField as U } from "./TimePickerField.js";
+import { TimePickerWheel as w } from "./TimePickerWheel.js";
+import { parseTime as E, formatTime as F, withPart as G } from "./time.js";
+import { TimePickerContext as R } from "./useTimePicker.js";
+import { Surface as W } from "../../../internal/Surface/Surface.js";
+const _ = 16, $ = ({
+  format: d = "HH:MM",
+  disabled: x = !1,
+  value: o,
+  onValueChange: e,
+  open: i,
+  onOpenChange: s,
+  className: S,
+  children: a,
+  dataTestid: P
+}) => {
+  const c = o !== void 0 && e !== void 0, [j, v] = u(o), f = c ? o : j;
+  I(() => {
+    c || v(o);
+  }, [c, o]);
+  const m = i !== void 0 && s !== void 0, [y, N] = u(i ?? !1), A = m ? i : y;
+  I(() => {
+    !m && i !== void 0 && N(i);
+  }, [m, i]);
+  const p = M(
+    (r) => {
+      m || N(r), s == null || s(r);
+    },
+    [s, m]
+  ), k = O(() => E(f), [f]), T = M(
+    (r) => {
+      const l = F(r, d);
+      l !== f && (c || v(l), e == null || e(l));
+    },
+    [c, f, d, e]
+  ), D = O(
+    () => ({
+      format: d,
+      time: k,
+      setTime: T,
+      setPart: (r, l) => T(G(k, r, l)),
+      disabled: x,
+      dataTestid: P,
+      close: () => p(!1)
+    }),
+    [P, x, d, p, T, k]
+  );
+  return /* @__PURE__ */ t(R.Provider, { value: D, children: /* @__PURE__ */ H(n.Root, { open: A, onOpenChange: p, children: [
+    /* @__PURE__ */ t(n.Anchor, { asChild: !0, children: /* @__PURE__ */ t(U, { className: S }) }),
+    /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(
+      n.Content,
+      {
+        asChild: !0,
+        align: "start",
+        sideOffset: 4,
+        collisionPadding: _,
+        "data-slot": "time-picker-panel",
+        "data-testid": `${P}-panel`,
+        children: /* @__PURE__ */ t(W, { className: L.oxTimePickerPanel, children: a ?? /* @__PURE__ */ t(w, {}) })
+      }
+    ) })
+  ] }) });
+};
+$.displayName = "OxTimePicker";
+export {
+  $ as TimePicker
+};

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

@@ -0,0 +1,7 @@
+const e = "_oxTimePickerPanel_13hbt_2", i = {
+  oxTimePickerPanel: e
+};
+export {
+  i as default,
+  e as oxTimePickerPanel
+};

package/dist/Forms/Inputs/TimePicker/TimePickerField.js

@@ -0,0 +1,82 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import * as T from "@radix-ui/react-popover";
+import { IconClock as k } from "@sesame/orxata-icons/IconClock";
+import { Icon as u } from "@sesame/orxata-icons/react";
+import { forwardRef as P } from "react";
+import { cn as x } from "../../../lib/utils.js";
+import { useFieldControlGroup as b } from "../../Field/useFieldGroup.js";
+import r from "./TimePickerField.module.css.js";
+import { useTimeField as h } from "./useTimeField.js";
+import { useTimePicker as v } from "./useTimePicker.js";
+import { useTranslate as N } from "../../../Locale/useTranslate.js";
+const g = P(
+  ({ className: t, onKeyDown: a, ...d }, m) => {
+    const s = N(), e = v(), l = b(), { segments: c, segmentProps: p, onKeyDown: n } = h({
+      format: e.format,
+      time: e.time,
+      setTime: e.setTime,
+      disabled: e.disabled
+    });
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: m,
+        ...l,
+        "data-slot": "controller",
+        role: "group",
+        "aria-disabled": e.disabled ? !0 : void 0,
+        "data-disabled": e.disabled ? "" : void 0,
+        "data-testid": `${e.dataTestid}-field`,
+        "data-placeholder": e.time ? void 0 : "",
+        className: x(r.oxTimePickerField, t),
+        onKeyDown: (i) => {
+          n(i), a == null || a(i);
+        },
+        ...d,
+        children: [
+          /* @__PURE__ */ o("span", { className: r.oxTimePickerSegments, children: c.map(
+            (i) => i.part === "literal" ? /* @__PURE__ */ o(
+              "span",
+              {
+                className: r.oxTimePickerSeparator,
+                "aria-hidden": "true",
+                children: i.value
+              },
+              i.key
+            ) : /* @__PURE__ */ o(
+              "span",
+              {
+                className: r.oxTimePickerSegment,
+                ...p(i.part),
+                children: i.value
+              },
+              i.key
+            )
+          ) }),
+          /* @__PURE__ */ o(
+            T.Trigger,
+            {
+              className: r.oxTimePickerToggle,
+              disabled: e.disabled || void 0,
+              "aria-label": s("orxata.timePicker.open"),
+              "data-testid": `${e.dataTestid}-toggle`,
+              children: /* @__PURE__ */ o(
+                u,
+                {
+                  "data-slot": "icon",
+                  icon: k,
+                  className: r.oxTimePickerGlyph,
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+g.displayName = "OxTimePickerField";
+export {
+  g as TimePickerField
+};

package/dist/Forms/Inputs/TimePicker/TimePickerField.module.css.js

@@ -0,0 +1,17 @@
+const e = "_oxTimePickerField_18jbr_2", i = "_oxTimePickerSegments_18jbr_2", o = "_oxTimePickerSegment_18jbr_2", r = "_oxTimePickerSeparator_18jbr_2", c = "_oxTimePickerToggle_18jbr_2", m = "_oxTimePickerGlyph_18jbr_2", T = {
+  oxTimePickerField: e,
+  oxTimePickerSegments: i,
+  oxTimePickerSegment: o,
+  oxTimePickerSeparator: r,
+  oxTimePickerToggle: c,
+  oxTimePickerGlyph: m
+};
+export {
+  T as default,
+  e as oxTimePickerField,
+  m as oxTimePickerGlyph,
+  o as oxTimePickerSegment,
+  i as oxTimePickerSegments,
+  r as oxTimePickerSeparator,
+  c as oxTimePickerToggle
+};

package/dist/Forms/Inputs/TimePicker/TimePickerList.js

@@ -0,0 +1,64 @@
+import { jsx as m } from "react/jsx-runtime";
+import { IconCheck as h } from "@sesame/orxata-icons/IconCheck";
+import { Icon as P } from "@sesame/orxata-icons/react";
+import { forwardRef as x, useMemo as n, useEffect as k } from "react";
+import { cn as L } from "../../../lib/utils.js";
+import b from "./TimePickerList.module.css.js";
+import { PART_MAX as M, pad as p, formatTime as I, parseTime as E } from "./time.js";
+import { useTimeList as N } from "./useTimeList.js";
+import { useTimePicker as R } from "./useTimePicker.js";
+import { ListboxViewport as S } from "../../../internal/Listbox/ListboxViewport.js";
+import { ListboxItem as $ } from "../../../internal/Listbox/ListboxItem.js";
+const A = 15, H = x(
+  ({ className: a, onKeyDown: s, ...l }, d) => {
+    const e = R(), i = n(() => {
+      const r = [];
+      for (let t = 0; t <= M.hour; t++)
+        for (let o = 0; o < 60; o += A)
+          r.push(`${p(t)}:${p(o)}`);
+      return r;
+    }, []), c = n(() => {
+      const r = I(e.time, "HH:MM");
+      return r && i.includes(r) ? r : void 0;
+    }, [i, e.time]), u = (r) => {
+      e.setTime(E(r)), e.close();
+    }, { listProps: f, optionProps: T } = N({
+      options: i,
+      selected: c,
+      onSelect: u,
+      disabled: e.disabled
+    });
+    return k(() => {
+    }, [e.format]), /* @__PURE__ */ m(
+      S,
+      {
+        ref: d,
+        role: "listbox",
+        className: L(b.oxTimePickerList, a),
+        "data-testid": `${e.dataTestid}-list`,
+        ...f,
+        ...l,
+        onKeyDown: (r) => {
+          f.onKeyDown(r), s == null || s(r);
+        },
+        children: i.map((r) => {
+          const { ref: t, ...o } = T(r);
+          return /* @__PURE__ */ m(
+            $,
+            {
+              ref: t,
+              ...o,
+              indicator: r === c ? /* @__PURE__ */ m(P, { icon: h, "aria-hidden": "true" }) : null,
+              children: r
+            },
+            r
+          );
+        })
+      }
+    );
+  }
+);
+H.displayName = "OxTimePickerList";
+export {
+  H as TimePickerList
+};

package/dist/Forms/Inputs/TimePicker/TimePickerList.module.css.js

@@ -0,0 +1,7 @@
+const e = "_oxTimePickerList_2akyt_2", i = {
+  oxTimePickerList: e
+};
+export {
+  i as default,
+  e as oxTimePickerList
+};

package/dist/Forms/Inputs/TimePicker/TimePickerWheel.js

@@ -0,0 +1,39 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as n, Fragment as d } from "react";
+import { cn as p } from "../../../lib/utils.js";
+import r from "./TimePickerWheel.module.css.js";
+import { TimePickerWheelColumn as h } from "./TimePickerWheelColumn.js";
+import { partsOf as f } from "./time.js";
+import { useTimePicker as k } from "./useTimePicker.js";
+const T = n(
+  ({ className: o, ...t }, s) => {
+    const i = k(), c = f(i.format);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: s,
+        className: p(r.oxTimePickerWheel, o),
+        "data-testid": `${i.dataTestid}-wheel`,
+        ...t,
+        children: [
+          /* @__PURE__ */ e("span", { className: r.oxTimePickerWheelBand, "aria-hidden": "true" }),
+          c.map((m, l) => /* @__PURE__ */ a(d, { children: [
+            l ? /* @__PURE__ */ e(
+              "span",
+              {
+                className: r.oxTimePickerWheelSeparator,
+                "aria-hidden": "true",
+                children: ":"
+              }
+            ) : null,
+            /* @__PURE__ */ e(h, { part: m })
+          ] }, m))
+        ]
+      }
+    );
+  }
+);
+T.displayName = "OxTimePickerWheel";
+export {
+  T as TimePickerWheel
+};

package/dist/Forms/Inputs/TimePicker/TimePickerWheel.module.css.js

@@ -0,0 +1,11 @@
+const e = "_oxTimePickerWheel_160kp_2", i = "_oxTimePickerWheelBand_160kp_2", o = "_oxTimePickerWheelSeparator_160kp_2", r = {
+  oxTimePickerWheel: e,
+  oxTimePickerWheelBand: i,
+  oxTimePickerWheelSeparator: o
+};
+export {
+  r as default,
+  e as oxTimePickerWheel,
+  i as oxTimePickerWheelBand,
+  o as oxTimePickerWheelSeparator
+};

package/dist/Forms/Inputs/TimePicker/TimePickerWheelColumn.js

@@ -0,0 +1,77 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as w, useEffect as E } from "react";
+import { cn as N } from "../../../lib/utils.js";
+import d from "./TimePickerWheelColumn.module.css.js";
+import { range as F, pad as h, PART_MAX as k } from "./time.js";
+import { useTimePicker as R } from "./useTimePicker.js";
+import { useWheelColumn as O } from "./useWheelColumn.js";
+import { useTranslate as _ } from "../../../Locale/useTranslate.js";
+const g = 2, j = "--", q = ({
+  className: p,
+  part: i,
+  onScroll: m,
+  onPointerDown: t,
+  onKeyDown: a,
+  ...P
+}) => {
+  var f;
+  const T = _(), o = R(), l = w(() => F(k[i]), [i]), s = (f = o.time) == null ? void 0 : f[i], u = s ?? 0, {
+    viewport: b,
+    rows: v,
+    distanceOf: x,
+    pick: W,
+    recentre: c,
+    onScroll: A,
+    onPointerDown: M,
+    onKeyDown: $
+  } = O({
+    values: l,
+    value: s,
+    onPick: (e) => o.setPart(i, e),
+    disabled: o.disabled
+  });
+  return E(() => {
+    c();
+    const e = requestAnimationFrame(c);
+    return () => cancelAnimationFrame(e);
+  }, [s, c]), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: b,
+      role: "spinbutton",
+      className: N(d.oxTimePickerWheelColumn, p),
+      tabIndex: o.disabled ? -1 : 0,
+      "aria-label": T(`orxata.timePicker.${i}`),
+      "aria-valuemin": 0,
+      "aria-valuemax": k[i],
+      "aria-valuenow": u,
+      "aria-valuetext": s === void 0 ? j : h(u),
+      "aria-disabled": o.disabled || void 0,
+      "data-testid": `${o.dataTestid}-wheel-${i}`,
+      onScroll: (e) => {
+        A(), m == null || m(e);
+      },
+      onPointerDown: (e) => {
+        M(e), t == null || t(e);
+      },
+      onKeyDown: (e) => {
+        $(e), a == null || a(e);
+      },
+      ...P,
+      children: /* @__PURE__ */ n("div", { className: d.oxTimePickerWheelRows, children: v.map((e, r) => /* @__PURE__ */ n(
+        "span",
+        {
+          className: d.oxTimePickerWheelRow,
+          "data-distance": Math.min(g, Math.round(x(r))),
+          onClick: () => W(r),
+          children: h(e)
+        },
+        `${r}-${e}`
+      )) })
+    }
+  );
+};
+q.displayName = "OxTimePickerWheelColumn";
+export {
+  q as TimePickerWheelColumn
+};

package/dist/Forms/Inputs/TimePicker/TimePickerWheelColumn.module.css.js

@@ -0,0 +1,11 @@
+const e = "_oxTimePickerWheelColumn_9bc7l_2", o = "_oxTimePickerWheelRows_9bc7l_2", i = "_oxTimePickerWheelRow_9bc7l_2", l = {
+  oxTimePickerWheelColumn: e,
+  oxTimePickerWheelRows: o,
+  oxTimePickerWheelRow: i
+};
+export {
+  l as default,
+  e as oxTimePickerWheelColumn,
+  i as oxTimePickerWheelRow,
+  o as oxTimePickerWheelRows
+};

package/dist/Forms/Inputs/TimePicker/time.js

@@ -0,0 +1,42 @@
+import { Time as c } from "@internationalized/date";
+const e = {
+  hour: 23,
+  minute: 59,
+  second: 59
+};
+function f(n) {
+  return n === "HH:MM:SS" ? ["hour", "minute", "second"] : ["hour", "minute"];
+}
+function u(n) {
+  return String(n).padStart(2, "0");
+}
+function d(n) {
+  if (!n) return;
+  const r = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/.exec(n.trim());
+  if (!r) return;
+  const [t, o, i] = [r[1], r[2], r[3] ?? "0"].map(
+    Number
+  );
+  if (!(t > e.hour || o > e.minute || i > e.second))
+    return new c(t, o, i);
+}
+function s(n, r) {
+  if (!n) return;
+  const t = `${u(n.hour)}:${u(n.minute)}`;
+  return r === "HH:MM:SS" ? `${t}:${u(n.second)}` : t;
+}
+function a(n, r, t) {
+  return (n ?? new c(0, 0, 0)).set({ [r]: t });
+}
+function h(n, r = 1) {
+  return Array.from({ length: Math.floor(n / r) + 1 }, (t, o) => o * r);
+}
+export {
+  e as PART_MAX,
+  s as formatTime,
+  u as pad,
+  d as parseTime,
+  f as partsOf,
+  h as range,
+  a as withPart
+};