@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Feedback/EmptyState/EmptyState.js

@@ -0,0 +1,68 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { IconInbox as h } from "@sesame/orxata-icons/IconInbox";
+import { Icon as S } from "@sesame/orxata-icons/react";
+import { forwardRef as f } from "react";
+import { moduleClasses as E } from "../../lib/cssModules.js";
+import { cn as v } from "../../lib/utils.js";
+import t from "./EmptyState.module.css.js";
+import { emptyStateVariants as N } from "./index.js";
+const I = f(
+  ({
+    className: c,
+    variant: n = "page",
+    icon: s,
+    title: e,
+    description: o,
+    actions: r,
+    options: i,
+    link: d,
+    dataTestid: m,
+    ...y
+  }, x) => {
+    const l = s === void 0 ? /* @__PURE__ */ a(S, { icon: h, "data-testid": `${m}-glyph` }) : s;
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: x,
+        "data-slot": "empty-state",
+        "data-testid": m,
+        className: v(
+          t.oxEmptyState,
+          E(t, N({ variant: n })),
+          c
+        ),
+        ...y,
+        children: [
+          l && /* @__PURE__ */ a(
+            "div",
+            {
+              className: t.oxEmptyStateIcon,
+              "data-slot": "icon",
+              "aria-hidden": "true",
+              "data-testid": `${m}-icon`,
+              children: l
+            }
+          ),
+          (e || o) && /* @__PURE__ */ p("div", { className: t.oxEmptyStateText, children: [
+            e && /* @__PURE__ */ a("div", { className: t.oxEmptyStateTitle, "data-slot": "label", children: e }),
+            o && /* @__PURE__ */ a(
+              "div",
+              {
+                className: t.oxEmptyStateDescription,
+                "data-slot": "description",
+                children: o
+              }
+            )
+          ] }),
+          r && /* @__PURE__ */ a("div", { className: t.oxEmptyStateActions, children: r }),
+          i && /* @__PURE__ */ a("div", { className: t.oxEmptyStateOptions, children: i }),
+          d && /* @__PURE__ */ a("div", { className: t.oxEmptyStateLink, children: d })
+        ]
+      }
+    );
+  }
+);
+I.displayName = "OxEmptyState";
+export {
+  I as EmptyState
+};

package/dist/Feedback/EmptyState/EmptyState.module.css.js

@@ -0,0 +1,23 @@
+const t = "_oxEmptyState_psyj0_2", o = "_oxEmptyStateIcon_psyj0_2", e = "_oxEmptyStateText_psyj0_2", p = "_oxEmptyStateTitle_psyj0_2", y = "_oxEmptyStateDescription_psyj0_2", s = "_oxEmptyStateActions_psyj0_2", a = "_oxEmptyStateOptions_psyj0_2", x = "_oxEmptyStateLink_psyj0_2", _ = {
+  oxEmptyState: t,
+  "ox-empty-state--page": "_ox-empty-state--page_psyj0_2",
+  "ox-empty-state--inline": "_ox-empty-state--inline_psyj0_2",
+  oxEmptyStateIcon: o,
+  oxEmptyStateText: e,
+  oxEmptyStateTitle: p,
+  oxEmptyStateDescription: y,
+  oxEmptyStateActions: s,
+  oxEmptyStateOptions: a,
+  oxEmptyStateLink: x
+};
+export {
+  _ as default,
+  t as oxEmptyState,
+  s as oxEmptyStateActions,
+  y as oxEmptyStateDescription,
+  o as oxEmptyStateIcon,
+  x as oxEmptyStateLink,
+  a as oxEmptyStateOptions,
+  e as oxEmptyStateText,
+  p as oxEmptyStateTitle
+};

package/dist/Feedback/EmptyState/EmptyStateOption/EmptyStateOption.js

