@tpc-mare/mare-ui-components-react 1.0.2 → 1.0.3-beta.0

package/dist/input-number/index.js

@@ -1,4 +1,4 @@
-import { I as m } from "../shared/InputNumber-nxus9h5s.js";
+import { I as m } from "../shared/InputNumber-CUNq3cPa.js";
 export {
   m as InputNumber
 };

package/dist/{input-number/InputNumber.types.d.ts → input-number.d.ts}

@@ -1,30 +1,42 @@
-import { InputNumberSize } from '@tpc-development/mare-ui-components-core/input-number';
-export type { InputNumberSize } from '@tpc-development/mare-ui-components-core/input-number';
-export interface InputNumberProperties {
-    /** Controlled numeric value. `null` when the field is empty. */
-    value?: number | null;
-    /** Change handler — receives the next number, or `null` when cleared. */
-    onValueChange?: (value: number | null) => void;
-    size?: InputNumberSize;
-    rounded?: boolean;
-    invalid?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    placeholder?: string;
-    id?: string;
-    name?: string;
-    /** Minimum allowed value. */
-    min?: number;
-    /** Maximum allowed value. */
-    max?: number;
-    /** Step for keyboard/scrub increments. @default 1 */
-    step?: number;
-    /** Intl.NumberFormat options — currency, percent, unit, decimals, grouping. */
-    formatOptions?: Intl.NumberFormatOptions;
-    /** BCP 47 locale used for formatting/parsing. */
-    locale?: string;
-    /** Increment/decrement the value with the mouse wheel while focused. */
-    allowMouseWheel?: boolean;
-    /** Clamp the value to min/max when the field loses focus. @default true */
-    clampValueOnBlur?: boolean;
-}
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+declare const INPUT_TEXT_SIZES: readonly ["small", "medium"];
+
+export declare const InputNumber: ForwardRefExoticComponent<InputNumberProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputNumberProperties {
+    /** Valor numérico controlado. `null` = campo vacío. Omítelo por completo
+     * para dejar el campo uncontrolled. */
+    value?: number | null;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: number | null;
+    /** Change handler — receives the next number, or `null` when cleared. */
+    onValueChange?: (value: number | null) => void;
+    size?: InputNumberSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step for keyboard/scrub increments. @default 1 */
+    step?: number;
+    /** Intl.NumberFormat options — currency, percent, unit, decimals, grouping. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP 47 locale used for formatting/parsing. */
+    locale?: string;
+    /** Increment/decrement the value with the mouse wheel while focused. */
+    allowMouseWheel?: boolean;
+    /** Clamp the value to min/max when the field loses focus. @default true */
+    clampValueOnBlur?: boolean;
+}
+
+export declare type InputNumberSize = (typeof INPUT_TEXT_SIZES)[number];
+
+export { }

package/dist/input-otp/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../shared/InputOtp-BxBc6Vhs.js";
+import { I as o } from "../shared/InputOtp-wTUwu1NG.js";
 export {
   o as InputOtp
 };

package/dist/{input-otp/InputOtp.types.d.ts → input-otp.d.ts}

@@ -1,27 +1,36 @@
-import { InputOtpSize } from '@tpc-development/mare-ui-components-core/input-otp';
-export type { InputOtpSize } from '@tpc-development/mare-ui-components-core/input-otp';
-export interface InputOtpProperties {
-    /** Number of digit boxes to render. */
-    length?: number;
-    /** Controlled value, one character per digit. Omit to let Ark manage it. */
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-    /** Fired once all digits are filled with a valid value. */
-    onComplete?: (value: string) => void;
-    size?: InputOtpSize;
-    /** Masks each digit like `type="password"`. */
-    mask?: boolean;
-    /** Restricts input to digits only. Set `false` for alphanumeric codes. */
-    integerOnly?: boolean;
-    /** Placeholder shown in each empty box. Defaults to '' (blank box) — Ark's
-     * own default is '○', which the Mare design doesn't use. */
-    placeholder?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
-    autoFocus?: boolean;
-    name?: string;
-    id?: string;
-}
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+declare const INPUT_OTP_SIZES: readonly ["small", "medium", "large"];
+
+export declare const InputOtp: ForwardRefExoticComponent<InputOtpProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputOtpProperties {
+    /** Number of digit boxes to render. */
+    length?: number;
+    /** Controlled value, one character per digit. Omit to let Ark manage it. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired once all digits are filled with a valid value. */
+    onComplete?: (value: string) => void;
+    size?: InputOtpSize;
+    /** Masks each digit like `type="password"`. */
+    mask?: boolean;
+    /** Restricts input to digits only. Set `false` for alphanumeric codes. */
+    integerOnly?: boolean;
+    /** Placeholder shown in each empty box. Defaults to '' (blank box) — Ark's
+     * own default is '○', which the Mare design doesn't use. */
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    id?: string;
+}
+
+export declare type InputOtpSize = (typeof INPUT_OTP_SIZES)[number];
+
+export { }

