@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Forms/Inputs/MonthPicker/MonthPicker.js

@@ -0,0 +1,122 @@
+import { jsxs as T, jsx as t } from "react/jsx-runtime";
+import { IconChevronLeft as E } from "@sesame/orxata-icons/IconChevronLeft";
+import { IconChevronRight as F } from "@sesame/orxata-icons/IconChevronRight";
+import { Icon as b } from "@sesame/orxata-icons/react";
+import { useState as h, useEffect as R } from "react";
+import { Popover as U } from "../../../Feedback/Popover/Popover.js";
+import { PopoverContent as q } from "../../../Feedback/Popover/PopoverContent.js";
+import { cn as z } from "../../../lib/utils.js";
+import { useCalendarLocale as B } from "../Calendar/useCalendarLocale.js";
+import { DatePickerTrigger as C } from "../DatePicker/DatePickerTrigger.js";
+import { formatMonthYearShort as d } from "../DatePicker/format.js";
+import { monthOf as H } from "../DatePicker/month.js";
+import n from "./MonthPicker.module.css.js";
+import { MonthPickerPanel as J } from "./MonthPickerPanel.js";
+import { isMonthDisabled as K } from "./monthGrid.js";
+const Q = ({
+  className: g,
+  value: e,
+  defaultValue: D,
+  onValueChange: m,
+  visibleYear: k,
+  onVisibleYearChange: p,
+  constraints: P,
+  showArrows: M = !1,
+  disabled: l = !1,
+  children: x,
+  icon: $,
+  dataTestid: c
+}) => {
+  const { locale: a } = B(), s = e !== void 0 && m !== void 0, [u, v] = h(D ?? e), r = s ? e : u;
+  R(() => {
+    !s && e !== void 0 && v(e);
+  }, [s, e]);
+  const [w, O] = h(!1), y = () => (r ?? /* @__PURE__ */ new Date()).getFullYear(), [I, N] = h(y), Y = k ?? I, j = (o) => {
+    o && k === void 0 && N(y()), O(o);
+  }, G = (o) => {
+    N(o), p == null || p(o);
+  }, f = (o) => {
+    s || v(o), m == null || m(o);
+  }, L = (o) => {
+    f(o), O(!1);
+  }, i = (o) => H(r ?? /* @__PURE__ */ new Date(), o), S = (o) => !K(i(o), P);
+  return /* @__PURE__ */ T("div", { className: z(n.oxMonthPicker, g), children: [
+    M && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: n.oxMonthPickerStep,
+        "aria-label": d(a, i(-1)),
+        disabled: l || !S(-1),
+        "data-testid": `${c}-prev-month`,
+        onClick: () => f(i(-1)),
+        children: /* @__PURE__ */ t(
+          b,
+          {
+            icon: E,
+            className: n.oxMonthPickerStepGlyph
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      U,
+      {
+        open: w,
+        onOpenChange: j,
+        trigger: /* @__PURE__ */ t(
+          C,
+          {
+            className: n.oxMonthPickerTrigger,
+            empty: !r,
+            disabled: l,
+            icon: $,
+            dataTestid: c,
+            children: x ? x({ value: r }) : r && d(a, r)
+          }
+        ),
+        children: /* @__PURE__ */ t(
+          q,
+          {
+            align: "start",
+            sideOffset: 8,
+            dataTestid: `${c}-popover`,
+            children: /* @__PURE__ */ t(
+              J,
+              {
+                value: r,
+                onValueChange: L,
+                visibleYear: Y,
+                onVisibleYearChange: G,
+                constraints: P,
+                dataTestid: `${c}-panel`
+              }
+            )
+          }
+        )
+      }
+    ),
+    M && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: n.oxMonthPickerStep,
+        "aria-label": d(a, i(1)),
+        disabled: l || !S(1),
+        "data-testid": `${c}-next-month`,
+        onClick: () => f(i(1)),
+        children: /* @__PURE__ */ t(
+          b,
+          {
+            icon: F,
+            className: n.oxMonthPickerStepGlyph
+          }
+        )
+      }
+    )
+  ] });
+};
+Q.displayName = "OxMonthPicker";
+export {
+  Q as MonthPicker
+};

package/dist/Forms/Inputs/MonthPicker/MonthPicker.module.css.js