@@ -0,0 +1,56 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { IconFolderPlus as d } from "@sesame/orxata-icons/IconFolderPlus";
+import { Icon as c } from "@sesame/orxata-icons/react";
+import { forwardRef as y } from "react";
+import { cn as x } from "../../../lib/utils.js";
+import t from "./EmptyStateOption.module.css.js";
+const f = y(
+  ({
+    className: n,
+    selected: e = !1,
+    icon: p,
+    title: m,
+    description: s,
+    dataTestid: o,
+    ...r
+  }, l) => /* @__PURE__ */ i(
+    "button",
+    {
+      ref: l,
+      type: "button",
+      "data-slot": "empty-state-option",
+      "data-selected": e,
+      "aria-pressed": e,
+      "data-testid": o,
+      className: x(t.oxEmptyStateOption, n),
+      ...r,
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: t.oxEmptyStateOptionIcon,
+            "data-slot": "icon",
+            "aria-hidden": "true",
+            "data-testid": `${o}-icon`,
+            children: p === void 0 ? /* @__PURE__ */ a(c, { icon: d, "data-testid": `${o}-glyph` }) : p
+          }
+        ),
+        /* @__PURE__ */ i("span", { className: t.oxEmptyStateOptionText, children: [
+          /* @__PURE__ */ a("span", { className: t.oxEmptyStateOptionTitle, "data-slot": "label", children: m }),
+          s && /* @__PURE__ */ a(
+            "span",
+            {
+              className: t.oxEmptyStateOptionDescription,
+              "data-slot": "description",
+              children: s
+            }
+          )
+        ] })
+      ]
+    }
+  )
+);
+f.displayName = "OxEmptyStateOption";
+export {
+  f as EmptyStateOption
+};

package/dist/Feedback/EmptyState/EmptyStateOption/EmptyStateOption.module.css.js

@@ -0,0 +1,15 @@
+const t = "_oxEmptyStateOption_1f817_2", o = "_oxEmptyStateOptionIcon_1f817_2", p = "_oxEmptyStateOptionText_1f817_2", e = "_oxEmptyStateOptionTitle_1f817_2", n = "_oxEmptyStateOptionDescription_1f817_2", i = {
+  oxEmptyStateOption: t,
+  oxEmptyStateOptionIcon: o,
+  oxEmptyStateOptionText: p,
+  oxEmptyStateOptionTitle: e,
+  oxEmptyStateOptionDescription: n
+};
+export {
+  i as default,
+  t as oxEmptyStateOption,
+  n as oxEmptyStateOptionDescription,
+  o as oxEmptyStateOptionIcon,
+  p as oxEmptyStateOptionText,
+  e as oxEmptyStateOptionTitle
+};

package/dist/Feedback/EmptyState/index.js

@@ -0,0 +1,15 @@
+import { cva as a } from "class-variance-authority";
+const e = a("", {
+  variants: {
+    variant: {
+      page: "ox-empty-state--page",
+      inline: "ox-empty-state--inline"
+    }
+  },
+  defaultVariants: {
+    variant: "page"
+  }
+});
+export {
+  e as emptyStateVariants
+};

package/dist/Feedback/Loader/Loader.js

