@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Forms/Field/FieldMessage/FieldMessage.js

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as n } from "../../../lib/utils.js";
+import { useFieldMessage as g } from "../useFieldGroup.js";
+import e from "./FieldMessage.module.css.js";
+const c = {
+  default: void 0,
+  error: e.oxFieldMessageError,
+  success: e.oxFieldMessageSuccess,
+  warning: e.oxFieldMessageWarning
+}, f = m(
+  ({ className: o, variant: a, children: i, ...d }, t) => {
+    const s = g(), r = a ?? s.variant ?? "default";
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: t,
+        id: s.id,
+        "data-slot": "message",
+        role: r === "error" ? "alert" : void 0,
+        className: n(e.oxFieldMessage, c[r], o),
+        ...d,
+        children: i
+      }
+    );
+  }
+);
+f.displayName = "OxFieldMessage";
+export {
+  f as FieldMessage
+};

package/dist/Forms/Field/FieldMessage/FieldMessage.module.css.js

@@ -0,0 +1,13 @@
+const e = "_oxFieldMessage_1wvmt_2", s = "_oxFieldMessageError_1wvmt_2", o = "_oxFieldMessageSuccess_1wvmt_2", a = "_oxFieldMessageWarning_1wvmt_2", g = {
+  oxFieldMessage: e,
+  oxFieldMessageError: s,
+  oxFieldMessageSuccess: o,
+  oxFieldMessageWarning: a
+};
+export {
+  g as default,
+  e as oxFieldMessage,
+  s as oxFieldMessageError,
+  o as oxFieldMessageSuccess,
+  a as oxFieldMessageWarning
+};

package/dist/Forms/Field/useFieldGroup.d.ts

@@ -22,7 +22,7 @@
  */
 export type FieldVariant = 'default' | 'error' | 'success' | 'warning';
 /** The parts of the group that announce themselves so an IDREF never dangles. */
