liv-components 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# liv-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Librería de componentes Angular y *tokens* de diseño del sistema LIV (liquidación del impuesto vehicular).
+
+## Instalación
+
+```bash
+npm install liv-components
+```
+
+Requiere Angular 21 y Tailwind CSS 4 en la aplicación.
+
+## Tokens de diseño
+
+Importa el tema después de Tailwind en la hoja global de la aplicación:
+
+```css
+@import 'tailwindcss';
+@import 'liv-components/styles/theme.css';
+```
+
+El tema define colores (`--color-text-primary`, `--color-status-success`…), tipografía (`--text-body-md`, `--text-heading-h1`…) y sombras (`--shadow-elevation-md`, `--shadow-focus-ring`…), con los mismos nombres que los estilos de Figma. Anula la paleta, los tamaños de texto y las sombras por defecto de Tailwind, así que solo existen los tokens del sistema.
+
+## Componentes
+
+Todavía no hay componentes publicados. Cada uno tendrá el mismo nombre, variantes y propiedades que en el archivo de diseño de Figma.

package/fesm2022/liv-components.mjs

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=liv-components.mjs.map

package/fesm2022/liv-components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"liv-components.mjs","sources":["../../../projects/liv-components/src/liv-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "liv-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Librería de componentes y tokens de diseño del sistema LIV (impuesto vehicular).",
+  "license": "UNLICENSED",
+  "keywords": [
+    "angular",
+    "components",
+    "design-tokens",
+    "tailwindcss"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    "./styles/theme.css": {
+      "style": "./styles/theme.css",
+      "default": "./styles/theme.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/liv-components.d.ts",
+      "default": "./fesm2022/liv-components.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "fesm2022/liv-components.mjs",
+  "typings": "types/liv-components.d.ts",
+  "type": "module"
 }

package/styles/theme.css

@@ -0,0 +1,98 @@
+/*
+ * @liv/ui — tokens de diseño.
+ *
+ * Transcritos de los estilos locales del archivo de Figma LIV-Diseño (página 01 Fundamentos) el
+ * 2026-11-01, con los mismos nombres: el estilo `text/primary` es el token `--color-text-primary` y la
+ * utilidad `text-text-primary`. No se editan a mano: un cambio se hace primero en Figma y luego se
+ * regenera este archivo.
+ *
+ * Los valores por defecto de Tailwind para color, tamaño de texto y sombra se anulan, así que solo
+ * existen los tokens del proyecto (docs/arquitectura/01 §11).
+ */
+@theme {
+  --color-*: initial;
+  --text-*: initial;
+  --shadow-*: initial;
+
+  /* Color · texto */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #64748b;
+  --color-text-disabled: #94a3b8;
+  --color-text-inverse: #ffffff;
+  --color-text-link: #1d4ed8;
+
+  /* Color · fondos */
+  --color-bg-canvas: #f8fafc;
+  --color-bg-surface: #ffffff;
+  --color-bg-subtle: #f1f5f9;
+  --color-bg-inverse: #0f172a;
+  --color-bg-overlay: rgb(15 23 42 / 0.5);
+
+  /* Color · bordes */
+  --color-border-default: #e2e8f0;
+  --color-border-strong: #cbd5e1;
+  --color-border-focus: #2563eb;
+
+  /* Color · acción */
+  --color-action-primary: #1d4ed8;
+  --color-action-primary-hover: #1e40af;
+  --color-action-primary-pressed: #1e3a8a;
+  --color-action-primary-subtle: #eff6ff;
+
+  /* Color · estados */
+  --color-status-success: #15803d;
+  --color-status-success-subtle: #f0fdf4;
+  --color-status-warning: #b45309;
+  --color-status-warning-subtle: #fffbeb;
+  --color-status-danger: #b91c1c;
+  --color-status-danger-subtle: #fef2f2;
+  --color-status-info: #0369a1;
+  --color-status-info-subtle: #f0f9ff;
+
+  /* Tipografía */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --text-heading-h1: 24px;
+  --text-heading-h1--line-height: 32px;
+  --text-heading-h1--font-weight: 600;
+  --text-heading-h2: 20px;
+  --text-heading-h2--line-height: 28px;
+  --text-heading-h2--font-weight: 600;
+  --text-heading-h3: 16px;
+  --text-heading-h3--line-height: 24px;
+  --text-heading-h3--font-weight: 600;
+  --text-body-lg: 16px;
+  --text-body-lg--line-height: 24px;
+  --text-body-lg--font-weight: 400;
+  --text-body-md: 14px;
+  --text-body-md--line-height: 20px;
+  --text-body-md--font-weight: 400;
+  --text-body-md-strong: 14px;
+  --text-body-md-strong--line-height: 20px;
+  --text-body-md-strong--font-weight: 600;
+  --text-body-sm: 12px;
+  --text-body-sm--line-height: 16px;
+  --text-body-sm--font-weight: 400;
+  --text-label-md: 14px;
+  --text-label-md--line-height: 20px;
+  --text-label-md--font-weight: 500;
+  --text-label-sm: 12px;
+  --text-label-sm--line-height: 16px;
+  --text-label-sm--font-weight: 500;
+  --text-button-md: 14px;
+  --text-button-md--line-height: 20px;
+  --text-button-md--font-weight: 600;
+  /* code/sm usa además font-mono */
+  --text-code-sm: 12px;
+  --text-code-sm--line-height: 16px;
+  --text-code-sm--font-weight: 400;
+
+  /* Efectos */
+  --shadow-elevation-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-focus-ring: 0 0 0 3px rgb(37 99 235 / 0.4);
+}

package/types/liv-components.d.ts

@@ -0,0 +1,2 @@
+
+export { };