@sesamehr/react-design-system 3.10.0 → 3.10.1

package/dist/Feedback/Toast/ToastIcon.js

@@ -0,0 +1,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconAlertCircle as s } from "@sesame/orxata-icons/IconAlertCircle";
+import { IconAlertTriangle as a } from "@sesame/orxata-icons/IconAlertTriangle";
+import { IconCircleCheck as f } from "@sesame/orxata-icons/IconCircleCheck";
+import { IconInfoCircle as r } from "@sesame/orxata-icons/IconInfoCircle";
+import { Icon as l } from "@sesame/orxata-icons/react";
+import { forwardRef as p } from "react";
+import { moduleClasses as d } from "../../lib/cssModules.js";
+import { cn as I } from "../../lib/utils.js";
+import u from "./ToastIcon.module.css.js";
+import { useToastContext as C } from "./toast-context.js";
+const x = {
+  info: r,
+  success: f,
+  warning: a,
+  error: s,
+  neutral: r
+}, T = p(
+  ({ className: t, children: m, dataTestid: e, ...i }, n) => {
+    const { type: c } = C();
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: n,
+        className: I(d(u, "ox-toast-icon"), t),
+        "data-slot": "icon",
+        "data-testid": e,
+        ...i,
+        children: m ?? /* @__PURE__ */ o(l, { icon: x[c] })
+      }
+    );
+  }
+);
+T.displayName = "OxToastIcon";
+export {
+  T as ToastIcon
+};

package/dist/Feedback/Toast/ToastIcon.module.css.js

@@ -0,0 +1,6 @@
+const o = {
+  "ox-toast-icon": "_ox-toast-icon_znzrs_2"
+};
+export {
+  o as default
+};

package/dist/Feedback/Toast/ToastTitle.js

@@ -0,0 +1,20 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-toast";
+import { forwardRef as i } from "react";
+import { moduleClasses as e } from "../../lib/cssModules.js";
+import { cn as l } from "../../lib/utils.js";
+import f from "./ToastTitle.module.css.js";
+const p = i(({ className: o, children: t, ...m }, r) => /* @__PURE__ */ s(
+  a.Title,
+  {
+    ref: r,
+    className: l(e(f, "ox-toast-title"), o),
+    "data-slot": "label",
+    ...m,
+    children: t
+  }
+));
+p.displayName = "OxToastTitle";
+export {
+  p as ToastTitle
+};

package/dist/Feedback/Toast/ToastTitle.module.css.js

@@ -0,0 +1,6 @@
+const t = {
+  "ox-toast-title": "_ox-toast-title_huiks_2"
+};
+export {
+  t as default
+};

package/dist/Feedback/Toast/Toaster.js

@@ -0,0 +1,89 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-toast";
+import { forwardRef as x, useState as C, useEffect as n } from "react";
+import { createPortal as w } from "react-dom";
+import { moduleClasses as A } from "../../lib/cssModules.js";
+import { cn as D } from "../../lib/utils.js";
+import { Toast as O } from "./Toast.js";
+import { ToastAction as b } from "./ToastAction.js";
+import { ToastActions as g } from "./ToastActions.js";
+import { ToastClose as I } from "./ToastClose.js";
+import { ToastDescription as E } from "./ToastDescription.js";
+import { ToastIcon as N } from "./ToastIcon.js";
+import { ToastTitle as P } from "./ToastTitle.js";
+import V from "./Toaster.module.css.js";
+import { toastViewportVariants as _, toastSwipeDirection as j } from "./index.js";
+import { useToast as k, setToastLimit as q, resolveToastActions as p, dismissToast as L } from "./useToast.js";
+const R = "ox-toast", z = "ox-toast-actions", B = x(
+  ({
+    className: T,
+    position: s = "bottom-right",
+    duration: c = 5e3,
+    max: e = 3,
+    to: r = "body",
+    children: d,
+    ...f
+  }, u) => {
+    const { toasts: h } = k(), [a, S] = C(null);
+    n(() => {
+      q(e);
+    }, [e]), n(() => {
+      S(typeof r == "string" ? document.querySelector(r) : r);
+    }, [r]);
+    const v = /* @__PURE__ */ m(
+      l.Viewport,
+      {
+        ref: u,
+        className: D(
+          A(V, _({ position: s })),
+          T
+        ),
+        ...f,
+        children: [
+          h.map((o) => /* @__PURE__ */ m(
+            O,
+            {
+              type: o.type,
+              duration: o.duration,
+              open: o.open,
+              dataTestid: R,
+              onOpenChange: (t) => {
+                t || L(o.id);
+              },
+              children: [
+                /* @__PURE__ */ i(N, {}),
+                /* @__PURE__ */ i(P, { children: o.title }),
+                o.description ? /* @__PURE__ */ i(E, { children: o.description }) : null,
+                p(o).length > 0 ? /* @__PURE__ */ i(g, { dataTestid: z, children: p(o).map((t) => /* @__PURE__ */ i(
+                  b,
+                  {
+                    variant: t.variant,
+                    altText: t.altText ?? t.label,
+                    onClick: () => t.onClick(),
+                    children: t.label
+                  },
+                  t.variant
+                )) }) : null,
+                /* @__PURE__ */ i(I, {})
+              ]
+            },
+            o.id
+          )),
+          d
+        ]
+      }
+    );
+    return /* @__PURE__ */ i(
+      l.Provider,
+      {
+        duration: c,
+        swipeDirection: j(s),
+        children: a ? w(v, a) : null
+      }
+    );
+  }
+);
+B.displayName = "OxToaster";
+export {
+  B as Toaster
+};