-type FieldPart = 'label' | 'message';
+type FieldPart = 'label' | 'description' | 'message';
 export interface FieldGroupContextValue {
     /**
      * Id on the `<label>`. A composite control — one with several focusable
@@ -30,12 +30,18 @@ export interface FieldGroupContextValue {
      * `aria-labelledby` here.
      */
     labelId: string;
+    /**
+     * Id on the supporting text. Separate from `messageId` because the two
+     * coexist: an invalid toggle row has both, and a reader should get both.
+     */
+    descriptionId: string;
     /** Id on the message, and what a control points `aria-describedby` at. */
     messageId: string;
     /** What `<label htmlFor>` points at, once a control has claimed it. */
     controlId: string | undefined;
     variant: FieldVariant;
     hasLabel: boolean;
+    hasDescription: boolean;
     hasMessage: boolean;
     /** Announce a part as mounted. Returns the call that takes it back. */
     register: (_part: FieldPart) => () => void;
@@ -59,6 +65,9 @@ export interface FieldLabelAttrs {
     id?: string;
     htmlFor?: string;
 }
+export interface FieldDescriptionAttrs {
+    id?: string;
+}
 export declare const FieldGroupContext: import('react').Context<FieldGroupContextValue | null>;
 /**
  * The surrounding field, or `undefined` when there is none.
@@ -92,6 +101,11 @@ export declare function useFieldControl(id?: string): FieldControlAttrs;
 export declare function useFieldControlGroup(): FieldControlGroupAttrs;
 /** Wiring for a `<label>` inside the group: its own id, and what it names. */
 export declare function useFieldLabel(): FieldLabelAttrs;
+/**
+ * Wiring for the supporting text: the id the control adds to its
+ * `aria-describedby`. A `<span>` next to a control is not attached to it.
+ */
+export declare function useFieldDescription(): FieldDescriptionAttrs;
 /**
  * Wiring for the message: the id a control describes itself with, and the
  * group's variant so it does not have to be written on both.
@@ -105,4 +119,14 @@ export declare function useFieldMessage(): {
  * the bookkeeping live next to the hooks that read them.
  */
 export declare function useProvideFieldGroup(variant: FieldVariant): FieldGroupContextValue;
+/**
+ * For a group that pairs its own label with its own control while still
+ * answering to the field around it — `<OxToggleGroup>`.
+ *
+ * Own label, control and description; variant and message delegated outward.
+ * Letting the outer field through instead would have every toggle row in it
+ * claim the same `controlId`; shadowing it would drop the error's
+ * `aria-invalid` and `aria-describedby`.
+ */
+export declare function useProvideNestedFieldGroup(): FieldGroupContextValue;
 export {};

package/dist/Forms/Field/useFieldGroup.js

@@ -0,0 +1,111 @@
+import { createContext as y, useId as C, useEffect as F, useState as d, useRef as D, useCallback as f, useMemo as M, useContext as L } from "react";
+const w = y(
+  null
+);
+function u() {
+  return L(w) ?? void 0;
+}
+function G(e) {
+  return e.variant === "error" ? !0 : void 0;
+}
+function x(e) {
+  const s = [
+    e.hasDescription ? e.descriptionId : void 0,
+    e.hasMessage ? e.messageId : void 0
+  ].filter(Boolean);
+  return s.length > 0 ? s.join(" ") : void 0;
+}
+function b(e) {
+  const s = u(), n = s == null ? void 0 : s.register;
+  return F(() => n == null ? void 0 : n(e), [n, e]), s;
+}
+function $(e) {
+  const s = u(), n = C(), r = s ? e ?? n : e, t = s == null ? void 0 : s.claimControl;
+  return F(() => {
+    if (!(!t || r === void 0))
+      return t(r);
+  }, [t, r]), s ? {
+    id: r,
+    "aria-invalid": G(s),
+    "aria-describedby": x(s)
+  } : { id: e };
+}
+function B() {
+  const e = u();
+  return e ? {
+    "aria-labelledby": e.hasLabel ? e.labelId : void 0,
+    "aria-invalid": G(e),
+    "aria-describedby": x(e)
+  } : {};
+}
+function j() {
+  const e = b("label");
+  return e ? { id: e.labelId, htmlFor: e.controlId } : {};
+}
+function k() {
+  const e = b("description");
+  return e ? { id: e.descriptionId } : {};
+}
+function E() {
+  const e = b("message");
+  return { id: e == null ? void 0 : e.messageId, variant: e == null ? void 0 : e.variant };
+}
+function P(e) {
+  const s = C(), [n, r] = d(0), [t, a] = d(0), [o, i] = d(0), [v, m] = d(void 0), l = D(!1), I = f((c) => {
+    const h = c === "label" ? r : c === "description" ? a : i;
+    return h((g) => g + 1), () => h((g) => g - 1);
+  }, []), p = f((c) => l.current ? () => {
+  } : (l.current = !0, m(c), () => {
+    l.current = !1, m(void 0);
+  }), []);
+  return M(
+    () => ({
+      labelId: `${s}-label`,
+      descriptionId: `${s}-description`,
+      messageId: `${s}-message`,
+      controlId: v,
+      variant: e,
+      hasLabel: n > 0,
+      hasDescription: t > 0,
+      hasMessage: o > 0,
+      register: I,
+      claimControl: p
+    }),
+    [
+      s,
+      v,
+      e,
+      n,
+      t,
+      o,
+      I,
+      p
+    ]
+  );
+}
+function H() {
+  const e = u(), s = P((e == null ? void 0 : e.variant) ?? "default"), n = e == null ? void 0 : e.messageId, r = e == null ? void 0 : e.hasMessage, t = e == null ? void 0 : e.register, a = s.register, o = f(
+    (i) => i === "message" && t ? t(i) : a(i),
+    [t, a]
+  );
+  return M(
+    () => n === void 0 ? s : {
+      ...s,
+      messageId: n,
+      hasMessage: r ?? !1,
+      register: o
+    },
+    [s, n, r, o]
+  );
+}
+export {
+  w as FieldGroupContext,
+  $ as useFieldControl,
+  B as useFieldControlGroup,
+  k as useFieldDescription,
+  u as useFieldGroup,
+  j as useFieldLabel,
+  E as useFieldMessage,
+  P as useProvideFieldGroup,
+  H as useProvideNestedFieldGroup
+};

package/dist/Forms/Inputs/AiSearch/AiSearch.js

@@ -0,0 +1,109 @@
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { IconSesameIa as F } from "@sesame/orxata-icons/IconSesameIa";
+import { Icon as j } from "@sesame/orxata-icons/react";
+import { Command as w, CommandInput as E } from "cmdk";
+import { forwardRef as L, useState as M, useEffect as $, useMemo as b } from "react";
+import { cn as g } from "../../../lib/utils.js";
+import { useFieldControl as q } from "../../Field/useFieldGroup.js";
+import i from "./AiSearch.module.css.js";
+import { AiSearchContext as D } from "./useAiSearch.js";
+import { useTranslate as G } from "../../../Locale/useTranslate.js";
+import { Loader as K } from "../../../Feedback/Loader/Loader.js";
+const O = L(
+  ({
+    thinking: d = !1,
+    value: o,
+    onValueChange: a,
+    onSelect: e,
+    onClose: m,
+    trailing: x,
+    className: u,
+    children: A,
+    id: S,
+    dataTestid: l,
+    ...N
+  }, k) => {
+    const p = G(), y = q(S), s = o !== void 0 && a !== void 0, [v, f] = M(o ?? ""), c = s ? o : v;
+    $(() => {
+      !s && o !== void 0 && f(o);
+    }, [s, o]);
+    const I = (t) => {
+      s || f(t), a == null || a(t);
+    }, n = c.length > 0, T = b(
+      () => ({
+        query: c,
+        thinking: d,
+        open: n,
+        select: (t) => e == null ? void 0 : e(t)
+      }),
+      [e, n, c, d]
+    );
+    return /* @__PURE__ */ r(D.Provider, { value: T, children: /* @__PURE__ */ r(
+      w,
+      {
+        shouldFilter: !1,
+        onKeyDown: (t) => {
+          t.key === "Escape" && (m == null || m());
+        },
+        children: /* @__PURE__ */ h(
+          "div",
+          {
+            "data-slot": "ai-search",
+            "data-testid": l,
+            "data-open": n || void 0,
+            className: g(i.oxAiSearch, u),
+            children: [
+              /* @__PURE__ */ h("div", { className: i.oxAiSearchField, children: [
+                /* @__PURE__ */ r(
+                  j,
+                  {
+                    icon: F,
+                    className: i.oxAiSearchGlyph,
+                    "data-slot": "icon"
+                  }
+                ),
+                /* @__PURE__ */ r(E, { asChild: !0, value: c, onValueChange: I, children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    ref: k,
+                    ...y,
+                    ...N,
+                    className: i.oxAiSearchInput,
+                    "data-slot": "controller",
+                    "data-testid": `${l}-input`,
+                    "aria-expanded": n,
+                    "cmdk-input": void 0
+                  }
+                ) }),
+                d ? /* @__PURE__ */ h("span", { className: i.oxAiSearchThinking, children: [
+                  /* @__PURE__ */ r(
+                    K,
+                    {
+                      className: i.oxAiSearchThinkingMark,
+                      dataTestid: `${l}-thinking`,
+                      children: p("orxata.aiSearch.thinking")
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "span",
+                    {
+                      className: i.oxAiSearchThinkingLabel,
+                      "aria-hidden": "true",
+                      children: p("orxata.aiSearch.thinking")
+                    }
+                  )
+                ] }) : null,
+                x
+              ] }),
+              A
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+O.displayName = "OxAiSearch";
+export {
+  O as AiSearch
+};

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

@@ -0,0 +1,19 @@
+const i = "_oxAiSearch_1049e_2", e = "_oxAiSearchField_1049e_2", h = "_oxAiSearchInput_1049e_2", o = "_oxAiSearchGlyph_1049e_2", a = "_oxAiSearchThinking_1049e_2", c = "_oxAiSearchThinkingMark_1049e_2", n = "_oxAiSearchThinkingLabel_1049e_2", r = {
+  oxAiSearch: i,
+  oxAiSearchField: e,
+  oxAiSearchInput: h,
+  oxAiSearchGlyph: o,
+  oxAiSearchThinking: a,
+  oxAiSearchThinkingMark: c,
+  oxAiSearchThinkingLabel: n
+};
+export {
+  r as default,
+  i as oxAiSearch,
+  e as oxAiSearchField,
+  o as oxAiSearchGlyph,
+  h as oxAiSearchInput,
+  a as oxAiSearchThinking,
+  n as oxAiSearchThinkingLabel,
+  c as oxAiSearchThinkingMark
+};

package/dist/Forms/Inputs/AiSearch/AiSearchAsk.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { IconCornerDownLeft as A } from "@sesame/orxata-icons/IconCornerDownLeft";
+import { IconSesameIa as d } from "@sesame/orxata-icons/IconSesameIa";
+import { Icon as s } from "@sesame/orxata-icons/react";
+import { CommandItem as p } from "cmdk";
+import { forwardRef as f } from "react";
+import { cn as k } from "../../../lib/utils.js";
+import r from "./AiSearchAsk.module.css.js";
+import { useAiSearch as x } from "./useAiSearch.js";
+import { useTranslate as S } from "../../../Locale/useTranslate.js";
+const N = f(
+  ({ className: o, value: c = "ask", dataTestid: i, ...t }, m) => {
+    const n = S(), { query: l, select: h } = x();
+    return /* @__PURE__ */ e(p, { ref: m, asChild: !0, value: c, onSelect: h, ...t, children: /* @__PURE__ */ a(
+      "div",
+      {
+        "data-slot": "ai-search-ask",
+        "data-testid": i,
+        className: k(r.oxAiSearchAsk, o),
+        children: [
+          /* @__PURE__ */ e(s, { icon: d, className: r.oxAiSearchAskGlyph }),
+          /* @__PURE__ */ a("span", { className: r.oxAiSearchAskText, children: [
+            /* @__PURE__ */ e("span", { className: r.oxAiSearchAskTitle, children: n("orxata.aiSearch.ask") }),
+            /* @__PURE__ */ a("span", { className: r.oxAiSearchAskQuery, children: [
+              "«",
+              l,
+              "»"
+            ] })
+          ] }),
+          /* @__PURE__ */ e("kbd", { className: r.oxAiSearchAskEnter, "aria-hidden": "true", children: /* @__PURE__ */ e(
+            s,
+            {
+              icon: A,
+              className: r.oxAiSearchAskEnterIcon
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+N.displayName = "OxAiSearchAsk";
+export {
+  N as AiSearchAsk
+};

package/dist/Forms/Inputs/AiSearch/AiSearchAsk.module.css.js

@@ -0,0 +1,19 @@
+const A = "_oxAiSearchAsk_sxxdk_2", e = "_oxAiSearchAskGlyph_sxxdk_2", s = "_oxAiSearchAskText_sxxdk_2", x = "_oxAiSearchAskTitle_sxxdk_2", o = "_oxAiSearchAskQuery_sxxdk_2", c = "_oxAiSearchAskEnter_sxxdk_2", r = "_oxAiSearchAskEnterIcon_sxxdk_2", k = {
+  oxAiSearchAsk: A,
+  oxAiSearchAskGlyph: e,
+  oxAiSearchAskText: s,
+  oxAiSearchAskTitle: x,
+  oxAiSearchAskQuery: o,
+  oxAiSearchAskEnter: c,
+  oxAiSearchAskEnterIcon: r
+};
+export {
+  k as default,
+  A as oxAiSearchAsk,
+  c as oxAiSearchAskEnter,
+  r as oxAiSearchAskEnterIcon,
+  e as oxAiSearchAskGlyph,
+  o as oxAiSearchAskQuery,
+  s as oxAiSearchAskText,
+  x as oxAiSearchAskTitle
+};

package/dist/Forms/Inputs/AiSearch/AiSearchPanel.js

@@ -0,0 +1,50 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { CommandList as l } from "cmdk";
+import { forwardRef as h } from "react";
+import { cn as d } from "../../../lib/utils.js";
+import a from "./AiSearchPanel.module.css.js";
+import { useAiSearch as m } from "./useAiSearch.js";
+import { useTranslate as p } from "../../../Locale/useTranslate.js";
+const x = h(
+  ({ className: n, children: s, dataTestid: t, ...o }, c) => {
+    const i = p();
+    return m().open ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: c,
+        "data-slot": "ai-search-panel",
+        "data-testid": t,
+        className: d(a.oxAiSearchPanel, n),
+        ...o,
+        children: [
+          /* @__PURE__ */ r(
+            l,
+            {
+              "data-slot": "ai-search-rows",
+              className: a.oxAiSearchRows,
+              children: s
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: a.oxAiSearchPanelHints, children: [
+            /* @__PURE__ */ e("span", { className: a.oxAiSearchPanelHint, children: [
+              /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "↑↓" }),
+              i("orxata.aiSearch.hintNavigate")
+            ] }),
+            /* @__PURE__ */ e("span", { className: a.oxAiSearchPanelHint, children: [
+              /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "↵" }),
+              i("orxata.aiSearch.hintAsk")
+            ] }),
+            /* @__PURE__ */ e("span", { className: a.oxAiSearchPanelHint, children: [
+              /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "Esc" }),
+              i("orxata.aiSearch.hintClose")
+            ] })
+          ] })
+        ]
+      }
+    ) : null;
+  }
+);
+x.displayName = "OxAiSearchPanel";
+export {
+  x as AiSearchPanel
+};

package/dist/Forms/Inputs/AiSearch/AiSearchPanel.module.css.js

@@ -0,0 +1,13 @@
+const e = "_oxAiSearchPanel_1mjfl_2", a = "_oxAiSearchRows_1mjfl_2", o = "_oxAiSearchPanelHints_1mjfl_2", n = "_oxAiSearchPanelHint_1mjfl_2", i = {
+  oxAiSearchPanel: e,
+  oxAiSearchRows: a,
+  oxAiSearchPanelHints: o,
+  oxAiSearchPanelHint: n
+};
+export {
+  i as default,
+  e as oxAiSearchPanel,
+  n as oxAiSearchPanelHint,
+  o as oxAiSearchPanelHints,
+  a as oxAiSearchRows
+};

package/dist/Forms/Inputs/AiSearch/AiSearchSend.js

@@ -0,0 +1,42 @@
+import { jsx as s } from "react/jsx-runtime";
+import { IconArrowUp as d } from "@sesame/orxata-icons/IconArrowUp";
+import { IconStop as l } from "@sesame/orxata-icons/IconStop";
+import { Icon as x } from "@sesame/orxata-icons/react";
+import { forwardRef as y } from "react";
+import { cn as u } from "../../../lib/utils.js";
+import m from "./AiSearchSend.module.css.js";
+import { useAiSearch as A } from "./useAiSearch.js";
+import { useTranslate as g } from "../../../Locale/useTranslate.js";
+const b = y(
+  ({ className: c, onSend: r, onStop: a, onClick: e, dataTestid: n, ...h }, p) => {
+    const o = g(), i = A(), t = i.thinking ? "thinking" : i.query ? "ready" : "empty";
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: p,
+        type: "button",
+        className: u(m.oxAiSearchSend, c),
+        "data-slot": "send",
+        "data-testid": n,
+        "data-state": t,
+        disabled: t === "empty",
+        "aria-label": o(t === "thinking" ? "orxata.aiSearch.stop" : "orxata.aiSearch.ask"),
+        onClick: (f) => {
+          t === "thinking" ? a == null || a() : r == null || r(i.query), e == null || e(f);
+        },
+        ...h,
+        children: /* @__PURE__ */ s(
+          x,
+          {
+            icon: t === "thinking" ? l : d,
+            className: m.oxAiSearchSendIcon
+          }
+        )
+      }
+    );
+  }
+);
+b.displayName = "OxAiSearchSend";
+export {
+  b as AiSearchSend
+};

package/dist/Forms/Inputs/AiSearch/AiSearchSend.module.css.js

@@ -0,0 +1,9 @@
+const e = "_oxAiSearchSend_17ewd_2", o = "_oxAiSearchSendIcon_17ewd_2", c = {
+  oxAiSearchSend: e,
+  oxAiSearchSendIcon: o
+};
+export {
+  c as default,
+  e as oxAiSearchSend,
+  o as oxAiSearchSendIcon
+};

package/dist/Forms/Inputs/AiSearch/AiSearchShortcut.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as a } from "../../../lib/utils.js";
+import s from "./AiSearchShortcut.module.css.js";
+import { useAiSearch as n } from "./useAiSearch.js";
+const f = m(
+  ({ className: r, children: t, dataTestid: o, ...e }, c) => n().query ? null : /* @__PURE__ */ i(
+    "kbd",
+    {
+      ref: c,
+      className: a(s.oxAiSearchShortcut, r),
+      "data-testid": o,
+      ...e,
+      children: t ?? "⌘K"
+    }
+  )
+);
+f.displayName = "OxAiSearchShortcut";
+export {
+  f as AiSearchShortcut
+};

package/dist/Forms/Inputs/AiSearch/AiSearchShortcut.module.css.js

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

package/dist/Forms/Inputs/AiSearch/AiSearchSuggestion.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { CommandItem as n } from "cmdk";
+import { forwardRef as c } from "react";
+import { cn as p } from "../../../lib/utils.js";
+import u from "./AiSearchSuggestion.module.css.js";
+import { useAiSearch as d } from "./useAiSearch.js";
+const f = c(({ className: o, value: e, children: r, dataTestid: i, ...s }, a) => {
+  const { select: m } = d();
+  return /* @__PURE__ */ t(n, { asChild: !0, value: e, onSelect: m, ...s, children: /* @__PURE__ */ t(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      "data-slot": "ai-search-suggestion",
+      "data-testid": i,
+      className: p(u.oxAiSearchSuggestion, o),
+      children: r
+    }
+  ) });
+});
+f.displayName = "OxAiSearchSuggestion";
+export {
+  f as AiSearchSuggestion
+};

package/dist/Forms/Inputs/AiSearch/AiSearchSuggestion.module.css.js

@@ -0,0 +1,7 @@
+const e = "_oxAiSearchSuggestion_hbgkb_2", o = {
+  oxAiSearchSuggestion: e
+};
+export {
+  o as default,
+  e as oxAiSearchSuggestion
+};

package/dist/Forms/Inputs/AiSearch/useAiSearch.js

@@ -0,0 +1,13 @@
+import { createContext as e, useContext as r } from "react";
+const n = e(null), i = () => {
+  const t = r(n);
+  if (!t)
+    throw new Error(
+      "[orxata] This part must be used inside <OxAiSearch>. It reads the query and the thinking state from it."
+    );
+  return t;
+};
+export {
+  n as AiSearchContext,
+  i as useAiSearch
+};