@randstad-uca/design-system 1.0.3

package/dist/styles/forms.css

@@ -0,0 +1,151 @@
+/* Base form styles */
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    font-family: 'Graphik', sans-serif;
+}
+
+/* Form labels */
+.form-label {
+    font-size: 16px;
+    line-height: 25px;
+    font-weight: 400;
+    color: var(--secondary-color-80);
+}
+
+/* Form inputs */
+.form-input {
+    font-size: 16px;
+    line-height: 30px;
+    padding: 10px;
+    border: 1px solid var(--secondary-color-10);
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form.error:not(.disabled) .form-input:hover {
+    box-shadow: 0px 0px 0px 4px #E00F0F1A;
+}
+
+.form:not(.disabled) .form-input:hover {
+    box-shadow: 0px 0px 0px 4px #0F19411A;
+}
+
+.form-input:focus {
+    border: 1px solid var(--primary-color);
+}
+
+.form.error .form-input {
+    background-color: #FDF3F3;
+    border-color: #e3342f;
+}
+
+.form-input.success {
+    border-color: #28a745;
+    background-color: #d4edda;
+}
+
+input::placeholder {
+    color: var(--secondary-color-40);
+    font-size: 16px;
+    line-height: 30px;
+    font-weight: 400;
+}
+
+/* Buttons inside forms */
+.form-button {
+    font-size: 16px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.helper-description {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 25px;
+    text-align: left;
+    margin: 0px;
+    color: var(--secondary-color-40);
+}
+
+.error-message {
+    font-size: 16px;
+    line-height: 25px;
+    color: var(--ui-negative);
+    margin: 0px;
+}
+
+.toggle-password {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 5px;
+}
+
+.form-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  
+  .input-with-button {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  
+  .input-with-button input {
+    width: 100%;
+    padding-right: 40px; /* Espacio para el botón */
+  }
+  
+  .input-with-button button {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%); /* Siempre centrado verticalmente */
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px; /* Ajusta según necesites */
+    height: 40px; /* Asegura que el botón tenga un tamaño uniforme */
+  }
+  
+  .toggle-password randstad-icon {
+    width: 100%;
+    height: 100%;
+    max-width: 32px;
+    max-height: 32px;
+  }
+
+  textarea {
+    font-family: Graphik;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 30px;
+    letter-spacing: 0%;
+  }
+
+  
+  textarea.form-input {
+    /* Estilos específicos para textarea */
+    min-height: 100px; /* Diferenciarlo del input */
+    resize: none;
+  }
+  
+  .form.disabled textarea.form-input,
+  .form.disabled input.form-input {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+  }

package/dist/styles/globalStyles.d.ts

@@ -0,0 +1,2 @@
+declare const globalStyles: CSSStyleSheet;
+export default globalStyles;

package/dist/styles/globalStyles.ts

@@ -0,0 +1,22 @@
+const globalStyles = new CSSStyleSheet();
+
+globalStyles.replaceSync(`
+  @font-face {
+    font-family: 'Graphik';
+    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),
+         url('/src/assets/font/Graphik-Regular.woff') format('woff'),
+         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  .body-s {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color: green;
+  }
+`);
+
+export default globalStyles;

package/dist/styles/icons.css

@@ -0,0 +1,25 @@
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon svg {
+    width: 1em;
+    height: 1em;
+}
+
+.icon-sm svg {
+    width: 16px;
+    height: 16px;
+}
+
+.icon-md svg {
+    width: 24px;
+    height: 24px;
+}
+
+.icon-lg svg {
+    width: 32px;
+    height: 32px;
+}

package/dist/styles/index.css

@@ -0,0 +1,5 @@
+@import './fonts.css';
+@import './colors.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/styles/select.css

@@ -0,0 +1,12 @@
+
+.select-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    font-family: "Graphik", sans-serif;
+}
+
+.select {
+    font-family: "Graphik", sans-serif;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@randstad-uca/design-system",
+  "version": "1.0.3",
+  "main": "dist/index.js",
+  "files": ["dist"],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook-live": "storybook dev -p 6006",
+    "build-test": "storybook build",
+    "generate-icons": "node src/utils/generateIconList.js",
+    "build": "rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.3",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@storybook/web-components": "^8.5.0",
+    "@storybook/web-components-webpack5": "^8.5.0",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
+    "lit-css-loader": "^3.0.1",
+    "postcss": "^8.5.1",
+    "rollup": "^4.30.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.5.0",
+    "tailwindcss": "^3.4.17",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1"
+  },
+  "dependencies": {
+    "@material/web": "^2.2.0",
+    "@vaadin/vaadin-date-picker": "^23.5.12"
+  },
+  "peerDependencies": {
+    "lit": "^3.2.1"
+  }
+}

