@atomng/ui 1.0.0

package/README.md

@@ -0,0 +1,401 @@
+# @atomng/ui
+
+> Angular 19 component library — Atomic Design system built with **Standalone Components**, **Angular Signals** and **SCSS design tokens**.
+
+[![Angular](https://img.shields.io/badge/Angular-19-dd0031?logo=angular)](https://angular.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.6-3178c6?logo=typescript)](https://www.typescriptlang.org)
+[![npm](https://img.shields.io/badge/npm-%40atomng%2Fui-cb3837?logo=npm)](https://www.npmjs.com/package/@atomng/ui)
+[![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
+
+---
+
+## What is @atomng/ui?
+
+`@atomng/ui` is a fully Angular-native UI component library following the **Atomic Design** methodology (Atoms → Molecules → Organisms). Built entirely with:
+
+- **Standalone Components** — no `NgModule`, tree-shakable by default
+- **Angular Signals** — reactive state with `signal()`, `model()`, `computed()`
+- **SCSS design tokens** — all values exposed as CSS custom properties
+- **ChangeDetectionStrategy.OnPush** — every component is performance-optimised
+- **Dark mode** — toggle via `data-theme="dark"` on any parent element
+- **Theming** — runtime primary color switching with 18 built-in palettes
+
+---
+
+## Installation
+
+```bash
+npm install @atomng/ui
+```
+
+Install required peer dependencies if not already present:
+
+```bash
+npm install @angular/core @angular/common @angular/animations rxjs lucide-angular
+```
+
+---
+
+## Setup
+
+### 1 — Import design tokens in your global `styles.scss`
+
+```scss
+/* All tokens at once */
+@use 'node_modules/@atomng/ui/tokens/index' as *;
+
+/* Or individually */
+@use 'node_modules/@atomng/ui/tokens/colors'     as *;
+@use 'node_modules/@atomng/ui/tokens/typography' as *;
+@use 'node_modules/@atomng/ui/tokens/spacing'    as *;
+```
+
+You can also configure `stylePreprocessorOptions` in `angular.json` to avoid the long path:
+
+```json
+{
+  "stylePreprocessorOptions": {
+    "includePaths": ["node_modules/@atomng/ui/tokens"]
+  }
+}
+```
+
+Then simply:
+
+```scss
+@use 'colors'     as *;
+@use 'typography' as *;
+@use 'spacing'    as *;
+```
+
+### 2 — Setup icons (required by Sidebar)
+
+`@atomng/ui` uses **[lucide-angular](https://lucide.dev)** for all icons. To use icons in your own components, import `LucideAngularModule.pick()` with only the icons you need:
+
+```ts
+import { LucideAngularModule, House, Settings } from 'lucide-angular';
+
+@Component({
+  standalone: true,
+  // LucideAngularModule.pick() returns ModuleWithProviders — supported at runtime
+  // in Angular 14+ standalone components; cast `as any` bypasses the TS type check.
+  imports: [LucideAngularModule.pick({ House, Settings }) as any],
+  template: `<lucide-icon name="house" [size]="20" />`,
+})
+export class MyComponent {}
+```
+
+> **Rule:** always use `<lucide-icon>` — never inline SVG.
+
+### 3 — Add animations (required by Sidebar)
+
+```ts
+// app.config.ts
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+  ],
+};
+```
+
+### 4 — Optional: configure the theme at bootstrap
+
+```ts
+// app.config.ts
+import { provideSharedUiTheme } from '@atomng/ui/tokens';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    provideSharedUiTheme({ primaryColor: 'indigo', mode: 'light' }),
+  ],
+};
+```
+
+---
+
+## Usage
+
+All components are **standalone** — import only what you need:
+
+```ts
+import { ButtonComponent }      from '@atomng/ui/atoms';
+import { InputComponent }       from '@atomng/ui/molecules';
+import { SidebarComponent }     from '@atomng/ui/organisms';
+import { ThemeToggleComponent } from '@atomng/ui/tokens';
+
+// Or import everything from the root barrel:
+import { ButtonComponent, InputComponent } from '@atomng/ui';
+```
+
+```html
+<ui-button variant="solid" color="primary" [loading]="isLoading">
+  Enregistrer
+</ui-button>
+
+<ui-input placeholder="Rechercher…" />
+
+<ui-badge color="success" variant="soft">Actif</ui-badge>
+
+<!-- Light / System / Dark mode toggle -->
+<ui-theme-toggle />
+
+<!-- Primary color picker (18 palettes) -->
+<ui-theme-picker (change)="onColorChange()" />
+```
+
+---
+
+## Entry points
+
+| Import path | Contents |
+|---|---|
+| `@atomng/ui` | Tout (atoms + molecules + organisms) |
+| `@atomng/ui/atoms` | Button, Badge, Avatar, Checkbox, Chip, Progress, Skeleton, Slider, Switch, Tooltip, Link, Separator, Kbd |
+| `@atomng/ui/molecules` | Input, Select, SelectSearch, Textarea, Alert, FormField, Tabs, Breadcrumb, Pagination, AvatarGroup, ButtonGroup, Toast |
+| `@atomng/ui/organisms` | Sidebar, Card, Table, Modal, Accordion, DropdownMenu, NavigationMenu |
+| `@atomng/ui/tokens` | ThemeService, ThemeToggleComponent, ThemePickerComponent, provideSharedUiTheme, color presets |
+
+---
+
+## Components
+
+### Atoms
+
+| Composant | Sélecteur | Inputs principaux |
+|---|---|---|
+| `ButtonComponent` | `ui-button` | `variant` (solid\|outline\|soft\|subtle\|ghost\|link), `color`, `size`, `loading`, `disabled`, `square` |
+| `BadgeComponent` | `ui-badge` | `label`, `color`, `variant`, `size` |
+| `AvatarComponent` | `ui-avatar` | `src`, `alt`, `initials`, `size` (xs→3xl) |
+| `CheckboxComponent` | `ui-checkbox` | `label`, `size`, `color`, `checked` (model), `indeterminate` |
+| `ChipComponent` | `ui-chip` | `label`, `color`, `size`, `closable` |
+| `ProgressComponent` | `ui-progress` | `value`, `max`, `color`, `size` |
+| `SkeletonComponent` | `ui-skeleton` | `width`, `height`, `rounded` |
+| `SliderComponent` | `ui-slider` | `min`, `max`, `step`, `value` (model) |
+| `SwitchComponent` | `ui-switch` | `label`, `size`, `color`, `checked` (model) |
+| `TooltipComponent` | `ui-tooltip` | `content`, `placement` |
+| `LinkComponent` | `ui-link` | `href`, `to` (routerLink), `external` |
+| `SeparatorComponent` | `ui-separator` | `orientation`, `label` |
+| `KbdComponent` | `ui-kbd` | `value` |
+
+### Molecules
+
+| Composant | Sélecteur | Inputs principaux |
+|---|---|---|
+| `InputComponent` | `ui-input` | `type`, `placeholder`, `size`, `variant`, `color`, `disabled` — CVA ✓ |
+| `SelectComponent` | `ui-select` | `options`, `placeholder`, `size`, `disabled` — CVA ✓ |
+| `SelectSearchComponent` | `ui-select-search` | `options`, `placeholder`, `searchable` — CVA ✓ |
+| `TextareaComponent` | `ui-textarea` | `placeholder`, `rows`, `size`, `variant` — CVA ✓ |
+| `AlertComponent` | `ui-alert` | `color`, `title`, `description`, `closable` — Output: `close` |
+| `FormFieldComponent` | `ui-form-field` | `label`, `name`, `errorMessage`, `required`, `size` |
+| `TabsComponent` | `ui-tabs` | `tabs`, `activeIndex` (model) |
+| `BreadcrumbComponent` | `ui-breadcrumb` | `items` |
+| `PaginationComponent` | `ui-pagination` | `total`, `pageSize`, `page` (model) |
+| `AvatarGroupComponent` | `ui-avatar-group` | `items`, `max`, `size` |
+| `ButtonGroupComponent` | `ui-button-group` | `orientation` |
+| `ToastComponent` | `ui-toast` | `message`, `color`, `duration` |
+
+### Organisms
+
+| Composant | Sélecteur | Inputs principaux |
+|---|---|---|
+| `SidebarComponent` | `ui-sidebar` | `navGroups`, `footerGroups`, `user`, `collapsible`, `collapsed` (model), `showSearch` |
+| `CardComponent` | `ui-card` | `title`, `description`, `padding` |
+| `TableComponent` | `ui-table` | `columns`, `data`, `loading` + `UiTableCellDirective` |
+| `ModalComponent` | `ui-modal` | `open` (model), `title`, `size` |
+| `AccordionComponent` | `ui-accordion` | `items`, `multiple` |
+| `DropdownMenuComponent` | `ui-dropdown-menu` | `items`, `trigger` |
+| `NavigationMenuComponent` | `ui-navigation-menu` | `items`, `orientation` |
+
+---
+
+## Custom cell templates (`UiTableCellDirective`)
+
+Use `ng-template[uiCell]` inside `<ui-table>` to render custom content per column:
+
+```ts
+import { TableComponent, UiTableCellDirective } from '@atomng/ui/organisms';
+import { BadgeComponent }                        from '@atomng/ui/atoms';
+
+@Component({
+  standalone: true,
+  imports: [TableComponent, UiTableCellDirective, BadgeComponent],
+})
+```
+
+```html
+<ui-table [columns]="cols" [data]="rows">
+  <ng-template uiCell="status" let-row>
+    <ui-badge [color]="row['statusColor']" variant="soft">
+      {{ row['status'] }}
+    </ui-badge>
+  </ng-template>
+</ui-table>
+```
+
+---
+
+## Theming
+
+### Primary color
+
+`@atomng/ui` ships **18 color presets** (Tailwind CSS v3 palettes, scale 50→950):
+
+| Preset | Swatch 500 | Preset | Swatch 500 |
+|---|---|---|---|
+| `green` | ![#22c55e](https://via.placeholder.com/12/22c55e/22c55e) `#22c55e` | `lime` | ![#84cc16](https://via.placeholder.com/12/84cc16/84cc16) `#84cc16` |
+| `emerald` | ![#10b981](https://via.placeholder.com/12/10b981/10b981) `#10b981` | `amber` | ![#f59e0b](https://via.placeholder.com/12/f59e0b/f59e0b) `#f59e0b` |
+| `teal` | ![#14b8a6](https://via.placeholder.com/12/14b8a6/14b8a6) `#14b8a6` | `orange` | ![#f97316](https://via.placeholder.com/12/f97316/f97316) `#f97316` |
+| `cyan` | ![#06b6d4](https://via.placeholder.com/12/06b6d4/06b6d4) `#06b6d4` | `red` | ![#ef4444](https://via.placeholder.com/12/ef4444/ef4444) `#ef4444` |
+| `sky` | ![#0ea5e9](https://via.placeholder.com/12/0ea5e9/0ea5e9) `#0ea5e9` | `rose` | ![#f43f5e](https://via.placeholder.com/12/f43f5e/f43f5e) `#f43f5e` |
+| `blue` | ![#3b82f6](https://via.placeholder.com/12/3b82f6/3b82f6) `#3b82f6` | `pink` | ![#ec4899](https://via.placeholder.com/12/ec4899/ec4899) `#ec4899` |
+| `indigo` | ![#6366f1](https://via.placeholder.com/12/6366f1/6366f1) `#6366f1` | `fuchsia` | ![#d946ef](https://via.placeholder.com/12/d946ef/d946ef) `#d946ef` |
+| `violet` | ![#8b5cf6](https://via.placeholder.com/12/8b5cf6/8b5cf6) `#8b5cf6` | `purple` | ![#a855f7](https://via.placeholder.com/12/a855f7/a855f7) `#a855f7` |
+| `slate` | ![#64748b](https://via.placeholder.com/12/64748b/64748b) `#64748b` | `zinc` | ![#71717a](https://via.placeholder.com/12/71717a/71717a) `#71717a` |
+
+Each preset overrides the CSS custom properties `--color-primary-50` → `--color-primary-950` on `:root`.
+
+Set the color at bootstrap via `provideSharedUiTheme()`, or at runtime:
+
+```ts
+import { ThemeService } from '@atomng/ui/tokens';
+
+export class MyComponent {
+  private theme = inject(ThemeService);
+
+  changeColor(): void {
+    // Use a preset name
+    this.theme.setPrimary('violet');
+
+    // Or pass a full custom palette (11 shades, 50→950)
+    this.theme.setPrimary({
+      50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc',
+      400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf',
+      800: '#86198f', 900: '#701a75', 950: '#4a044e',
+    });
+  }
+}
+```
+
+#### ThemeService API
+
+```ts
+theme = inject(ThemeService);
+
+// Signals (read-only)
+theme.activePreset()   // PrimaryColorPreset | null
+theme.activeMode()     // 'light' | 'dark' | 'system'
+theme.isDark()         // boolean — resolved, accounts for 'system'
+theme.presets          // ColorPresetMeta[] — all 18 presets for a picker UI
+```
+
+### Dark / Light / System mode
+
+```ts
+this.theme.setMode('dark');    // force dark
+this.theme.setMode('light');   // force light
+this.theme.setMode('system');  // follow OS preference
+this.theme.toggleMode();       // light ↔ dark
+```
+
+The mode and selected color are **automatically persisted** to `localStorage` and restored on the next page load.
+
+Add the built-in components anywhere in your app:
+
+```html
+<!-- Toggle light / dark -->
+<ui-theme-toggle />
+
+<!-- Visual color picker (all 18 presets) -->
+<ui-theme-picker />
+```
+
+### Dark mode in your own SCSS
+
+Dark mode is activated by `data-theme="dark"` on the `<html>` element (set automatically by `ThemeService`). All CSS custom properties cascade down:
+
+```scss
+.my-card {
+  background: var(--color-bg);       // white in light, #030712 in dark
+  color:      var(--color-text);     // #111827 in light, #f9fafb in dark
+  border:     1px solid var(--color-border);
+}
+```
+
+---
+
+## Design tokens reference
+
+```scss
+// ── Backgrounds
+var(--color-bg)           // Page background
+var(--color-bg-subtle)    // Subtle surface (cards, inputs)
+var(--color-bg-muted)     // Muted surface
+
+// ── Text
+var(--color-text)         // Primary text
+var(--color-text-muted)   // Secondary text
+var(--color-text-subtle)  // Tertiary / placeholder
+
+// ── Borders
+var(--color-border)
+var(--color-border-muted)
+
+// ── Brand
+var(--color-primary-500)  // Active primary color (runtime)
+var(--color-primary-100)  // … through 950
+
+// ── Typography
+var(--font-sans)          // Primary font (system-ui)
+var(--font-mono)          // Monospace
+var(--text-xs)            // 11px
+var(--text-sm)            // 13px
+var(--text-base)          // 15px
+var(--text-lg)            // 18px
+var(--text-xl)            // 20px
+var(--text-2xl)           // 24px
+var(--font-medium)        // 500
+var(--font-semibold)      // 600
+var(--font-bold)          // 700
+
+// ── Spacing (base 4px)
+var(--spacing-1)          // 4px
+var(--spacing-2)          // 8px
+var(--spacing-4)          // 16px
+var(--spacing-6)          // 24px
+var(--spacing-8)          // 32px
+var(--spacing-12)         // 48px
+
+// ── Radius
+var(--radius-sm)          // 4px
+var(--radius-md)          // 6px
+var(--radius-lg)          // 10px
+var(--radius-xl)          // 14px
+
+// ── Transitions
+var(--transition-colors)
+var(--transition-fast)
+var(--transition-slow)
+```
+
+---
+
+## Requirements
+
+| Dependency | Version | Notes |
+|---|---|---|
+| `@angular/core` | `>= 19.0.0` | |
+| `@angular/common` | `>= 19.0.0` | |
+| `@angular/animations` | `>= 19.0.0` | Required by Sidebar |
+| `@angular/forms` | `>= 19.0.0` | Required by CVA components (Input, Select…) |
+| `@angular/router` | `>= 19.0.0` | Required by Sidebar, Link, Breadcrumb |
+| `rxjs` | `>= 7.4.0` | |
+| `lucide-angular` | `>= 1.0.0` | Required by Sidebar (icons) |
+
+---
+
+## License
+
+MIT © [LIBASSE MBAYE](mailto:libasselayembayedev@gmail.com)

package/atomng-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"atomng-ui.d.ts","sourceRoot":"","sources":["../../../libs/shared-ui/src/atomng-ui.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,SAAS,CAAC"}

package/atoms/atomng-ui-atoms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"atomng-ui-atoms.d.ts","sourceRoot":"","sources":["../../../../libs/shared-ui/src/lib/atoms/atomng-ui-atoms.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,SAAS,CAAC"}

package/atoms/avatar/avatar.component.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+/**
+ * Avatar Atom
+ * Source: Nuxt UI v3 — ❖ Avatar
+ * Shows: image → initials → icon fallback
+ * Sizes: xs(20) sm(24) md(32) lg(40) xl(48) 2xl(64) 3xl(80)
+ */
+export declare class AvatarComponent {
+    readonly src: import("@angular/core").InputSignal<string>;
+    readonly alt: import("@angular/core").InputSignal<string>;
+    readonly size: import("@angular/core").InputSignal<AvatarSize>;
+    readonly initials: import("@angular/core").InputSignal<string>;
+    readonly chip: import("@angular/core").InputSignal<boolean>;
+    readonly chipColor: import("@angular/core").InputSignal<string>;
+    readonly chipAlt: import("@angular/core").InputSignal<string>;
+    readonly rounded: import("@angular/core").InputSignal<boolean>;
+    protected readonly imgError: import("@angular/core").WritableSignal<boolean>;
+    protected readonly classes: import("@angular/core").Signal<string>;
+    protected onImgError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ui-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "chip": { "alias": "chip"; "required": false; "isSignal": true; }; "chipColor": { "alias": "chipColor"; "required": false; "isSignal": true; }; "chipAlt": { "alias": "chipAlt"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=avatar.component.d.ts.map

package/atoms/avatar/avatar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/avatar/avatar.component.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAE1E;;;;;GAKG;AACH,qBAiCa,eAAe;IAC1B,QAAQ,CAAC,GAAG,8CAAoC;IAChD,QAAQ,CAAC,GAAG,8CAAoC;IAChD,QAAQ,CAAC,IAAI,kDAAgC;IAC7C,QAAQ,CAAC,QAAQ,8CAA+B;IAChD,QAAQ,CAAC,IAAI,+CAA8B;IAC3C,QAAQ,CAAC,SAAS,8CAA4B;IAC9C,QAAQ,CAAC,OAAO,8CAAgC;IAChD,QAAQ,CAAC,OAAO,+CAA0B;IAE1C,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAiB;IAE5C,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAIvB;IAEH,SAAS,CAAC,UAAU;yCAlBT,eAAe;2CAAf,eAAe;CAmB3B"}

package/atoms/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { AvatarComponent } from './avatar.component';
+export type { AvatarSize } from './avatar.component';
+//# sourceMappingURL=index.d.ts.map

package/atoms/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}

package/atoms/badge/badge.component.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+export type BadgeVariant = 'solid' | 'outline' | 'soft' | 'subtle';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BadgeColor = 'neutral' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+/**
+ * Badge Atom
+ * Source: Nuxt UI v3 — ❖ Badge
+ * Colors: Neutral | Primary | Secondary | Success | Info | Warning | Error
+ * Variants: Outline | Soft | Solid | Subtle
+ * Sizes: xs | sm | md | lg | xl
+ * RoundedFull: True | False
+ */
+export declare class BadgeComponent {
+    readonly variant: import("@angular/core").InputSignal<BadgeVariant>;
+    readonly color: import("@angular/core").InputSignal<BadgeColor>;
+    readonly size: import("@angular/core").InputSignal<BadgeSize>;
+    readonly rounded: import("@angular/core").InputSignal<boolean>;
+    readonly dot: import("@angular/core").InputSignal<boolean>;
+    protected readonly classes: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "ui-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=badge.component.d.ts.map

package/atoms/badge/badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/badge/badge.component.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AACnE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAExG;;;;;;;GAOG;AACH,qBAea,cAAc;IACzB,QAAQ,CAAC,OAAO,oDAAiC;IACjD,QAAQ,CAAC,KAAK,kDAAoC;IAClD,QAAQ,CAAC,IAAI,iDAA+B;IAC5C,QAAQ,CAAC,OAAO,+CAA2B;IAC3C,QAAQ,CAAC,GAAG,+CAA+B;IAE3C,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAIvB;yCAXQ,cAAc;2CAAd,cAAc;CAY1B"}

package/atoms/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { BadgeComponent } from './badge.component';
+export type { BadgeVariant, BadgeSize, BadgeColor } from './badge.component';
+//# sourceMappingURL=index.d.ts.map

package/atoms/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/atoms/button/button.component.d.ts

@@ -0,0 +1,47 @@
+import * as i0 from "@angular/core";
+export type ButtonVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Button Atom
+ * Source: Nuxt UI v3 Design Kit — ❖ Button
+ *
+ * Variants: solid | outline | soft | subtle | ghost | link
+ * Sizes:    xs (h:24px) | sm (h:28px) | md (h:32px) | lg (h:36px) | xl (h:40px)
+ * States:   default | hover | focus | disabled | loading
+ *
+ * @example
+ * <ui-button variant="solid" color="primary" size="md">Click me</ui-button>
+ * <ui-button variant="outline" [loading]="true">Loading</ui-button>
+ * <ui-button [square]="true" leadingIcon="plus" />
+ */
+export declare class ButtonComponent {
+    /** Visual variant — from Figma: Solid | Outline | Soft | Subtle | Ghost | Link */
+    readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
+    /** Color theme */
+    readonly color: import("@angular/core").InputSignal<ButtonColor>;
+    /** Size — from Figma: xs(h:24) sm(h:28) md(h:32) lg(h:36) xl(h:40) */
+    readonly size: import("@angular/core").InputSignal<ButtonSize>;
+    /** Disabled state */
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    /** Loading state — shows spinner */
+    readonly loading: import("@angular/core").InputSignal<boolean>;
+    /** Position of the spinner */
+    readonly loadingPosition: import("@angular/core").InputSignal<"leading" | "trailing">;
+    /** Square/icon-only mode */
+    readonly square: import("@angular/core").InputSignal<boolean>;
+    /** Full width */
+    readonly block: import("@angular/core").InputSignal<boolean>;
+    /** Leading icon name (for aria/slot reference) */
+    readonly leadingIcon: import("@angular/core").InputSignal<string>;
+    /** Trailing icon name */
+    readonly trailingIcon: import("@angular/core").InputSignal<string>;
+    /** HTML button type */
+    readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
+    /** Accessible label for icon-only buttons */
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+    protected readonly hostClasses: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingPosition": { "alias": "loadingPosition"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=leading-icon]", "*", "[slot=trailing-icon]", "[slot=icon]"], true, never>;
+}
+//# sourceMappingURL=button.component.d.ts.map

package/atoms/button/button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/button/button.component.ts"],"names":[],"mappings":";AASA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACvF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzG;;;;;;;;;;;;GAYG;AACH,qBA2Da,eAAe;IAC1B,kFAAkF;IAClF,QAAQ,CAAC,OAAO,qDAAiC;IACjD,kBAAkB;IAClB,QAAQ,CAAC,KAAK,mDAAiC;IAC/C,sEAAsE;IACtE,QAAQ,CAAC,IAAI,kDAA2B;IACxC,qBAAqB;IACrB,QAAQ,CAAC,QAAQ,+CAAyB;IAC1C,oCAAoC;IACpC,QAAQ,CAAC,OAAO,+CAAyB;IACzC,8BAA8B;IAC9B,QAAQ,CAAC,eAAe,8DAA4C;IACpE,4BAA4B;IAC5B,QAAQ,CAAC,MAAM,+CAAyB;IACxC,iBAAiB;IACjB,QAAQ,CAAC,KAAK,+CAAyB;IACvC,kDAAkD;IAClD,QAAQ,CAAC,WAAW,8CAA8B;IAClD,yBAAyB;IACzB,QAAQ,CAAC,YAAY,8CAA8B;IACnD,uBAAuB;IACvB,QAAQ,CAAC,IAAI,qEAAkD;IAC/D,6CAA6C;IAC7C,QAAQ,CAAC,SAAS,8CAA8B;IAEhD,SAAS,CAAC,QAAQ,CAAC,WAAW,yCAY3B;yCAtCQ,eAAe;2CAAf,eAAe;CAuC3B"}

package/atoms/button/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonComponent } from './button.component';
+export type { ButtonVariant, ButtonSize, ButtonColor } from './button.component';
+//# sourceMappingURL=index.d.ts.map

package/atoms/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/atoms/checkbox/checkbox.component.d.ts

@@ -0,0 +1,28 @@
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Checkbox Atom — Source: Nuxt UI v3 ❖ Checkbox
+ * CVA-compatible, accessible (ARIA), indeterminate state
+ */
+export declare class CheckboxComponent implements ControlValueAccessor {
+    readonly size: import("@angular/core").InputSignal<CheckboxSize>;
+    readonly color: import("@angular/core").InputSignal<CheckboxColor>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly indeterminate: import("@angular/core").InputSignal<boolean>;
+    readonly required: import("@angular/core").InputSignal<boolean>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+    readonly checked: import("@angular/core").ModelSignal<boolean>;
+    private _onChange;
+    private _onTouched;
+    writeValue(v: boolean): void;
+    registerOnChange(fn: (v: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_: boolean): void;
+    protected onChange(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "ui-checkbox", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=checkbox.component.d.ts.map

package/atoms/checkbox/checkbox.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/checkbox/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAkC,MAAM,gBAAgB,CAAC;;AAGtF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7F;;;GAGG;AACH,qBAoCa,iBAAkB,YAAW,oBAAoB;IAC5D,QAAQ,CAAC,IAAI,oDAAsC;IACnD,QAAQ,CAAC,KAAK,qDAA2C;IACzD,QAAQ,CAAC,KAAK,8CAAsC;IACpD,QAAQ,CAAC,QAAQ,+CAA8B;IAC/C,QAAQ,CAAC,aAAa,+CAAyB;IAC/C,QAAQ,CAAC,QAAQ,+CAA8B;IAC/C,QAAQ,CAAC,SAAS,8CAAkC;IACpD,QAAQ,CAAC,OAAO,+CAA+B;IAE/C,OAAO,CAAC,SAAS,CAAkC;IACnD,OAAO,CAAC,UAAU,CAAwB;IAE1C,UAAU,CAAC,CAAC,EAAE,OAAO;IACrB,gBAAgB,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI;IACzC,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI;IAChC,gBAAgB,CAAC,CAAC,EAAE,OAAO;IAE3B,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK;yCAlBhB,iBAAiB;2CAAjB,iBAAiB;CAwB7B"}

package/atoms/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxComponent } from './checkbox.component';
+//# sourceMappingURL=index.d.ts.map

package/atoms/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/atoms/chip/chip.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export type ChipColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+export type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ChipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * Chip Atom — Source: Nuxt UI v3 ❖ Chip
+ * Small indicator overlaid on another element (e.g., notification dot)
+ */
+export declare class ChipComponent {
+    readonly color: import("@angular/core").InputSignal<ChipColor>;
+    readonly size: import("@angular/core").InputSignal<ChipSize>;
+    readonly position: import("@angular/core").InputSignal<ChipPosition>;
+    readonly text: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "ui-chip", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=chip.component.d.ts.map

package/atoms/chip/chip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.component.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/chip/chip.component.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACvG,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAErF;;;GAGG;AACH,qBAca,aAAa;IACxB,QAAQ,CAAC,KAAK,iDAAkC;IAChD,QAAQ,CAAC,IAAI,gDAA6B;IAC1C,QAAQ,CAAC,QAAQ,oDAAoC;IACrD,QAAQ,CAAC,IAAI,8CAAkC;yCAJpC,aAAa;2CAAb,aAAa;CAKzB"}

package/atoms/chip/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipComponent } from './chip.component';
+//# sourceMappingURL=index.d.ts.map

package/atoms/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/atoms/index.d.ts

@@ -0,0 +1,14 @@
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './checkbox';
+export * from './chip';
+export * from './kbd';
+export * from './link';
+export * from './progress';
+export * from './separator';
+export * from './skeleton';
+export * from './slider';
+export * from './switch';
+export * from './tooltip';
+//# sourceMappingURL=index.d.ts.map

package/atoms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/shared-ui/src/lib/atoms/index.ts"],"names":[],"mappings":"AAKA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/atoms/kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { KbdComponent } from './kbd.component';
+//# sourceMappingURL=index.d.ts.map

package/atoms/kbd/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/shared-ui/src/lib/atoms/kbd/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}