@@ -0,0 +1,87 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { forwardRef as _ } from "react";
+import { cn as r } from "../../lib/utils.js";
+import a from "./Loader.module.css.js";
+import { useTranslate as p } from "../../Locale/useTranslate.js";
+const s = "M25.56 47.19 L13.06 43.25 C10.85 42.56 9.18 40.74 8.68 38.47 L5.3 23.24 C4.8 20.98 5.54 18.62 7.25 17.05 L18.76 6.51 C20.46 4.95 22.88 4.41 25.09 5.11 L39.97 9.8 C42.18 10.5 43.85 12.32 44.35 14.58 L46.85 25.88", l = "M35.03 46.78 L46.7 33.88", x = _(
+  ({ className: d, children: m, dataTestid: e, ...i }, n) => {
+    const c = p();
+    return /* @__PURE__ */ t(
+      "span",
+      {
+        ref: n,
+        role: "status",
+        "data-slot": "loader",
+        "data-testid": e,
+        className: r(a["ox-loader"], d),
+        ...i,
+        children: [
+          /* @__PURE__ */ t(
+            "svg",
+            {
+              className: a["ox-loader__mark"],
+              "data-testid": `${e}-mark`,
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 52 52",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ o(
+                  "path",
+                  {
+                    className: r(
+                      a["ox-loader__path"],
+                      a["ox-loader__ring-track"]
+                    ),
+                    d: s,
+                    strokeWidth: "7.68"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "path",
+                  {
+                    className: r(
+                      a["ox-loader__path"],
+                      a["ox-loader__arm-track"]
+                    ),
+                    d: l,
+                    strokeWidth: "7.2"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "path",
+                  {
+                    className: r(
+                      a["ox-loader__path"],
+                      a["ox-loader__ring-comet"]
+                    ),
+                    d: s,
+                    strokeWidth: "7.68"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "path",
+                  {
+                    className: r(
+                      a["ox-loader__path"],
+                      a["ox-loader__arm-comet"]
+                    ),
+                    d: l,
+                    strokeWidth: "7.2"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: a["ox-loader__label"], "data-slot": "label", children: m ?? c("orxata.loader.label") })
+        ]
+      }
+    );
+  }
+);
+x.displayName = "OxLoader";
+export {
+  x as Loader
+};

package/dist/Feedback/Loader/Loader.module.css.js

@@ -0,0 +1,13 @@
+const _ = {
+  "ox-loader": "_ox-loader_aemw9_2",
+  "ox-loader__mark": "_ox-loader__mark_aemw9_2",
+  "ox-loader__label": "_ox-loader__label_aemw9_2",
+  "ox-loader__path": "_ox-loader__path_aemw9_2",
+  "ox-loader__ring-track": "_ox-loader__ring-track_aemw9_2",
+  "ox-loader__arm-track": "_ox-loader__arm-track_aemw9_2",
+  "ox-loader__ring-comet": "_ox-loader__ring-comet_aemw9_2",
+  "ox-loader__arm-comet": "_ox-loader__arm-comet_aemw9_2"
+};
+export {
+  _ as default
+};

package/dist/Feedback/Popover/Popover.js

@@ -0,0 +1,26 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-popover";
+const m = ({
+  trigger: r,
+  children: e,
+  defaultOpen: i = !1,
+  open: s,
+  onOpenChange: p,
+  modal: t = !1
+}) => /* @__PURE__ */ a(
+  o.Root,
+  {
+    defaultOpen: i,
+    open: s,
+    onOpenChange: p,
+    modal: t,
+    children: [
+      /* @__PURE__ */ l(o.Trigger, { asChild: !0, children: r }),
+      e
+    ]
+  }
+);
+m.displayName = "OxPopover";
+export {
+  m as Popover
+};

package/dist/Feedback/Popover/PopoverContent.js

@@ -0,0 +1,46 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-popover";
+import { forwardRef as f } from "react";
+import { cn as P } from "../../lib/utils.js";
+import t from "./PopoverContent.module.css.js";
+import { Surface as h } from "../../internal/Surface/Surface.js";
+const v = 16, x = f(
+  ({
+    className: e,
+    children: i,
+    side: n = "bottom",
+    sideOffset: s = 6,
+    align: a = "center",
+    showArrow: m = !1,
+    dataTestid: p,
+    ...l
+  }, c) => /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(
+    r.Content,
+    {
+      ref: c,
+      asChild: !0,
+      "data-slot": "popover-content",
+      "data-testid": p,
+      side: n,
+      sideOffset: s,
+      collisionPadding: v,
+      align: a,
+      ...l,
+      children: /* @__PURE__ */ d(h, { className: P(t.oxPopoverContent, e), children: [
+        i,
+        m && /* @__PURE__ */ o(
+          r.Arrow,
+          {
+            className: t.oxPopoverArrow,
+            width: 12,
+            height: 6
+          }
+        )
+      ] })
+    }
+  ) })
+);
+x.displayName = "OxPopoverContent";
+export {
+  x as PopoverContent
+};

package/dist/Feedback/Popover/PopoverContent.module.css.js

@@ -0,0 +1,9 @@
+const o = "_oxPopoverContent_m7c2d_2", r = "_oxPopoverArrow_m7c2d_2", e = {
+  oxPopoverContent: o,
+  oxPopoverArrow: r
+};
+export {
+  e as default,
+  r as oxPopoverArrow,
+  o as oxPopoverContent
+};

package/dist/Feedback/Progress/Progress.js

@@ -0,0 +1,34 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-progress";
+import { forwardRef as n } from "react";
+import { moduleClasses as l } from "../../lib/cssModules.js";
+import { cn as c } from "../../lib/utils.js";
+import m from "./Progress.module.css.js";
+import { progressVariants as f } from "./index.js";
+const i = (r) => Math.min(100, Math.max(0, r)), g = n(({ className: r, value: o = 0, variant: e = "brand", dataTestid: s, ...p }, d) => /* @__PURE__ */ t(
+  a.Root,
+  {
+    ref: d,
+    value: i(o),
+    "data-slot": "progress",
+    "data-testid": s,
+    className: c(
+      l(m, f({ variant: e })),
+      r
+    ),
+    ...p,
+    children: /* @__PURE__ */ t(
+      a.Indicator,
+      {
+        "data-slot": "progress-indicator",
+        "data-testid": `${s}-indicator`,
+        className: m["ox-progress-indicator"],
+        style: { transform: `translateX(-${100 - i(o)}%)` }
+      }
+    )
+  }
+));
+g.displayName = "OxProgress";
+export {
+  g as Progress
+};

package/dist/Feedback/Progress/Progress.module.css.js

@@ -0,0 +1,11 @@
+const r = {
+  "ox-progress": "_ox-progress_847ip_2",
+  "ox-progress-indicator": "_ox-progress-indicator_847ip_2",
+  "ox-progress--brand": "_ox-progress--brand_847ip_2",
+  "ox-progress--success": "_ox-progress--success_847ip_2",
+  "ox-progress--warning": "_ox-progress--warning_847ip_2",
+  "ox-progress--error": "_ox-progress--error_847ip_2"
+};
+export {
+  r as default
+};

package/dist/Feedback/Progress/index.js

@@ -0,0 +1,17 @@
+import { cva as r } from "class-variance-authority";
+const a = r("ox-progress", {
+  variants: {
+    variant: {
+      brand: "ox-progress--brand",
+      success: "ox-progress--success",
+      warning: "ox-progress--warning",
+      error: "ox-progress--error"
+    }
+  },
+  defaultVariants: {
+    variant: "brand"
+  }
+});
+export {
+  a as progressVariants
+};

package/dist/Feedback/Skeleton/Skeleton.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cn as m } from "../../lib/utils.js";
+import i from "./Skeleton.module.css.js";
+const d = s(
+  ({ className: o, dataTestid: t, ...e }, r) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: r,
+      "aria-hidden": "true",
+      "data-slot": "skeleton",
+      "data-testid": t,
+      className: m(i["ox-skeleton"], o),
+      ...e
+    }
+  )
+);
+d.displayName = "OxSkeleton";
+export {
+  d as Skeleton
+};