package/dist/Feedback/Toast/Toaster.module.css.js

@@ -0,0 +1,12 @@
+const t = {
+  "ox-toast-viewport": "_ox-toast-viewport_1cmfc_2",
+  "ox-toast-viewport--top-left": "_ox-toast-viewport--top-left_1cmfc_2",
+  "ox-toast-viewport--top-center": "_ox-toast-viewport--top-center_1cmfc_2",
+  "ox-toast-viewport--top-right": "_ox-toast-viewport--top-right_1cmfc_2",
+  "ox-toast-viewport--bottom-left": "_ox-toast-viewport--bottom-left_1cmfc_2",
+  "ox-toast-viewport--bottom-center": "_ox-toast-viewport--bottom-center_1cmfc_2",
+  "ox-toast-viewport--bottom-right": "_ox-toast-viewport--bottom-right_1cmfc_2"
+};
+export {
+  t as default
+};

package/dist/Feedback/Toast/index.js

@@ -0,0 +1,45 @@
+import { cva as o } from "class-variance-authority";
+const e = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+], i = o("ox-toast-viewport", {
+  variants: {
+    position: {
+      "top-left": "ox-toast-viewport--top-left",
+      "top-center": "ox-toast-viewport--top-center",
+      "top-right": "ox-toast-viewport--top-right",
+      "bottom-left": "ox-toast-viewport--bottom-left",
+      "bottom-center": "ox-toast-viewport--bottom-center",
+      "bottom-right": "ox-toast-viewport--bottom-right"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-right"
+  }
+}), a = o("ox-toast", {
+  variants: {
+    type: {
+      info: "ox-toast--info",
+      success: "ox-toast--success",
+      warning: "ox-toast--warning",
+      error: "ox-toast--error",
+      neutral: "ox-toast--neutral"
+    }
+  },
+  defaultVariants: {
+    type: "info"
+  }
+});
+function s(t) {
+  return t.endsWith("-left") ? "left" : t.endsWith("-right") ? "right" : t.startsWith("top-") ? "up" : "down";
+}
+export {
+  e as TOAST_POSITIONS,
+  s as toastSwipeDirection,
+  a as toastVariants,
+  i as toastViewportVariants
+};

package/dist/Feedback/Toast/toast-context.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t({ type: "info" }), s = () => o(e);
+export {
+  e as ToastContext,
+  s as useToastContext
+};

package/dist/Feedback/Toast/useToast.js

@@ -0,0 +1,61 @@
+import { useSyncExternalStore as p } from "react";
+function h(t) {
+  var a;
+  const { primary: e } = t.actions ?? {}, n = ((a = t.actions) == null ? void 0 : a.secondary) ?? t.action;
+  return [
+    ...e ? [{ ...e, variant: "primary" }] : [],
+    ...n ? [{ ...n, variant: "secondary" }] : []
+  ];
+}
+let s = [];
+const y = 200, o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set();
+let u = 3, f = 0;
+const i = () => {
+  for (const t of r) t();
+}, d = (t) => (r.add(t), () => {
+  r.delete(t);
+}), l = () => s;
+function A(t) {
+  u = Math.max(1, t), m();
+}
+function m() {
+  const t = s.filter((e) => e.open);
+  for (const e of t.slice(0, Math.max(0, t.length - u)))
+    c(e.id);
+}
+function T(t) {
+  f += 1;
+  const e = `ox-toast-${f}`;
+  return s = [
+    ...s,
+    { ...t, id: e, type: t.type ?? "info", open: !0 }
+  ], i(), m(), e;
+}
+function c(t) {
+  const e = s.find((n) => n.id === t);
+  !e || !e.open || (s = s.map(
+    (n) => n.id === t ? { ...n, open: !1 } : n
+  ), o.set(
+    t,
+    setTimeout(() => x(t), y)
+  ), i());
+}
+function v() {
+  for (const t of [...s]) c(t.id);
+}
+function x(t) {
+  const e = o.get(t);
+  e && clearTimeout(e), o.delete(t), s = s.filter((n) => n.id !== t), i();
+}
+function E() {
+  return { toasts: p(d, l, l), toast: T, dismiss: c, dismissAll: v };
+}
+export {
+  v as dismissAllToasts,
+  c as dismissToast,
+  x as removeToast,
+  h as resolveToastActions,
+  A as setToastLimit,
+  T as toast,
+  E as useToast
+};

package/dist/Feedback/Tooltip/Tooltip.js

@@ -0,0 +1,35 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-tooltip";
+const c = ({
+  trigger: r,
+  children: e,
+  defaultOpen: l = !1,
+  open: t,
+  onOpenChange: s,
+  delayDuration: p = 300,
+  skipDelayDuration: a = 300,
+  disableHoverableContent: d = !1
+}) => /* @__PURE__ */ o(
+  i.Provider,
+  {
+    delayDuration: p,
+    skipDelayDuration: a,
+    disableHoverableContent: d,
+    children: /* @__PURE__ */ m(
+      i.Root,
+      {
+        defaultOpen: l,
+        open: t,
+        onOpenChange: s,
+        children: [
+          /* @__PURE__ */ o(i.Trigger, { asChild: !0, children: r }),
+          e
+        ]
+      }
+    )
+  }
+);
+c.displayName = "OxTooltip";
+export {
+  c as Tooltip
+};

package/dist/Feedback/Tooltip/TooltipContent.js

@@ -0,0 +1,45 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-tooltip";
+import { forwardRef as f } from "react";
+import { cn as x } from "../../lib/utils.js";
+import i from "./TooltipContent.module.css.js";
+const h = 16, C = f(
+  ({
+    className: r,
+    children: e,
+    side: n = "top",
+    sideOffset: l = 6,
+    align: s = "center",
+    showArrow: a = !0,
+    dataTestid: m,
+    ...p
+  }, c) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ d(
+    o.Content,
+    {
+      ref: c,
+      "data-slot": "tooltip-content",
+      "data-testid": m,
+      className: x(i.oxTooltipContent, r),
+      side: n,
+      sideOffset: l,
+      collisionPadding: h,
+      align: s,
+      ...p,
+      children: [
+        e,
+        a && /* @__PURE__ */ t(
+          o.Arrow,
+          {
+            className: i.oxTooltipArrow,
+            width: 10,
+            height: 5
+          }
+        )
+      ]
+    }
+  ) })
+);
+C.displayName = "OxTooltipContent";
+export {
+  C as TooltipContent
+};