package/readme.md

@@ -0,0 +1,170 @@
+# Publicación del Design System en NPM (ESM)
+
+Esta guía explica paso a paso cómo compilar y publicar tu Design System hecho con **Lit + Web Components + TypeScript** en NPM, usando el formato **ESM (ECMAScript Modules)**.
+
+---
+
+## 🔧 Requisitos previos
+
+- Node.js y npm instalados
+- Cuenta en [npmjs.com](https://www.npmjs.com/)
+- Proyecto con componentes hechos en Lit
+- Rollup instalado como bundler
+
+---
+
+## 📂 Estructura recomendada
+
+```
+my-design-system/
+├── src/
+│   ├── components/
+│   │   └── terms-checkbox.ts
+│   └── index.ts         # importa y registra todos los componentes
+├── dist/                # carpeta generada al compilar
+├── package.json
+├── tsconfig.json
+└── rollup.config.js
+```
+
+---
+
+## 🔹 Paso 1: `rollup.config.js` (ESM solamente)
+
+```js
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'esm',
+    sourcemap: true,
+    preserveModules: true,
+    preserveModulesRoot: 'src'
+  },
+  plugins: [
+    resolve(),
+    typescript({ tsconfig: './tsconfig.json' }),
+    terser()
+  ]
+};
+```
+
+> ✅ `preserveModules: true` mantiene la estructura de carpetas para importar componentes individualmente.
+
+---
+
+## 🔹 Paso 2: `src/index.ts`
+
+```ts
+import './components/terms-checkbox.ts';
+// import otros componentes si es necesario
+```
+
+---
+
+## 📆 Paso 3: `package.json`
+
+```json
+{
+  "name": "@pablosalut/design-system",
+  "version": "1.0.0",
+  "description": "Design system de Pablo con Lit y Web Components",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^5.0.0"
+  },
+  "keywords": ["design-system", "web-components", "lit", "esm"],
+  "author": "Pablo Salut",
+  "license": "MIT"
+}
+```
+
+---
+
+## 🚀 Publicación en NPM
+
+### 🔓 Público
+
+1. Iniciar sesión:
+
+```bash
+npm login
+```
+
+2. Compilar el design system:
+
+```bash
+npm run build
+```
+
+3. Publicar el paquete:
+
+```bash
+npm publish --access public
+```
+
+### 🔐 Privado
+
+Para publicar un paquete privado:
+
+1. Asegurate de tener un scope (por ejemplo, `@pablosalut/tu-paquete`).
+
+2. Agregá en `package.json`:
+
+```json
+"publishConfig": {
+  "access": "restricted"
+}
+```
+
+3. Publicá con:
+
+```bash
+npm publish
+```
+
+> 🔐 Esto hará que tu paquete solo sea accesible para vos (o tu organización, si estás en un team de NPM).
+
+---
+
+## 📁 Uso en un proyecto Angular
+
+Instalar:
+
+```bash
+npm install @pablosalut/design-system
+```
+
+Importar en `main.ts`:
+
+```ts
+import '@pablosalut/design-system';
+```
+
+---
+
+## ✨ Tips adicionales
+
+- Usá `sourcemap: true` para poder depurar componentes en proyectos consumidores
+- Publicá nuevas versiones con `npm version patch/minor/major`
+- Usá `npm link` si querés testear el paquete localmente antes de publicar
+
+---
+
+Si querés agregar también UMD para soporte con `<script>`, se puede extender esta config. Pero para Angular, **ESM es suficiente y recomendado**.
+