@juligc99/loro-ui 0.0.17 → 0.0.19

package/README.md

@@ -1,164 +1,101 @@
 # Loro UI
 
-Loro UI is the Angular design system for Al Loro. It contains standalone Angular components, design tokens, icons, images, Storybook documentation and npm publishing configuration.
+Loro UI is the Angular 21 design system for Al Loro. It ships standalone components, theme tokens, icons, images, and Storybook docs.
 
-## Requirements
-
-- Node `20.19+`, `22.12+` or `24+`
-- npm `10.9+`
-- Angular `21+`
-
-Node 22 LTS is recommended for local Storybook work.
-
-## Install dependencies
+## Use in an app
 
 ```bash
-npm install
-```
-
-## Development
-
-```bash
-npm run build:loro-ui
-npm run storybook
+npm i @juligc99/loro-ui
 ```
 
-Stable Storybook run with cache cleanup:
+```scss
+@use 'sass:meta';
 
-```bash
-npm run storybook:stable
+@include meta.load-css('@juligc99/loro-ui/design-tokens/loro-theme.scss');
 ```
 
-Build static Storybook:
-
-```bash
-npm run build-storybook:stable
+```ts
+import { LoroButton, LoroInput } from '@juligc99/loro-ui';
 ```
 
-## Package structure
-
-```txt
-projects/loro-ui/
-├── .storybook/
-├── scripts/
-├── src/
-│   ├── lib/assets/
-│   ├── lib/components/
-│   ├── lib/design-tokens/
-│   ├── lib/docs/
-│   ├── lib/services/
-│   ├── lib/styles/
-│   ├── public-api.ts
-│   └── styles.scss
-├── ng-package.json
-├── package.json
-└── tsconfig.storybook.json
+```ts
+@Component({
+  standalone: true,
+  imports: [LoroButton, LoroInput],
+  template: `
+    <loro-button label="Guardar" />
+    <loro-input label="Email" type="email" />
+  `,
+})
+export class ExampleComponent {}
 ```
 
-## Angular best practices used
-
-- Standalone components.
-- Signal inputs/models.
-- `ChangeDetectionStrategy.OnPush`.
-- `@angular/forms/signals` support for reusable form controls.
-- Public API through `projects/loro-ui/src/public-api.ts`.
-- Relative internal imports to avoid broken npm bundles.
-- Sass tokens exported as package assets.
-
-## Sass API
+## Forms contract
 
-Use breakpoints from the package:
+Form components in Loro UI are built primarily for `@angular/forms/signals`.
+They follow the `FormValueControl<T>` / `FormCheckboxControl` contracts and the
+`model()`-based value pattern used across the design system.
 
-```scss
-@use '@juligc99/loro-ui/styles/breakpoints' as bp;
-```
+If your app still uses classic Angular `FormGroup` / `formControlName`, you will
+need a `ControlValueAccessor` bridge or adapter layer. The signals-based contract
+is the supported baseline for these components.
 
-Use theme tokens globally in an app:
+## Local development
 
-```scss
-@use 'sass:meta';
-
-@include meta.load-css('@juligc99/loro-ui/design-tokens/loro-theme.scss');
+```bash
+npm install
+npm run build
+npm run storybook
 ```
 
-Copy package assets in the consuming Angular app if you use images/fonts/icons by path:
+Use `npm run storybook` to check components and docs in the browser.
 
-```json
-{
-  "glob": "**/*",
-  "input": "node_modules/@juligc99/loro-ui/assets/loro-ui",
-  "output": "/assets/loro-ui"
-}
-```
+## Storybook remoto with ngrok
 
-## Publish to npm
+Use ngrok when you want to test the local Storybook from other devices without deploying.
 
-The workspace root is private and must not be published. The publishable package is generated in `dist/loro-ui`.
+Install ngrok:
 
 ```bash
-npm login
-npm run publish:loro-ui:dry
-npm run publish:loro-ui
+brew install ngrok/ngrok/ngrok
 ```
 
-Manual flow:
+Add the auth token:
 
 ```bash
-npm run build:loro-ui
-cd dist/loro-ui
-npm publish --dry-run
-npm publish --access public
+ngrok config add-authtoken 3G7ncpInz0dIbGwE1sLObjhbRA9_3Uo869KrBLkHuHXcxyK35
 ```
 
-## Versioning
+Start Storybook and expose it publicly:
 
 ```bash
-npm run version:loro-ui:patch
-npm run publish:loro-ui
+npm run storybook
+ngrok http 6006 --host-header=localhost:6006
 ```
 
-The current package version is `0.0.11`.
+Then open the ngrok URL on any phone, tablet, or another computer on the same network to test the UI in a real device.
 