@@ -0,0 +1,13 @@
+const o = "_oxMonthPicker_1fs9r_2", t = "_oxMonthPickerTrigger_1fs9r_2", e = "_oxMonthPickerStep_1fs9r_2", r = "_oxMonthPickerStepGlyph_1fs9r_2", c = {
+  oxMonthPicker: o,
+  oxMonthPickerTrigger: t,
+  oxMonthPickerStep: e,
+  oxMonthPickerStepGlyph: r
+};
+export {
+  c as default,
+  o as oxMonthPicker,
+  e as oxMonthPickerStep,
+  r as oxMonthPickerStepGlyph,
+  t as oxMonthPickerTrigger
+};

package/dist/Forms/Inputs/MonthPicker/MonthPickerPanel.d.ts

@@ -0,0 +1,39 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+export interface MonthPickerPanelProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** The year on screen. The months grid shows it; the years grid shows its page. */
+    visibleYear: number;
+    /** The year on screen, whenever paging or the cursor leaves the one before. */
+    onVisibleYearChange?: (year: number) => void;
+    /**
+     * The chosen month, as a `Date` on its first day at local midnight —
+     * `OxCalendar`'s contract for a day, one unit up. Controlled.
+     */
+    value?: Date;
+    /** The initially chosen month, for the uncontrolled case. */
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    /** What can be picked, and where paging stops. */
+    constraints?: CalendarConstraints;
+    dataTestid: string;
+}
+/**
+ * The board's `Calendar / Months` (node `2397:3065`): a 3×4 grid of months,
+ * and the same grid of years behind the header. Mirrors `@sesame/orxata-core`
+ * MonthPickerPanel.
+ *
+ * It is `OxCalendar`'s opposite number one step up — a month is the unit here,
+ * so there is no week, no weekday row and nothing for Radix's calendar
+ * primitives to do. It shares the vocabulary: the same `CalendarConstraints`,
+ * the same `Intl`-only formatting.
+ *
+ * Like `OxCalendar` it draws no surface of its own — the fill, the border, the
+ * radius and the shadow belong to whatever it is portalled into, which for
+ * `OxMonthPicker` is `OxPopoverContent`'s `Surface`.
+ *
+ * It ships no strings: the cells, the header and the arrows' names are `Intl`'s
+ * rather than a phrase we would have to translate.
+ */
+export declare const MonthPickerPanel: {
+    ({ className, visibleYear, onVisibleYearChange, value, defaultValue, onValueChange, constraints, dataTestid, }: MonthPickerPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Forms/Inputs/MonthPicker/MonthPickerPanel.js

@@ -0,0 +1,183 @@
+import { jsxs as L, jsx as l } from "react/jsx-runtime";
+import { IconChevronLeft as V } from "@sesame/orxata-icons/IconChevronLeft";
+import { IconChevronRight as tt } from "@sesame/orxata-icons/IconChevronRight";
+import { Icon as j } from "@sesame/orxata-icons/react";
+import { useState as k, useEffect as P, useRef as z, useCallback as et } from "react";
+import { IconButton as H } from "../../../Button/IconButton/IconButton.js";
+import { cn as ot } from "../../../lib/utils.js";
+import { useCalendarLocale as rt } from "../Calendar/useCalendarLocale.js";
+import { formatYear as w, formatMonthShort as nt, formatYearRange as st } from "../DatePicker/format.js";
+import c from "./MonthPickerPanel.module.css.js";
+import { yearsOfPage as D, isYearDisabled as q, monthsOfYear as B, isMonthDisabled as K, yearPageStart as U, moveWithin as at, YEAR_PAGE_STEP as W, YEARS_IN_PAGE as ct, MONTHS_IN_YEAR as J } from "./monthGrid.js";
+const lt = ({
+  className: Q,
+  visibleYear: r,
+  onVisibleYearChange: a,
+  value: d,
+  defaultValue: X,
+  onValueChange: i,
+  constraints: p,
+  dataTestid: u
+}) => {
+  const { locale: m } = rt(), g = d !== void 0 && i !== void 0, [Z, v] = k(X ?? d), n = g ? d : Z;
+  P(() => {
+    !g && d !== void 0 && v(d);
+  }, [g, d]);
+  const [s, I] = k("months"), [h, M] = k(
+    () => n && n.getFullYear() === r ? new Date(r, n.getMonth(), 1) : new Date(r, 0, 1)
+  ), S = z(null), x = z(!1), F = /* @__PURE__ */ new Date(), N = s === "years" ? D(r).map((t) => ({
+    value: t,
+    label: w(m, t),
+    testid: `year-${t.getFullYear()}`,
+    selected: (n == null ? void 0 : n.getFullYear()) === t.getFullYear(),
+    current: F.getFullYear() === t.getFullYear(),
+    disabled: q(t, p)
+  })) : B(r).map((t) => ({
+    value: t,
+    label: nt(m, t),
+    /* Numeric, for the reason `Calendar`'s own ids give: a name taken from
+       `Intl` becomes `month-oct` the moment the locale changes. */
+    testid: `month-${String(t.getMonth() + 1).padStart(2, "0")}`,
+    selected: (n == null ? void 0 : n.getFullYear()) === t.getFullYear() && (n == null ? void 0 : n.getMonth()) === t.getMonth(),
+    current: F.getFullYear() === t.getFullYear() && F.getMonth() === t.getMonth(),
+    disabled: K(t, p)
+  })), E = s === "years" ? N.findIndex(
+    (t) => t.value.getFullYear() === h.getFullYear()
+  ) : N.findIndex((t) => t.value.getTime() === h.getTime()), R = E === -1 ? 0 : E, $ = (t) => {
+    const e = D(t), o = e[0], T = e[e.length - 1];
+    return o && T ? st(m, o, T) : "";
+  }, Y = s === "months" ? w(m, new Date(r, 0, 1)) : $(r), f = (t) => r + t * (s === "months" ? 1 : W), _ = (t) => s === "months" ? w(m, new Date(f(t), 0, 1)) : $(f(t)), A = (t) => {
+    const e = f(t);
+    return s === "months" ? !B(e).every((o) => K(o, p)) : !D(e).every(
+      (o) => q(o, p)
+    );
+  }, G = (t, e) => {
+    const o = new Date(t, e, 1);
+    M(o), o.getFullYear() !== r && (a == null || a(o.getFullYear()));
+  }, O = (t) => {
+    const e = s === "months" ? f(t) : U(f(t));
+    a == null || a(e), M((o) => new Date(e, o.getMonth(), 1));
+  }, b = (t) => {
+    if (s === "years") {
+      I("months"), a == null || a(t.getFullYear()), M((e) => new Date(t.getFullYear(), e.getMonth(), 1));
+      return;
+    }
+    g || v(t), i == null || i(t);
+  }, C = (t) => {
+    const e = s === "years", o = at(t.key, R, {
+      cells: e ? ct : J,
+      pageStep: e ? W : J
+    });
+    if (o !== null) {
+      if (t.preventDefault(), x.current = !0, e) {
+        G(U(r) + o, h.getMonth());
+        return;
+      }
+      G(r, o);
+    }
+  }, y = et(() => {
+    var t, e;
+    (e = (t = S.current) == null ? void 0 : t.querySelector('[tabindex="0"]')) == null || e.focus();
+  }, []);
+  return P(() => {
+    x.current = !1, y();
+  }, [y, s]), P(() => {
+    x.current && (x.current = !1, y());
+  }, [h, y]), P(() => {
+    M(
+      (t) => t.getFullYear() === r ? t : new Date(r, t.getMonth(), 1)
+    );
+  }, [r]), /* @__PURE__ */ L(
+    "div",
+    {
+      className: ot(c.oxMonthPickerPanel, Q),
+      "data-slot": "month-picker-panel",
+      "data-view": s,
+      "data-testid": u,
+      children: [
+        /* @__PURE__ */ L("div", { className: c.oxMonthPickerHeader, children: [
+          /* @__PURE__ */ l(
+            H,
+            {
+              className: c.oxMonthPickerNav,
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              "aria-label": _(-1),
+              disabled: !A(-1),
+              "data-testid": `${u}-prev`,
+              onClick: () => O(-1),
+              children: /* @__PURE__ */ l(
+                j,
+                {
+                  icon: V,
+                  className: c.oxMonthPickerNavGlyph
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              className: c.oxMonthPickerTitle,
+              "aria-pressed": s === "years",
+              "data-testid": `${u}-title`,
+              onClick: () => I((t) => t === "months" ? "years" : "months"),
+              children: Y
+            }
+          ),
+          /* @__PURE__ */ l(
+            H,
+            {
+              className: c.oxMonthPickerNav,
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              "aria-label": _(1),
+              disabled: !A(1),
+              "data-testid": `${u}-next`,
+              onClick: () => O(1),
+              children: /* @__PURE__ */ l(
+                j,
+                {
+                  icon: tt,
+                  className: c.oxMonthPickerNavGlyph
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            ref: S,
+            className: c.oxMonthPickerGrid,
+            onKeyDown: C,
+            children: N.map((t, e) => /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: c.oxMonthPickerCell,
+                tabIndex: e === R ? 0 : -1,
+                disabled: t.disabled,
+                "aria-pressed": t.selected,
+                "aria-current": t.current ? "date" : void 0,
+                "data-selected": t.selected || void 0,
+                "data-current": t.current || void 0,
+                "data-testid": `${u}-${t.testid}`,
+                onClick: () => b(t.value),
+                children: t.label
+              },
+              t.value.getTime()
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+lt.displayName = "OxMonthPickerPanel";
+export {
+  lt as MonthPickerPanel
+};

package/dist/Forms/Inputs/MonthPicker/MonthPickerPanel.module.css.js

@@ -0,0 +1,19 @@
+const o = "_oxMonthPickerPanel_jfd6x_2", e = "_oxMonthPickerHeader_jfd6x_2", t = "_oxMonthPickerNav_jfd6x_2", n = "_oxMonthPickerNavGlyph_jfd6x_2", c = "_oxMonthPickerTitle_jfd6x_2", x = "_oxMonthPickerGrid_jfd6x_2", r = "_oxMonthPickerCell_jfd6x_2", i = {
+  oxMonthPickerPanel: o,
+  oxMonthPickerHeader: e,
+  oxMonthPickerNav: t,
+  oxMonthPickerNavGlyph: n,
+  oxMonthPickerTitle: c,
+  oxMonthPickerGrid: x,
+  oxMonthPickerCell: r
+};
+export {
+  i as default,
+  r as oxMonthPickerCell,
+  x as oxMonthPickerGrid,
+  e as oxMonthPickerHeader,
+  t as oxMonthPickerNav,
+  n as oxMonthPickerNavGlyph,
+  o as oxMonthPickerPanel,
+  c as oxMonthPickerTitle
+};

package/dist/Forms/Inputs/MonthPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { MonthPicker, type MonthPickerProps } from './MonthPicker.tsx';
+export { MonthPickerPanel, type MonthPickerPanelProps, } from './MonthPickerPanel.tsx';

package/dist/Forms/Inputs/MonthPicker/monthGrid.d.ts

@@ -0,0 +1,45 @@
+import { CalendarConstraints } from '../Calendar/constraints.ts';
+/**
+ * The arithmetic behind the month panel: which cells a page holds, which of
+ * them can be picked, and where a key moves the cursor. Mirrors
+ * `@sesame/orxata-core` `MonthPicker/monthGrid.ts`.
+ *
+ * Framework-free and duplicated verbatim, the way `month.ts` and `format.ts`
+ * already are — the panel is a grid in both packages, and a keyboard that
+ * disagrees across the port is the drift the parity rules cannot see.
+ */
+/** Three columns by four rows, which is how the board draws both views. */
+export declare const GRID_COLUMNS = 3;
+export declare const MONTHS_IN_YEAR = 12;
+export declare const YEARS_IN_PAGE = 12;
+/**
+ * A page is the decade the year falls in, drawn twelve cells long (node
+ * `2397:3027`). Decade-anchored and not tiled by twelve: tiling makes the page
+ * depend on how the year was arrived at, and the two cells of overlap it costs
+ * are cheaper than a year with two possible grids.
+ */
+export declare const YEAR_PAGE_STEP = 10;
+export declare const yearPageStart: (year: number) => number;
+export declare const monthsOfYear: (year: number) => Date[];
+export declare const yearsOfPage: (year: number) => Date[];
+/**
+ * Bounds are read by month, the way `Calendar` reads them.
+ *
+ * The predicate is documented as per-day because that is what a calendar
+ * needs; there is no per-month one to add without growing
+ * `CalendarConstraints` a field only this component would read.
+ */
+export declare const isMonthDisabled: (month: Date, constraints?: CalendarConstraints) => boolean;
+export declare const isYearDisabled: (year: Date, constraints?: CalendarConstraints) => boolean;
+/**
+ * Where a key puts the cursor, as an index.
+ *
+ * Unclamped on purpose: the caller turns the index back into a date with
+ * `new Date(year, index, 1)`, so the wrap past either end is free rather than
+ * an edge case written down twice. `pageStep` is what PageUp/PageDown move by,
+ * which is not `cells`.
+ */
+export declare const moveWithin: (key: string, index: number, { cells, pageStep }: {
+    cells: number;
+    pageStep: number;
+}) => number | null;

package/dist/Forms/Inputs/MonthPicker/monthGrid.js

@@ -0,0 +1,53 @@
+import { monthIndex as o } from "../DatePicker/month.js";
+const c = 3, u = 12, f = 12, a = 10, A = (r) => r - (r % a + a) % a, l = (r) => Array.from(
+  { length: u },
+  (e, t) => new Date(r, t, 1)
+), g = (r) => {
+  const e = A(r);
+  return Array.from(
+    { length: f },
+    (t, n) => new Date(e + n, 0, 1)
+  );
+}, w = (r, e) => {
+  if (!e) return !1;
+  const { from: t, to: n, isDisabled: s } = e;
+  return t && o(r) < o(t) || n && o(r) > o(n) ? !0 : (s == null ? void 0 : s(r)) ?? !1;
+}, m = (r, e) => l(r.getFullYear()).every(
+  (t) => w(t, e)
+), E = (r, e, { cells: t, pageStep: n }) => {
+  switch (r) {
+    case "ArrowLeft":
+      return e - 1;
+    case "ArrowRight":
+      return e + 1;
+    case "ArrowUp":
+      return e - c;
+    case "ArrowDown":
+      return e + c;
+    /* The whole grid, not the row the cursor is on. Twelve cells is one screen
+       and one concept — the year, or the decade — so "the end" reading as
+       December rather than as September is the less surprising of the two. */
+    case "Home":
+      return 0;
+    case "End":
+      return t - 1;
+    case "PageUp":
+      return e - n;
+    case "PageDown":
+      return e + n;
+    default:
+      return null;
+  }
+};
+export {
+  c as GRID_COLUMNS,
+  u as MONTHS_IN_YEAR,
+  f as YEARS_IN_PAGE,
+  a as YEAR_PAGE_STEP,
+  w as isMonthDisabled,
+  m as isYearDisabled,
+  l as monthsOfYear,
+  E as moveWithin,
+  A as yearPageStart,
+  g as yearsOfPage
+};

package/dist/Forms/Inputs/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as R } from "react/jsx-runtime";
+import { forwardRef as A, useMemo as N, useState as n, useEffect as i } from "react";
+import { moduleClasses as c } from "../../../lib/cssModules.js";
+import { cn as b } from "../../../lib/utils.js";
+import { useFieldControlGroup as g } from "../../Field/useFieldGroup.js";
+import d from "./RichTextEditor.module.css.js";
+import { missingTipTapError as j } from "./devChecks.js";
+import { useRichTextAdapter as w, isRichTextAdapter as m } from "./useRichTextAdapter.js";
+import { RichTextAdapterContext as y } from "./useRichTextToolbar.js";
+import { RichText as G } from "../../../Display/RichText/RichText.js";
+const P = A(
+  ({ className: p, editor: a, children: l, ...f }, u) => {
+    const x = g(), t = a ?? void 0, h = w(t), r = N(
+      () => !t || m(t) ? void 0 : t,
+      [t]
+    ), E = !t || !m(t), [s, T] = n(null), [v, S] = n({});
+    return i(() => {
+      let o = !0;
+      return import("@tiptap/react").then(
+        (C) => {
+          o && T(() => C.EditorContent);
+        },
+        () => {
+          o && console.error(j("@tiptap/react"));
+        }
+      ), () => {
+        o = !1;
+      };
+    }, []), i(() => {
+    }, []), i(() => {
+    }, [r, v]), /* @__PURE__ */ e(y.Provider, { value: h, children: /* @__PURE__ */ R(
+      "div",
+      {
+        ref: u,
+        role: "group",
+        "data-slot": "controller",
+        className: b(
+          c(d, "ox-rich-text-editor"),
+          p
+        ),
+        ...x,
+        ...f,
+        children: [
+          l,
+          E && /* @__PURE__ */ e(
+            G,
+            {
+              className: c(d, "ox-rich-text-editor-surface"),
+              children: s && r && /* @__PURE__ */ e(s, { editor: r })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+P.displayName = "OxRichTextEditor";
+export {
+  P as RichTextEditor
+};

package/dist/Forms/Inputs/RichTextEditor/RichTextEditor.module.css.js

@@ -0,0 +1,10 @@
+const r = "_ProseMirror_nmtuq_2", t = {
+  "ox-rich-text-editor": "_ox-rich-text-editor_nmtuq_2",
+  "ox-rich-text-editor-surface": "_ox-rich-text-editor-surface_nmtuq_2",
+  ProseMirror: r,
+  "is-editor-empty": "_is-editor-empty_nmtuq_2"
+};
+export {
+  r as ProseMirror,
+  t as default
+};

package/dist/Forms/Inputs/RichTextEditor/RichTextToolbar/RichTextToolbar.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Toolbar as i } from "@radix-ui/react-toolbar";
+import { forwardRef as a } from "react";
+import { moduleClasses as s } from "../../../../lib/cssModules.js";
+import { cn as l } from "../../../../lib/utils.js";
+import { useRichTextToolbar as f } from "../useRichTextToolbar.js";
+import p from "./RichTextToolbar.module.css.js";
+const x = a(({ className: o, children: r, ...m }, t) => (f(), /* @__PURE__ */ e(
+  i,
+  {
+    ref: t,
+    className: l(s(p, "ox-rich-text-toolbar"), o),
+    ...m,
+    children: r
+  }
+)));
+x.displayName = "OxRichTextToolbar";
+export {
+  x as RichTextToolbar
+};

package/dist/Forms/Inputs/RichTextEditor/RichTextToolbar/RichTextToolbar.module.css.js

@@ -0,0 +1,6 @@
+const t = {
+  "ox-rich-text-toolbar": "_ox-rich-text-toolbar_3q9el_2"
+};
+export {
+  t as default
+};

package/dist/Forms/Inputs/RichTextEditor/RichTextToolbarButton/RichTextToolbarButton.js

@@ -0,0 +1,38 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ToolbarButton as u } from "@radix-ui/react-toolbar";
+import { Icon as f } from "@sesame/orxata-icons/react";
+import { forwardRef as b } from "react";
+import { IconButton as T } from "../../../../Button/IconButton/IconButton.js";
+import { useTranslate as x } from "../../../../Locale/useTranslate.js";
+import { moduleClasses as h } from "../../../../lib/cssModules.js";
+import { cn as d } from "../../../../lib/utils.js";
+import { RICH_TEXT_COMMANDS as C } from "../commands.js";
+import { useRichTextToolbar as R } from "../useRichTextToolbar.js";
+import B from "./RichTextToolbarButton.module.css.js";
+const g = b(({ className: s, command: o, ...l }, a) => {
+  var i;
+  const t = R(), n = x(), e = C[o], c = n(e.label), p = t.isActive(o), m = t.can(o);
+  return ((i = t.supports) == null ? void 0 : i.call(t, o)) ?? !0 ? /* @__PURE__ */ r(u, { asChild: !0, disabled: !m, children: /* @__PURE__ */ r(
+    T,
+    {
+      ref: a,
+      type: "button",
+      variant: "ghost",
+      size: "xs",
+      "aria-label": c,
+      "aria-pressed": p,
+      "data-command": o,
+      className: d(
+        h(B, "ox-rich-text-toolbar-button"),
+        s
+      ),
+      onClick: () => t.toggle(o),
+      ...l,
+      children: /* @__PURE__ */ r(f, { icon: e.icon })
+    }
+  ) }) : null;
+});
+g.displayName = "OxRichTextToolbarButton";
+export {
+  g as RichTextToolbarButton
+};

package/dist/Forms/Inputs/RichTextEditor/RichTextToolbarButton/RichTextToolbarButton.module.css.js

@@ -0,0 +1,6 @@
+const t = {
+  "ox-rich-text-toolbar-button": "_ox-rich-text-toolbar-button_nvm64_2"
+};
+export {
+  t as default
+};