@sesamehr/react-design-system 3.10.0 → 3.10.1

package/dist/Navigation/DropdownMenu/DropdownMenuSeparator.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-dropdown-menu";
+import { forwardRef as p } from "react";
+import { ListboxSeparator as i } from "../../internal/Listbox/ListboxSeparator.js";
+const m = p(({ className: o, ...a }, t) => /* @__PURE__ */ r(
+  e.Separator,
+  {
+    ref: t,
+    asChild: !0,
+    "data-slot": "dropdown-menu-separator",
+    ...a,
+    children: /* @__PURE__ */ r(i, { className: o })
+  }
+));
+m.displayName = "OxDropdownMenuSeparator";
+export {
+  m as DropdownMenuSeparator
+};

package/dist/Navigation/DropdownMenu/DropdownMenuShortcut.js

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as a } from "../../lib/utils.js";
+import m from "./DropdownMenuShortcut.module.css.js";
+const s = p(({ className: o, children: r, ...t }, e) => /* @__PURE__ */ n(
+  "span",
+  {
+    ref: e,
+    className: a(m.oxDropdownMenuShortcut, o),
+    "data-slot": "description",
+    "aria-hidden": "true",
+    ...t,
+    children: r
+  }
+));
+s.displayName = "OxDropdownMenuShortcut";
+export {
+  s as DropdownMenuShortcut
+};

package/dist/Navigation/DropdownMenu/DropdownMenuShortcut.module.css.js

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

package/dist/Navigation/DropdownMenu/DropdownMenuSub.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-dropdown-menu";
+const m = ({
+  children: o,
+  defaultOpen: r,
+  open: n,
+  onOpenChange: p
+}) => /* @__PURE__ */ e(
+  i.Sub,
+  {
+    defaultOpen: r,
+    open: n,
+    onOpenChange: p,
+    children: o
+  }
+);
+m.displayName = "OxDropdownMenuSub";
+export {
+  m as DropdownMenuSub
+};

package/dist/Navigation/DropdownMenu/DropdownMenuSubContent.js

@@ -0,0 +1,33 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-dropdown-menu";
+import { forwardRef as s } from "react";
+import { cn as p } from "../../lib/utils.js";
+import u from "./DropdownMenuSubContent.module.css.js";
+import { Surface as l } from "../../internal/Surface/Surface.js";
+const c = 16, f = s(
+  ({
+    className: n,
+    children: r,
+    sideOffset: e = 4,
+    alignOffset: i = -4,
+    dataTestid: d,
+    ...m
+  }, a) => /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+    t.SubContent,
+    {
+      ref: a,
+      asChild: !0,
+      "data-slot": "dropdown-menu-sub-content",
+      "data-testid": d,
+      sideOffset: e,
+      alignOffset: i,
+      collisionPadding: c,
+      ...m,
+      children: /* @__PURE__ */ o(l, { className: p(u.oxDropdownMenuSubContent, n), children: r })
+    }
+  ) })
+);
+f.displayName = "OxDropdownMenuSubContent";
+export {
+  f as DropdownMenuSubContent
+};

package/dist/Navigation/DropdownMenu/DropdownMenuSubContent.module.css.js

@@ -0,0 +1,7 @@
+const n = "_oxDropdownMenuSubContent_pbrnb_2", o = {
+  oxDropdownMenuSubContent: n
+};
+export {
+  o as default,
+  n as oxDropdownMenuSubContent
+};

package/dist/Navigation/DropdownMenu/DropdownMenuSubTrigger.js

@@ -0,0 +1,35 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-dropdown-menu";
+import { IconChevronRight as p } from "@sesame/orxata-icons/IconChevronRight";
+import { Icon as u } from "@sesame/orxata-icons/react";
+import { forwardRef as f } from "react";
+import g from "./DropdownMenuSubTrigger.module.css.js";
+import { MenuItem as c } from "../../internal/Menu/MenuItem.js";
+const l = f(
+  ({ className: o, children: e, disabled: i = !1, icon: t, dataTestid: n, ...m }, d) => /* @__PURE__ */ r(
+    s.SubTrigger,
+    {
+      ref: d,
+      asChild: !0,
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-testid": n,
+      disabled: i,
+      ...m,
+      children: /* @__PURE__ */ a(c, { className: o, indicator: t, children: [
+        e,
+        /* @__PURE__ */ r(
+          u,
+          {
+            icon: p,
+            className: g.oxDropdownMenuSubChevron,
+            "aria-hidden": "true"
+          }
+        )
+      ] })
+    }
+  )
+);
+l.displayName = "OxDropdownMenuSubTrigger";
+export {
+  l as DropdownMenuSubTrigger
+};