-## Consume from an Angular app
+## Local package test
 
 ```bash
-npm i @juligc99/loro-ui
+npm run build
+cd dist/loro-ui
+npm pack
 ```
 
-```ts
-import { LoroButton, LoroInput } from '@juligc99/loro-ui';
-```
+Then install the generated tarball in the consuming app.
 
-```ts
-@Component({
-  standalone: true,
-  imports: [LoroButton, LoroInput],
-  template: `
-    <loro-button label="Guardar" />
-    <loro-input label="Email" type="email" />
-  `,
-})
-export class ExampleComponent {}
-```
-
-## Quality checks
+## Publish
 
 ```bash
-npm run lint:all
-npm run verify
+npm run build
+cd dist/loro-ui
+npm publish --access public
 ```
 
+## Package API
 
-## Form controls
-
-Form components that represent values implement Angular Signal Forms control contracts:
-
-- `LoroInput`, `LoroAuthField`, `LoroTextArea`, `LoroDropdown`, `LoroSegmentedControl`: `FormValueControl<string>`.
-- `LoroCheckbox`, `LoroToggle`: `FormCheckboxControl`.
-
-Use them from an app with `FormField` from `@angular/forms/signals`:
-
-```html
-<loro-input [formField]="form.email" label="Email" type="email" />
-<loro-checkbox [formField]="form.acceptTerms">Acepto los términos</loro-checkbox>
-```
+- Components are standalone.
+- The public entrypoint is `projects/loro-ui/src/public-api.ts`.
+- Sass helpers are exposed through package subpaths.
+- Assets are copied from `assets/loro-ui` in the package output.

package/assets/loro-ui/icons/x.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6.7 5.29 5.3 5.3 5.3-5.3a1 1 0 0 1 1.41 1.41L13.41 12l5.3 5.3a1 1 0 1 1-1.41 1.41L12 13.41l-5.3 5.3a1 1 0 1 1-1.41-1.41l5.3-5.3-5.3-5.3A1 1 0 1 1 6.7 5.29Z"/>
+</svg>

package/assets/loro-ui/loro-assets.generated.ts

@@ -424,6 +424,12 @@ export const LORO_ICON_ASSETS = [
     "path": "assets/loro-ui/icons/warning.svg",
     "layer": "Status",
     "fileName": "warning.svg"
+  },
+  {
+    "name": "icon-x",
+    "path": "assets/loro-ui/icons/x.svg",
+    "layer": "Product",
+    "fileName": "x.svg"
   }
 ] as const satisfies readonly LoroIconAsset[];
 
