@octavius2929-personal/design-system 0.1.0 → 0.4.0

package/README.md

@@ -2,6 +2,66 @@
 
 Librería de componentes **React** con estilos en TypeScript (vanilla-extract). Generada con `@octavius2929-personal/scaffold-generator`.
 
+## Instalación
+
+```bash
+npm install @octavius2929-personal/design-system
+```
+
+`react` y `react-dom` son **peer dependencies** (`>=18`): asegurate de tenerlos instalados en tu app.
+
+## Uso
+
+1. Importá el CSS **una sola vez** (en el entrypoint de tu app, p. ej. `main.tsx`):
+
+```ts
+import "@octavius2929-personal/design-system/styles.css";
+```
+
+2. Envolvé tu app con `ThemeProvider` y usá los componentes:
+
+```tsx
+import { ThemeProvider, Button } from "@octavius2929-personal/design-system";
+
+export function App() {
+  return (
+    <ThemeProvider defaultSchema="tinta" defaultMode="light">
+      <Button variant="filled" tone="accent" size="md" onClick={() => alert("¡Hola!")}>
+        Continuar
+      </Button>
+    </ThemeProvider>
+  );
+}
+```
+
+`ThemeProvider` es **opcional**: sin él los componentes usan el schema `tinta` en modo `light` (las vars de `:root`).
+
+3. Para cambiar el schema (paleta) o el modo en runtime, usá `useTheme()` desde un componente dentro del provider:
+
+```tsx
+import { useTheme, schemaNames } from "@octavius2929-personal/design-system";
+
+function ThemeSwitch() {
+  const { schema, mode, setSchema, toggleMode } = useTheme();
+  return (
+    <>
+      <select value={schema} onChange={(e) => setSchema(e.target.value as typeof schema)}>
+        {schemaNames.map((name) => (
+          <option key={name} value={name}>
+            {name}
+          </option>
+        ))}
+      </select>
+      <button type="button" onClick={toggleMode}>
+        Modo: {mode}
+      </button>
+    </>
+  );
+}
+```
+
+Los componentes toman el tema activo solos (no hace falta un wrapper con clase). La lista de paletas disponibles está en el export `schemaNames`.
+
 ## Comandos
 
 | Comando | Qué hace |
@@ -51,3 +111,7 @@ El ejemplo (`Button` + `useToggle`) es demostrativo — reemplazalo por tus comp
 1. Ajustá `name`, `version` y `description` en `package.json`.
 2. `npm run build` genera `dist/` (incluye `index.css`).
 3. `npm publish` (el campo `files` ya limita el tarball a `dist/`). Recordales a los consumidores importar `<pkg>/styles.css`.
+
+## Versionado
+
+El versionado es **semántico** (SemVer) y se deriva automáticamente de los [conventional commits](https://www.conventionalcommits.org/). Las versiones y el changelog de cada release viven en los **[GitHub Releases](https://github.com/proyectos-octavio/design-system/releases)** del repositorio — no hay `CHANGELOG.md` en el árbol del proyecto porque el proceso de release no commitea de vuelta.