@octavius2929-personal/design-system 0.3.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.

package/dist/index.cjs

@@ -64,6 +64,7 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   TriangleAlertIcon: () => TriangleAlertIcon,
   XIcon: () => XIcon,
+  colorVars: () => colorVars,
   modeNames: () => modeNames,
   schemaNames: () => schemaNames,
   text: () => text,
@@ -76,10 +77,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/theme/theme.css.ts
+var colorVars = { bg1: "var(--bg1__e3grur2c)", bg2: "var(--bg2__e3grur2d)", bg3: "var(--bg3__e3grur2e)", bgInset: "var(--bgInset__e3grur2f)", fg1: "var(--fg1__e3grur2g)", fg2: "var(--fg2__e3grur2h)", fg3: "var(--fg3__e3grur2i)", fgOnAccent: "var(--fgOnAccent__e3grur2j)", border1: "var(--border1__e3grur2k)", border2: "var(--border2__e3grur2l)", borderStrong: "var(--borderStrong__e3grur2m)", accent: "var(--accent__e3grur2n)", accentHover: "var(--accentHover__e3grur2o)", accentSoft: "var(--accentSoft__e3grur2p)", ok: "var(--ok__e3grur2q)", warn: "var(--warn__e3grur2r)", danger: "var(--danger__e3grur2s)", info: "var(--info__e3grur2t)", focus: "var(--focus__e3grur2u)", scrim: "var(--scrim__e3grur2v)" };
 var modeNames = ["light", "dark", "sepia", "contrast"];
 var schemaNames = ["tinta"];
-var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2v", dark: "theme_themes_tinta_dark__e3grur2w", sepia: "theme_themes_tinta_sepia__e3grur2x", contrast: "theme_themes_tinta_contrast__e3grur2y" } };
-var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: { bg1: "var(--color-bg1__e3grur2c)", bg2: "var(--color-bg2__e3grur2d)", bg3: "var(--color-bg3__e3grur2e)", bgInset: "var(--color-bgInset__e3grur2f)", fg1: "var(--color-fg1__e3grur2g)", fg2: "var(--color-fg2__e3grur2h)", fg3: "var(--color-fg3__e3grur2i)", fgOnAccent: "var(--color-fgOnAccent__e3grur2j)", border1: "var(--color-border1__e3grur2k)", border2: "var(--color-border2__e3grur2l)", borderStrong: "var(--color-borderStrong__e3grur2m)", accent: "var(--color-accent__e3grur2n)", accentHover: "var(--color-accentHover__e3grur2o)", accentSoft: "var(--color-accentSoft__e3grur2p)", ok: "var(--color-ok__e3grur2q)", warn: "var(--color-warn__e3grur2r)", danger: "var(--color-danger__e3grur2s)", info: "var(--color-info__e3grur2t)", scrim: "var(--color-scrim__e3grur2u)" } };
+var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2w", dark: "theme_themes_tinta_dark__e3grur2x", sepia: "theme_themes_tinta_sepia__e3grur2y", contrast: "theme_themes_tinta_contrast__e3grur2z" } };
+var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: colorVars };
 
 // src/hooks/use-previous/index.ts
 var import_react = require("react");
@@ -110,29 +112,79 @@ var noop = () => {
 var DEFAULT_VALUE = {
   schema: "tinta",
   mode: "light",
+  preference: "light",
   themeClass: themes.tinta.light,
   setSchema: noop,
   setMode: noop,
-  toggleMode: noop
+  toggleMode: noop,
+  cycleMode: noop
 };
 var ThemeContext = (0, import_react3.createContext)(null);
+function resolveSystemMode() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  return "light";
+}
+function readStored(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
-  defaultMode = "light"
+  defaultMode = "light",
+  storageKey = "ds-theme",
+  persist = true
 }) {
-  const [schema, setSchema] = (0, import_react3.useState)(defaultSchema);
-  const [mode, setMode] = (0, import_react3.useState)(defaultMode);
+  const [schema, setSchema] = (0, import_react3.useState)(
+    () => persist && readStored(storageKey)?.schema || defaultSchema
+  );
+  const [preference, setPreference] = (0, import_react3.useState)(
+    () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
+  );
+  const [systemMode, setSystemMode] = (0, import_react3.useState)(resolveSystemMode);
+  (0, import_react3.useEffect)(() => {
+    if (preference !== "system") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
+      (q) => window.matchMedia(q)
+    );
+    const onChange = () => setSystemMode(resolveSystemMode());
+    onChange();
+    for (const mql of mqls) mql.addEventListener?.("change", onChange);
+    return () => {
+      for (const mql of mqls) mql.removeEventListener?.("change", onChange);
+    };
+  }, [preference]);
+  const mode = preference === "system" ? systemMode : preference;
+  (0, import_react3.useEffect)(() => {
+    if (persist) writeStored(storageKey, { schema, preference });
+  }, [schema, preference, persist, storageKey]);
   const value = (0, import_react3.useMemo)(
     () => ({
       schema,
       mode,
+      preference,
       themeClass: themes[schema][mode],
       setSchema,
-      setMode,
-      toggleMode: () => setMode((current2) => current2 === "dark" ? "light" : "dark")
+      setMode: setPreference,
+      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
+      cycleMode: () => setPreference(modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length])
     }),
-    [schema, mode]
+    [schema, mode, preference]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }
@@ -1788,6 +1840,7 @@ function Menu({ trigger: trigger2, items }) {
 
 // src/components/dialog/index.tsx
 var import_react34 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
 var import_react33 = require("react");
@@ -1845,7 +1898,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
       document.body.style.overflow = previousOverflow;
     };
   }, [open]);
-  if (!open) return null;
+  if (!open || typeof document === "undefined") return null;
   const stop = (event) => event.stopPropagation();
   const onSurfaceKeyDown = (event) => {
     if (event.key !== "Tab") return;
@@ -1872,7 +1925,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
       first.focus();
     }
   };
-  return (
+  return (0, import_react_dom.createPortal)(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
@@ -1891,10 +1944,14 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
           actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: actionsClass, children: actions3 })
         ]
       }
-    ) })
+    ) }),
+    document.body
   );
 }
 
+// src/components/snackbar/index.tsx
+var import_react_dom2 = require("react-dom");
+
 // src/components/snackbar/use-styles.ts
 var import_react35 = require("react");
 
@@ -1920,12 +1977,15 @@ function useStyles24() {
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function Snackbar({ open, message: message2, action, onClose }) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles24();
-  if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { role: "status", className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: messageClass, children: message2 }),
-    action,
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(XIcon, { size: 18 }) })
-  ] });
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { role: "status", className: root24, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: messageClass, children: message2 }),
+      action,
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(XIcon, { size: 18 }) })
+    ] }),
+    document.body
+  );
 }
 
 // src/components/table/use-styles.ts
@@ -2200,6 +2260,7 @@ var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_t
   Tooltip,
   TriangleAlertIcon,
   XIcon,
+  colorVars,
   modeNames,
   schemaNames,
   text,
@@ -2209,3 +2270,4 @@ var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_t
   useTheme,
   useToggle
 });
+//# sourceMappingURL=index.cjs.map