@sonny-ui/core 0.1.0-alpha.10 → 0.1.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.12",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/schematics/ng-add/index.js

@@ -21,6 +21,33 @@ function ngAdd(options) {
                 context.logger.info('Added SonnyUI theme import to styles.css');
             }
         }
+        // Add provideSonnyUI to app.config.ts
+        const configPath = 'src/app/app.config.ts';
+        if (tree.exists(configPath)) {
+            let configContent = tree.read(configPath).toString('utf-8');
+            const theme = options.theme || 'light';
+            if (!configContent.includes('provideSonnyUI')) {
+                // Add import statement
+                const importLine = `import { provideSonnyUI } from '@sonny-ui/core';\n`;
+                const lastImportIndex = configContent.lastIndexOf('import ');
+                const lastImportEnd = configContent.indexOf('\n', lastImportIndex);
+                configContent =
+                    configContent.slice(0, lastImportEnd + 1) +
+                        importLine +
+                        configContent.slice(lastImportEnd + 1);
+                // Add provider to providers array
+                const providersMatch = configContent.match(/providers\s*:\s*\[/);
+                if (providersMatch && providersMatch.index !== undefined) {
+                    const insertPos = providersMatch.index + providersMatch[0].length;
+                    configContent =
+                        configContent.slice(0, insertPos) +
+                            `\n    provideSonnyUI({ defaultTheme: '${theme}' }),` +
+                            configContent.slice(insertPos);
+                }
+                tree.overwrite(configPath, configContent);
+                context.logger.info('Added provideSonnyUI to app.config.ts');
+            }
+        }
         return tree;
     };
 }

package/schematics/ng-generate/component/index.js

