@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Forms/Inputs/ChatInput/ChatInput.js

@@ -0,0 +1,142 @@
+import { jsxs as d, jsx as r, Fragment as J } from "react/jsx-runtime";
+import { IconArrowUp as P } from "@sesame/orxata-icons/IconArrowUp";
+import { IconMicrophone as Q } from "@sesame/orxata-icons/IconMicrophone";
+import { IconPlus as W } from "@sesame/orxata-icons/IconPlus";
+import { Icon as k } from "@sesame/orxata-icons/react";
+import { forwardRef as X, useState as Y, useRef as Z } from "react";
+import { cn as y } from "../../../lib/utils.js";
+import { useFieldControl as _ } from "../../Field/useFieldGroup.js";
+import a from "./ChatInput.module.css.js";
+import { useAutoGrow as A } from "../../../hooks/useAutoGrow/useAutoGrow.js";
+import { Scrollbar as K } from "../../../Layout/Scrollbar/Scrollbar.js";
+import { IconButton as w } from "../../../Button/IconButton/IconButton.js";
+const m = (i, s) => typeof i == "function" ? i(s) : i, L = X(
+  ({
+    className: i,
+    actionLabels: s,
+    maxRows: C = 6,
+    value: z,
+    defaultValue: D = "",
+    onValueChange: p,
+    onSubmit: f,
+    onAttach: x,
+    onRecord: h,
+    onChange: v,
+    onKeyDown: N,
+    children: M,
+    toolbar: b,
+    actionsStart: j,
+    actionsEnd: B,
+    dataTestid: o,
+    id: E,
+    ...F
+  }, G) => {
+    const O = _(E), [g, q] = Y(D), e = z ?? g, l = Z(null), n = e.trim().length === 0, c = F.disabled === !0, I = () => {
+      n || c || f == null || f(e);
+    }, u = { empty: n, disabled: c, submit: I };
+    A(l, e, C);
+    const H = (t) => {
+      var U;
+      const $ = t.target;
+      $ != null && $.closest(
+        'button, a, input, textarea, select, [tabindex], [data-slot="scrollbar"]'
+      ) || (t.preventDefault(), (U = l.current) == null || U.focus());
+    };
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: G,
+        className: y(a["ox-chat-input"], i),
+        "data-slot": "chat-input",
+        "data-testid": o,
+        "data-empty": n,
+        onMouseDown: H,
+        children: [
+          b == null ? null : /* @__PURE__ */ r(
+            "div",
+            {
+              className: a["ox-chat-input-toolbar"],
+              "data-slot": "toolbar",
+              "data-testid": `${o}-toolbar`,
+              children: m(b, u)
+            }
+          ),
+          /* @__PURE__ */ d("div", { className: a["ox-chat-input-surface-box"], children: [
+            M === void 0 ? /* @__PURE__ */ r(
+              "textarea",
+              {
+                ref: l,
+                ...O,
+                rows: 1,
+                className: a["ox-chat-input-surface"],
+                "data-slot": "controller",
+                "data-testid": `${o}-surface`,
+                value: e,
+                onChange: (t) => {
+                  z === void 0 && q(t.target.value), p == null || p(t.target.value), v == null || v(t);
+                },
+                onKeyDown: (t) => {
+                  N == null || N(t), !(t.key !== "Enter" || t.shiftKey) && (t.nativeEvent.isComposing || (t.preventDefault(), I()));
+                },
+                ...F
+              }
+            ) : m(M, u),
+            /* @__PURE__ */ r(K, { port: l, dataTestid: `${o}-scrollbar` })
+          ] }),
+          /* @__PURE__ */ d("div", { className: a["ox-chat-input-actions"], "data-slot": "actions", children: [
+            /* @__PURE__ */ r("div", { className: a["ox-chat-input-actions-start"], children: j === void 0 ? /* @__PURE__ */ r(
+              w,
+              {
+                className: y(
+                  a["ox-chat-input-action"],
+                  a["ox-chat-input-action--subtle"]
+                ),
+                variant: "ghost",
+                size: "2xs",
+                "aria-label": s.attach,
+                disabled: c,
+                "data-testid": `${o}-attach`,
+                onClick: () => x == null ? void 0 : x(),
+                children: /* @__PURE__ */ r(k, { icon: W })
+              }
+            ) : m(j, u) }),
+            /* @__PURE__ */ r("div", { className: a["ox-chat-input-actions-end"], children: B === void 0 ? /* @__PURE__ */ d(J, { children: [
+              /* @__PURE__ */ r(
+                w,
+                {
+                  className: y(
+                    a["ox-chat-input-action"],
+                    a["ox-chat-input-action--subtle"]
+                  ),
+                  variant: "ghost",
+                  size: "2xs",
+                  "aria-label": s.record,
+                  disabled: c,
+                  "data-testid": `${o}-record`,
+                  onClick: () => h == null ? void 0 : h(),
+                  children: /* @__PURE__ */ r(k, { icon: Q })
+                }
+              ),
+              /* @__PURE__ */ r(
+                w,
+                {
+                  className: a["ox-chat-input-action"],
+                  size: "2xs",
+                  "aria-label": s.send,
+                  "data-testid": `${o}-send`,
+                  disabled: n || c,
+                  onClick: I,
+                  children: /* @__PURE__ */ r(k, { icon: P })
+                }
+              )
+            ] }) : m(B, u) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+L.displayName = "OxChatInput";
+export {
+  L as ChatInput
+};

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

@@ -0,0 +1,14 @@
+const t = {
+  "ox-chat-input": "_ox-chat-input_1kpir_2",
+  "ox-chat-input-toolbar": "_ox-chat-input-toolbar_1kpir_2",
+  "ox-chat-input-surface-box": "_ox-chat-input-surface-box_1kpir_2",
+  "ox-chat-input-surface": "_ox-chat-input-surface_1kpir_2",
+  "ox-chat-input-actions": "_ox-chat-input-actions_1kpir_2",
+  "ox-chat-input-actions-start": "_ox-chat-input-actions-start_1kpir_2",
+  "ox-chat-input-actions-end": "_ox-chat-input-actions-end_1kpir_2",
+  "ox-chat-input-action": "_ox-chat-input-action_1kpir_2",
+  "ox-chat-input-action--subtle": "_ox-chat-input-action--subtle_1kpir_2"
+};
+export {
+  t as default
+};

package/dist/Forms/Inputs/ColorPicker/ColorPicker.js

@@ -0,0 +1,71 @@
+import { jsx as k } from "react/jsx-runtime";
+import * as I from "@radix-ui/react-popover";
+import { forwardRef as J, useState as e, useCallback as p, useEffect as K, useMemo as L } from "react";
+import { cn as Q } from "../../../lib/utils.js";
+import T from "./ColorPicker.module.css.js";
+import { ColorPickerContextObject as U } from "./useColorPicker.js";
+const W = J(
+  ({
+    className: E,
+    children: M,
+    disabled: f = !1,
+    value: s,
+    defaultValue: b,
+    onValueChange: r,
+    open: t,
+    defaultOpen: n = !1,
+    onOpenChange: c,
+    dataTestid: q
+  }, u) => {
+    const m = s !== void 0 && r !== void 0, l = t !== void 0 && c !== void 0, [y, O] = e(s ?? b), [z, A] = e(s), [B, S] = e(t ?? n), [D, F] = e(t);
+    !m && s !== z && (A(s), O(s)), !l && t !== D && (F(t), t !== void 0 && S(t));
+    const d = m ? s : y, w = l ? t : B, i = p(
+      (o) => {
+        l || S(o), c == null || c(o);
+      },
+      [l, c]
+    ), a = p(
+      (o) => {
+        m || O(o), r == null || r(o), i(!1);
+      },
+      [m, r, i]
+    );
+    K(() => {
+      f && w && i(!1);
+    }, [f, w, i]);
+    const [j, G] = e({}), x = p(
+      (o, P) => {
+        G(
+          (v) => {
+            var N, R;
+            return ((N = v[o]) == null ? void 0 : N.color) === P.color && ((R = v[o]) == null ? void 0 : R.name) === P.name ? v : { ...v, [o]: P };
+          }
+        );
+      },
+      []
+    ), H = L(
+      () => ({
+        value: d,
+        disabled: f,
+        select: a,
+        chosen: d === void 0 ? void 0 : j[d],
+        remember: x
+      }),
+      [d, f, a, j, x]
+    );
+    return /* @__PURE__ */ k(U.Provider, { value: H, children: /* @__PURE__ */ k(I.Root, { open: w, onOpenChange: i, children: /* @__PURE__ */ k(
+      "div",
+      {
+        ref: u,
+        "data-slot": "color-picker",
+        "data-testid": q,
+        className: Q(T.oxColorPicker, E),
+        children: M
+      }
+    ) }) });
+  }
+);
+W.displayName = "OxColorPicker";
+export {
+  W as ColorPicker
+};

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

@@ -0,0 +1,7 @@
+const o = "_oxColorPicker_zgsr0_2", r = {
+  oxColorPicker: o
+};
+export {
+  r as default,
+  o as oxColorPicker
+};

package/dist/Forms/Inputs/ColorPicker/ColorPickerContent.js

@@ -0,0 +1,48 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-popover";
+import * as f from "@radix-ui/react-radio-group";
+import { forwardRef as C } from "react";
+import P from "./ColorPickerContent.module.css.js";
+import { useColorPicker as u } from "./useColorPicker.js";
+import { useTranslate as h } from "../../../Locale/useTranslate.js";
+import { Surface as k } from "../../../internal/Surface/Surface.js";
+const v = 16, x = C(
+  ({
+    children: e,
+    side: i = "bottom",
+    sideOffset: a = 4,
+    align: l = "start",
+    dataTestid: n,
+    ...c
+  }, s) => {
+    const m = h(), r = u(), d = (p) => r.select(p);
+    return /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+      t.Content,
+      {
+        ref: s,
+        asChild: !0,
+        "data-slot": "color-picker-content",
+        "data-testid": n,
+        side: i,
+        sideOffset: a,
+        collisionPadding: v,
+        align: l,
+        ...c,
+        children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
+          f.Root,
+          {
+            value: r.value ?? "",
+            "aria-label": m("orxata.colorPicker.label"),
+            className: P.oxColorPickerGrid,
+            onValueChange: d,
+            children: e
+          }
+        ) })
+      }
+    ) });
+  }
+);
+x.displayName = "OxColorPickerContent";
+export {
+  x as ColorPickerContent
+};

package/dist/Forms/Inputs/ColorPicker/ColorPickerContent.module.css.js

@@ -0,0 +1,7 @@
+const o = "_oxColorPickerGrid_1794j_2", r = {
+  oxColorPickerGrid: o
+};
+export {
+  r as default,
+  o as oxColorPickerGrid
+};

package/dist/Forms/Inputs/ColorPicker/ColorPickerSwatch.js

@@ -0,0 +1,30 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import * as f from "@radix-ui/react-radio-group";
+import { forwardRef as l, useEffect as w } from "react";
+import { cn as x } from "../../../lib/utils.js";
+import e from "./ColorPickerSwatch.module.css.js";
+import { useColorPicker as k } from "./useColorPicker.js";
+const P = l(({ className: m, value: o, color: r, children: t, ...c }, i) => {
+  const { remember: s } = k();
+  return w(() => {
+    s(o, { color: r, name: t });
+  }, [s, o, r, t]), /* @__PURE__ */ p(
+    f.Item,
+    {
+      ref: i,
+      value: o,
+      "data-slot": "color-picker-swatch",
+      className: x(e.oxColorPickerSwatch, m),
+      style: { "--ox-swatch-color": r },
+      ...c,
+      children: [
+        /* @__PURE__ */ a("span", { className: e.oxColorPickerSwatchDot }),
+        /* @__PURE__ */ a("span", { className: e.oxColorPickerSwatchName, children: t })
+      ]
+    }
+  );
+});
+P.displayName = "OxColorPickerSwatch";
+export {
+  P as ColorPickerSwatch
+};

package/dist/Forms/Inputs/ColorPicker/ColorPickerSwatch.module.css.js

@@ -0,0 +1,11 @@
+const o = "_oxColorPickerSwatch_2nv2z_2", c = "_oxColorPickerSwatchDot_2nv2z_2", r = "_oxColorPickerSwatchName_2nv2z_2", t = {
+  oxColorPickerSwatch: o,
+  oxColorPickerSwatchDot: c,
+  oxColorPickerSwatchName: r
+};
+export {
+  t as default,
+  o as oxColorPickerSwatch,
+  c as oxColorPickerSwatchDot,
+  r as oxColorPickerSwatchName
+};

package/dist/Forms/Inputs/ColorPicker/ColorPickerTrigger.js

@@ -0,0 +1,53 @@
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-popover";
+import { IconChevronDown as x } from "@sesame/orxata-icons/IconChevronDown";
+import { Icon as P } from "@sesame/orxata-icons/react";
+import { forwardRef as k } from "react";
+import { cn as v } from "../../../lib/utils.js";
+import { useFieldControl as T } from "../../Field/useFieldGroup.js";
+import e from "./ColorPickerTrigger.module.css.js";
+import { useColorPicker as y } from "./useColorPicker.js";
+const N = k(({ className: s, color: a, placeholder: n = "", children: m, id: d, ...p }, g) => {
+  var t, c;
+  const o = y(), f = T(d), i = o.value === void 0 || o.value === "", l = a ?? ((t = o.chosen) == null ? void 0 : t.color), C = m ?? ((c = o.chosen) == null ? void 0 : c.name) ?? o.value;
+  return /* @__PURE__ */ r(u.Trigger, { asChild: !0, children: /* @__PURE__ */ h(
+    "button",
+    {
+      ref: g,
+      type: "button",
+      ...f,
+      "data-slot": "controller",
+      className: v(e.oxColorPickerTrigger, s),
+      ...p,
+      disabled: o.disabled,
+      children: [
+        !i && l !== void 0 && /* @__PURE__ */ r(
+          "span",
+          {
+            className: e.oxColorPickerTriggerDot,
+            style: { "--ox-swatch-color": l }
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: e.oxColorPickerTriggerValue,
+            "data-placeholder": i ? "" : void 0,
+            children: i ? n : C
+          }
+        ),
+        /* @__PURE__ */ r("span", { "data-slot": "icon", className: e.oxColorPickerTriggerIcon, children: /* @__PURE__ */ r(
+          P,
+          {
+            icon: x,
+            className: e.oxColorPickerTriggerGlyph
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+N.displayName = "OxColorPickerTrigger";
+export {
+  N as ColorPickerTrigger
+};

package/dist/Forms/Inputs/ColorPicker/ColorPickerTrigger.module.css.js

@@ -0,0 +1,15 @@
+const o = "_oxColorPickerTrigger_oyao4_2", r = "_oxColorPickerTriggerDot_oyao4_2", e = "_oxColorPickerTriggerValue_oyao4_2", g = "_oxColorPickerTriggerIcon_oyao4_2", i = "_oxColorPickerTriggerGlyph_oyao4_2", c = {
+  oxColorPickerTrigger: o,
+  oxColorPickerTriggerDot: r,
+  oxColorPickerTriggerValue: e,
+  oxColorPickerTriggerIcon: g,
+  oxColorPickerTriggerGlyph: i
+};
+export {
+  c as default,
+  o as oxColorPickerTrigger,
+  r as oxColorPickerTriggerDot,
+  i as oxColorPickerTriggerGlyph,
+  g as oxColorPickerTriggerIcon,
+  e as oxColorPickerTriggerValue
+};

package/dist/Forms/Inputs/ColorPicker/useColorPicker.js

@@ -0,0 +1,11 @@
+import { createContext as o, useContext as r } from "react";
+const t = "[OxColorPicker] A color picker part was used outside `<OxColorPicker>`. The trigger, the panel and every swatch read the chosen value from the root.", c = o(null);
+function i() {
+  const e = r(c);
+  if (!e) throw new Error(t);
+  return e;
+}
+export {
+  c as ColorPickerContextObject,
+  i as useColorPicker
+};

package/dist/Forms/Inputs/Combobox/Combobox.js

@@ -0,0 +1,103 @@
+import { jsx as b } from "react/jsx-runtime";
+import * as J from "@radix-ui/react-popover";
+import { forwardRef as K, useState as n, useCallback as x, useRef as Q, useMemo as T } from "react";
+import { cn as W } from "../../../lib/utils.js";
+import X from "./Combobox.module.css.js";
+import { ComboboxContext as Y } from "./context.js";
+import { useComboboxEditing as Z } from "./useComboboxEditing.js";
+import { useComboboxLabels as _ } from "./useComboboxLabels.js";
+import { useComboboxSearch as V } from "./useComboboxSearch.js";
+const g = K(
+  ({
+    className: L,
+    value: i,
+    defaultValue: N,
+    onValueChange: e,
+    multiple: t = !1,
+    disabled: p = !1,
+    open: m,
+    defaultOpen: O,
+    onOpenChange: c,
+    children: U,
+    onSearch: u,
+    debounce: j = 500,
+    ignoreFilter: w,
+    dataTestid: I,
+    ...M
+  }, $) => {
+    const [h, q] = n(N ?? (t ? [] : void 0)), [z, B] = n(
+      O ?? !1
+    ), [v, y] = n(""), s = i ?? h, l = m ?? z, d = x(
+      (o) => {
+        i === void 0 && q(o), e == null || e(o);
+      },
+      [i, e]
+    ), r = x(
+      (o) => {
+        m === void 0 && B(o), c == null || c(o);
+      },
+      [m, c]
+    ), E = x(
+      (o) => {
+        if (t) {
+          const a = Array.isArray(s) ? s : [], G = a.includes(o) ? a.filter((H) => H !== o) : [...a, o];
+          d(G);
+        } else
+          d(o), r(!1);
+        y("");
+      },
+      [t, s, d, r]
+    ), f = V(j, u), R = w ?? u !== void 0, { register: P, labelFor: S } = _(), { openEdit: k, closeEdit: A, cancelOpenEdit: F } = Z(), C = Q(null), D = T(
+      () => ({
+        value: s,
+        select: E,
+        multiple: t,
+        disabled: p,
+        open: l,
+        setOpen: r,
+        search: v,
+        setSearch: y,
+        scheduleSearch: f.schedule,
+        searchImmediately: f.immediately,
+        skipFilter: R,
+        registerLabel: P,
+        labelFor: S,
+        openEdit: k,
+        closeEdit: A,
+        cancelOpenEdit: F,
+        inputRef: C
+      }),
+      [
+        s,
+        E,
+        t,
+        p,
+        l,
+        r,
+        v,
+        f,
+        R,
+        P,
+        S,
+        k,
+        A,
+        F
+      ]
+    );
+    return /* @__PURE__ */ b(Y.Provider, { value: D, children: /* @__PURE__ */ b(J.Root, { open: l, onOpenChange: r, children: /* @__PURE__ */ b(
+      "div",
+      {
+        ref: $,
+        "data-slot": "combobox",
+        "data-testid": I,
+        className: W(X.oxCombobox, L),
+        ...M,
+        children: U
+      }
+    ) }) });
+  }
+);
+g.displayName = "OxCombobox";
+export {
+  g as Combobox
+};

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

@@ -0,0 +1,7 @@
+const o = "_oxCombobox_ziqeo_2", x = {
+  oxCombobox: o
+};
+export {
+  x as default,
+  o as oxCombobox
+};

package/dist/Forms/Inputs/Combobox/ComboboxCancel.js

@@ -0,0 +1,45 @@
+import { jsx as a } from "react/jsx-runtime";
+import { IconXCircle as n } from "@sesame/orxata-icons/IconXCircle";
+import { Icon as d } from "@sesame/orxata-icons/react";
+import { forwardRef as C } from "react";
+import { cn as I } from "../../../lib/utils.js";
+import e from "./ComboboxCancel.module.css.js";
+import { useComboboxContext as y } from "./context.js";
+import { useTranslate as h } from "../../../Locale/useTranslate.js";
+const u = C(
+  ({
+    className: m,
+    children: c,
+    dataTestid: l,
+    "aria-label": b,
+    onClick: t,
+    onMouseDown: r,
+    ...s
+  }, x) => {
+    const { setSearch: i, searchImmediately: p } = y(), f = h();
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        ref: x,
+        type: "button",
+        tabIndex: -1,
+        "data-slot": "controller",
+        "data-testid": l,
+        "aria-label": b ?? f("orxata.combobox.clear"),
+        className: I(e.oxComboboxCancel, m),
+        onMouseDown: (o) => {
+          o.preventDefault(), r == null || r(o);
+        },
+        onClick: (o) => {
+          i(""), p(""), t == null || t(o);
+        },
+        ...s,
+        children: c ?? /* @__PURE__ */ a(d, { icon: n, className: e.oxComboboxCancelIcon })
+      }
+    );
+  }
+);
+u.displayName = "OxComboboxCancel";
+export {
+  u as ComboboxCancel
+};

package/dist/Forms/Inputs/Combobox/ComboboxCancel.module.css.js

@@ -0,0 +1,9 @@
+const o = "_oxComboboxCancel_f38qn_2", n = "_oxComboboxCancelIcon_f38qn_2", x = {
+  oxComboboxCancel: o,
+  oxComboboxCancelIcon: n
+};
+export {
+  x as default,
+  o as oxComboboxCancel,
+  n as oxComboboxCancelIcon
+};