package/dist/input-text/index.js

@@ -1,5 +1,5 @@
-import { I as o, a as r } from "../shared/IconField-CqKydKep.js";
-import { C as s, F as l, a as F, H as p } from "../shared/HelperText-zmUym82m.js";
+import { I as o, a as r } from "../shared/IconField-Bp2H10B1.js";
+import { C as s, F as l, a as F, H as p } from "../shared/HelperText-C9TsD0wC.js";
 export {
   s as CharacterCount,
   l as FloatLabel,

package/dist/input-text.d.ts

@@ -0,0 +1,77 @@
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare function CharacterCount({ value, max }: CharacterCountProperties): JSX_2.Element;
+
+export declare interface CharacterCountProperties {
+    value: string;
+    max: number;
+}
+
+export declare function FloatLabel({ label, children }: FloatLabelProperties): JSX_2.Element;
+
+export declare interface FloatLabelProperties {
+    label: string;
+    children?: ReactNode;
+}
+
+export declare function FormField({ invalid, disabled, required, children, }: FormFieldProperties): JSX_2.Element;
+
+export declare interface FormFieldProperties {
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    children?: ReactNode;
+}
+
+declare type ForwardedNativeProperties = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue' | 'size' | 'className' | 'style'>;
+
+export declare function HelperText({ children }: {
+    children?: ReactNode;
+}): JSX_2.Element;
+
+declare const ICON_FIELD_POSITIONS: readonly ["left", "right"];
+
+export declare function IconField({ icon, position, disabled, onIconClick, iconLabel, children, }: IconFieldProperties): JSX_2.Element;
+
+declare type IconFieldPosition = (typeof ICON_FIELD_POSITIONS)[number];
+
+export declare interface IconFieldProperties {
+    icon: ReactNode;
+    position?: IconFieldPosition;
+    /** Dims the icon to match a disabled sibling input. IconField can't see
+     * that prop on its own (it lives on the input, not on IconField) — pass
+     * it through explicitly when composing (see SearchField). @default false */
+    disabled?: boolean;
+    /** Makes the icon a real click target (a `<button>`, not a decorative
+     * `<span>`). @default undefined (decorative) */
+    onIconClick?: () => void;
+    /** Accessible name for the button, when `onIconClick` is set. */
+    iconLabel?: string;
+    children?: ReactNode;
+}
+
+declare const INPUT_TEXT_SIZES: readonly ["small", "medium"];
+
+export declare const InputText: ForwardRefExoticComponent<InputTextProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputTextProperties extends ForwardedNativeProperties {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled (el DOM
+     * guarda el valor y `defaultValue` aplica). */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+
+export declare type InputTextSize = (typeof INPUT_TEXT_SIZES)[number];
+
+export { }

package/dist/keyboard-commands/index.js

@@ -398,7 +398,7 @@ function Oe(e) {
 function Re(e) {
   !e.hasAttribute("tabindex") && !xe.has(e.tagName.toLowerCase()) && e.setAttribute("tabindex", "0");
 }
-function He(e, t, o, r, i) {
+function _e(e, t, o, r, i) {
   const s = t.map((p) => ({
     keys: p.keys,
     ...p.description ? { description: p.description } : {}
@@ -411,10 +411,10 @@ function He(e, t, o, r, i) {
   };
   e.setAttribute(me, JSON.stringify(u));
 }
-function _e(e, t) {
+function He(e, t) {
   Re(e);
   const o = De(t.commands);
-  if (o && e.setAttribute("aria-keyshortcuts", o), (t.commands.length > 0 || (t.hintCommands?.length ?? 0) > 0) && He(
+  if (o && e.setAttribute("aria-keyshortcuts", o), (t.commands.length > 0 || (t.hintCommands?.length ?? 0) > 0) && _e(
     e,
     t.commands,
     t.depth,
@@ -451,7 +451,7 @@ function Ie(e) {
     scrollBehavior: e.scrollBehavior
   };
 }
-function _(e) {
+function H(e) {
   if (!P()) return null;
   let t = e.parentElement;
   for (; t && t !== document.body; ) {
@@ -468,11 +468,13 @@ function Fe(e) {
   return /(auto|scroll)/.test(t) || /(auto|scroll)/.test(o);
 }
 function $(e, t) {
-  return t.container ? t.container === "parent" ? _(e) : typeof t.container == "string" ? e.querySelector(t.container) ?? _(e) : t.container ?? _(e) : Fe(e) ? e : _(e);
+  return t.container ? t.container === "parent" ? H(e) : typeof t.container == "string" ? e.querySelector(t.container) ?? H(e) : t.container ?? H(e) : Fe(e) ? e : H(e);
 }
 function et(e = {}) {
   const t = ae(), o = e.depth ?? 1, r = e.visible ?? !0;
-  return N(() => (r ? be(t, o) : te(t), () => te(t)), [t, o, r]), { scopeId: t };
+  return N(() => (r ? be(t, o) : te(t), () => {
+    te(t);
+  }), [t, o, r]), { scopeId: t };
 }
 function tt(e, t = {}) {
   const o = ae(), r = t.depth ?? 0, i = ye(
@@ -494,7 +496,7 @@ function tt(e, t = {}) {
     const a = h();
     if (!a) return;
     const f = u.current;
-    _e(a, {
+    He(a, {
       commands: f.commands ?? [],
       depth: r,
       context: f.hintContext,
@@ -510,15 +512,18 @@ function tt(e, t = {}) {
     if (!(a instanceof KeyboardEvent) || !p.current) return;
     const f = u.current, k = v.current, K = e.current;
     if (!K) return;
-    const H = K instanceof HTMLElement ? K : null;
-    if (H && Oe(H)) return;
+    const _ = K instanceof HTMLElement ? K : null;
+    if (_ && Oe(_)) return;
     const J = ge(
       f.triggerOn,
       w.current,
       a
     ), q = J ? { keydownModifiers: J } : void 0;
-    if (k && H) {
-      const F = $(H, k);
+    if (k && _) {
+      const F = $(
+        _,
+        k
+      );
       if (F) {
         const x = (k.scrollUpKeys ?? ["ArrowUp", "PageUp"]).map((C) => g(C)), Q = (k.scrollDownKeys ?? ["ArrowDown", "PageDown"]).map((C) => g(C)), U = x.some(
           (C) => E(a, C, q)
@@ -579,7 +584,13 @@ function tt(e, t = {}) {
     const k = $(f, a);
     k && (k.scrollTop = D.current.top, k.scrollLeft = D.current.left);
   }
-  const n = A((a) => O(a)).current, b = A(() => c()).current, d = A(() => y()).current;
+  const n = A((a) => {
+    O(a);
+  }).current, b = A(() => {
+    c();
+  }).current, d = A(() => {
+    y();
+  }).current;
   function L() {
     if (!u.current.autoFocus) return;
     const a = h();
@@ -589,15 +600,15 @@ function tt(e, t = {}) {
   }
   function S(a) {
     const f = u.current, k = f.capture ?? !1;
-    for (const H of re(f.triggerOn))
-      a.addEventListener(H, n, { capture: k });
+    for (const _ of re(f.triggerOn))
+      a.addEventListener(_, n, { capture: k });
     const K = a instanceof HTMLElement ? a : null;
     K && f.scrollable && (K.addEventListener("blur", b, !0), K.addEventListener("focus", d, !0)), p.current && (M(), L());
   }
   function R(a) {
     const f = u.current, k = f.capture ?? !1;
-    for (const H of re(f.triggerOn))
-      a.removeEventListener(H, n, { capture: k });
+    for (const _ of re(f.triggerOn))
+      a.removeEventListener(_, n, { capture: k });
     const K = a instanceof HTMLElement ? a : null;
     K && f.scrollable && (K.removeEventListener("blur", b, !0), K.removeEventListener("focus", d, !0)), T(K ?? void 0);
   }
@@ -629,12 +640,14 @@ function ot(e) {
   function D(n, b = !1) {
     const d = s.current;
     if (!d || n < 0) return;
-    const L = d.children[n], S = L?.matches('[role="option"], [data-kbd-nav-item], li') ? L : [
+    const L = d.children[n], S = L?.matches(
+      '[role="option"], [data-kbd-nav-item], li'
+    ) ? L : [
       ...d.querySelectorAll(
         '[role="option"], [data-kbd-nav-item], li'
       )
     ].at(n) ?? void 0;
-    S === void 0 || !(_(S) ?? (d.scrollHeight > d.clientHeight ? d : null)) || S.scrollIntoView({
+    S === void 0 || !(H(S) ?? (d.scrollHeight > d.clientHeight ? d : null)) || S.scrollIntoView({
       block: "nearest",
       inline: "nearest",
       behavior: b ? "instant" : W() ? "auto" : "smooth"
@@ -687,12 +700,14 @@ function ot(e) {
       n.preventDefault(), r.current.onSelect?.(a, m), r.current.onActivate?.(a, m);
     }
   }
-  const c = A(
-    (n) => O(n)
-  ).current;
+  const c = A((n) => {
+    O(n);
+  }).current;
   N(() => {
     if (l)
-      return l.addEventListener("keydown", c), () => l.removeEventListener("keydown", c);
+      return l.addEventListener("keydown", c), () => {
+        l.removeEventListener("keydown", c);
+      };
   }, [l, c]);
   const y = r.current.items[t] ?? null;
   return {
@@ -732,7 +747,7 @@ function rt(e) {
     const L = d.querySelectorAll(
       '[role="gridcell"], [data-kbd-nav-cell]'
     )[c.col];
-    !L || !(_(L) ?? (n.scrollHeight > n.clientHeight ? n : null)) || L.scrollIntoView({
+    !L || !(H(L) ?? (n.scrollHeight > n.clientHeight ? n : null)) || L.scrollIntoView({
       block: "nearest",
       inline: "nearest",
       behavior: y ? "instant" : W() ? "auto" : "smooth"
@@ -770,7 +785,10 @@ function rt(e) {
       return;
     }
     if (E(c, Je)) {
-      c.preventDefault(), h({ row: n, col: r.current.cols - 1 }, c.repeat);
+      c.preventDefault(), h(
+        { row: n, col: r.current.cols - 1 },
+        c.repeat
+      );
       return;
     }
     if (!c.repeat && Qe.some((d) => E(c, d))) {
@@ -779,12 +797,14 @@ function rt(e) {
       r.current.onSelect?.(d), r.current.onActivate?.(d);
     }
   }
-  const O = A(
-    (c) => T(c)
-  ).current;
+  const O = A((c) => {
+    T(c);
+  }).current;
   return N(() => {
     if (l)
-      return l.addEventListener("keydown", O), () => l.removeEventListener("keydown", O);
+      return l.addEventListener("keydown", O), () => {
+        l.removeEventListener("keydown", O);
+      };
   }, [l, O]), { focused: t, containerRef: p, focus: h, isFocused: M };
 }
 export {
@@ -795,12 +815,12 @@ export {
   Ze as buildParsedChordLists,
   de as detachTooltips,
   Re as ensureTabindex,
-  _ as findScrollableAncestor,
+  H as findScrollableAncestor,
   Ce as formatKeyDescriptor,
   j as getActiveDepth,
   ge as getKeydownModifiersForKeyup,
-  _e as injectAriaOnElement,
-  He as injectKbdHintAttribute,
+  He as injectAriaOnElement,
+  _e as injectKbdHintAttribute,
   P as isBrowser,
   Oe as isElementDisabled,
   Y as isMac,