package/dist/Feedback/Skeleton/Skeleton.module.css.js

@@ -0,0 +1,6 @@
+const e = {
+  "ox-skeleton": "_ox-skeleton_sjmpm_2"
+};
+export {
+  e as default
+};

package/dist/Feedback/StatusBadge/StatusBadge.js

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as p } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { moduleClasses as a } from "../../lib/cssModules.js";
+import { cn as f } from "../../lib/utils.js";
+import s from "./StatusBadge.module.css.js";
+import { statusBadgeVariants as n } from "./index.js";
+const u = l(
+  ({ className: o, status: r = "neutral", children: e, dataTestid: t, ...m }, d) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: d,
+      "data-slot": "status-badge",
+      "data-testid": t,
+      className: f(
+        a(s, n({ status: r })),
+        o
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ p(
+          "span",
+          {
+            "data-testid": `${t}-indicator`,
+            className: a(s, "ox-status-badge-dot")
+          }
+        ),
+        e
+      ]
+    }
+  )
+);
+u.displayName = "OxStatusBadge";
+export {
+  u as StatusBadge
+};

package/dist/Feedback/StatusBadge/StatusBadge.module.css.js

@@ -0,0 +1,12 @@
+const s = {
+  "ox-status-badge": "_ox-status-badge_1kneh_2",
+  "ox-status-badge-dot": "_ox-status-badge-dot_1kneh_2",
+  "ox-status-badge--neutral": "_ox-status-badge--neutral_1kneh_2",
+  "ox-status-badge--info": "_ox-status-badge--info_1kneh_2",
+  "ox-status-badge--success": "_ox-status-badge--success_1kneh_2",
+  "ox-status-badge--warning": "_ox-status-badge--warning_1kneh_2",
+  "ox-status-badge--error": "_ox-status-badge--error_1kneh_2"
+};
+export {
+  s as default
+};

package/dist/Feedback/StatusBadge/index.js

@@ -0,0 +1,18 @@
+import { cva as a } from "class-variance-authority";
+const t = a("ox-status-badge", {
+  variants: {
+    status: {
+      neutral: "ox-status-badge--neutral",
+      info: "ox-status-badge--info",
+      success: "ox-status-badge--success",
+      warning: "ox-status-badge--warning",
+      error: "ox-status-badge--error"
+    }
+  },
+  defaultVariants: {
+    status: "neutral"
+  }
+});
+export {
+  t as statusBadgeVariants
+};

