@tpc-mare/mare-ui-components-react 1.0.3 → 1.0.5

package/README.md

@@ -1,227 +1 @@
-# @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
+readme

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tpc-mare/mare-ui-components-react",
   "description": "Mare components for React (headless base, MIT). Framework-agnostic design system, React adapter.",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "license": "MIT",
   "author": "The Palace Company",
@@ -46,17 +46,16 @@
   },
   "peerDependencies": {
     "@ark-ui/react": ">=5.37.0",
-    "@tabler/icons-react": ">=3.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.0",
+    "@tabler/icons-react": "^3.44.0",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@ark-ui/react": "^5.37.2",
-    "@tabler/icons-react": "^3.44.0",
     "@storybook/react-vite": "10.5.10",
     "@tailwindcss/vite": "^4.1.17",
     "@testing-library/dom": "^10.4.1",