@@ -37,33 +37,66 @@ exports.generateComponent = generateComponent;
 const path = __importStar(require("path"));
 const AVAILABLE_COMPONENTS = [
     'accordion',
+    'alert',
     'avatar',
     'badge',
     'breadcrumb',
     'button',
     'button-group',
+    'calendar',
     'card',
+    'carousel',
+    'chat-bubble',
     'checkbox',
     'combobox',
+    'diff',
+    'divider',
+    'dock',
+    'drawer',
+    'dropdown',
+    'fab',
+    'fieldset',
+    'file-input',
+    'indicator',
     'input',
+    'kbd',
+    'link',
+    'list',
     'loader',
     'modal',
+    'navbar',
+    'pagination',
+    'progress',
+    'radial-progress',
     'radio',
+    'rating',
     'select',
     'sheet',
     'skeleton',
     'slider',
+    'stat',
+    'status',
+    'steps',
     'switch',
     'table',
     'tabs',
+    'textarea',
+    'timeline',
     'toast',
     'toggle',
+    'tooltip',
+    'validator',
 ];
 const COMPONENT_FILES = {
     accordion: [
         'accordion.directives.ts',
         'index.ts',
     ],
+    alert: [
+        'alert.directives.ts',
+        'alert.variants.ts',
+        'index.ts',
+    ],
     avatar: [
         'avatar.component.ts',
         'avatar.variants.ts',
@@ -88,11 +121,23 @@ const COMPONENT_FILES = {
         'button-group.variants.ts',
         'index.ts',
     ],
+    calendar: [
+        'calendar.component.ts',
+        'index.ts',
+    ],
     card: [
         'card.directives.ts',
         'card.variants.ts',
         'index.ts',
     ],
+    carousel: [
+        'carousel.directives.ts',
+        'index.ts',
+    ],
+    'chat-bubble': [
+        'chat-bubble.directives.ts',
+        'index.ts',
+    ],
     checkbox: [
         'checkbox.directive.ts',
         'checkbox.variants.ts',
@@ -103,12 +148,66 @@ const COMPONENT_FILES = {
         'combobox.variants.ts',
         'index.ts',
     ],
+    diff: [
+        'diff.component.ts',
+        'index.ts',
+    ],
+    divider: [
+        'divider.component.ts',
+        'divider.variants.ts',
+        'index.ts',
+    ],
+    dock: [
+        'dock.directives.ts',
+        'index.ts',
+    ],
+    drawer: [
+        'drawer.directives.ts',
+        'index.ts',
+    ],
+    dropdown: [
+        'dropdown.directives.ts',
+        'dropdown.variants.ts',
+        'index.ts',
+    ],
+    fab: [
+        'fab.directives.ts',
+        'index.ts',
+    ],
+    fieldset: [
+        'fieldset.directives.ts',
+        'fieldset.variants.ts',
+        'index.ts',
+    ],
+    'file-input': [
+        'file-input.component.ts',
+        'file-input.variants.ts',
+        'index.ts',
+    ],
+    indicator: [
+        'indicator.directives.ts',
+        'index.ts',
+    ],
     input: [
         'input.directive.ts',
         'input.variants.ts',
         'label.directive.ts',
         'index.ts',
     ],
+    kbd: [
+        'kbd.directive.ts',
+        'kbd.variants.ts',
+        'index.ts',
+    ],
+    link: [
+        'link.directive.ts',
+        'link.variants.ts',
+        'index.ts',
+    ],
+    list: [
+        'list.directives.ts',
+        'index.ts',
+    ],
     loader: [
         'loader.component.ts',
         'loader.variants.ts',
@@ -121,11 +220,34 @@ const COMPONENT_FILES = {
         'dialog.directives.ts',
         'index.ts',
     ],
+    navbar: [
+        'navbar.directives.ts',
+        'index.ts',
+    ],
+    pagination: [
+        'pagination.component.ts',
+        'pagination.variants.ts',
+        'index.ts',
+    ],
+    progress: [
+        'progress.component.ts',
+        'progress.variants.ts',
+        'index.ts',
+    ],
+    'radial-progress': [
+        'radial-progress.component.ts',
+        'index.ts',
+    ],
     radio: [
         'radio.directive.ts',
         'radio.variants.ts',
         'index.ts',
     ],
+    rating: [
+        'rating.component.ts',
+        'rating.variants.ts',
+        'index.ts',
+    ],
     select: [
         'select.component.ts',
         'select.variants.ts',
@@ -148,6 +270,19 @@ const COMPONENT_FILES = {
         'slider.variants.ts',
         'index.ts',
     ],
+    stat: [
+        'stat.directives.ts',
+        'index.ts',
+    ],
+    status: [
+        'status.directive.ts',
+        'status.variants.ts',
+        'index.ts',
+    ],
+    steps: [
+        'steps.directives.ts',
+        'index.ts',
+    ],
     switch: [
         'switch.component.ts',
         'switch.variants.ts',
@@ -163,6 +298,15 @@ const COMPONENT_FILES = {
         'tabs.variants.ts',
         'index.ts',
     ],
+    textarea: [
+        'textarea.directive.ts',
+        'textarea.variants.ts',
+        'index.ts',
+    ],
+    timeline: [
+        'timeline.directives.ts',
+        'index.ts',
+    ],
     toast: [
         'toast.service.ts',
         'toast.variants.ts',
@@ -174,30 +318,67 @@ const COMPONENT_FILES = {
         'toggle.variants.ts',
         'index.ts',
     ],
+    tooltip: [
+        'tooltip.directive.ts',
+        'tooltip.variants.ts',
+        'index.ts',
+    ],
+    validator: [
+        'validator.directives.ts',
+        'index.ts',
+    ],
 };
 const COMPONENT_SPEC_FILES = {
     accordion: ['accordion.directives.spec.ts'],
+    alert: ['alert.directives.spec.ts'],
     avatar: ['avatar.component.spec.ts'],
     badge: ['badge.directive.spec.ts'],
     breadcrumb: ['breadcrumb.directives.spec.ts'],
     button: ['button.directive.spec.ts'],
     'button-group': ['button-group.directive.spec.ts'],
+    calendar: ['calendar.component.spec.ts'],
     card: ['card.directives.spec.ts'],
+    carousel: ['carousel.directives.spec.ts'],
+    'chat-bubble': ['chat-bubble.directives.spec.ts'],
     checkbox: ['checkbox.directive.spec.ts'],
     combobox: ['combobox.component.spec.ts'],
+    diff: ['diff.component.spec.ts'],
+    divider: ['divider.component.spec.ts'],
+    dock: ['dock.directives.spec.ts'],
+    drawer: ['drawer.directives.spec.ts'],
+    dropdown: ['dropdown.directives.spec.ts'],
+    fab: ['fab.directives.spec.ts'],
+    fieldset: ['fieldset.directives.spec.ts'],
+    'file-input': ['file-input.component.spec.ts'],
+    indicator: ['indicator.directives.spec.ts'],
     input: ['input.directive.spec.ts'],
+    kbd: ['kbd.directive.spec.ts'],
+    link: ['link.directive.spec.ts'],
+    list: ['list.directives.spec.ts'],
     loader: ['loader.component.spec.ts'],
     modal: ['dialog.service.spec.ts'],
+    navbar: ['navbar.directives.spec.ts'],
+    pagination: ['pagination.component.spec.ts'],
+    progress: ['progress.component.spec.ts'],
+    'radial-progress': ['radial-progress.component.spec.ts'],
     radio: ['radio.directive.spec.ts'],
+    rating: ['rating.component.spec.ts'],
     select: ['select.component.spec.ts'],
     sheet: ['sheet.component.spec.ts'],
     skeleton: ['skeleton.directive.spec.ts'],
     slider: ['slider.component.spec.ts'],
+    stat: ['stat.directives.spec.ts'],
+    status: ['status.directive.spec.ts'],
+    steps: ['steps.directives.spec.ts'],
     switch: ['switch.component.spec.ts'],
     table: ['table.directives.spec.ts'],
     tabs: ['tabs.directives.spec.ts'],
+    textarea: ['textarea.directive.spec.ts'],
+    timeline: ['timeline.directives.spec.ts'],
     toast: ['toast.service.spec.ts'],
     toggle: ['toggle.directive.spec.ts'],
+    tooltip: ['tooltip.directive.spec.ts'],
+    validator: ['validator.directives.spec.ts'],
 };
 function generateComponent(options) {
     return (tree, context) => {
@@ -212,12 +393,12 @@ function generateComponent(options) {
         // Ensure cn.ts utility exists
         const cnTargetPath = `${targetDir}/utils/cn.ts`;
         if (!tree.exists(cnTargetPath)) {
-            const cnContent = `import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
+            const cnContent = `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
 `;
             tree.create(cnTargetPath, cnContent);
             context.logger.info('Created utils/cn.ts');

package/schematics/ng-generate/component/schema.json

@@ -1,32 +1,32 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "SonnyUIGenerateComponentSchema",
-  "title": "SonnyUI component generator (copy-paste style)",
-  "type": "object",
-  "properties": {
-    "name": {
-      "type": "string",
-      "description": "The component to copy (accordion, avatar, badge, breadcrumb, button, button-group, card, checkbox, combobox, input, loader, modal, radio, select, sheet, skeleton, slider, switch, table, tabs, toast, toggle).",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      }
-    },
-    "path": {
-      "type": "string",
-      "default": "src/app/ui",
-      "description": "The path to copy the component into."
-    },
-    "prefix": {
-      "type": "string",
-      "default": "sny",
-      "description": "The prefix to use for selectors."
-    },
-    "skipTests": {
-      "type": "boolean",
-      "default": false,
-      "description": "Skip copying test files."
-    }
-  },
-  "required": ["name"]
-}
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SonnyUIGenerateComponentSchema",
+  "title": "SonnyUI component generator (copy-paste style)",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The component to copy (accordion, alert, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, chat-bubble, checkbox, combobox, diff, divider, dock, drawer, dropdown, fab, fieldset, file-input, indicator, input, kbd, link, list, loader, modal, navbar, pagination, progress, radial-progress, radio, rating, select, sheet, skeleton, slider, stat, status, steps, switch, table, tabs, textarea, timeline, toast, toggle, tooltip, validator).",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "path": {
+      "type": "string",
+      "default": "src/app/ui",
+      "description": "The path to copy the component into."
+    },
+    "prefix": {
+      "type": "string",
+      "default": "sny",
+      "description": "The prefix to use for selectors."
+    },
+    "skipTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "Skip copying test files."
+    }
+  },
+  "required": ["name"]
+}

package/types/sonny-ui-core.d.ts

@@ -13,7 +13,7 @@ declare function cn(...inputs: ClassValue[]): string;
 
 interface SonnyConfig {
     prefix?: string;
-    defaultTheme?: 'light' | 'dark' | 'corporate';
+    defaultTheme?: 'light' | 'dark' | 'corporate' | 'system';
 }
 declare const SNY_CONFIG: InjectionToken<SonnyConfig>;
 declare function provideSonnyUI(config?: Partial<SonnyConfig>): EnvironmentProviders;
@@ -22,11 +22,14 @@ type Theme = 'light' | 'dark' | 'corporate';
 declare class ThemeService {
     private readonly document;
     private readonly isBrowser;
+    private readonly config;
     private readonly _theme;
     readonly theme: _angular_core.Signal<Theme>;
     readonly isDark: _angular_core.Signal<boolean>;
+    constructor();
     setTheme(theme: Theme): void;
     toggleDark(): void;
+    private resolveInitialTheme;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
 }