@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Feedback/Toast/ToastClose.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-toast";
+import { IconClose as c } from "@sesame/orxata-icons/IconClose";
+import { Icon as n } from "@sesame/orxata-icons/react";
+import { forwardRef as f } from "react";
+import { moduleClasses as t } from "../../lib/cssModules.js";
+import { cn as p } from "../../lib/utils.js";
+import r from "./ToastClose.module.css.js";
+import { useTranslate as d } from "../../Locale/useTranslate.js";
+import { IconButton as x } from "../../Button/IconButton/IconButton.js";
+const C = f(({ className: s, dataTestid: a, ...e }, m) => {
+  const i = d();
+  return /* @__PURE__ */ o(l.Close, { ref: m, asChild: !0, ...e, children: /* @__PURE__ */ o(
+    x,
+    {
+      className: p(t(r, "ox-toast-close"), s),
+      variant: "ghost",
+      size: "2xs",
+      "aria-label": i("orxata.dialog.close"),
+      "data-testid": a,
+      children: /* @__PURE__ */ o(
+        n,
+        {
+          icon: c,
+          className: t(r, "ox-toast-close-icon")
+        }
+      )
+    }
+  ) });
+});
+C.displayName = "OxToastClose";
+export {
+  C as ToastClose
+};

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

@@ -0,0 +1,7 @@
+const o = {
+  "ox-toast-close": "_ox-toast-close_1fhrv_2",
+  "ox-toast-close-icon": "_ox-toast-close-icon_1fhrv_2"
+};
+export {
+  o as default
+};

package/dist/Feedback/Toast/ToastDescription.js

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

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

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

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.d.ts

@@ -1,12 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
 export { Toast, type ToastProps } from './Toast.tsx';
 export { ToastAction, type ToastActionProps } from './ToastAction.tsx';
+export { ToastActions, type ToastActionsProps } from './ToastActions.tsx';
 export { ToastClose, type ToastCloseProps } from './ToastClose.tsx';
 export { ToastDescription, type ToastDescriptionProps, } from './ToastDescription.tsx';
 export { ToastIcon, type ToastIconProps } from './ToastIcon.tsx';
 export { ToastTitle, type ToastTitleProps } from './ToastTitle.tsx';
 export { Toaster, type ToasterProps } from './Toaster.tsx';
-export { type ToastActionDescriptor, type ToastEntry, type ToastOptions, type ToastType, type UseToastReturn, dismissAllToasts, dismissToast, toast, useToast, } from './useToast.ts';
+export { type ToastActionDescriptor, type ToastActionVariant, type ToastActionSet, type ToastEntry, type ToastOptions, type ToastType, type UseToastReturn, dismissAllToasts, dismissToast, resolveToastActions, toast, useToast, } from './useToast.ts';
 /** The six corners the stack can be anchored to. */
 export declare const TOAST_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
 export type ToastPosition = (typeof TOAST_POSITIONS)[number];

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.d.ts

@@ -9,14 +9,39 @@ export interface ToastActionDescriptor {
      */
     altText?: string;
 }
+/**
+ * Up to two buttons. A record and not an ordered array because the two are not
+ * interchangeable — each has its own fill — and either may be absent on its
+ * own, which an array could only say with a hole in it.
+ */
+export interface ToastActionSet {
+    /** `Button default`, first in the row. */
+    primary?: ToastActionDescriptor;
+    /** `Button outline`. */
+    secondary?: ToastActionDescriptor;
+}
+export type ToastActionVariant = 'primary' | 'secondary';
 export interface ToastOptions {
     title: string;
     description?: string;
     type?: ToastType;
+    /**
+     * Shorthand for `actions.secondary`. The board's own single-action example
+     * (`1443:42780`) is the outline button alone, which is what this has always
+     * rendered.
+     */
     action?: ToastActionDescriptor;
+    actions?: ToastActionSet;
     /** Overrides the `duration` `OxToaster` was mounted with. */
     duration?: number;
 }
+/**
+ * The row's contents, primary first — the board caps it at two and fixes that
+ * order (node `1443:21`, §7).
+ */
+export declare function resolveToastActions(options: Pick<ToastOptions, 'action' | 'actions'>): Array<ToastActionDescriptor & {
+    variant: ToastActionVariant;
+}>;
 export interface ToastEntry extends ToastOptions {
     id: string;
     type: ToastType;

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