@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Button/ActionItem/ActionItem.js

@@ -0,0 +1,36 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@sesame/orxata-icons/IconChevronRight";
+import { Icon as l } from "@sesame/orxata-icons/react";
+import { forwardRef as d } from "react";
+import { cn as p } from "../../lib/utils.js";
+import o from "./ActionItem.module.css.js";
+const f = d(
+  ({ className: e, showChevron: i = !0, dataTestid: a, children: r, ...m }, n) => /* @__PURE__ */ c(
+    "button",
+    {
+      ref: n,
+      type: "button",
+      "data-slot": "action-item",
+      "data-testid": a,
+      className: p(o["ox-action-item"], e),
+      ...m,
+      children: [
+        /* @__PURE__ */ t("span", { className: o["ox-action-item-label"], "data-slot": "label", children: r }),
+        i && /* @__PURE__ */ t(
+          "span",
+          {
+            className: o["ox-action-item-chevron"],
+            "data-slot": "icon",
+            "data-testid": `${a}-chevron`,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ t(l, { icon: s })
+          }
+        )
+      ]
+    }
+  )
+);
+f.displayName = "OxActionItem";
+export {
+  f as ActionItem
+};

package/dist/Button/ActionItem/ActionItem.module.css.js

@@ -0,0 +1,8 @@
+const e = {
+  "ox-action-item": "_ox-action-item_lke24_2",
+  "ox-action-item-label": "_ox-action-item-label_lke24_2",
+  "ox-action-item-chevron": "_ox-action-item-chevron_lke24_2"
+};
+export {
+  e as default
+};

package/dist/Button/Button.js

@@ -0,0 +1,25 @@
+import { jsx as f } from "react/jsx-runtime";
+import { Slot as n } from "@radix-ui/react-slot";
+import { forwardRef as p } from "react";
+import { moduleClasses as e } from "../lib/cssModules.js";
+import { cn as i } from "../lib/utils.js";
+import l from "./Button.module.css.js";
+import { buttonVariants as u } from "./index.js";
+const d = p(
+  ({ className: o, variant: t = "default", size: m = "md", asChild: r = !1, ...s }, a) => /* @__PURE__ */ f(
+    r ? n : "button",
+    {
+      ref: a,
+      "data-slot": "button",
+      className: i(
+        e(l, u({ variant: t, size: m })),
+        o
+      ),
+      ...s
+    }
+  )
+);
+d.displayName = "OxButton";
+export {
+  d as Button
+};

package/dist/Button/Button.module.css.js

@@ -0,0 +1,20 @@
+const t = {
+  "ox-button": "_ox-button_1fmx7_2",
+  "ox-button--default": "_ox-button--default_1fmx7_2",
+  "ox-button--destructive": "_ox-button--destructive_1fmx7_2",
+  "ox-button--success": "_ox-button--success_1fmx7_2",
+  "ox-button--outline": "_ox-button--outline_1fmx7_2",
+  "ox-button--secondary": "_ox-button--secondary_1fmx7_2",
+  "ox-button--ghost": "_ox-button--ghost_1fmx7_2",
+  "ox-button--link": "_ox-button--link_1fmx7_2",
+  "ox-button--ai": "_ox-button--ai_1fmx7_2",
+  "ox-button--2xs": "_ox-button--2xs_1fmx7_2",
+  "ox-button--xs": "_ox-button--xs_1fmx7_2",
+  "ox-button--sm": "_ox-button--sm_1fmx7_2",
+  "ox-button--md": "_ox-button--md_1fmx7_2",
+  "ox-button--lg": "_ox-button--lg_1fmx7_2",
+  "ox-button--icon": "_ox-button--icon_1fmx7_2"
+};
+export {
+  t as default
+};

package/dist/Button/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { cn as e } from "../../lib/utils.js";
+import i from "./ButtonGroup.module.css.js";
+const u = a(
+  ({ className: o, dataTestid: r, children: t, ...m }, p) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: p,
+      role: "group",
+      className: e(i["ox-button-group"], o),
+      "data-testid": r,
+      ...m,
+      children: t
+    }
+  )
+);
+u.displayName = "OxButtonGroup";
+export {
+  u as ButtonGroup
+};