package/dist/Feedback/Tooltip/TooltipContent.module.css.js

@@ -0,0 +1,9 @@
+const o = "_oxTooltipContent_qgh8c_2", t = "_oxTooltipArrow_qgh8c_2", n = {
+  oxTooltipContent: o,
+  oxTooltipArrow: t
+};
+export {
+  n as default,
+  t as oxTooltipArrow,
+  o as oxTooltipContent
+};

package/dist/Forms/Field/Counter/Counter.js

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { moduleClasses as l } from "../../../lib/cssModules.js";
+import { cn as d } from "../../../lib/utils.js";
+import t from "./Counter.module.css.js";
+import { counterVariants as f } from "./index.js";
+const u = p(
+  ({ className: s, value: r, max: o, dataTestid: e, ...a }, m) => {
+    const n = r > o ? "over" : "within";
+    return /* @__PURE__ */ i(
+      "span",
+      {
+        ref: m,
+        className: d(
+          l(t, f({ state: n })),
+          s
+        ),
+        "data-slot": "counter",
+        "data-testid": e,
+        ...a,
+        children: [
+          /* @__PURE__ */ c("span", { className: t["ox-counter-value"], children: r }),
+          "/",
+          o
+        ]
+      }
+    );
+  }
+);
+u.displayName = "OxCounter";
+export {
+  u as Counter
+};

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

