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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 The Palace Company
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,227 @@
+# @tpc-mare/mare-ui-components-react
+
+Adaptador React del Mare Design System — 47 componentes headless sobre
+[Ark UI](https://ark-ui.com), con tema por marca vía CSS variables y Tailwind CSS 4.
+
+Mismo sistema de diseño que el adaptador Vue (mismos tokens, mismos estilos base),
+componentes React puros: sin provider, sin registro global, sin wrapper.
+
+```bash
+npm install @tpc-mare/mare-ui-components-react @ark-ui/react
+```
+
+`@ark-ui/react` es peer dependency y debe instalarse explícitamente.
+React 18 o 19.
+
+## Setup
+
+### 1. CSS
+
+Los cuatro imports van en tu hoja de estilos global, **en este orden**:
+
+```css
+@import 'tailwindcss';
+@import '@tpc-mare/mare-ui-components-react/theme.css';
+@import '@tpc-mare/mare-ui-components-react/styles.css';
+@import '@tpc-mare/mare-ui-components-react/themes/the-palace-company.css';
+```
+
+El orden importa: el archivo de marca va **último**, porque carga los valores de
+color que los otros dos referencian en runtime vía CSS variables.
+
+| Archivo              | Qué hace                                                                                                                                                      |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme.css`          | Scaffold de Tailwind sin prefijo (`@theme` + `@utility`). Es lo que habilita clases reales como `bg-default` o `rounded-container-m` en **tu propio** código. |
+| `styles.css`         | Estilos compilados de los componentes de Mare (prefijados `mare:` internamente, no chocan con tu Tailwind). Incluye las clases `tpc-typography-*`.            |
+| `themes/<marca>.css` | Los valores de color. Elige exactamente uno.                                                                                                                  |
+
+Marcas disponibles: `the-palace-company`, `palace`, `le-blanc`, `baglioni`,
+`baglioni-resorts`.
+
+**¿Tu proyecto no compila Tailwind?** Omite `theme.css` e importa
+`@tpc-mare/mare-ui-components-react/utilities-standalone.css`: las mismas
+utilidades ya precompiladas, con prefijo `mare-` (`mare-bg-default`,
+`mare-text-default`).
+
+### 2. `data-theme` en la raíz
+
+```tsx
+function App() {
+	return (
+		<div data-theme='the-palace-company'>
+			<Routes />
+		</div>
+	);
+}
+```
+
+Sin ese atributo las CSS variables no resuelven y los componentes salen sin color.
+
+## Uso
+
+Cada componente se importa explícito — no hay registro global:
+
+```tsx
+import {
+	Button,
+	InputText,
+	FormField,
+	HelperText,
+} from '@tpc-mare/mare-ui-components-react';
+import { useState } from 'react';
+
+function LoginForm() {
+	const [email, setEmail] = useState('');
+
+	return (
+		<div className='flex min-h-screen items-center justify-center bg-default px-4'>
+			<div className='w-full max-w-md space-y-6 rounded-container-m bg-raised p-8'>
+				<h1 className='tpc-typography-title-l text-default'>
+					Iniciar sesión
+				</h1>
+
+				<FormField>
+					<HelperText>Email</HelperText>
+					<InputText
+						value={email}
+						onValueChange={setEmail}
+						type='email'
+					/>
+				</FormField>
+
+				<Button
+					severity='primary'
+					label='Ingresar'
+				/>
+			</div>
+		</div>
+	);
+}
+```
+
+### Subpaths
+
+Cada componente tiene su propio entry point, con tipos incluidos:
+
+```tsx
+import { Button } from '@tpc-mare/mare-ui-components-react/button';
+import { DatePicker } from '@tpc-mare/mare-ui-components-react/date-picker';
+import { useKeyboardCommands } from '@tpc-mare/mare-ui-components-react/keyboard-commands';
+```
+
+El barrel principal también es tree-shakeable, así que los subpaths son
+sobre todo para dejar explícita la dependencia.
+
+### Contenido sobre imágenes
+
+Para texto encima de una imagen o video, envuelve el contenedor con la variante
+`-media` de tu marca. Adapta **todas** las CSS variables del subárbol:
+
+```tsx
+<section data-theme='the-palace-company-media'>
+	<img
+		src='/hero.jpg'
+		alt=''
+	/>
+	<h1 className='tpc-typography-display-l text-default'>Paradise Awaits</h1>
+</section>
+```
+
+No uses `text-white`: es un hack que no reacciona al cambio de marca ni de
+contexto. Para secciones de fondo sólido oscuro sin imagen, usa la variante
+`-brand`.
+
+### Iconos
+
+Los componentes reciben iconos como `ReactNode`, no como string. Usa la
+librería que quieras:
+
+```tsx
+import { IconArrowRight } from '@tabler/icons-react';
+
+<Button
+	label='Book Now'
+	icon={<IconArrowRight />}
+/>;
+```
+
+## Componentes
+
+Accordion · Avatar · Badge · Banner · Breadcrumbs · Button · Checkbox ·
+Combobox · ConfirmDialog · Counter · DatePicker · Dialog · Divider · Drawer ·
+ExpandableCounter · FilterChip · FilterChipDropdownMultiple ·
+FilterChipDropdownSingle · FilterChipGroup · FloatingActionButton · ImageItem ·
+ImageSlider · InputNumber · InputOtp · InputText · Menu · Message ·
+MultiSelect · OverlayBadge · Paginator · PanelMenu · Password · ProgressBar ·
+ProgressSpinner · RadioGroup · SearchField · SegmentedControl · SelectField ·
+Skeleton · Slider · Snackbar · Stepper · Switch · Tabs · Tag · TagChip ·
+Textarea
+
+La referencia de props de cada uno está en el Storybook:
+
+```bash
+pnpm --filter @tpc-mare/mare-ui-components-react storybook   # puerto 6100
+```
+
+## Requisitos
+
+|                 |                                                                      |
+| --------------- | -------------------------------------------------------------------- |
+| React           | `>=18`                                                               |
+| `@ark-ui/react` | `>=5.37.0` (peer, instalación explícita)                             |
+| Tailwind CSS    | `^4.1` — opcional, solo si quieres escribir clases como `bg-default` |
+| TypeScript      | `^5` — opcional                                                      |
+
+## Formularios
+
+Los componentes interactivos forwardean `ref`, así que funcionan con
+`react-hook-form` tal cual:
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { InputText, Button } from '@tpc-mare/mare-ui-components-react';
+
+function Form() {
+	const { register, handleSubmit } = useForm();
+
+	return (
+		<form onSubmit={handleSubmit(console.log)}>
+			<InputText {...register('email')} />
+			<Button
+				type='submit'
+				label='Enviar'
+			/>
+		</form>
+	);
+}
+```
+
+Los campos de texto (`InputText`, `Textarea`, `Password`, `SearchField`,
+`InputNumber`) funcionan en los dos modos:
+
+- **uncontrolled** — omite `value`. El DOM guarda el valor y `defaultValue`
+  aplica. Es lo que necesita `register()`.
+- **controlled** — pasa `value` + `onValueChange`. En `InputNumber`, `value={null}`
+  significa "controlado y vacío"; omitir `value` por completo es lo que activa
+  el modo uncontrolled.
+
+Los selects y pickers (`SelectField`, `Combobox`, `MultiSelect`, `DatePicker`,
+`RadioGroup`, `Slider`) son siempre controlados: van con `Controller`. Su `ref`
+apunta al contenedor, para `scrollIntoView` cuando la validación falla.
+
+Los presentacionales (`Badge`, `Tag`, `Divider`, `Skeleton`, `Avatar`…) no
+forwardean `ref` — no hay caso de uso que lo pida.
+
+## Limitaciones conocidas
+
+- **Cobertura de tests parcial.** Hay 70 tests sobre el comportamiento núcleo
+  (refs, controlled/uncontrolled, datos async, disabled/loading) pero no una
+  suite por componente.
+- **Los `.d.ts` duplican los tipos del core** entre subpaths, porque se
+  empaquetan con `rollupTypes`. Pesa en disco y descarga, no en el bundle.
+- **El paquete se publica sin minificar**, a propósito: tu bundler minifica y
+  así se puede debuggear dentro de `node_modules`.
+
+## Licencia
+
+MIT © The Palace Company

package/dist/accordion/index.js

@@ -1,4 +1,4 @@
-import { A as c } from "../shared/Accordion-BSmOrxH6.js";
+import { A as c } from "../shared/Accordion-QSdlMSst.js";
 export {
   c as Accordion
 };

package/dist/accordion.d.ts

@@ -0,0 +1,36 @@
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare function Accordion({ items, value, defaultValue, onValueChange, multiple, collapsible, }: AccordionProperties): JSX_2.Element;
+
+export declare interface AccordionItemData {
+    value: string;
+    title: string;
+    disabled?: boolean;
+    /** Divider below this item.
+     * @default true */
+    divider?: boolean;
+    /** Consumer-defined extras (subtitle, content) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare interface AccordionItemProperties extends AccordionItemData {
+    subtitle?: ReactNode;
+    content: ReactNode;
+}
+
+export declare interface AccordionProperties {
+    items: AccordionItemProperties[];
+    /** Controlled expanded item values. Omit to let Ark manage it. */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Whether multiple items can be expanded at once.
+     * @default false */
+    multiple?: boolean;
+    /** Whether an expanded item can be collapsed back by clicking it again.
+     * @default true */
+    collapsible?: boolean;
+}
+
+export { }

package/dist/{avatar/Avatar.types.d.ts → avatar.d.ts}

@@ -1,26 +1,34 @@
-import { AvatarSize } from '@tpc-development/mare-ui-components-core/avatar';
-export type { AvatarSize } from '@tpc-development/mare-ui-components-core/avatar';
-export interface AvatarProperties {
-    /**
-     * Image URL. Falls back to the initials derived from `label` while it's
-     * loading, missing, or fails to load.
-     */
-    image?: string;
-    /**
-     * `alt` text for the image.
-     */
-    alt?: string;
-    /**
-     * Full name used to derive the fallback initials (e.g. "Tomás Palacio" → "TP").
-     */
-    label?: string;
-    /**
-     * Size variant.
-     * @default 'small'
-     */
-    size?: AvatarSize;
-    /**
-     * Unique identifier for the avatar.
-     */
-    id?: string;
-}
+import { JSX as JSX_2 } from 'react';
+
+export declare function Avatar({ image, alt, label, size, id, }: AvatarProperties): JSX_2.Element;
+
+declare const AVATAR_SIZES: readonly ["small", "medium"];
+
+export declare interface AvatarProperties {
+    /**
+     * Image URL. Falls back to the initials derived from `label` while it's
+     * loading, missing, or fails to load.
+     */
+    image?: string;
+    /**
+     * `alt` text for the image.
+     */
+    alt?: string;
+    /**
+     * Full name used to derive the fallback initials (e.g. "Tomás Palacio" → "TP").
+     */
+    label?: string;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: AvatarSize;
+    /**
+     * Unique identifier for the avatar.
+     */
+    id?: string;
+}
+
+export declare type AvatarSize = (typeof AVATAR_SIZES)[number];
+
+export { }

package/dist/badge.d.ts

@@ -0,0 +1,19 @@
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare function Badge({ severity, icon, children, }: BadgeProperties): JSX_2.Element;
+
+declare const BADGE_SEVERITIES: readonly ["accent", "danger", "warning", "highlight", "positive"];
+
+export declare interface BadgeProperties {
+    /** @default 'accent' */
+    severity?: BadgeSeverity;
+    /** Shown next to (or instead of) `children`. */
+    icon?: ReactNode;
+    /** The count/label. A bare dot renders when neither this nor `icon` is set. */
+    children?: ReactNode;
+}
+
+export declare type BadgeSeverity = (typeof BADGE_SEVERITIES)[number];
+
+export { }

package/dist/banner/index.js

@@ -1,4 +1,4 @@
-import { B as e } from "../shared/Banner-D4na_bM8.js";
+import { B as e } from "../shared/Banner-DMWwNO2K.js";
 export {
   e as Banner
 };

package/dist/banner.d.ts

@@ -0,0 +1,23 @@
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare function Banner({ severity, title, icon, disabled, closable, onClose, children, }: BannerProperties): JSX_2.Element;
+
+declare const BANNER_SEVERITIES: readonly ["neutral", "brand", "positive", "warning", "danger"];
+
+export declare interface BannerProperties {
+    /** @default 'neutral' */
+    severity?: BannerSeverity;
+    title?: string;
+    icon?: ReactNode;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    closable?: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+
+export declare type BannerSeverity = (typeof BANNER_SEVERITIES)[number];
+
+export { }

package/dist/breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { B as e } from "../shared/Breadcrumbs-Cqr3Jitd.js";
+import { B as e } from "../shared/Breadcrumbs-bcs9_ByY.js";
 export {
   e as Breadcrumbs
 };

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,24 @@
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare interface BreadcrumbItemData {
+    label: string;
+    /** Current page — not interactive, distinct visual/behavioral state from disabled. */
+    active?: boolean;
+    disabled?: boolean;
+    /** Consumer-defined extras (icon, href, onClick…) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare function Breadcrumbs({ items, separator, renderItem, }: BreadcrumbsProperties): JSX_2.Element;
+
+export declare interface BreadcrumbsProperties {
+    items: BreadcrumbItemData[];
+    /** Rendered between items. Defaults to `'/'`, matching the Vue DS. */
+    separator?: ReactNode;
+    /** Custom render for an item's content (icon + label). Defaults to
+     * `item.icon` (if any) + `item.label`. */
+    renderItem?: (item: BreadcrumbItemData) => ReactNode;
+}
+
+export { }

package/dist/button/index.js

@@ -1,4 +1,4 @@
-import { B as r } from "../shared/Button-C2ULmKj3.js";
+import { B as r } from "../shared/Button-BqFuDnSs.js";
 export {
   r as Button
 };

package/dist/button.d.ts

@@ -0,0 +1,45 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Button: ForwardRefExoticComponent<ButtonProperties & RefAttributes<HTMLButtonElement>>;
+
+declare const BUTTON_SEVERITIES: readonly ["primary", "secondary", "ghost", "danger"];
+
+declare const BUTTON_SIZES: readonly ["xsmall", "small", "medium", "large"];
+
+export declare interface ButtonProperties extends ForwardedNativeProperties {
+    label?: string;
+    severity?: ButtonSeverity;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconOnly?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    link?: boolean;
+    linkAnimation?: boolean;
+    /** Elevation shadow + the taller raised sizing (what makes a FAB a FAB).
+     * @default false */
+    raised?: boolean;
+    /** Fully rounded corners — pill with a label, circle with iconOnly.
+     * @default false */
+    rounded?: boolean;
+    icon?: ReactNode;
+    iconPos?: IconPosition;
+    children?: ReactNode;
+}
+
+export declare type ButtonSeverity = (typeof BUTTON_SEVERITIES)[number];
+
+export declare type ButtonSize = (typeof BUTTON_SIZES)[number];
+
+export declare type ButtonVariant = 'solid' | 'bordered';
+
+declare type ForwardedNativeProperties = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'children' | 'color'>;
+
+declare const ICON_POSITIONS: readonly ["left", "right", "top", "bottom"];
+
+export declare type IconPosition = (typeof ICON_POSITIONS)[number];
+
+export { }

package/dist/checkbox/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../shared/Checkbox-DCq3_MWz.js";
+import { C as r } from "../shared/Checkbox-DgZAQsbr.js";
 export {
   r as Checkbox
 };

package/dist/{checkbox/Checkbox.types.d.ts → checkbox.d.ts}

@@ -1,69 +1,79 @@
-import { CheckboxSize } from '@tpc-development/mare-ui-components-core/checkbox';
-import { ReactNode } from 'react';
-export type { CheckboxSize } from '@tpc-development/mare-ui-components-core/checkbox';
-/**
- * CheckedState can be boolean or 'indeterminate' (Ark's convention).
- */
-export type CheckedState = boolean | 'indeterminate';
-export interface CheckboxProperties {
-    /**
-     * The controlled checked state.
-     */
-    checked?: CheckedState;
-    /**
-     * Initial checked state (uncontrolled mode).
-     */
-    defaultChecked?: CheckedState;
-    /**
-     * Handler called when checked state changes.
-     */
-    onCheckedChange?: (details: {
-        checked: CheckedState;
-    }) => void;
-    /**
-     * The checkbox label (can also use children).
-     */
-    children?: ReactNode;
-    /**
-     * Size variant.
-     * @default 'small'
-     */
-    size?: CheckboxSize;
-    /**
-     * Disables interaction.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Marks the checkbox as invalid (red border/background).
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Makes the checkbox read-only.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Marks the checkbox as required for form validation.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The name attribute for form submission.
-     */
-    name?: string;
-    /**
-     * The value submitted with the form when checked.
-     * @default 'on'
-     */
-    value?: string;
-    /**
-     * ID of an associated form element.
-     */
-    form?: string;
-    /**
-     * Unique identifier for the checkbox.
-     */
-    id?: string;
-}
+import { ForwardRefExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProperties & RefAttributes<HTMLInputElement>>;
+
+declare const CHECKBOX_SIZES: readonly ["small", "medium", "large"];
+
+export declare interface CheckboxProperties {
+    /**
+     * The controlled checked state.
+     */
+    checked?: CheckedState;
+    /**
+     * Initial checked state (uncontrolled mode).
+     */
+    defaultChecked?: CheckedState;
+    /**
+     * Handler called when checked state changes.
+     * Recibe el valor directo, no un objeto `details` — mismo patrón que
+     * Switch y que los 26 callbacks del resto del paquete.
+     */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /**
+     * The checkbox label (can also use children).
+     */
+    children?: ReactNode;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: CheckboxSize;
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the checkbox as invalid (red border/background).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the checkbox read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the checkbox as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * The value submitted with the form when checked.
+     * @default 'on'
+     */
+    value?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the checkbox.
+     */
+    id?: string;
+}
+
+export declare type CheckboxSize = (typeof CHECKBOX_SIZES)[number];
+
+/**
+ * CheckedState can be boolean or 'indeterminate' (Ark's convention).
+ */
+export declare type CheckedState = boolean | 'indeterminate';
+
+export { }

package/dist/combobox/index.js

@@ -1,4 +1,4 @@
-import { C as m } from "../shared/Combobox-DrkeDMW0.js";
+import { C as m } from "../shared/Combobox-CiaEi_RG.js";
 export {
   m as Combobox
 };