package/dist/Button/ButtonGroup/ButtonGroup.module.css.js

@@ -0,0 +1,6 @@
+const t = {
+  "ox-button-group": "_ox-button-group_1t4eh_2"
+};
+export {
+  t as default
+};

package/dist/Button/Fab/Fab.js

@@ -0,0 +1,34 @@
+import { jsxs as i, jsx as f } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { moduleClasses as n } from "../../lib/cssModules.js";
+import { cn as p } from "../../lib/utils.js";
+import t from "./Fab.module.css.js";
+import { fabVariants as b } from "./index.js";
+const c = l(
+  ({ className: s, label: a, collapsed: o = !1, dataTestid: r, children: e, ...m }, d) => /* @__PURE__ */ i(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      "data-slot": "fab",
+      "data-testid": r,
+      "data-collapsed": o || void 0,
+      className: p(
+        n(
+          t,
+          b({ extended: !!a && !o })
+        ),
+        s
+      ),
+      ...m,
+      children: [
+        e,
+        a != null && /* @__PURE__ */ f("span", { className: t["ox-fab-label"], "data-slot": "label", children: a })
+      ]
+    }
+  )
+);
+c.displayName = "OxFab";
+export {
+  c as Fab
+};

package/dist/Button/Fab/Fab.module.css.js

@@ -0,0 +1,8 @@
+const b = {
+  "ox-fab": "_ox-fab_bthzm_2",
+  "ox-fab--extended": "_ox-fab--extended_bthzm_2",
+  "ox-fab-label": "_ox-fab-label_bthzm_2"
+};
+export {
+  b as default
+};

package/dist/Button/Fab/index.js

@@ -0,0 +1,15 @@
+import { cva as e } from "class-variance-authority";
+const t = e("ox-fab", {
+  variants: {
+    extended: {
+      true: "ox-fab--extended",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    extended: !1
+  }
+});
+export {
+  t as fabVariants
+};

package/dist/Button/IconButton/IconButton.js

@@ -0,0 +1,28 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as f } from "@radix-ui/react-slot";
+import { forwardRef as p } from "react";
+import { moduleClasses as o } from "../../lib/cssModules.js";
+import { cn as e } from "../../lib/utils.js";
+import l from "../Button.module.css.js";
+import { buttonVariants as u } from "../index.js";
+import c from "./IconButton.module.css.js";
+import { iconButtonVariants as d } from "./index.js";
+const b = p(
+  ({ className: t, variant: r = "default", size: m = "md", asChild: n = !1, ...s }, i) => /* @__PURE__ */ a(
+    n ? f : "button",
+    {
+      ref: i,
+      "data-slot": "icon-button",
+      className: e(
+        o(l, u({ variant: r, size: null })),
+        o(c, d({ size: m })),
+        t
+      ),
+      ...s
+    }
+  )
+);
+b.displayName = "OxIconButton";
+export {
+  b as IconButton
+};

package/dist/Button/IconButton/IconButton.module.css.js

@@ -0,0 +1,11 @@
+const o = {
+  "ox-icon-button": "_ox-icon-button_1ce93_2",
+  "ox-icon-button--2xs": "_ox-icon-button--2xs_1ce93_2",
+  "ox-icon-button--xs": "_ox-icon-button--xs_1ce93_2",
+  "ox-icon-button--sm": "_ox-icon-button--sm_1ce93_2",
+  "ox-icon-button--md": "_ox-icon-button--md_1ce93_2",
+  "ox-icon-button--lg": "_ox-icon-button--lg_1ce93_2"
+};
+export {
+  o as default
+};

package/dist/Button/IconButton/index.js