package/dist/Navigation/DropdownMenu/DropdownMenuSubTrigger.module.css.js

@@ -0,0 +1,7 @@
+const o = "_oxDropdownMenuSubChevron_17jg2_2", n = {
+  oxDropdownMenuSubChevron: o
+};
+export {
+  n as default,
+  o as oxDropdownMenuSubChevron
+};

package/dist/Navigation/DropdownMenu/DropdownMenuTrigger.js

@@ -0,0 +1,19 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dropdown-menu";
+import { forwardRef as m } from "react";
+const n = m(({ disabled: r = !1, dataTestid: o, children: e, ...i }, t) => /* @__PURE__ */ d(
+  a.Trigger,
+  {
+    ref: t,
+    asChild: !0,
+    "data-slot": "dropdown-menu-trigger",
+    "data-testid": o,
+    disabled: r,
+    ...i,
+    children: e
+  }
+));
+n.displayName = "OxDropdownMenuTrigger";
+export {
+  n as DropdownMenuTrigger
+};

package/dist/Navigation/PageControl/PageControl.js

@@ -0,0 +1,55 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { cn as f } from "../../lib/utils.js";
+import e from "./PageControl.module.css.js";
+import { pageControlDots as u } from "./index.js";
+const g = x(
+  ({
+    className: n,
+    count: i,
+    index: m = 0,
+    interactive: c = !1,
+    onIndexChange: r,
+    dataTestid: s,
+    ...p
+  }, d) => {
+    const o = Math.min(
+      Math.max(0, Math.trunc(m)),
+      Math.max(0, i - 1)
+    );
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: d,
+        "data-slot": "page-control",
+        "data-testid": s,
+        className: f(e.oxPageControl, n),
+        ...p,
+        children: u(i, o).map((t) => {
+          const l = {
+            className: e.oxPageControlDot,
+            "data-size": t.size,
+            "data-active": t.index === o,
+            "data-testid": `${s}-dot-${t.index}`
+          };
+          return c ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "data-slot": "page-control-dot",
+              "aria-current": t.index === o ? "page" : void 0,
+              onClick: () => r == null ? void 0 : r(t.index),
+              ...l,
+              children: /* @__PURE__ */ a("span", { className: e.oxPageControlLabel, children: t.index + 1 })
+            },
+            t.index
+          ) : /* @__PURE__ */ a("span", { "data-slot": "page-control-dot", ...l }, t.index);
+        })
+      }
+    );
+  }
+);
+g.displayName = "OxPageControl";
+export {
+  g as PageControl
+};

package/dist/Navigation/PageControl/PageControl.module.css.js

@@ -0,0 +1,11 @@
+const o = "_oxPageControl_1086x_2", t = "_oxPageControlDot_1086x_2", e = "_oxPageControlLabel_1086x_2", a = {
+  oxPageControl: o,
+  oxPageControlDot: t,
+  oxPageControlLabel: e
+};
+export {
+  a as default,
+  o as oxPageControl,
+  t as oxPageControlDot,
+  e as oxPageControlLabel
+};

package/dist/Navigation/PageControl/index.js

@@ -0,0 +1,21 @@
+const f = 7, m = (_, s) => {
+  const r = Math.max(0, Math.trunc(_));
+  if (r === 0) return [];
+  if (r <= 7)
+    return Array.from({ length: r }, (W, t) => ({
+      index: t,
+      size: "full"
+    }));
+  const N = Math.min(Math.max(0, Math.trunc(s)), r - 1), a = Math.min(
+    Math.max(0, N - Math.floor(7 / 2)),
+    r - 7
+  ), O = a > 0, n = a + 7 < r, l = 6;
+  return Array.from({ length: 7 }, (W, t) => {
+    let e = "full";
+    return O && t === 0 ? e = "small" : O && t === 1 && (e = "medium"), n && t === l ? e = "small" : n && t === l - 1 && (e = "medium"), { index: a + t, size: e };
+  });
+};
+export {
+  f as PAGE_CONTROL_WINDOW,
+  m as pageControlDots
+};

package/dist/Navigation/Stepper/Stepper.js

