@tpc-mare/mare-ui-components-react 0.1.26 → 0.1.29

package/dist/keyboard-commands/useKeyboardCommands.d.ts

@@ -0,0 +1,27 @@
+import { KeyboardCommandTarget, ScrollAreaOptions, KeyboardCommand, KbdHintContext, KbdHintEntry } from '@tpc-development/mare-ui-components-core/keyboard-commands';
+export interface UseKeyboardCommandsOptions {
+    commands?: KeyboardCommand[];
+    hintContext?: KbdHintContext;
+    hintCommands?: KbdHintEntry[];
+    depth?: number;
+    /** Default: true. */
+    visible?: boolean;
+    autoFocus?: boolean;
+    scrollable?: boolean | ScrollAreaOptions;
+    ariaAttributes?: Record<string, string>;
+    capture?: boolean;
+    triggerOn?: 'keydown' | 'keyup' | 'both';
+}
+/**
+ * React adapter for the keyboard-commands engine — same core (chord
+ * matching, ARIA injection, scroll handling, overlay depth-guard) as the Vue
+ * `useKeyboardCommands` composable, wired with hooks instead of Vue
+ * reactivity. `targetRef` is a plain ref object (window, or an element ref
+ * attached via JSX `ref={...}`); bind/rebind happens once on mount.
+ */
+export declare function useKeyboardCommands(targetRef: {
+    current: KeyboardCommandTarget | null;
+}, options?: UseKeyboardCommandsOptions): {
+    commandGroupId: string;
+    isActive: boolean;
+};

package/dist/keyboard-commands/useKeyboardNavGrid.d.ts

@@ -0,0 +1,19 @@
+export interface NavGridCell {
+    row: number;
+    col: number;
+}
+export interface UseKeyboardNavGridOptions {
+    rows: number;
+    cols: number;
+    depth?: number;
+    wrap?: boolean;
+    onSelect?: (cell: NavGridCell) => void;
+    onActivate?: (cell: NavGridCell) => void;
+}
+export interface UseKeyboardNavGridReturn {
+    focused: NavGridCell;
+    containerRef: (node: HTMLElement | null) => void;
+    focus: (cell: NavGridCell, instant?: boolean) => void;
+    isFocused: (row: number, col: number) => boolean;
+}
+export declare function useKeyboardNavGrid(options: UseKeyboardNavGridOptions): UseKeyboardNavGridReturn;

package/dist/keyboard-commands/useKeyboardNavList.d.ts

@@ -0,0 +1,17 @@
+export interface UseKeyboardNavListOptions<T> {
+    items: readonly T[];
+    depth?: number;
+    wrap?: boolean;
+    onSelect?: (item: T, index: number) => void;
+    onActivate?: (item: T, index: number) => void;
+}
+export interface UseKeyboardNavListReturn<T> {
+    focusedIndex: number;
+    focusedItem: T | null;
+    containerRef: (node: HTMLElement | null) => void;
+    focus: (index: number) => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    clearFocus: () => void;
+}
+export declare function useKeyboardNavList<T>(options: UseKeyboardNavListOptions<T>): UseKeyboardNavListReturn<T>;

package/dist/keyboard-commands/useKeyboardScope.d.ts

@@ -0,0 +1,20 @@
+import { onScopeDepthChange, getActiveDepth, ScopeDepth } from '@tpc-development/mare-ui-components-core/keyboard-commands';
+export { onScopeDepthChange, getActiveDepth, type ScopeDepth };
+export interface UseKeyboardScopeOptions {
+    /** Higher number = closer to the user (like z-index). Default: 1. Base page = 0. */
+    depth?: ScopeDepth;
+    /** When false, this scope is removed from the global stack. Default: true. */
+    visible?: boolean;
+}
+/**
+ * Registers/unregisters this component's keyboard scope with the global
+ * stack shared across both the Vue and React adapters. Use this inside
+ * overlay components so keyboard commands only fire when the overlay is the
+ * topmost one.
+ *
+ * @example
+ * const { scopeId } = useKeyboardScope({ visible: isOpen, depth: 1 });
+ */
+export declare function useKeyboardScope(options?: UseKeyboardScopeOptions): {
+    scopeId: string;
+};

package/dist/message/index.js

@@ -1,4 +1,4 @@
-import { M as a } from "../shared/Message-BNsFuQU1.js";
+import { M as a } from "../shared/Message-CQUdM9rR.js";
 export {
   a as Message
 };

package/dist/multi-select/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../shared/MultiSelect-Dowp0_FX.js";
+import { M as l } from "../shared/MultiSelect-DlaYWcPo.js";
 export {
   l as MultiSelect
 };