@@ -0,0 +1,8 @@
+const o = {
+  "ox-counter": "_ox-counter_uflku_2",
+  "ox-counter--over": "_ox-counter--over_uflku_2",
+  "ox-counter-value": "_ox-counter-value_uflku_2"
+};
+export {
+  o as default
+};

package/dist/Forms/Field/Counter/index.js

@@ -0,0 +1,15 @@
+import { cva as t } from "class-variance-authority";
+const r = t("ox-counter", {
+  variants: {
+    state: {
+      within: "ox-counter--within",
+      over: "ox-counter--over"
+    }
+  },
+  defaultVariants: {
+    state: "within"
+  }
+});
+export {
+  r as counterVariants
+};

package/dist/Forms/Field/FieldGroup/FieldGroup.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { cn as p } from "../../../lib/utils.js";
+import { useProvideFieldGroup as a, FieldGroupContext as f } from "../useFieldGroup.js";
+import r from "./FieldGroup.module.css.js";
+const m = {
+  default: r.fieldGroupDefault,
+  error: r.oxFieldGroupError,
+  success: r.oxFieldGroupSuccess,
+  warning: r.oxFieldGroupWarning
+}, n = u(
+  ({ className: i, variant: o = "default", children: l, ...d }, s) => {
+    const t = a(o);
+    return /* @__PURE__ */ e(f.Provider, { value: t, children: /* @__PURE__ */ e(
+      "div",
+      {
+        ref: s,
+        "data-slot": "field-group",
+        className: p(r.oxFieldGroup, m[o], i),
+        ...d,
+        children: l
+      }
+    ) });
+  }
+);
+n.displayName = "OxFieldGroup";
+export {
+  n as FieldGroup
+};

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

@@ -0,0 +1,13 @@
+const o = "_oxFieldGroup_1sicd_2", r = "_oxFieldGroupError_1sicd_2", i = "_oxFieldGroupWarning_1sicd_2", e = "_oxFieldGroupSuccess_1sicd_2", s = {
+  oxFieldGroup: o,
+  oxFieldGroupError: r,
+  oxFieldGroupWarning: i,
+  oxFieldGroupSuccess: e
+};
+export {
+  s as default,
+  o as oxFieldGroup,
+  r as oxFieldGroupError,
+  e as oxFieldGroupSuccess,
+  i as oxFieldGroupWarning
+};

package/dist/Forms/Field/FieldLabel/FieldLabel.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { cn as i } from "../../../lib/utils.js";
+import { useFieldLabel as s } from "../useFieldGroup.js";
+import d from "./FieldLabel.module.css.js";
+const f = t(
+  ({ className: e, children: l, ...o }, r) => {
+    const a = s();
+    return /* @__PURE__ */ m(
+      "label",
+      {
+        ref: r,
+        ...a,
+        "data-slot": "label",
+        className: i(d.oxFieldLabel, e),
+        ...o,
+        children: l
+      }
+    );
+  }
+);
+f.displayName = "OxFieldLabel";
+export {
+  f as FieldLabel
+};

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

@@ -0,0 +1,7 @@
+const l = "_oxFieldLabel_nllu8_2", e = {
+  oxFieldLabel: l
+};
+export {
+  e as default,
+  l as oxFieldLabel
+};

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.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
+};