@@ -0,0 +1,18 @@
+import { cva as o } from "class-variance-authority";
+const n = o("ox-icon-button", {
+  variants: {
+    size: {
+      "2xs": "ox-icon-button--2xs",
+      xs: "ox-icon-button--xs",
+      sm: "ox-icon-button--sm",
+      md: "ox-icon-button--md",
+      lg: "ox-icon-button--lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  n as iconButtonVariants
+};

package/dist/Button/SplitButton/SplitButton.js

@@ -0,0 +1,74 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { IconChevronDown as w } from "@sesame/orxata-icons/IconChevronDown";
+import { Icon as B } from "@sesame/orxata-icons/react";
+import { forwardRef as N, useState as g } from "react";
+import { cn as D } from "../../lib/utils.js";
+import { Button as i } from "../Button.js";
+import { ButtonGroup as b } from "../ButtonGroup/ButtonGroup.js";
+import r from "./SplitButton.module.css.js";
+import { useTranslate as v } from "../../Locale/useTranslate.js";
+import { DropdownMenu as C } from "../../Navigation/DropdownMenu/DropdownMenu.js";
+import { DropdownMenuTrigger as M } from "../../Navigation/DropdownMenu/DropdownMenuTrigger.js";
+import { DropdownMenuContent as O } from "../../Navigation/DropdownMenu/DropdownMenuContent.js";
+const S = N(
+  ({
+    className: a,
+    variant: n = "default",
+    size: e = "md",
+    disabled: t = !1,
+    menuLabel: s,
+    menu: l,
+    dataTestid: c,
+    children: u,
+    ...f
+  }, d) => {
+    const x = v(), [m, h] = g(!1);
+    return /* @__PURE__ */ p(
+      b,
+      {
+        className: D(r["ox-split-button"], a),
+        dataTestid: c,
+        "data-open": m || void 0,
+        "data-disabled": t || void 0,
+        children: [
+          /* @__PURE__ */ o(
+            i,
+            {
+              ref: d,
+              className: r["ox-split-button-action"],
+              variant: n,
+              size: e,
+              disabled: t,
+              ...f,
+              children: u
+            }
+          ),
+          /* @__PURE__ */ p(C, { open: m, onOpenChange: h, children: [
+            /* @__PURE__ */ o(M, { disabled: t, children: /* @__PURE__ */ o(
+              i,
+              {
+                className: r["ox-split-button-menu"],
+                variant: n,
+                size: e,
+                disabled: t,
+                "aria-label": s ?? x("orxata.splitButton.more"),
+                children: /* @__PURE__ */ o(
+                  B,
+                  {
+                    icon: w,
+                    className: r["ox-split-button-chevron"]
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ o(O, { align: "end", children: l })
+          ] })
+        ]
+      }
+    );
+  }
+);
+S.displayName = "OxSplitButton";
+export {
+  S as SplitButton
+};

package/dist/Button/SplitButton/SplitButton.module.css.js

@@ -0,0 +1,8 @@
+const t = {
+  "ox-split-button-menu": "_ox-split-button-menu_1orh6_2",
+  "ox-split-button-chevron": "_ox-split-button-chevron_1orh6_2",
+  "ox-split-button": "_ox-split-button_1orh6_2"
+};
+export {
+  t as default
+};

package/dist/Button/index.js

@@ -0,0 +1,48 @@
+import { cva as t } from "class-variance-authority";
+const n = t("ox-button", {
+  variants: {
+    variant: {
+      default: "ox-button--default",
+      destructive: "ox-button--destructive",
+      success: "ox-button--success",
+      outline: "ox-button--outline",
+      secondary: "ox-button--secondary",
+      ghost: "ox-button--ghost",
+      link: "ox-button--link",
+      /**
+       * Sesame AI actions, and nothing else. The gradient edge is the one
+       * thing in the system that means "this calls the model", so a button
+       * wearing it for an ordinary action spends that signal.
+       */
+      ai: "ox-button--ai"
+    },
+    size: {
+      "2xs": "ox-button--2xs",
+      xs: "ox-button--xs",
+      sm: "ox-button--sm",
+      md: "ox-button--md",
+      lg: "ox-button--lg",
+      /**
+       * @deprecated Use `OxIconButton` instead.
+       *
+       * A 36px square at `rounded-md`, which is in no design: the icon-only
+       * button was drawn later as its own set — four square sizes, all at the
+       * full radius — and this matches none of them. `OxIconButton` is that
+       * set, and it also requires the accessible name an icon-only control
+       * cannot do without.
+       *
+       * Kept because removing it breaks every caller already passing it, and
+       * this is published. It stays until a major, and it is not the thing to
+       * reach for in new code.
+       */
+      icon: "ox-button--icon"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+export {
+  n as buttonVariants
+};

package/dist/Data/KpiCard/KpiCard.js

@@ -0,0 +1,166 @@
+import { jsxs as r, jsx as o, Fragment as k } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { moduleClasses as y } from "../../lib/cssModules.js";
+import { cn as C } from "../../lib/utils.js";
+import a from "./KpiCard.module.css.js";
+import { kpiCardVariants as b } from "./index.js";
+import { Skeleton as e } from "../../Feedback/Skeleton/Skeleton.js";
+const B = w(
+  ({
+    className: N,
+    size: s = "md",
+    selected: v = !1,
+    loading: i = !1,
+    icon: t,
+    title: c,
+    chart: l,
+    trend: n,
+    description: p,
+    footer: m,
+    children: f,
+    dataTestid: d,
+    ...$
+  }, u) => {
+    const h = s === "md" && !!l, x = s === "md" && !!p, g = s === "md" && !!m;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: u,
+        "data-slot": "kpi-card",
+        "data-testid": d,
+        "data-selected": v,
+        "aria-busy": i || void 0,
+        className: C(
+          a["ox-kpi-card"],
+          y(a, b({ size: s })),
+          N
+        ),
+        ...$,
+        children: [
+          /* @__PURE__ */ r("div", { className: a["ox-kpi-card-header"], children: [
+            /* @__PURE__ */ r("div", { className: a["ox-kpi-card-identity"], children: [
+              i && t ? /* @__PURE__ */ o(
+                e,
+                {
+                  className: a["ox-kpi-card-loading-icon"],
+                  dataTestid: `${d}-loading-icon`
+                }
+              ) : t && /* @__PURE__ */ o(
+                "span",
+                {
+                  className: a["ox-kpi-card-icon-box"],
+                  "data-slot": "icon",
+                  "aria-hidden": "true",
+                  "data-testid": `${d}-icon`,
+                  children: t
+                }
+              ),
+              i && c ? /* @__PURE__ */ o(
+                e,
+                {
+                  className: a["ox-kpi-card-loading-title"],
+                  dataTestid: `${d}-loading-title`
+                }
+              ) : c && /* @__PURE__ */ o(
+                "span",
+                {
+                  className: a["ox-kpi-card-title"],
+                  "data-slot": "label",
+                  "data-testid": `${d}-title`,
+                  children: c
+                }
+              )
+            ] }),
+            i && h ? /* @__PURE__ */ o(
+              e,
+              {
+                className: a["ox-kpi-card-loading-chart"],
+                dataTestid: `${d}-loading-chart`
+              }
+            ) : h && /* @__PURE__ */ o(
+              "div",
+              {
+                className: a["ox-kpi-card-chart"],
+                "data-slot": "chart",
+                "data-testid": `${d}-chart`,
+                children: l
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { className: a["ox-kpi-card-body"], children: [
+            /* @__PURE__ */ o("div", { className: a["ox-kpi-card-value-row"], children: i ? /* @__PURE__ */ o(
+              e,
+              {
+                className: a["ox-kpi-card-loading-value"],
+                dataTestid: `${d}-loading-value`
+              }
+            ) : /* @__PURE__ */ r(k, { children: [
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  className: a["ox-kpi-card-value"],
+                  "data-slot": "value",
+                  "data-testid": `${d}-value`,
+                  children: f
+                }
+              ),
+              n && /* @__PURE__ */ o(
+                "span",
+                {
+                  className: a["ox-kpi-card-trend"],
+                  "data-slot": "trend",
+                  "data-testid": `${d}-trend`,
+                  children: n
+                }
+              )
+            ] }) }),
+            i && x ? /* @__PURE__ */ o(
+              e,
+              {
+                className: a["ox-kpi-card-loading-description"],
+                dataTestid: `${d}-loading-description`
+              }
+            ) : x && /* @__PURE__ */ o(
+              "p",
+              {
+                className: a["ox-kpi-card-description"],
+                "data-slot": "description",
+                "data-testid": `${d}-description`,
+                children: p
+              }
+            )
+          ] }),
+          g && /* @__PURE__ */ r(k, { children: [
+            /* @__PURE__ */ o(
+              "div",
+              {
+                className: a["ox-kpi-card-divider"],
+                "aria-hidden": "true",
+                "data-testid": `${d}-divider`
+              }
+            ),
+            i ? /* @__PURE__ */ o(
+              e,
+              {
+                className: a["ox-kpi-card-loading-footer"],
+                dataTestid: `${d}-loading-footer`
+              }
+            ) : /* @__PURE__ */ o(
+              "div",
+              {
+                className: a["ox-kpi-card-footer"],
+                "data-slot": "footer",
+                "data-testid": `${d}-footer`,
+                children: m
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+B.displayName = "OxKpiCard";
+export {
+  B as KpiCard
+};

package/dist/Data/KpiCard/KpiCard.module.css.js

@@ -0,0 +1,26 @@
+const i = {
+  "ox-kpi-card": "_ox-kpi-card_13kmn_2",
+  "ox-kpi-card--md": "_ox-kpi-card--md_13kmn_2",
+  "ox-kpi-card--sm": "_ox-kpi-card--sm_13kmn_2",
+  "ox-kpi-card-header": "_ox-kpi-card-header_13kmn_2",
+  "ox-kpi-card-identity": "_ox-kpi-card-identity_13kmn_2",
+  "ox-kpi-card-icon-box": "_ox-kpi-card-icon-box_13kmn_2",
+  "ox-kpi-card-title": "_ox-kpi-card-title_13kmn_2",
+  "ox-kpi-card-chart": "_ox-kpi-card-chart_13kmn_2",
+  "ox-kpi-card-body": "_ox-kpi-card-body_13kmn_2",
+  "ox-kpi-card-value-row": "_ox-kpi-card-value-row_13kmn_2",
+  "ox-kpi-card-value": "_ox-kpi-card-value_13kmn_2",
+  "ox-kpi-card-trend": "_ox-kpi-card-trend_13kmn_2",
+  "ox-kpi-card-description": "_ox-kpi-card-description_13kmn_2",
+  "ox-kpi-card-divider": "_ox-kpi-card-divider_13kmn_2",
+  "ox-kpi-card-footer": "_ox-kpi-card-footer_13kmn_2",
+  "ox-kpi-card-loading-icon": "_ox-kpi-card-loading-icon_13kmn_2",
+  "ox-kpi-card-loading-title": "_ox-kpi-card-loading-title_13kmn_2",
+  "ox-kpi-card-loading-value": "_ox-kpi-card-loading-value_13kmn_2",
+  "ox-kpi-card-loading-description": "_ox-kpi-card-loading-description_13kmn_2",
+  "ox-kpi-card-loading-chart": "_ox-kpi-card-loading-chart_13kmn_2",
+  "ox-kpi-card-loading-footer": "_ox-kpi-card-loading-footer_13kmn_2"
+};
+export {
+  i as default
+};

package/dist/Data/KpiCard/index.js

@@ -0,0 +1,15 @@
+import { cva as a } from "class-variance-authority";
+const r = a("", {
+  variants: {
+    size: {
+      md: "ox-kpi-card--md",
+      sm: "ox-kpi-card--sm"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  r as kpiCardVariants
+};