@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Forms/Inputs/IconPicker/IconPickerContent.js

@@ -0,0 +1,84 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-popover";
+import * as C from "@radix-ui/react-radio-group";
+import { IconSearch as N } from "@sesame/orxata-icons/IconSearch";
+import { Icon as D } from "@sesame/orxata-icons/react";
+import { forwardRef as S, useRef as p } from "react";
+import t from "./IconPickerContent.module.css.js";
+import { useIconPicker as g } from "./useIconPicker.js";
+import { useTranslate as R } from "../../../Locale/useTranslate.js";
+import { Surface as b } from "../../../internal/Surface/Surface.js";
+const w = 16, O = S(
+  ({
+    children: d,
+    side: h = "bottom",
+    sideOffset: f = 4,
+    align: P = "start",
+    dataTestid: n,
+    ...k
+  }, I) => {
+    const c = R(), r = g(), i = p(null), s = p(null), x = (e) => r.select(e), v = (e) => {
+      var a;
+      e.preventDefault(), (a = i.current) == null || a.focus();
+    }, y = (e) => {
+      var a, l;
+      e.key === "ArrowDown" && (e.preventDefault(), (l = (a = s.current) == null ? void 0 : a.querySelector('[role="radio"]:not([disabled])')) == null || l.focus());
+    };
+    return /* @__PURE__ */ o(u.Portal, { children: /* @__PURE__ */ o(
+      u.Content,
+      {
+        ref: I,
+        asChild: !0,
+        "data-slot": "icon-picker-content",
+        "data-testid": n,
+        side: h,
+        sideOffset: f,
+        collisionPadding: w,
+        align: P,
+        onOpenAutoFocus: v,
+        ...k,
+        children: /* @__PURE__ */ m(b, { children: [
+          /* @__PURE__ */ m("div", { className: t.oxIconPickerSearch, "data-slot": "search", children: [
+            /* @__PURE__ */ o(
+              D,
+              {
+                icon: N,
+                className: t.oxIconPickerSearchIcon
+              }
+            ),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: i,
+                type: "search",
+                className: t.oxIconPickerSearchInput,
+                "data-testid": `${n}-search`,
+                placeholder: c("orxata.iconPicker.search"),
+                "aria-label": c("orxata.iconPicker.search"),
+                value: r.term,
+                onChange: (e) => r.setTerm(e.target.value),
+                onKeyDown: y
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o(
+            C.Root,
+            {
+              ref: s,
+              value: r.value ?? "",
+              "aria-label": c("orxata.iconPicker.label"),
+              className: t.oxIconPickerGrid,
+              onValueChange: x,
+              children: d
+            }
+          ),
+          !r.hasMatches && /* @__PURE__ */ o("p", { className: t.oxIconPickerEmpty, children: c("orxata.iconPicker.empty") })
+        ] })
+      }
+    ) });
+  }
+);
+O.displayName = "OxIconPickerContent";
+export {
+  O as IconPickerContent
+};

package/dist/Forms/Inputs/IconPicker/IconPickerContent.module.css.js

@@ -0,0 +1,15 @@
+const c = "_oxIconPickerSearch_38wfq_2", o = "_oxIconPickerSearchIcon_38wfq_2", r = "_oxIconPickerSearchInput_38wfq_2", e = "_oxIconPickerGrid_38wfq_2", n = "_oxIconPickerEmpty_38wfq_2", I = {
+  oxIconPickerSearch: c,
+  oxIconPickerSearchIcon: o,
+  oxIconPickerSearchInput: r,
+  oxIconPickerGrid: e,
+  oxIconPickerEmpty: n
+};
+export {
+  I as default,
+  n as oxIconPickerEmpty,
+  e as oxIconPickerGrid,
+  c as oxIconPickerSearch,
+  o as oxIconPickerSearchIcon,
+  r as oxIconPickerSearchInput
+};

package/dist/Forms/Inputs/IconPicker/IconPickerItem.js

@@ -0,0 +1,31 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-radio-group";
+import { Icon as x } from "@sesame/orxata-icons/react";
+import { forwardRef as P, useEffect as N } from "react";
+import { cn as k } from "../../../lib/utils.js";
+import c from "./IconPickerItem.module.css.js";
+import { useIconPicker as j } from "./useIconPicker.js";
+const u = P(({ className: n, value: o, icon: s, keywords: r, children: p, ...I }, a) => {
+  const i = j(), { register: m } = i, t = r == null ? void 0 : r.join("\0");
+  return N(
+    () => m(o, t ? t.split("\0") : void 0),
+    [m, o, t]
+  ), i.matches(o, r) ? /* @__PURE__ */ f(
+    l.Item,
+    {
+      ref: a,
+      value: o,
+      "data-slot": "icon-picker-item",
+      className: k(c.oxIconPickerItem, n),
+      ...I,
+      children: [
+        /* @__PURE__ */ e(x, { icon: s, className: c.oxIconPickerItemIcon }),
+        /* @__PURE__ */ e("span", { className: c.oxIconPickerItemName, children: p })
+      ]
+    }
+  ) : null;
+});
+u.displayName = "OxIconPickerItem";
+export {
+  u as IconPickerItem
+};

package/dist/Forms/Inputs/IconPicker/IconPickerItem.module.css.js

@@ -0,0 +1,11 @@
+const o = "_oxIconPickerItem_1ysu8_2", c = "_oxIconPickerItemIcon_1ysu8_2", e = "_oxIconPickerItemName_1ysu8_2", I = {
+  oxIconPickerItem: o,
+  oxIconPickerItemIcon: c,
+  oxIconPickerItemName: e
+};
+export {
+  I as default,
+  o as oxIconPickerItem,
+  c as oxIconPickerItemIcon,
+  e as oxIconPickerItemName
+};

package/dist/Forms/Inputs/IconPicker/IconPickerTrigger.js

@@ -0,0 +1,53 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import * as f from "@radix-ui/react-popover";
+import { IconChevronDown as I } from "@sesame/orxata-icons/IconChevronDown";
+import { Icon as t } from "@sesame/orxata-icons/react";
+import { forwardRef as P } from "react";
+import { cn as h } from "../../../lib/utils.js";
+import { useFieldControl as k } from "../../Field/useFieldGroup.js";
+import o from "./IconPickerTrigger.module.css.js";
+import { useIconPicker as u } from "./useIconPicker.js";
+const x = P(({ className: n, icon: i, placeholder: a = "", children: s, id: l, ...m }, d) => {
+  const e = u(), p = k(l), c = e.value === void 0 || e.value === "";
+  return /* @__PURE__ */ r(f.Trigger, { asChild: !0, children: /* @__PURE__ */ g(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      ...p,
+      "data-slot": "controller",
+      className: h(o.oxIconPickerTrigger, n),
+      ...m,
+      disabled: e.disabled,
+      children: [
+        i && /* @__PURE__ */ r(
+          t,
+          {
+            icon: i,
+            "data-slot": "icon",
+            className: o.oxIconPickerTriggerIcon
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: o.oxIconPickerTriggerValue,
+            "data-placeholder": c ? "" : void 0,
+            children: c ? a : s
+          }
+        ),
+        /* @__PURE__ */ r("span", { "data-slot": "icon", className: o.oxIconPickerTriggerChevron, children: /* @__PURE__ */ r(
+          t,
+          {
+            icon: I,
+            className: o.oxIconPickerTriggerGlyph
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+x.displayName = "OxIconPickerTrigger";
+export {
+  x as IconPickerTrigger
+};

package/dist/Forms/Inputs/IconPicker/IconPickerTrigger.module.css.js

@@ -0,0 +1,15 @@
+const r = "_oxIconPickerTrigger_151al_2", o = "_oxIconPickerTriggerIcon_151al_2", c = "_oxIconPickerTriggerValue_151al_2", e = "_oxIconPickerTriggerChevron_151al_2", g = "_oxIconPickerTriggerGlyph_151al_2", i = {
+  oxIconPickerTrigger: r,
+  oxIconPickerTriggerIcon: o,
+  oxIconPickerTriggerValue: c,
+  oxIconPickerTriggerChevron: e,
+  oxIconPickerTriggerGlyph: g
+};
+export {
+  i as default,
+  r as oxIconPickerTrigger,
+  e as oxIconPickerTriggerChevron,
+  g as oxIconPickerTriggerGlyph,
+  o as oxIconPickerTriggerIcon,
+  c as oxIconPickerTriggerValue
+};

package/dist/Forms/Inputs/IconPicker/useIconPicker.js

@@ -0,0 +1,24 @@
+import { createContext as i, useContext as s } from "react";
+const a = "[OxIconPicker] An icon picker part was used outside `<OxIconPicker>`. The trigger, the panel and every item read the chosen value and the search term from the root.", u = i(
+  null
+);
+function h() {
+  const e = s(u);
+  if (!e) throw new Error(a);
+  return e;
+}
+function r(e) {
+  return e.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+function m(e, n) {
+  const t = r(e).split(/\s+/).filter(Boolean);
+  if (t.length === 0) return !0;
+  const o = n.map(r).join(" ");
+  return t.every((c) => o.includes(c));
+}
+export {
+  u as IconPickerContextObject,
+  m as matchesTerm,
+  r as normalize,
+  h as useIconPicker
+};

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

@@ -0,0 +1,7 @@
+const t = "_oxInput_1b30t_2", n = {
+  oxInput: t
+};
+export {
+  n as default,
+  t as oxInput
+};

package/dist/Forms/Inputs/InputGroup/InputGroup.js

@@ -0,0 +1,20 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cn as a } from "../../../lib/utils.js";
+import n from "./InputGroup.module.css.js";
+const e = s(
+  ({ className: o, children: r, ...p }, t) => /* @__PURE__ */ m(
+    "span",
+    {
+      ref: t,
+      "data-slot": "controller",
+      className: a(n.oxInputGroup, o),
+      ...p,
+      children: r
+    }
+  )
+);
+e.displayName = "OxInputGroup";
+export {
+  e as InputGroup
+};

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

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

package/dist/Forms/Inputs/InputNumber/InputNumber.js

@@ -0,0 +1,90 @@
+import { jsx as z } from "react/jsx-runtime";
+import { forwardRef as A, useState as B, useCallback as v, useMemo as E } from "react";
+import { cn as F } from "../../../lib/utils.js";
+import { inputSizeClass as G } from "../inputSize.js";
+import H from "./InputNumber.module.css.js";
+import { InputNumberContext as J } from "./InputNumberContext.js";
+function I(m, l, f) {
+  let o = m;
+  return l !== void 0 && (o = Math.max(o, l)), f !== void 0 && (o = Math.min(o, f)), o;
+}
+const K = A(
+  ({
+    className: m,
+    children: l,
+    size: f = "md",
+    value: o,
+    defaultValue: D = null,
+    onValueChange: i,
+    min: t,
+    max: r,
+    step: n = 1,
+    disabled: c = !1,
+    ...O
+  }, R) => {
+    const [U, q] = B(
+      D
+    ), N = o !== void 0, e = N ? o : U, u = v(
+      (s) => {
+        N || q(s), i == null || i(s);
+      },
+      [N, i]
+    ), p = e ?? t ?? 0, d = v(() => {
+      c || u(I(p + n, t, r));
+    }, [c, u, p, n, t, r]), y = v(() => {
+      c || u(I(p - n, t, r));
+    }, [c, u, p, n, t, r]), M = v(
+      (s) => {
+        if (s.trim() === "") {
+          u(null);
+          return;
+        }
+        const k = Number(s);
+        Number.isNaN(k) || u(I(k, t, r));
+      },
+      [u, t, r]
+    ), S = !c && (r === void 0 || (e ?? t ?? 0) < r), b = !c && (t === void 0 || (e ?? t ?? 0) > t), j = e == null ? "" : String(e), w = E(
+      () => ({
+        value: e ?? null,
+        setInputValue: M,
+        increment: d,
+        decrement: y,
+        canIncrement: S,
+        canDecrement: b,
+        disabled: c,
+        min: t,
+        max: r,
+        step: n,
+        displayValue: j
+      }),
+      [
+        e,
+        M,
+        d,
+        y,
+        S,
+        b,
+        c,
+        t,
+        r,
+        n,
+        j
+      ]
+    );
+    return /* @__PURE__ */ z(J.Provider, { value: w, children: /* @__PURE__ */ z(
+      "div",
+      {
+        ref: R,
+        role: "group",
+        "data-slot": "input-number",
+        className: F(H.oxInputNumber, G[f], m),
+        ...O,
+        children: l
+      }
+    ) });
+  }
+);
+K.displayName = "OxInputNumber";
+export {
+  K as InputNumber
+};

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

@@ -0,0 +1,7 @@
+const t = "_oxInputNumber_1j8f7_2", u = {
+  oxInputNumber: t
+};
+export {
+  u as default,
+  t as oxInputNumber
+};

package/dist/Forms/Inputs/InputNumber/InputNumberContent.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { cn as p } from "../../../lib/utils.js";
+import s from "./InputNumberContent.module.css.js";
+const a = n(({ className: t, children: o, ...r }, m) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: m,
+    "data-slot": "controller",
+    className: p(s.oxInputNumberContent, t),
+    ...r,
+    children: o
+  }
+));
+a.displayName = "OxInputNumberContent";
+export {
+  a as InputNumberContent
+};

package/dist/Forms/Inputs/InputNumber/InputNumberContent.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputNumberContent_1g6fq_2", n = {
+  oxInputNumberContent: t
+};
+export {
+  n as default,
+  t as oxInputNumberContent
+};

package/dist/Forms/Inputs/InputNumber/InputNumberContext.js

@@ -0,0 +1,16 @@
+import { createContext as e, useContext as n } from "react";
+const u = e(
+  null
+);
+function r() {
+  const t = n(u);
+  if (!t)
+    throw new Error(
+      "InputNumber components must be used within <InputNumber>."
+    );
+  return t;
+}
+export {
+  u as InputNumberContext,
+  r as useInputNumberContext
+};

package/dist/Forms/Inputs/InputNumber/InputNumberDecrement.js

@@ -0,0 +1,34 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconChevronDown as b } from "@sesame/orxata-icons/IconChevronDown";
+import { Icon as u } from "@sesame/orxata-icons/react";
+import { forwardRef as f } from "react";
+import { cn as l } from "../../../lib/utils.js";
+import { useInputNumberContext as x } from "./InputNumberContext.js";
+import r from "./InputNumberDecrement.module.css.js";
+const D = f(({ className: o, children: m, onClick: e, disabled: n, ...s }, a) => {
+  const {
+    decrement: d,
+    canDecrement: i,
+    disabled: p
+  } = x();
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      tabIndex: -1,
+      "data-slot": "decrement",
+      disabled: n ?? (p || !i),
+      className: l(r.oxNumberFieldStep, o),
+      onClick: (c) => {
+        d(), e == null || e(c);
+      },
+      ...s,
+      children: m ?? /* @__PURE__ */ t(u, { icon: b, className: r.oxStepIcon })
+    }
+  );
+});
+D.displayName = "OxInputNumberDecrement";
+export {
+  D as InputNumberDecrement
+};

package/dist/Forms/Inputs/InputNumber/InputNumberDecrement.module.css.js

@@ -0,0 +1,9 @@
+const e = "_oxNumberFieldStep_n8w50_2", o = "_oxStepIcon_n8w50_2", t = {
+  oxNumberFieldStep: e,
+  oxStepIcon: o
+};
+export {
+  t as default,
+  e as oxNumberFieldStep,
+  o as oxStepIcon
+};

package/dist/Forms/Inputs/InputNumber/InputNumberIncrement.js

@@ -0,0 +1,34 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconChevronUp as b } from "@sesame/orxata-icons/IconChevronUp";
+import { Icon as u } from "@sesame/orxata-icons/react";
+import { forwardRef as f } from "react";
+import { cn as l } from "../../../lib/utils.js";
+import { useInputNumberContext as I } from "./InputNumberContext.js";
+import r from "./InputNumberIncrement.module.css.js";
+const x = f(({ className: o, children: m, onClick: e, disabled: n, ...s }, i) => {
+  const {
+    increment: a,
+    canIncrement: p,
+    disabled: c
+  } = I();
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      tabIndex: -1,
+      "data-slot": "increment",
+      disabled: n ?? (c || !p),
+      className: l(r.oxNumberFieldStep, o),
+      onClick: (d) => {
+        a(), e == null || e(d);
+      },
+      ...s,
+      children: m ?? /* @__PURE__ */ t(u, { icon: b, className: r.oxStepIcon })
+    }
+  );
+});
+x.displayName = "OxInputNumberIncrement";
+export {
+  x as InputNumberIncrement
+};

package/dist/Forms/Inputs/InputNumber/InputNumberIncrement.module.css.js

@@ -0,0 +1,9 @@
+const e = "_oxNumberFieldStep_1k7el_2", o = "_oxStepIcon_1k7el_2", t = {
+  oxNumberFieldStep: e,
+  oxStepIcon: o
+};
+export {
+  t as default,
+  e as oxNumberFieldStep,
+  o as oxStepIcon
+};

package/dist/Forms/Inputs/InputNumber/InputNumberInput.js

@@ -0,0 +1,48 @@
+import { jsx as I } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { cn as N } from "../../../lib/utils.js";
+import { useFieldControl as v } from "../../Field/useFieldGroup.js";
+import y from "../Input.module.css.js";
+import { useInputNumberContext as k } from "./InputNumberContext.js";
+import w from "./InputNumberInput.module.css.js";
+const A = b(({ className: o, onChange: r, onKeyDown: e, id: u, ...l }, m) => {
+  const {
+    displayValue: a,
+    setInputValue: i,
+    increment: p,
+    decrement: s,
+    disabled: f,
+    value: n,
+    min: d,
+    max: c
+  } = k(), x = v(u);
+  return /* @__PURE__ */ I(
+    "input",
+    {
+      ref: m,
+      ...x,
+      type: "text",
+      inputMode: "decimal",
+      role: "spinbutton",
+      autoComplete: "off",
+      "data-slot": "controller",
+      disabled: f,
+      "aria-valuenow": n ?? void 0,
+      "aria-valuemin": d,
+      "aria-valuemax": c,
+      value: a,
+      className: N(y.oxInput, w.oxNumberFieldInput, o),
+      onChange: (t) => {
+        i(t.target.value), r == null || r(t);
+      },
+      onKeyDown: (t) => {
+        t.key === "ArrowUp" ? (t.preventDefault(), p()) : t.key === "ArrowDown" && (t.preventDefault(), s()), e == null || e(t);
+      },
+      ...l
+    }
+  );
+});
+A.displayName = "OxInputNumberInput";
+export {
+  A as InputNumberInput
+};

package/dist/Forms/Inputs/InputNumber/InputNumberInput.module.css.js

@@ -0,0 +1,7 @@
+const e = "_oxNumberFieldInput_1grlt_2", t = {
+  oxNumberFieldInput: e
+};
+export {
+  t as default,
+  e as oxNumberFieldInput
+};