@@ -0,0 +1,79 @@
+import { jsxs as r, jsx as p } from "react/jsx-runtime";
+import { forwardRef as k, useState as m, useRef as w, useCallback as z } from "react";
+import { cn as F } from "../../lib/utils.js";
+import l from "./Stepper.module.css.js";
+import { StepperContext as L } from "./useStepper.js";
+import { useStepperPill as O } from "./useStepperPill.js";
+const U = k(
+  ({
+    className: N,
+    orientation: c = "horizontal",
+    current: e,
+    defaultCurrent: n = 1,
+    onCurrentChange: t,
+    header: i,
+    headerDescription: d,
+    dataTestid: a,
+    children: u,
+    ...H
+  }, P) => {
+    const [j, f] = m(e ?? n), [y, R] = m(e), s = e !== void 0 && t !== void 0;
+    !s && e !== void 0 && e !== y && (R(e), f(e));
+    const o = s ? e : j, [S, b] = m(o);
+    o > S && b(o);
+    const x = w(null);
+    O(x);
+    const h = z(
+      (v) => {
+        s || f(v), t == null || t(v);
+      },
+      [s, t]
+    );
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: P,
+        "data-slot": "stepper",
+        "data-orientation": c,
+        "data-testid": a,
+        className: F(l.oxStepper, N),
+        ...H,
+        children: [
+          i != null ? /* @__PURE__ */ r("div", { className: l.oxStepperHeader, "data-slot": "stepper-header", children: [
+            /* @__PURE__ */ p("p", { className: l.oxStepperHeaderTitle, children: i }),
+            d != null ? /* @__PURE__ */ p("p", { className: l.oxStepperHeaderDescription, children: d }) : null
+          ] }) : null,
+          /* @__PURE__ */ p(
+            L.Provider,
+            {
+              value: { current: o, furthest: S, orientation: c, dataTestid: a, goTo: h },
+              children: /* @__PURE__ */ r(
+                "ol",
+                {
+                  ref: x,
+                  className: l.oxStepperList,
+                  "data-testid": `${a}-list`,
+                  children: [
+                    /* @__PURE__ */ p(
+                      "li",
+                      {
+                        className: l.oxStepperPill,
+                        "data-slot": "stepper-pill",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    u
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+U.displayName = "OxStepper";
+export {
+  U as Stepper
+};

package/dist/Navigation/Stepper/Stepper.module.css.js

@@ -0,0 +1,17 @@
+const e = "_oxStepper_5m3ky_2", p = "_oxStepperHeader_5m3ky_2", t = "_oxStepperHeaderTitle_5m3ky_2", r = "_oxStepperHeaderDescription_5m3ky_2", o = "_oxStepperList_5m3ky_2", x = "_oxStepperPill_5m3ky_2", S = {
+  oxStepper: e,
+  oxStepperHeader: p,
+  oxStepperHeaderTitle: t,
+  oxStepperHeaderDescription: r,
+  oxStepperList: o,
+  oxStepperPill: x
+};
+export {
+  S as default,
+  e as oxStepper,
+  p as oxStepperHeader,
+  r as oxStepperHeaderDescription,
+  t as oxStepperHeaderTitle,
+  o as oxStepperList,
+  x as oxStepperPill
+};

package/dist/Navigation/Stepper/StepperItem.js

@@ -0,0 +1,75 @@
+import { jsx as t, jsxs as n, Fragment as h } from "react/jsx-runtime";
+import { IconCheck as x } from "@sesame/orxata-icons/IconCheck";
+import { Icon as u } from "@sesame/orxata-icons/react";
+import { forwardRef as N } from "react";
+import { cn as f } from "../../lib/utils.js";
+import e from "./StepperItem.module.css.js";
+import { useStepper as b, stepperState as C, isStepNavigable as v } from "./useStepper.js";
+const g = N(
+  ({ className: c, step: r, error: p = !1, description: o, children: i, ...m }, d) => {
+    const a = b(), s = C(r, a.current, p), I = r === a.current, S = v(
+      r,
+      a.current,
+      a.furthest,
+      p
+    ), l = /* @__PURE__ */ n(h, { children: [
+      /* @__PURE__ */ n("span", { className: e.oxStepperItemRail, children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: e.oxStepperItemIndicator,
+            "data-slot": "step-indicator",
+            "aria-hidden": "true",
+            children: s === "completed" ? /* @__PURE__ */ t(u, { icon: x, className: e.oxStepperItemCheck }) : /* @__PURE__ */ t("span", { className: e.oxStepperItemNumber, children: s === "error" ? "!" : r })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: e.oxStepperItemConnector,
+            "data-slot": "step-connector",
+            "aria-hidden": "true"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n("span", { className: e.oxStepperItemContent, children: [
+        /* @__PURE__ */ t("span", { className: e.oxStepperItemLabel, "data-slot": "step-label", children: i }),
+        o != null ? /* @__PURE__ */ t(
+          "span",
+          {
+            className: e.oxStepperItemDescription,
+            "data-slot": "step-description",
+            children: o
+          }
+        ) : null
+      ] })
+    ] });
+    return /* @__PURE__ */ t(
+      "li",
+      {
+        ref: d,
+        "data-slot": "step",
+        "data-state": s,
+        "data-orientation": a.orientation,
+        "data-testid": `${a.dataTestid}-step-${r}`,
+        "aria-current": I ? "step" : void 0,
+        className: f(e.oxStepperItem, c),
+        ...m,
+        children: S ? /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "data-slot": "step-control",
+            className: e.oxStepperItemControl,
+            onClick: () => a.goTo(r),
+            children: l
+          }
+        ) : /* @__PURE__ */ t("div", { "data-slot": "step-control", className: e.oxStepperItemControl, children: l })
+      }
+    );
+  }
+);
+g.displayName = "OxStepperItem";
+export {
+  g as StepperItem
+};

package/dist/Navigation/Stepper/StepperItem.module.css.js

@@ -0,0 +1,25 @@
+const e = "_oxStepperItem_2wnb8_2", t = "_oxStepperItemControl_2wnb8_2", p = "_oxStepperItemRail_2wnb8_2", o = "_oxStepperItemIndicator_2wnb8_2", r = "_oxStepperItemNumber_2wnb8_2", n = "_oxStepperItemCheck_2wnb8_2", m = "_oxStepperItemConnector_2wnb8_2", I = "_oxStepperItemContent_2wnb8_2", x = "_oxStepperItemLabel_2wnb8_2", S = "_oxStepperItemDescription_2wnb8_2", _ = {
+  oxStepperItem: e,
+  oxStepperItemControl: t,
+  oxStepperItemRail: p,
+  oxStepperItemIndicator: o,
+  oxStepperItemNumber: r,
+  oxStepperItemCheck: n,
+  oxStepperItemConnector: m,
+  oxStepperItemContent: I,
+  oxStepperItemLabel: x,
+  oxStepperItemDescription: S
+};
+export {
+  _ as default,
+  e as oxStepperItem,
+  n as oxStepperItemCheck,
+  m as oxStepperItemConnector,
+  I as oxStepperItemContent,
+  t as oxStepperItemControl,
+  S as oxStepperItemDescription,
+  o as oxStepperItemIndicator,
+  x as oxStepperItemLabel,
+  r as oxStepperItemNumber,
+  p as oxStepperItemRail
+};

package/dist/Navigation/Stepper/StepperSubsteps.js

@@ -0,0 +1,39 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { cn as u } from "../../lib/utils.js";
+import s from "./StepperSubsteps.module.css.js";
+const x = h(
+  ({ className: p, count: a, current: m = 1, dataTestid: e, ...o }, d) => {
+    const i = Array.from(
+      { length: Math.max(0, Math.trunc(a)) },
+      (t, c) => c + 1
+    ), n = Math.min(
+      Math.max(1, Math.trunc(m)),
+      Math.max(1, a)
+    );
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: d,
+        "data-slot": "substeps",
+        "data-testid": e,
+        "aria-hidden": "true",
+        className: u(s.oxStepperSubsteps, p),
+        ...o,
+        children: i.map((t) => /* @__PURE__ */ r(
+          "span",
+          {
+            className: s.oxStepperSubstep,
+            "data-state": t <= n ? "reached" : "upcoming",
+            "data-testid": `${e}-dot-${t}`
+          },
+          t
+        ))
+      }
+    );
+  }
+);
+x.displayName = "OxStepperSubsteps";
+export {
+  x as StepperSubsteps
+};

package/dist/Navigation/Stepper/StepperSubsteps.module.css.js

@@ -0,0 +1,9 @@
+const e = "_oxStepperSubsteps_186p8_2", p = "_oxStepperSubstep_186p8_2", t = {
+  oxStepperSubsteps: e,
+  oxStepperSubstep: p
+};
+export {
+  t as default,
+  p as oxStepperSubstep,
+  e as oxStepperSubsteps
+};

package/dist/Navigation/Stepper/useStepper.js

@@ -0,0 +1,13 @@
+import { createContext as o, useContext as p } from "react";
+const s = o(null), i = () => {
+  const e = p(s);
+  if (!e)
+    throw new Error("OxStepperItem must be used inside an OxStepper.");
+  return e;
+}, c = (e, t, r = !1) => r ? "error" : e < t ? "completed" : e === t ? "current" : "upcoming", a = (e, t, r, n = !1) => e !== t && (n || e <= r);
+export {
+  s as StepperContext,
+  a as isStepNavigable,
+  c as stepperState,
+  i as useStepper
+};

package/dist/Navigation/Stepper/useStepperPill.js

@@ -0,0 +1,46 @@
+import { useEffect as b } from "react";
+const p = '[data-slot="step-control"]', x = `[data-slot="step"][data-state="current"] ${p}`, h = '[data-slot="stepper-pill"]';
+function m(l) {
+  b(() => {
+    const e = l.current;
+    if (!e) return;
+    let t = null, n = null, o = 0;
+    const d = (r) => {
+      r.dataset.ready === "true" || o !== 0 || (o = requestAnimationFrame(() => {
+        o = 0, r.dataset.ready = "true";
+      }));
+    }, i = () => {
+      const r = e.querySelector(h);
+      if (!r) return;
+      const a = e.querySelector(x);
+      if (!a) {
+        r.removeAttribute("data-ready");
+        return;
+      }
+      const s = a.getBoundingClientRect();
+      if (s.width === 0 && s.height === 0) return;
+      const u = e.getBoundingClientRect(), f = s.left - u.left - e.clientLeft, y = s.top - u.top - e.clientTop;
+      e.style.setProperty("--ox-stepper-pill-x", `${f}px`), e.style.setProperty("--ox-stepper-pill-y", `${y}px`), e.style.setProperty("--ox-stepper-pill-width", `${s.width}px`), e.style.setProperty("--ox-stepper-pill-height", `${s.height}px`), d(r);
+    }, c = () => {
+      if (t) {
+        t.disconnect(), t.observe(e);
+        for (const r of e.querySelectorAll(p))
+          t.observe(r);
+      }
+    };
+    return i(), typeof ResizeObserver < "u" && (t = new ResizeObserver(i), c()), typeof MutationObserver < "u" && (n = new MutationObserver(() => {
+      c(), i();
+    }), n.observe(e, {
+      subtree: !0,
+      childList: !0,
+      characterData: !0,
+      attributes: !0,
+      attributeFilter: ["data-state"]
+    })), () => {
+      t == null || t.disconnect(), t = null, n == null || n.disconnect(), n = null, o !== 0 && cancelAnimationFrame(o), o = 0;
+    };
+  }, [l]);
+}
+export {
+  m as useStepperPill
+};

package/dist/Navigation/Tabs/Tabs.js

@@ -0,0 +1,39 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as y from "@radix-ui/react-tabs";
+import { forwardRef as N, useState as m } from "react";
+import { cn as O } from "../../lib/utils.js";
+import R from "./Tabs.module.css.js";
+const S = N(
+  ({
+    className: d,
+    value: t,
+    defaultValue: f,
+    onValueChange: o,
+    activationMode: a = "automatic",
+    dataTestid: c,
+    children: p,
+    ...e
+  }, b) => {
+    const [T, r] = m(t ?? f), [w, x] = m(t), s = t !== void 0 && o !== void 0;
+    return !s && t !== void 0 && t !== w && (x(t), r(t)), /* @__PURE__ */ n(
+      y.Root,
+      {
+        ref: b,
+        "data-slot": "tabs",
+        "data-testid": c,
+        className: O(R.oxTabs, d),
+        value: s ? t : T,
+        onValueChange: (i) => {
+          s || r(i), o == null || o(i);
+        },
+        activationMode: a,
+        ...e,
+        children: p
+      }
+    );
+  }
+);
+S.displayName = "OxTabs";
+export {
+  S as Tabs
+};

package/dist/Navigation/Tabs/Tabs.module.css.js

@@ -0,0 +1,7 @@
+const s = "_oxTabs_puvp3_2", o = {
+  oxTabs: s
+};
+export {
+  o as default,
+  s as oxTabs
+};

package/dist/Navigation/Tabs/TabsContent.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-tabs";
+import { forwardRef as n } from "react";
+import { cn as e } from "../../lib/utils.js";
+import i from "./TabsContent.module.css.js";
+const f = n(({ className: t, children: o, ...r }, s) => /* @__PURE__ */ a(
+  m.Content,
+  {
+    ref: s,
+    "data-slot": "tabs-content",
+    className: e(i.oxTabsContent, t),
+    ...r,
+    children: o
+  }
+));
+f.displayName = "OxTabsContent";
+export {
+  f as TabsContent
+};

package/dist/Navigation/Tabs/TabsContent.module.css.js

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