@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Feedback/Dialog/DialogFullScreenContent.js

@@ -0,0 +1,106 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dialog";
+import { IconClose as x } from "@sesame/orxata-icons/IconClose";
+import { Icon as D } from "@sesame/orxata-icons/react";
+import { forwardRef as F } from "react";
+import { cn as r } from "../../lib/utils.js";
+import l from "./DialogFullScreenContent.module.css.js";
+import { DialogOverlay as p } from "./DialogOverlay.js";
+import { useTranslate as N } from "../../Locale/useTranslate.js";
+const f = F(
+  ({
+    className: s,
+    children: t,
+    header: d,
+    sidebarLeft: i,
+    sidebarRight: n,
+    footer: c,
+    showCloseButton: m = !0,
+    ...g
+  }, S) => {
+    const u = N();
+    return /* @__PURE__ */ e(a.Portal, { children: [
+      /* @__PURE__ */ o(p, {}),
+      /* @__PURE__ */ e(
+        a.Content,
+        {
+          ref: S,
+          "data-slot": "dialog-content",
+          className: r(l.oxDialogFullScreenContent, s),
+          ...g,
+          children: [
+            /* @__PURE__ */ e("div", { className: l.oxDialogFullScreenTopBar, children: [
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  "data-slot": "dialog-header",
+                  className: l.oxDialogFullScreenHeading,
+                  children: d
+                }
+              ),
+              m && /* @__PURE__ */ e(
+                a.Close,
+                {
+                  "data-slot": "dialog-close",
+                  className: l.oxDialogFullScreenClose,
+                  children: [
+                    /* @__PURE__ */ o(
+                      D,
+                      {
+                        icon: x,
+                        className: l.oxDialogFullScreenCloseIcon
+                      }
+                    ),
+                    /* @__PURE__ */ o("span", { className: l.oxDialogFullScreenCloseLabel, children: u("orxata.dialog.close") })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: l.oxDialogFullScreenBody, children: [
+              i && /* @__PURE__ */ o(
+                "aside",
+                {
+                  className: r(
+                    l.oxDialogFullScreenSidebar,
+                    l.oxDialogFullScreenSidebarLeft
+                  ),
+                  children: i
+                }
+              ),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  "data-slot": "dialog-body",
+                  className: l.oxDialogFullScreenMain,
+                  children: t
+                }
+              ),
+              n && /* @__PURE__ */ o(
+                "aside",
+                {
+                  className: r(
+                    l.oxDialogFullScreenSidebar,
+                    l.oxDialogFullScreenSidebarRight
+                  ),
+                  children: n
+                }
+              )
+            ] }),
+            c && /* @__PURE__ */ o(
+              "div",
+              {
+                "data-slot": "dialog-footer",
+                className: l.oxDialogFullScreenFooter,
+                children: c
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+f.displayName = "OxDialogFullScreenContent";
+export {
+  f as DialogFullScreenContent
+};

package/dist/Feedback/Dialog/DialogFullScreenContent.module.css.js

@@ -0,0 +1,29 @@
+const o = "_oxDialogFullScreenContent_how6a_2", l = "_oxDialogFullScreenTopBar_how6a_2", e = "_oxDialogFullScreenHeading_how6a_2", a = "_oxDialogFullScreenBody_how6a_2", n = "_oxDialogFullScreenMain_how6a_2", i = "_oxDialogFullScreenSidebar_how6a_2", c = "_oxDialogFullScreenSidebarLeft_how6a_2", r = "_oxDialogFullScreenSidebarRight_how6a_2", S = "_oxDialogFullScreenFooter_how6a_2", g = "_oxDialogFullScreenClose_how6a_2", F = "_oxDialogFullScreenCloseIcon_how6a_2", u = "_oxDialogFullScreenCloseLabel_how6a_2", x = {
+  oxDialogFullScreenContent: o,
+  oxDialogFullScreenTopBar: l,
+  oxDialogFullScreenHeading: e,
+  oxDialogFullScreenBody: a,
+  oxDialogFullScreenMain: n,
+  oxDialogFullScreenSidebar: i,
+  oxDialogFullScreenSidebarLeft: c,
+  oxDialogFullScreenSidebarRight: r,
+  oxDialogFullScreenFooter: S,
+  oxDialogFullScreenClose: g,
+  oxDialogFullScreenCloseIcon: F,
+  oxDialogFullScreenCloseLabel: u
+};
+export {
+  x as default,
+  a as oxDialogFullScreenBody,
+  g as oxDialogFullScreenClose,
+  F as oxDialogFullScreenCloseIcon,
+  u as oxDialogFullScreenCloseLabel,
+  o as oxDialogFullScreenContent,
+  S as oxDialogFullScreenFooter,
+  e as oxDialogFullScreenHeading,
+  n as oxDialogFullScreenMain,
+  i as oxDialogFullScreenSidebar,
+  c as oxDialogFullScreenSidebarLeft,
+  r as oxDialogFullScreenSidebarRight,
+  l as oxDialogFullScreenTopBar
+};

package/dist/Feedback/Dialog/DialogOverlay.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-dialog";
+import { forwardRef as m } from "react";
+import { cn as e } from "../../lib/utils.js";
+/* empty css             */
+const t = m(({ className: o, ...r }, a) => /* @__PURE__ */ i(
+  l.Overlay,
+  {
+    ref: a,
+    "data-slot": "dialog-overlay",
+    className: e("ox-overlay", o),
+    ...r
+  }
+));
+t.displayName = "OxDialogOverlay";
+export {
+  t as DialogOverlay
+};

package/dist/Feedback/Dialog/DialogScrollbar.d.ts

@@ -0,0 +1,18 @@
+export interface DialogScrollbarProps {
+    dataTestid: string;
+}
+/**
+ * Where a dialog's overlay scrollbar goes. Mirrors `@sesame/orxata-core`
+ * DialogScrollbar: `Scrollbar` plus the placement that is only true of a
+ * dialog. Nothing to configure — the scrollport is resolved with the same query
+ * the panel's `:has()` runs, so it is the body when one is declared and the
+ * region itself when not.
+ *
+ * The bar hangs off a zero-height sticky rail and not off the panel: with no
+ * body the panel *is* the scrollport, and an absolutely positioned child of it
+ * scrolls away with the content, as the close button does.
+ */
+export declare function DialogScrollbar({ dataTestid }: DialogScrollbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogScrollbar {
+    var displayName: string;
+}

package/dist/Feedback/Dialog/DialogScrollbar.js

@@ -0,0 +1,66 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as v, useState as m, useCallback as b, useEffect as x } from "react";
+import S from "./DialogScrollbar.module.css.js";
+import { SCROLLBAR_THICKNESS as E } from "../../Layout/Scrollbar/useScrollbar.js";
+import { Scrollbar as R } from "../../Layout/Scrollbar/Scrollbar.js";
+const f = 4;
+function y(c, n) {
+  c(
+    (i) => Object.keys(n).every((l) => i[l] === n[l]) ? i : n
+  );
+}
+function B({ dataTestid: c }) {
+  const n = v(null), [i, l] = m(null), [u, g] = m({ top: 0, left: 0, height: 0 }), a = b((o) => {
+    const t = n.current, e = (t == null ? void 0 : t.parentElement) ?? null;
+    if (!t || !e) return;
+    const s = t.getBoundingClientRect(), r = o.getBoundingClientRect(), h = e.getBoundingClientRect();
+    y(g, {
+      top: r.top + o.clientTop + f - s.top,
+      left: h.left + e.clientLeft + e.clientWidth - E - f - s.left,
+      height: Math.max(0, o.clientHeight - f * 2)
+    });
+  }, []), p = b(() => {
+    var e;
+    const o = ((e = n.current) == null ? void 0 : e.parentElement) ?? null;
+    if (!o) return;
+    const t = o.querySelector('[data-slot="dialog-body"]') ?? o;
+    l(t), a(t);
+  }, [a]);
+  return x(() => {
+    const o = n.current, t = (o == null ? void 0 : o.parentElement) ?? null;
+    if (!o || !t) return;
+    const e = t.querySelector('[data-slot="dialog-body"]') ?? t;
+    l(e);
+    const s = () => a(e);
+    e.addEventListener("scroll", s, { passive: !0 }), e.addEventListener("mouseenter", p, { passive: !0 });
+    let r = null;
+    return typeof ResizeObserver < "u" && (r = new ResizeObserver(p), r.observe(e), t !== e && r.observe(t), r.observe(o)), a(e), () => {
+      e.removeEventListener("scroll", s), e.removeEventListener("mouseenter", p), r == null || r.disconnect();
+    };
+  }), /* @__PURE__ */ d(
+    "div",
+    {
+      ref: n,
+      className: S.oxDialogScrollbarRail,
+      "data-slot": "dialog-scrollbar",
+      "data-testid": `${c}-rail`,
+      children: /* @__PURE__ */ d(
+        R,
+        {
+          port: i,
+          style: {
+            "--ox-scrollbar-top": `${u.top}px`,
+            "--ox-scrollbar-left": `${u.left}px`,
+            "--ox-scrollbar-right": "auto",
+            "--ox-scrollbar-height": `${u.height}px`
+          },
+          dataTestid: c
+        }
+      )
+    }
+  );
+}
+B.displayName = "OxDialogScrollbar";
+export {
+  B as DialogScrollbar
+};

package/dist/Feedback/Dialog/DialogScrollbar.module.css.js

@@ -0,0 +1,7 @@
+const l = "_oxDialogScrollbarRail_eq0ge_2", o = {
+  oxDialogScrollbarRail: l
+};
+export {
+  o as default,
+  l as oxDialogScrollbarRail
+};

package/dist/Feedback/Dialog/DialogTitle.js

@@ -0,0 +1,18 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-dialog";
+import { forwardRef as a } from "react";
+import { cn as m } from "../../lib/utils.js";
+import e from "./DialogTitle.module.css.js";
+const s = a(({ className: o, ...i }, t) => /* @__PURE__ */ l(
+  r.Title,
+  {
+    ref: t,
+    "data-slot": "dialog-title",
+    className: m(e.oxDialogTitle, o),
+    ...i
+  }
+));
+s.displayName = "OxDialogTitle";
+export {
+  s as DialogTitle
+};

package/dist/Feedback/Dialog/DialogTitle.module.css.js

@@ -0,0 +1,7 @@
+const o = "_oxDialogTitle_jedhv_2", l = {
+  oxDialogTitle: o
+};
+export {
+  l as default,
+  o as oxDialogTitle
+};

package/dist/Feedback/Dialog/DialogTwoPanelContent.js

@@ -0,0 +1,50 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-dialog";
+import { IconClose as g } from "@sesame/orxata-icons/IconClose";
+import { Icon as p } from "@sesame/orxata-icons/react";
+import { forwardRef as x } from "react";
+import { cn as f } from "../../lib/utils.js";
+import { DialogOverlay as D } from "./DialogOverlay.js";
+import { DialogScrollbar as i } from "./DialogScrollbar.js";
+import o from "./DialogTwoPanelContent.module.css.js";
+import { useTranslate as C } from "../../Locale/useTranslate.js";
+const w = x(({ className: r, children: t, aside: s, showCloseButton: n = !0, ...m }, c) => {
+  const d = C();
+  return /* @__PURE__ */ a(e.Portal, { children: [
+    /* @__PURE__ */ l(D, {}),
+    /* @__PURE__ */ a(
+      e.Content,
+      {
+        ref: c,
+        "data-slot": "dialog-content",
+        className: f(o.oxDialogTwoPanelContent, r),
+        ...m,
+        children: [
+          /* @__PURE__ */ a("div", { className: o.oxDialogTwoPanelMain, children: [
+            /* @__PURE__ */ l(i, { dataTestid: "ox-dialog-two-panel-scrollbar" }),
+            t
+          ] }),
+          /* @__PURE__ */ a("div", { className: o.oxDialogTwoPanelAside, children: [
+            /* @__PURE__ */ l(i, { dataTestid: "ox-dialog-two-panel-aside-scrollbar" }),
+            s
+          ] }),
+          n && /* @__PURE__ */ a(
+            e.Close,
+            {
+              "data-slot": "dialog-close",
+              className: o.oxDialogCloseButton,
+              children: [
+                /* @__PURE__ */ l(p, { icon: g, className: o.oxDialogCloseIcon }),
+                /* @__PURE__ */ l("span", { className: o.oxDialogCloseLabel, children: d("orxata.dialog.close") })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+w.displayName = "OxDialogTwoPanelContent";
+export {
+  w as DialogTwoPanelContent
+};

package/dist/Feedback/Dialog/DialogTwoPanelContent.module.css.js

@@ -0,0 +1,17 @@
+const o = "_oxDialogTwoPanelContent_z0ux4_2", l = "_oxDialogTwoPanelMain_z0ux4_2", a = "_oxDialogTwoPanelAside_z0ux4_2", n = "_oxDialogCloseButton_z0ux4_2", e = "_oxDialogCloseIcon_z0ux4_2", x = "_oxDialogCloseLabel_z0ux4_2", i = {
+  oxDialogTwoPanelContent: o,
+  oxDialogTwoPanelMain: l,
+  oxDialogTwoPanelAside: a,
+  oxDialogCloseButton: n,
+  oxDialogCloseIcon: e,
+  oxDialogCloseLabel: x
+};
+export {
+  i as default,
+  n as oxDialogCloseButton,
+  e as oxDialogCloseIcon,
+  x as oxDialogCloseLabel,
+  a as oxDialogTwoPanelAside,
+  o as oxDialogTwoPanelContent,
+  l as oxDialogTwoPanelMain
+};

package/dist/Feedback/Drawer/Drawer.js

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as w from "@radix-ui/react-dialog";
+import { useState as d, useCallback as D, useEffect as v, useMemo as E } from "react";
+import { DrawerProvider as P } from "./useDrawer.js";
+const b = ({
+  children: i,
+  open: c,
+  defaultOpen: m = !1,
+  modal: n = !0,
+  side: o = "right",
+  onOpenChange: r
+}) => {
+  const [p, f] = d(m), e = c ?? p, [s, a] = d(!1), u = D(
+    (t) => {
+      f(t), r == null || r(t);
+    },
+    [r]
+  );
+  v(() => {
+    e && a(!1);
+  }, [e]);
+  const x = E(
+    () => ({
+      open: e,
+      side: o,
+      expanded: s,
+      toggleExpanded: () => a((t) => !t)
+    }),
+    [e, o, s]
+  );
+  return /* @__PURE__ */ l(P, { value: x, children: /* @__PURE__ */ l(
+    w.Root,
+    {
+      "data-slot": "drawer",
+      open: e,
+      onOpenChange: u,
+      modal: n,
+      children: i
+    }
+  ) });
+};
+b.displayName = "OxDrawer";
+export {
+  b as Drawer
+};

package/dist/Feedback/Drawer/DrawerBody.js

@@ -0,0 +1,17 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+const e = t(
+  ({ dataTestid: r, ...o }, a) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: a,
+      "data-slot": "drawer-body",
+      "data-testid": r,
+      ...o
+    }
+  )
+);
+e.displayName = "OxDrawerBody";
+export {
+  e as DrawerBody
+};

package/dist/Feedback/Drawer/DrawerContent.js

@@ -0,0 +1,69 @@
+import { jsxs as l, Fragment as x, jsx as r } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dialog";
+import { IconClose as u } from "@sesame/orxata-icons/IconClose";
+import { Icon as N } from "@sesame/orxata-icons/react";
+import { forwardRef as i } from "react";
+import { TransitionSlideX as C } from "../../Transitions/TransitionSlideX/TransitionSlideX.js";
+import { cn as c } from "../../lib/utils.js";
+/* empty css             */
+import o from "./DrawerContent.module.css.js";
+import { useDrawer as d } from "./useDrawer.js";
+import { useTranslate as h } from "../../Locale/useTranslate.js";
+const v = 500, y = 300, m = i(({ className: t, children: n, showCloseButton: s = !0, ...e }, p) => {
+  const D = h(), { side: w, expanded: f } = d();
+  return /* @__PURE__ */ r(a.Portal, { forceMount: !0, children: /* @__PURE__ */ l(
+    a.Content,
+    {
+      ref: p,
+      forceMount: !0,
+      "data-slot": "drawer-content",
+      className: c(o.oxDrawerPanel, t),
+      "data-side": w,
+      "data-expanded": f,
+      ...e,
+      children: [
+        n,
+        s && /* @__PURE__ */ l(
+          a.Close,
+          {
+            "data-slot": "drawer-close",
+            className: o.oxDrawerClose,
+            children: [
+              /* @__PURE__ */ r(N, { icon: u, className: o.oxDrawerCloseIcon }),
+              /* @__PURE__ */ r("span", { className: o.oxDrawerCloseLabel, children: D("orxata.drawer.close") })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+});
+m.displayName = "OxDrawerPanel";
+const O = i((t, n) => {
+  const { open: s, side: e } = d();
+  return /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(
+      a.Overlay,
+      {
+        "data-slot": "drawer-overlay",
+        className: c("ox-overlay", o.oxDrawerOverlay),
+        "data-side": e
+      }
+    ) }),
+    /* @__PURE__ */ r(
+      C,
+      {
+        in: s,
+        direction: e,
+        leaveDirection: e,
+        enterDuration: v,
+        leaveDuration: y,
+        children: /* @__PURE__ */ r(m, { ref: n, ...t })
+      }
+    )
+  ] });
+});
+O.displayName = "OxDrawerContent";
+export {
+  O as DrawerContent
+};

package/dist/Feedback/Drawer/DrawerContent.module.css.js

@@ -0,0 +1,15 @@
+const e = "_oxDrawerPanel_98ken_2", o = "_oxDrawerOverlay_98ken_2", r = "_oxDrawerClose_98ken_2", a = "_oxDrawerCloseIcon_98ken_2", l = "_oxDrawerCloseLabel_98ken_2", s = {
+  oxDrawerPanel: e,
+  oxDrawerOverlay: o,
+  oxDrawerClose: r,
+  oxDrawerCloseIcon: a,
+  oxDrawerCloseLabel: l
+};
+export {
+  s as default,
+  r as oxDrawerClose,
+  a as oxDrawerCloseIcon,
+  l as oxDrawerCloseLabel,
+  o as oxDrawerOverlay,
+  e as oxDrawerPanel
+};

package/dist/Feedback/Drawer/DrawerDescription.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-dialog";
+import { forwardRef as s } from "react";
+import { cn as a } from "../../lib/utils.js";
+import m from "./DrawerDescription.module.css.js";
+const p = s(({ className: r, ...o }, i) => /* @__PURE__ */ t(
+  e.Description,
+  {
+    ref: i,
+    "data-slot": "drawer-description",
+    className: a(m.oxDrawerDescription, r),
+    ...o
+  }
+));
+p.displayName = "OxDrawerDescription";
+export {
+  p as DrawerDescription
+};

package/dist/Feedback/Drawer/DrawerDescription.module.css.js

@@ -0,0 +1,7 @@
+const r = "_oxDrawerDescription_1qz89_2", e = {
+  oxDrawerDescription: r
+};
+export {
+  e as default,
+  r as oxDrawerDescription
+};

package/dist/Feedback/Drawer/DrawerExpand.js

@@ -0,0 +1,41 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { IconMaximizeDiagonal as d } from "@sesame/orxata-icons/IconMaximizeDiagonal";
+import { IconMinimizeDiagonal as x } from "@sesame/orxata-icons/IconMinimizeDiagonal";
+import { Icon as c } from "@sesame/orxata-icons/react";
+import { forwardRef as l } from "react";
+import { cn as f } from "../../lib/utils.js";
+import a from "./DrawerExpand.module.css.js";
+import { useDrawer as w } from "./useDrawer.js";
+import { useTranslate as D } from "../../Locale/useTranslate.js";
+const E = l(
+  ({ className: n, ...t }, s) => {
+    const o = D(), { side: i, expanded: r, toggleExpanded: m } = w();
+    return /* @__PURE__ */ p(
+      "button",
+      {
+        ref: s,
+        type: "button",
+        "data-slot": "drawer-expand",
+        className: f(a.oxDrawerExpand, n),
+        "data-side": i,
+        "aria-pressed": r,
+        onClick: m,
+        ...t,
+        children: [
+          /* @__PURE__ */ e(
+            c,
+            {
+              icon: r ? x : d,
+              className: a.oxDrawerExpandIcon
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: a.oxDrawerExpandLabel, children: o(r ? "orxata.drawer.collapse" : "orxata.drawer.expand") })
+        ]
+      }
+    );
+  }
+);
+E.displayName = "OxDrawerExpand";
+export {
+  E as DrawerExpand
+};

package/dist/Feedback/Drawer/DrawerExpand.module.css.js

@@ -0,0 +1,11 @@
+const a = "_oxDrawerExpand_52yu5_2", r = "_oxDrawerExpandIcon_52yu5_2", x = "_oxDrawerExpandLabel_52yu5_2", o = {
+  oxDrawerExpand: a,
+  oxDrawerExpandIcon: r,
+  oxDrawerExpandLabel: x
+};
+export {
+  o as default,
+  a as oxDrawerExpand,
+  r as oxDrawerExpandIcon,
+  x as oxDrawerExpandLabel
+};

package/dist/Feedback/Drawer/DrawerTitle.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-dialog";
+import { forwardRef as a } from "react";
+import { cn as m } from "../../lib/utils.js";
+import l from "./DrawerTitle.module.css.js";
+const s = a(({ className: r, ...t }, o) => /* @__PURE__ */ e(
+  i.Title,
+  {
+    ref: o,
+    "data-slot": "drawer-title",
+    className: m(l.oxDrawerTitle, r),
+    ...t
+  }
+));
+s.displayName = "OxDrawerTitle";
+export {
+  s as DrawerTitle
+};

package/dist/Feedback/Drawer/DrawerTitle.module.css.js

@@ -0,0 +1,7 @@
+const e = "_oxDrawerTitle_1wtzo_2", t = {
+  oxDrawerTitle: e
+};
+export {
+  t as default,
+  e as oxDrawerTitle
+};

package/dist/Feedback/Drawer/useDrawer.js

@@ -0,0 +1,11 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(null), s = e.Provider, a = () => {
+  const r = o(e);
+  if (!r)
+    throw new Error("OxDrawer parts must be used inside an <OxDrawer>.");
+  return r;
+};
+export {
+  s as DrawerProvider,
+  a as useDrawer
+};