package/dist/overlay-badge/index.js

@@ -1,4 +1,4 @@
-import { O as r } from "../shared/OverlayBadge-DLskqll7.js";
+import { O as r } from "../shared/OverlayBadge-Dkosm3Il.js";
 export {
   r as OverlayBadge
 };

package/dist/paginator/index.js

@@ -1,4 +1,4 @@
-import { P as r } from "../shared/Paginator-DxZdCXSC.js";
+import { P as r } from "../shared/Paginator-QTDpAJ-N.js";
 export {
   r as Paginator
 };

package/dist/password/index.js

@@ -1,4 +1,4 @@
-import { P as a, a as r } from "../shared/Password-BMKy8dAy.js";
+import { P as a, a as r } from "../shared/Password-D4PRaleH.js";
 export {
   a as Password,
   r as PasswordFooterItem

package/dist/radio-group/index.js

@@ -1,4 +1,4 @@
-import { R as a } from "../shared/RadioGroup-lw27DCoV.js";
+import { R as a } from "../shared/RadioGroup-B8CXU8-l.js";
 export {
   a as RadioGroup
 };

package/dist/search-field/index.js

@@ -1,4 +1,4 @@
-import { S as a } from "../shared/SearchField-DjJHDaR4.js";
+import { S as a } from "../shared/SearchField-DIsFhJ22.js";
 export {
   a as SearchField
 };

package/dist/segmented-control/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../shared/SegmentedControl-Ct5ZLXpN.js";
+import { S as r } from "../shared/SegmentedControl-BfE3jNM6.js";
 export {
   r as SegmentedControl
 };

package/dist/select-field/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../shared/SelectField-B-g52vHx.js";
+import { S as o } from "../shared/SelectField-CcnbnPEi.js";
 export {
   o as SelectField
 };

package/dist/shared/{Avatar-D3QlO3Tz.js → Avatar-BpJDY1wm.js}

@@ -1,51 +1,53 @@
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import { Avatar as m } from "@ark-ui/react/avatar";
-const s = (a) => a.normalize("NFD").replaceAll(/[̀-ͯ]/g, ""), d = (a) => {
+import { o as n } from "./index-ByQ37VXf.js";
+const c = ["small", "medium"], s = (a) => a.normalize("NFD").replaceAll(/[̀-ͯ]/g, ""), u = (a) => {
   if (!a) return "";
   const e = a.trim().split(/\s+/).filter(Boolean);
   if (e.length === 1)
     return s(e[0].slice(0, 2)).toUpperCase();
-  const t = s(e[0][0]), r = s(e.at(-1)?.[0] ?? "");
-  return (t + r).toUpperCase();
-}, n = `
+  const r = s(e[0][0]), t = s(e.at(-1)?.[0] ?? "");
+  return (r + t).toUpperCase();
+}, p = `
 	mare:inline-flex mare:items-center mare:justify-center
 	mare:rounded-full mare:bg-accent-weak mare:text-accent
 
 	mare:data-size-small:h-8 mare:data-size-small:w-8 mare:data-size-small:text-base
 	mare:data-size-medium:h-10 mare:data-size-medium:w-10 mare:data-size-medium:text-base
-`, c = `
+`, f = `
 	mare:h-full mare:w-full mare:rounded-full mare:object-cover
-`, u = `
+`, z = `
 	mare:rounded-full
 	mare:data-size-small:tpc-typography-body-s
 	mare:data-size-medium:tpc-typography-body-m
 `;
-function z({
+function y({
   image: a,
   alt: e = "",
-  label: t = "",
-  size: r = "small",
-  id: i
+  label: r = "",
+  size: t = "small",
+  id: o
 }) {
-  return /* @__PURE__ */ o(
+  const l = n(t, c, "small");
+  return /* @__PURE__ */ d(
     m.Root,
     {
-      id: i,
-      className: n,
-      "data-size": r,
+      id: o,
+      className: p,
+      "data-size": l,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ i(
           m.Fallback,
           {
-            className: u,
-            "data-size": r,
-            children: d(t)
+            className: z,
+            "data-size": l,
+            children: u(r)
           }
         ),
-        a && /* @__PURE__ */ l(
+        a && /* @__PURE__ */ i(
           m.Image,
           {
-            className: c,
+            className: f,
             src: a,
             alt: e
           }
@@ -55,5 +57,5 @@ function z({
   );
 }
 export {
-  z as A
+  y as A
 };

package/dist/shared/{Badge-WC6my4Aw.js → Badge-CGotZzok.js}

@@ -1,5 +1,6 @@
-import { jsxs as i } from "react/jsx-runtime";
-const s = `
+import { jsxs as s } from "react/jsx-runtime";
+import { o as m } from "./index-ByQ37VXf.js";
+const c = `
 	mare:rounded-full mare:inline-flex mare:justify-center mare:items-center
 	mare:text-center mare:py-0 mare:tpc-typography-label-xs
 	mare:h-2 mare:min-w-2 mare:has-value:h-4 mare:has-value:min-w-4
@@ -9,18 +10,24 @@ const s = `
 	mare:data-severity-warning:bg-warning mare:data-severity-warning:text-on-warning
 	mare:data-severity-highlight:bg-highlight mare:data-severity-highlight:text-on-accent
 	mare:data-severity-positive:bg-positive mare:data-severity-positive:text-on-positive
-`;
-function c({
+`, o = [
+  "accent",
+  "danger",
+  "warning",
+  "highlight",
+  "positive"
+];
+function h({
   severity: r = "accent",
   icon: e,
   children: a
 }) {
-  const t = !!e, n = t || a != null;
-  return /* @__PURE__ */ i(
+  const i = m(r, o, "accent"), t = !!e, n = t || a != null;
+  return /* @__PURE__ */ s(
     "span",
     {
-      className: s,
-      "data-severity": r,
+      className: c,
+      "data-severity": i,
       "data-has-value": n ? "true" : void 0,
       "data-has-icon": t ? "true" : void 0,
       children: [
@@ -31,5 +38,5 @@ function c({
   );
 }
 export {
-  c as B
+  h as B
 };

package/dist/shared/Banner-D4na_bM8.js

@@ -0,0 +1,60 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { o as d } from "./index-ByQ37VXf.js";
+import { B as c } from "./Button-C2ULmKj3.js";
+import { I as p } from "./IconX-CpPADKjZ.js";
+const g = `
+	mare:w-full mare:max-w-md mare:rounded-tpc-container-s mare:p-4
+	mare:flex mare:items-start mare:justify-between mare:gap-4
+	mare:data-severity-neutral:bg-alternative
+	mare:data-severity-brand:bg-accent-weak
+	mare:data-severity-positive:bg-positive-weak
+	mare:data-severity-warning:bg-warning-weak
+	mare:data-severity-danger:bg-danger-weak
+`, f = "mare:flex mare:grow mare:items-start mare:gap-4", v = "mare:flex mare:shrink-0 mare:items-center mare:justify-center mare:text-default mare:[&>svg]:size-6", y = "mare:flex mare:grow mare:flex-col mare:gap-2", u = "mare:tpc-typography-label-m mare:text-default", x = (e) => `mare:tpc-typography-body-s ${e ? "mare:text-disabled" : "mare:text-default"}`, b = (e, r) => r ? "disabled" : e, w = [
+  "neutral",
+  "brand",
+  "positive",
+  "warning",
+  "danger"
+];
+function B({
+  severity: e = "neutral",
+  title: r,
+  icon: m,
+  disabled: s = !1,
+  closable: n = !1,
+  onClose: l,
+  children: i
+}) {
+  const o = d(e, w, "neutral");
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: g,
+      "data-severity": b(o, s),
+      children: [
+        /* @__PURE__ */ t("div", { className: f, children: [
+          m && /* @__PURE__ */ a("span", { className: v, children: m }),
+          /* @__PURE__ */ t("div", { className: y, children: [
+            r && /* @__PURE__ */ a("p", { className: u, children: r }),
+            i && /* @__PURE__ */ a("div", { className: x(s), children: i })
+          ] })
+        ] }),
+        n && /* @__PURE__ */ a(
+          c,
+          {
+            severity: "ghost",
+            iconOnly: !0,
+            size: "xsmall",
+            icon: /* @__PURE__ */ a(p, {}),
+            onClick: l,
+            "aria-label": "Close"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  B
+};

package/dist/shared/{Button-DwJ5RTfQ.js → Button-C2ULmKj3.js}

@@ -1,18 +1,24 @@
-import { jsxs as x, jsx as m } from "react/jsx-runtime";
-import { P as k } from "./ProgressSpinner-B-lrS-tu.js";
-const w = {
+import { jsxs as _, jsx as m } from "react/jsx-runtime";
+import { o as l } from "./index-ByQ37VXf.js";
+import { P as L } from "./ProgressSpinner-B-lrS-tu.js";
+const j = [
+  "primary",
+  "secondary",
+  "ghost",
+  "danger"
+], N = ["xsmall", "small", "medium", "large"], P = ["left", "right", "top", "bottom"], S = {
   left: "mare:-order-1",
   right: "mare:order-1",
   top: "mare:-order-1",
   bottom: "mare:order-1"
-}, $ = {
+}, B = {
   primary: "mare:stroke-on-accent",
   secondary: "mare:stroke-default",
   ghost: "mare:stroke-default",
   danger: "mare:stroke-on-danger"
-}, _ = (e) => e === "bordered" ? "mare:data-severity-ghost:border mare:data-severity-ghost:border-strong mare:not-p-disabled:data-severity-ghost:hover:bg-transparent" : `
+}, C = (a) => a === "bordered" ? "mare:data-severity-ghost:border mare:data-severity-ghost:border-strong mare:not-p-disabled:data-severity-ghost:hover:bg-transparent" : `
 			mare:not-p-disabled:not-data-link:[&[data-severity~='ghost']:active]:bg-active
-			mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active`, L = (e, a) => `
+			mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active`, I = (a, e) => `
 	mare:group/button
 	mare:relative
 	mare:rounded-button mare:flex mare:items-center mare:justify-center
@@ -37,7 +43,7 @@ const w = {
 	mare:not-p-disabled:not-data-link:[&[data-severity~='secondary']:active]:bg-active
 	mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active
 
-	${_(e)}
+	${C(a)}
 	mare:data-size-small:py-2.5 mare:data-size-small:px-3.5 mare:data-size-small:gap-1
 	mare:data-size-small:icon-only:rounded:p-2.5 mare:data-size-small:h-10 mare:data-size-small:icon-only:w-10  mare:data-size-small:icon-only:min-w-10
 
@@ -77,7 +83,7 @@ const w = {
 	mare:data-link:h-auto
 	mare:p-disabled:data-link:bg-transparent!
 
-	${a ? "mare-p-link" : ""}
+	${e ? "mare-p-link" : ""}
 
 	mare:data-link:data-size-xsmall:h-auto
 	mare:data-link:data-size-xsmall:gap-1.5
@@ -90,86 +96,86 @@ const w = {
 
 	mare:data-link:data-size-large:h-auto
 	mare:data-link:data-size-large:gap-2
-`, j = "mare:relative mare:inline-block mare:no-underline! mare:after:content-[''] mare:after:absolute mare:after:left-0 mare:after:-bottom-[4px] mare:after:h-[1px] mare:after:w-full mare:after:bg-inverse mare:after:origin-left mare:after:scale-x-[1] mare:after:transform-gpu mare:after:will-change-transform mare:after:transition-transform mare:after:duration-[500ms] mare:after:ease-[cubic-bezier(0.19,1,0.22,1)] mare:hover:after:scale-x-0 mare:hover:after:origin-right", N = (e) => {
-  const { isLink: a, animateLink: r, hiddenLabel: s, loading: d } = e;
+`, q = "mare:relative mare:inline-block mare:no-underline! mare:after:content-[''] mare:after:absolute mare:after:left-0 mare:after:-bottom-[4px] mare:after:h-[1px] mare:after:w-full mare:after:bg-inverse mare:after:origin-left mare:after:scale-x-[1] mare:after:transform-gpu mare:after:will-change-transform mare:after:transition-transform mare:after:duration-[500ms] mare:after:ease-[cubic-bezier(0.19,1,0.22,1)] mare:hover:after:scale-x-0 mare:hover:after:origin-right", A = (a) => {
+  const { isLink: e, animateLink: t, hiddenLabel: s, loading: d } = a;
   return `mare:relative
 		mare:group-[[data-raised]]/button:tpc-typography-label-m!
-		${a ? "mare:data-size-xsmall:tpc-typography-label-s-underline" : "mare:data-size-xsmall:tpc-typography-label-s"}
-		${a ? "mare:data-size-small:tpc-typography-label-s-underline" : "mare:data-size-small:tpc-typography-label-s"}
-		${a ? "mare:data-size-medium:tpc-typography-label-m-underline" : "mare:data-size-medium:tpc-typography-label-m"}
-		${a ? "mare:data-size-large:tpc-typography-label-m-underline" : "mare:data-size-large:tpc-typography-label-m"}
-		${r && a ? j : ""}
-		${s ? "mare:hidden" : ""} ${a ? "" : "mare:px-0.5"} ${d ? "mare:opacity-0" : ""}
+		${e ? "mare:data-size-xsmall:tpc-typography-label-s-underline" : "mare:data-size-xsmall:tpc-typography-label-s"}
+		${e ? "mare:data-size-small:tpc-typography-label-s-underline" : "mare:data-size-small:tpc-typography-label-s"}
+		${e ? "mare:data-size-medium:tpc-typography-label-m-underline" : "mare:data-size-medium:tpc-typography-label-m"}
+		${e ? "mare:data-size-large:tpc-typography-label-m-underline" : "mare:data-size-large:tpc-typography-label-m"}
+		${t && e ? q : ""}
+		${s ? "mare:hidden" : ""} ${e ? "" : "mare:px-0.5"} ${d ? "mare:opacity-0" : ""}
 	`;
-}, P = (e, a, r) => a ? e === "xsmall" || e === "small" ? "small" : "medium" : e === "xsmall" ? r ? "medium" : "small" : "medium", B = {
+}, D = (a, e, t) => e ? a === "xsmall" || a === "small" ? "small" : "medium" : a === "xsmall" ? t ? "medium" : "small" : "medium", E = {
   small: 16,
   medium: 20
 };
-function q({
-  label: e,
-  severity: a = "primary",
-  size: r = "medium",
+function J({
+  label: a,
+  severity: e = "primary",
+  size: t = "medium",
   variant: s = "solid",
   iconOnly: d = !1,
-  disabled: l = !1,
-  loading: t = !1,
-  link: y = !1,
-  linkAnimation: c = !1,
-  raised: g = !1,
-  rounded: b = !1,
+  disabled: o = !1,
+  loading: r = !1,
+  link: b = !1,
+  linkAnimation: u = !1,
+  raised: v = !1,
+  rounded: h = !1,
   icon: n,
-  iconPos: u = "left",
-  children: o,
-  type: v = "button",
-  ...h
+  iconPos: f = "left",
+  children: p,
+  type: z = "button",
+  ...x
 }) {
-  const i = y, z = !!e || !!o, f = d && !!n, p = B[P(r, i, d)];
-  return /* @__PURE__ */ x(
+  const c = l(e, j, "primary"), y = l(t, N, "medium"), k = l(f, P, "left"), i = b, w = !!a || !!p, $ = d && !!n, g = E[D(y, i, d)];
+  return /* @__PURE__ */ _(
     "button",
     {
-      type: v,
-      className: L(s, i),
-      "data-severity": a,
-      "data-size": r,
+      type: z,
+      className: I(s, i),
+      "data-severity": c,
+      "data-size": y,
       "data-icon-only": d ? "true" : void 0,
-      "data-disabled": l ? "true" : void 0,
-      "data-loading": t ? "true" : void 0,
+      "data-disabled": o ? "true" : void 0,
+      "data-loading": r ? "true" : void 0,
       "data-link": i ? "true" : void 0,
-      "data-raised": g ? "true" : void 0,
-      "data-rounded": b ? "true" : void 0,
-      disabled: l || t,
-      "aria-busy": t || void 0,
-      ...h,
+      "data-raised": v ? "true" : void 0,
+      "data-rounded": h ? "true" : void 0,
+      disabled: o || r,
+      "aria-busy": r || void 0,
+      ...x,
       children: [
-        t && /* @__PURE__ */ m("span", { className: "mare:absolute mare:inset-0 mare:flex mare:items-center mare:justify-center", children: /* @__PURE__ */ m(
-          k,
+        r && /* @__PURE__ */ m("span", { className: "mare:absolute mare:inset-0 mare:flex mare:items-center mare:justify-center", children: /* @__PURE__ */ m(
+          L,
           {
-            circleClass: $[a],
+            circleClass: B[c],
             className: "mare:size-5"
           }
         ) }),
         n && /* @__PURE__ */ m(
           "span",
           {
-            className: `mare:inline-flex mare:shrink-0 mare:items-center mare:justify-center mare:[&>svg]:size-full! ${w[u]} ${t ? "mare:opacity-0" : ""}`,
+            className: `mare:inline-flex mare:shrink-0 mare:items-center mare:justify-center mare:[&>svg]:size-full! ${S[k]} ${r ? "mare:opacity-0" : ""}`,
             style: {
-              width: `${p}px`,
-              height: `${p}px`
+              width: `${g}px`,
+              height: `${g}px`
             },
             "aria-hidden": "true",
             children: n
           }
         ),
-        z && /* @__PURE__ */ m(
+        w && /* @__PURE__ */ m(
           "span",
           {
-            className: N({
+            className: A({
               isLink: i,
-              animateLink: c,
-              hiddenLabel: f,
-              loading: t
+              animateLink: u,
+              hiddenLabel: $,
+              loading: r
             }),
-            children: o ?? e
+            children: p ?? a
           }
         )
       ]
@@ -177,5 +183,6 @@ function q({
   );
 }
 export {
-  q as B
+  J as B,
+  j as a
 };