package/dist/Feedback/Toast/Toast.js

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-toast";
+import { forwardRef as f } from "react";
+import { moduleClasses as d } from "../../lib/cssModules.js";
+import { cn as p } from "../../lib/utils.js";
+import n from "./Toast.module.css.js";
+import { toastVariants as l } from "./index.js";
+import { ToastContext as c } from "./toast-context.js";
+const u = f(({ className: t, type: o = "info", dataTestid: m, children: a, ...s }, i) => /* @__PURE__ */ r(c.Provider, { value: { type: o }, children: /* @__PURE__ */ r(
+  e.Root,
+  {
+    ref: i,
+    className: p(d(n, l({ type: o })), t),
+    type: o === "error" ? "foreground" : "background",
+    "data-testid": m,
+    ...s,
+    children: a
+  }
+) }));
+u.displayName = "OxToast";
+export {
+  u as Toast
+};

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

@@ -0,0 +1,13 @@
+const o = {
+  "ox-toast": "_ox-toast_1p1xi_2",
+  "ox-toast--info": "_ox-toast--info_1p1xi_2",
+  "ox-toast--success": "_ox-toast--success_1p1xi_2",
+  "ox-toast--warning": "_ox-toast--warning_1p1xi_2",
+  "ox-toast--error": "_ox-toast--error_1p1xi_2",
+  "ox-toast--neutral": "_ox-toast--neutral_1p1xi_2",
+  "ox-toast-in": "_ox-toast-in_1p1xi_1",
+  "ox-toast-out": "_ox-toast-out_1p1xi_1"
+};
+export {
+  o as default
+};

package/dist/Feedback/Toast/ToastAction.d.ts

@@ -1,5 +1,8 @@
+import { ToastActionVariant } from './useToast.ts';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 export interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> {
+    /** `primary` is the filled one and goes first; the board allows one of each. */
+    variant?: ToastActionVariant;
     dataTestid?: string;
 }
 /**
@@ -8,5 +11,9 @@ export interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof
  * `altText` is what a screen reader is told instead of the button, which is
  * gone before anyone can reach it — so it must describe a route that outlives
  * the toast.
+ *
+ * `default` is Orxata's name for the filled button the board calls Primary, and
+ * `2xs` is the 24px step — the board's Button `xs` measures 24 (node
+ * `1692:2585`), and the two scales are offset by one name.
  */
 export declare const ToastAction: import('react').ForwardRefExoticComponent<ToastActionProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Feedback/Toast/ToastAction.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-toast";
+import { forwardRef as n } from "react";
+import { moduleClasses as f } from "../../lib/cssModules.js";
+import { cn as p } from "../../lib/utils.js";
+import c from "./ToastAction.module.css.js";
+import { Button as d } from "../../Button/Button.js";
+const l = n(
+  ({ className: t, children: r, variant: i = "secondary", dataTestid: a, ...s }, m) => /* @__PURE__ */ o(e.Action, { ref: m, asChild: !0, ...s, children: /* @__PURE__ */ o(
+    d,
+    {
+      className: p(f(c, "ox-toast-action"), t),
+      variant: i === "primary" ? "default" : "outline",
+      size: "2xs",
+      "data-testid": a,
+      children: r
+    }
+  ) })
+);
+l.displayName = "OxToastAction";
+export {
+  l as ToastAction
+};

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

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

package/dist/Feedback/Toast/ToastActions.d.ts

@@ -0,0 +1,11 @@
+export interface ToastActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    dataTestid?: string;
+}
+/**
+ * ToastActions — mirrors `orxata-core` ToastActions.
+ *
+ * A part rather than two loose buttons: the toast is a grid, and two children
+ * sharing a `grid-column` land on separate rows. This is the board's own
+ * `Show actions`, and it exists even when only one button is in it.
+ */
+export declare const ToastActions: import('react').ForwardRefExoticComponent<ToastActionsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Feedback/Toast/ToastActions.js

@@ -0,0 +1,20 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as c } from "../../lib/utils.js";
+import e from "./ToastActions.module.css.js";
+const f = m(
+  ({ className: o, children: t, dataTestid: s, ...r }, a) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: a,
+      className: c(e.oxToastActions, o),
+      "data-testid": s,
+      ...r,
+      children: t
+    }
+  )
+);
+f.displayName = "OxToastActions";
+export {
+  f as ToastActions
+};

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

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