@@ -493,7 +499,8 @@ export const LORO_ICON_PATHS = {
   "icon-trash": "assets/loro-ui/icons/trash.svg",
   "icon-trend": "assets/loro-ui/icons/trend.svg",
   "icon-user": "assets/loro-ui/icons/user.svg",
-  "icon-warning": "assets/loro-ui/icons/warning.svg"
+  "icon-warning": "assets/loro-ui/icons/warning.svg",
+  "icon-x": "assets/loro-ui/icons/x.svg"
 } as const;
 
 export const LORO_ICON_LEGACY_NAMES = {
@@ -562,7 +569,8 @@ export const LORO_ICON_LEGACY_NAMES = {
   "trash": "icon-trash",
   "trend": "icon-trend",
   "user": "icon-user",
-  "warning": "icon-warning"
+  "warning": "icon-warning",
+  "x": "icon-x"
 } as const;
 
 export type LoroIconAssetName = keyof typeof LORO_ICON_PATHS;

package/design-tokens/loro-theme.scss

@@ -1,15 +1,18 @@
 :root {
   color-scheme: light;
 
+  /* Typography */
   --loro-font-brand: 'Manrope', 'Inter', system-ui, sans-serif;
   --loro-font-fallback: 'Inter', system-ui, sans-serif;
 
+  /* Brand palette */
   --loro-primary-900: #2e176a;
   --loro-primary-700: #5b33d6;
   --loro-primary-500: #6c3cff;
   --loro-primary-200: #ede9fe;
   --loro-accent-yellow: #ffb703;
 
+  /* Core surfaces and text */
   --loro-background: #f6f4fb;
   --loro-surface: #ffffff;
   --loro-surface-soft: rgba(255, 255, 255, 0.78);
@@ -29,26 +32,30 @@
   --loro-border-contrast: rgba(255, 255, 255, 0.22);
   --loro-focus-ring: rgba(108, 60, 255, 0.26);
 
-  --loro-disabled-surface: #ebe7f5;
-  --loro-disabled-border: rgba(43, 35, 80, 0.18);
-  --loro-disabled-text: #6f668b;
-  --loro-disabled-primary-surface: linear-gradient(135deg, #a995db, #8d77c8);
-  --loro-disabled-primary-text: rgba(255, 255, 255, 0.72);
-  --loro-social-disabled-surface: #eef0f5;
-  --loro-social-disabled-border: rgba(43, 35, 80, 0.18);
-  --loro-social-disabled-text: #5d6475;
-  --loro-social-disabled-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
+  /* Disabled states */
+  --loro-disabled-surface: #c6c2d4;
+  --loro-disabled-border: rgba(43, 35, 80, 0.1);
+  --loro-disabled-text: rgba(255, 255, 255, 0.94);
+  --loro-disabled-primary-surface: #b3acc7;
+  --loro-disabled-primary-text: rgba(255, 255, 255, 0.94);
+  --loro-social-disabled-surface: #d4d0df;
+  --loro-social-disabled-border: rgba(43, 35, 80, 0.08);
+  --loro-social-disabled-text: rgba(255, 255, 255, 0.94);
+  --loro-social-disabled-shadow: none;
 
-  --loro-shadow-soft: 0 10px 30px rgba(34, 25, 73, 0.07);
-  --loro-shadow-panel: 0 24px 60px rgba(40, 26, 92, 0.12);
-  --loro-shadow-button: 0 12px 24px rgba(91, 51, 214, 0.18);
+  /* Elevation */
+  --loro-shadow-soft: 0 8px 24px rgba(34, 25, 73, 0.06);
+  --loro-shadow-panel: 0 20px 48px rgba(40, 26, 92, 0.1);
+  --loro-shadow-button: 0 8px 20px rgba(91, 51, 214, 0.12);
   --loro-shadow-brand: 0 18px 44px rgba(46, 23, 106, 0.22), 0 2px 10px rgba(31, 10, 102, 0.1);
 
+  /* Radius */
   --loro-radius-card: 1.5rem;
   --loro-radius-card-lg: 2rem;
   --loro-radius-input: 1rem;
   --loro-radius-pill: 999px;
 
+  /* Spacing */
   --loro-space-1: 0.25rem;
   --loro-space-2: 0.5rem;
   --loro-space-3: 0.75rem;
@@ -57,6 +64,7 @@
   --loro-space-6: 2rem;
   --loro-space-7: 3rem;
 
+  /* Brand gradients and accent surfaces */
   --loro-brand-start: #5b33d6;
   --loro-brand-end: #2e176a;
   --loro-brand-soft-start: #6c3cff;
@@ -70,6 +78,7 @@
   --loro-danger-surface: #fff0f1;
   --loro-danger-text: #b0223b;
 
+  /* Page and shell */
   --loro-page-background:
     radial-gradient(circle at 14% 12%, rgba(108, 60, 255, 0.1), transparent 24%),
     radial-gradient(circle at 86% 18%, rgba(91, 51, 214, 0.06), transparent 22%),
@@ -80,6 +89,7 @@
   --loro-shell-border: rgba(255, 255, 255, 0.56);
   --loro-shell-shadow: 0 24px 60px rgba(40, 26, 92, 0.12);
 
+  /* Navigation */
   --loro-nav-desktop-width: 16rem;
   --loro-nav-mobile-max-width: 30rem;
   --loro-nav-desktop-offset: 1.5rem;
@@ -152,9 +162,8 @@
     inset 0 0 0 1px rgba(176, 34, 59, 0.04),
     0 8px 18px rgba(176, 34, 59, 0.08);
 
+  /* Header and layout */
   --loro-header-desktop-min-height: 2.5rem;
-
-  /* Layout shell tokens */
   --loro-layout-mobile-gutter: clamp(1rem, 4vw, 1.5rem);
   --loro-layout-mobile-header-bar-height: 3.45rem;
   --loro-layout-mobile-header-height: calc(
@@ -172,6 +181,7 @@
   --loro-layout-desktop-header-height: max(3rem, var(--loro-header-desktop-min-height, 0.5rem));
   --loro-layout-notification-popover-width: min(26rem, calc(100vw - var(--loro-layout-desktop-nav-width) - 4rem));
 
+  /* Cards and home surfaces */
   --loro-dashboard-card-media-size: 5rem;
   --loro-dashboard-card-content-min-height: 5.25rem;
   --loro-dashboard-card-title-min-height: 1.375rem;
@@ -212,6 +222,7 @@
   --loro-home-card-glow: radial-gradient(circle at 86% 14%, rgba(210, 193, 255, 0.16) 0%, transparent 34%);
   --loro-home-card-sheen: none;
 
+  /* Legacy aliases kept for compatibility */
   --color-primary: var(--loro-primary-500);
   --color-primary-dark: var(--loro-primary-900);
   --color-secondary: var(--loro-primary-700);
@@ -222,6 +233,7 @@
 html[data-theme='dark'] {
   color-scheme: dark;
 
+  /* Brand palette */
   --loro-primary-900: #d8c2ff;
   --loro-primary-700: #b58cff;
   --loro-primary-500: #9763f1;
@@ -245,21 +257,23 @@ html[data-theme='dark'] {
   --loro-border-contrast: rgba(255, 255, 255, 0.12);
   --loro-focus-ring: rgba(181, 140, 255, 0.34);
 
-  --loro-disabled-surface: #252a33;
-  --loro-disabled-border: rgba(255, 255, 255, 0.17);
-  --loro-disabled-text: #b9c1cb;
-  --loro-disabled-primary-surface: linear-gradient(135deg, #6f568f, #5b477a);
-  --loro-disabled-primary-text: rgba(255, 255, 255, 0.68);
-  --loro-social-disabled-surface: #20252d;
-  --loro-social-disabled-border: rgba(255, 255, 255, 0.18);
-  --loro-social-disabled-text: #c0c6cf;
-  --loro-social-disabled-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --loro-disabled-surface: #545d6e;
+  --loro-disabled-border: rgba(255, 255, 255, 0.1);
+  --loro-disabled-text: rgba(255, 255, 255, 0.94);
+  --loro-disabled-primary-surface: #5d6678;
+  --loro-disabled-primary-text: rgba(255, 255, 255, 0.94);
+  --loro-social-disabled-surface: #505a6a;
+  --loro-social-disabled-border: rgba(255, 255, 255, 0.08);
+  --loro-social-disabled-text: rgba(255, 255, 255, 0.94);
+  --loro-social-disabled-shadow: none;
 
-  --loro-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
-  --loro-shadow-panel: 0 26px 72px rgba(0, 0, 0, 0.34);
-  --loro-shadow-button: 0 14px 28px rgba(0, 0, 0, 0.32);
+  /* Elevation */
+  --loro-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.2);
+  --loro-shadow-panel: 0 22px 52px rgba(0, 0, 0, 0.28);
+  --loro-shadow-button: 0 8px 18px rgba(0, 0, 0, 0.18);
   --loro-shadow-brand: 0 18px 48px rgba(4, 3, 15, 0.38), 0 2px 10px rgba(3, 2, 10, 0.22);
 
+  /* Brand gradients and accent surfaces */
   --loro-brand-start: #b58cff;
   --loro-brand-end: #7b4cff;
   --loro-brand-soft-start: #d8c2ff;
@@ -273,6 +287,7 @@ html[data-theme='dark'] {
   --loro-danger-surface: rgba(248, 113, 113, 0.14);
   --loro-danger-text: #fca5a5;
 
+  /* Page and shell */
   --loro-page-background:
     radial-gradient(circle at 18% 14%, rgba(181, 140, 255, 0.08), transparent 22%),
     radial-gradient(circle at 84% 16%, rgba(151, 99, 241, 0.06), transparent 20%),
@@ -283,7 +298,7 @@ html[data-theme='dark'] {
   --loro-shell-border: rgba(255, 255, 255, 0.1);
   --loro-shell-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
 
-  /* Layout shell tokens */
+  /* Navigation */
   --loro-layout-notification-popover-width: min(26rem, calc(100vw - var(--loro-layout-desktop-nav-width) - 4rem));
 
   --loro-nav-surface-background: #1b1f27;
@@ -347,6 +362,8 @@ html[data-theme='dark'] {
   --loro-nav-button-danger-hover-shadow:
     inset 0 0 0 1px rgba(252, 165, 165, 0.06),
     0 12px 24px rgba(0, 0, 0, 0.18);
+
+  /* Cards and home surfaces */
   --loro-home-hero-border: rgba(255, 255, 255, 0.08);
   --loro-home-hero-bg:
     radial-gradient(circle at 100% 0%, rgba(191, 150, 255, 0.14) 0%, transparent 34%),
@@ -379,6 +396,7 @@ html[data-theme='dark'] {
   --loro-home-card-glow: radial-gradient(circle at 86% 14%, rgba(197, 166, 255, 0.14) 0%, transparent 34%);
   --loro-home-card-sheen: none;
 
+  /* Legacy aliases kept for compatibility */
   --color-secondary-dark: #7b4cff;
   --color-card-bg: rgba(181, 140, 255, 0.1);
 }