@eduboxpro/studio 0.1.0 → 0.1.1

package/fesm2022/eduboxpro-studio.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import * as i1 from 'lucide-angular';
+import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
 
 /**
  * Injection token for Studio configuration
@@ -51,28 +53,105 @@ class StudioConfigService {
         if (!theme)
             return;
         const root = this.document.documentElement;
+        // Apply colors
         if (theme.colors) {
-            this.applyTokens(root, 'studio', theme.colors);
+            this.applyColorTokens(root, theme.colors);
         }
+        // Apply typography
+        if (theme.typography) {
+            if (theme.typography.fontFamily) {
+                root.style.setProperty('--studio-font-family', theme.typography.fontFamily);
+            }
+            if (theme.typography.fontMono) {
+                root.style.setProperty('--studio-font-mono', theme.typography.fontMono);
+            }
+            if (theme.typography.fontSize) {
+                this.applyTokens(root, 'studio-font-size', theme.typography.fontSize);
+            }
+            if (theme.typography.fontWeight) {
+                this.applyTokens(root, 'studio-font-weight', theme.typography.fontWeight);
+            }
+            if (theme.typography.lineHeight) {
+                this.applyTokens(root, 'studio-line-height', theme.typography.lineHeight);
+            }
+        }
+        // Apply spacing
         if (theme.spacing) {
             this.applyTokens(root, 'studio-spacing', theme.spacing);
         }
+        // Apply border radius
         if (theme.borderRadius) {
             this.applyTokens(root, 'studio-radius', theme.borderRadius);
         }
+        // Apply shadows
         if (theme.shadows) {
             this.applyTokens(root, 'studio-shadow', theme.shadows);
         }
-        if (theme.typography?.fontFamily) {
-            root.style.setProperty('--studio-font-family', theme.typography.fontFamily);
+        // Apply transitions
+        if (theme.transitions) {
+            this.applyTokens(root, 'studio-transition', theme.transitions);
         }
-        if (theme.typography?.fontSize) {
-            this.applyTokens(root, 'studio-font-size', theme.typography.fontSize);
+        // Apply z-index
+        if (theme.zIndex) {
+            this.applyZIndexTokens(root, theme.zIndex);
         }
-        if (theme.typography?.fontWeight) {
-            this.applyTokens(root, 'studio-font-weight', theme.typography.fontWeight);
+    }
+    applyColorTokens(root, colors) {
+        // Brand colors with hover/active states
+        const brandColors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+        brandColors.forEach(colorName => {
+            const colorValue = colors[colorName];
+            if (!colorValue)
+                return;
+            if (typeof colorValue === 'string') {
+                root.style.setProperty(`--studio-${colorName}`, colorValue);
+            }
+            else {
+                const config = colorValue;
+                if (config.base) {
+                    root.style.setProperty(`--studio-${colorName}`, config.base);
+                }
+                if (config.hover) {
+                    root.style.setProperty(`--studio-${colorName}-hover`, config.hover);
+                }
+                if (config.active) {
+                    root.style.setProperty(`--studio-${colorName}-active`, config.active);
+                }
+                if (config.bg) {
+                    root.style.setProperty(`--studio-${colorName}-bg`, config.bg);
+                }
+            }
+        });
+        // Background colors
+        if (colors.bg) {
+            this.applyTokens(root, 'studio-bg', colors.bg);
+        }
+        // Text colors
+        if (colors.text) {
+            this.applyTokens(root, 'studio-text', colors.text);
+        }
+        // Border colors
+        if (colors.border) {
+            this.applyTokens(root, 'studio-border', colors.border);
         }
     }
+    applyZIndexTokens(root, zIndex) {
+        const zIndexMap = {
+            dropdown: 'dropdown',
+            sticky: 'sticky',
+            fixed: 'fixed',
+            modalBackdrop: 'modal-backdrop',
+            modal: 'modal',
+            popover: 'popover',
+            tooltip: 'tooltip'
+        };
+        Object.entries(zIndex).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                const cssKey = zIndexMap[key] || key;
+                root.style.setProperty(`--studio-z-${cssKey}`, String(value));
+            }
+        });
+    }
     applyTokens(root, prefix, tokens) {
         Object.entries(tokens).forEach(([key, value]) => {
             if (value !== undefined && value !== null) {
@@ -133,6 +212,162 @@ function provideStudioConfig(config = {}) {
  * @module config
  */
 
+class IconComponent {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    size = input(24, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    absoluteStrokeWidth = input(false, ...(ngDevMode ? [{ debugName: "absoluteStrokeWidth" }] : []));
+    icons = icons;
+    lucideIcon = computed(() => {
+        const iconName = this.name();
+        return iconName;
+    }, ...(ngDevMode ? [{ debugName: "lucideIcon" }] : []));
+    computedColor = computed(() => {
+        const colorValue = this.color();
+        const colorMap = {
+            'primary': 'var(--studio-primary)',
+            'secondary': 'var(--studio-secondary)',
+            'success': 'var(--studio-success)',
+            'error': 'var(--studio-error)',
+            'warning': 'var(--studio-warning)',
+            'inherit': 'currentColor'
+        };
+        return colorMap[colorValue] || colorValue;
+    }, ...(ngDevMode ? [{ debugName: "computedColor" }] : []));
+    hostClasses = computed(() => {
+        return ['studio-icon'];
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: IconComponent, isStandalone: true, selector: "studio-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, absoluteStrokeWidth: { classPropertyName: "absoluteStrokeWidth", publicName: "absoluteStrokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width.px": "size()", "style.height.px": "size()" } }, ngImport: i0, template: `
+    @if (lucideIcon(); as iconName) {
+      <lucide-icon
+        [name]="iconName"
+        [size]="size()"
+        [color]="computedColor()"
+        [strokeWidth]="strokeWidth()"
+        [absoluteStrokeWidth]="absoluteStrokeWidth()"
+      />
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-icon', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.width.px]': 'size()',
+                        '[style.height.px]': 'size()',
+                    }, template: `
+    @if (lucideIcon(); as iconName) {
+      <lucide-icon
+        [name]="iconName"
+        [size]="size()"
+        [color]="computedColor()"
+        [strokeWidth]="strokeWidth()"
+        [absoluteStrokeWidth]="absoluteStrokeWidth()"
+      />
+    }
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], absoluteStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteStrokeWidth", required: false }] }] } });
+
+/**
+ * Провайдер иконок для Studio
+ * Регистрирует базовый набор часто используемых иконок
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideStudioIcons } from '@eduboxpro/studio';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideStudioIcons()
+ *   ]
+ * };
+ * ```
+ *
+ * Для добавления дополнительных иконок:
+ * @example
+ * ```typescript
+ * import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
+ * import { Zap, Wifi } from 'lucide-angular';
+ *
+ * providers: [
+ *   provideStudioIcons(),
+ *   {
+ *     provide: LUCIDE_ICONS,
+ *     multi: true,
+ *     useValue: new LucideIconProvider({ Zap, Wifi })
+ *   }
+ * ]
+ * ```
+ */
+function provideStudioIcons() {
+    return makeEnvironmentProviders([
+        {
+            provide: LUCIDE_ICONS,
+            multi: true,
+            useValue: new LucideIconProvider({
+                ArrowRight,
+                ArrowLeft,
+                ChevronDown,
+                ChevronUp,
+                ChevronLeft,
+                ChevronRight,
+                Download,
+                Upload,
+                Mail,
+                Phone,
+                Heart,
+                Star,
+                Settings,
+                User,
+                Trash2,
+                Edit,
+                Plus,
+                Minus,
+                Check,
+                X,
+                Search,
+                Filter,
+                ExternalLink,
+                Link,
+                Copy,
+                Share2,
+                Home,
+                Menu,
+                MoreVertical,
+                MoreHorizontal,
+                Bell,
+                Calendar,
+                Clock,
+                Eye,
+                EyeOff,
+                Lock,
+                Unlock,
+                LogIn,
+                LogOut,
+                AlertCircle,
+                AlertTriangle,
+                Info,
+                CheckCircle,
+                XCircle,
+                HelpCircle,
+                File,
+                FileText,
+                Folder,
+                Image,
+                Save,
+                Printer,
+                RefreshCw,
+                RotateCw,
+                Loader,
+                Loader2
+            })
+        }
+    ]);
+}
+
 class ButtonComponent {
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
@@ -141,7 +376,13 @@ class ButtonComponent {
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
     clicked = output();
+    iconSize = computed(() => {
+        const sizeMap = { sm: 16, md: 18, lg: 20 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     hostClasses = computed(() => {
         return [
             'studio-button',
@@ -149,7 +390,8 @@ class ButtonComponent {
             `studio-button--${this.size()}`,
             `studio-button--${this.color()}`,
             this.fullWidth() ? 'studio-button--full' : '',
-            this.loading() ? 'studio-button--loading' : ''
+            this.loading() ? 'studio-button--loading' : '',
+            this.iconPosition() === 'only' ? 'studio-button--icon-only' : ''
         ].filter(Boolean).join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     handleClick(event) {
@@ -161,25 +403,71 @@ class ButtonComponent {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: ButtonComponent, isStandalone: true, selector: "studio-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null", "attr.type": "type()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ButtonComponent, isStandalone: true, selector: "studio-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() || loading() ? \"\" : null", "attr.type": "type()" } }, ngImport: i0, template: `
     <span class="studio-button__content">
-      <ng-content />
+      @if (loading()) {
+        <studio-icon
+          name="loader-2"
+          [size]="iconSize()"
+          class="studio-button__spinner"
+        />
+      }
+      @if (!loading() && icon() && iconPosition() === 'left') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (iconPosition() !== 'only' && !loading()) {
+        <ng-content />
+      }
+      @if (!loading() && icon() && iconPosition() === 'right') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (!loading() && icon() && iconPosition() === 'only') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (loading() && iconPosition() === 'only') {
+        <!-- Empty, spinner already shown -->
+      } @else if (loading()) {
+        <span>Loading...</span>
+      }
     </span>
-  `, isInline: true, styles: [":host{display:inline-block}.studio-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast);border-radius:var(--studio-radius-md)}.studio-button:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-button:active:not(:disabled):not(.studio-button--loading){transform:scale(.98)}.studio-button--sm{padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}.studio-button--md{padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}.studio-button--lg{padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}.studio-button--solid.studio-button--primary{background:var(--studio-primary);color:#fff}.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-hover)}.studio-button--solid.studio-button--primary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-active)}.studio-button--outline.studio-button--primary{background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary);color:#fff}.studio-button--ghost.studio-button--primary{background:transparent;color:var(--studio-primary)}.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:#3b82f61a}.studio-button--solid.studio-button--secondary{background:var(--studio-secondary);color:#fff}.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-hover)}.studio-button--solid.studio-button--secondary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-active)}.studio-button--outline.studio-button--secondary{background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary);color:#fff}.studio-button--ghost.studio-button--secondary{background:transparent;color:var(--studio-secondary)}.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:#8b5cf61a}.studio-button--solid.studio-button--success{background:var(--studio-success);color:#fff}.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-hover)}.studio-button--outline.studio-button--success{background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success);color:#fff}.studio-button--ghost.studio-button--success{background:transparent;color:var(--studio-success)}.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-bg)}.studio-button--solid.studio-button--error{background:var(--studio-error);color:#fff}.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-hover)}.studio-button--outline.studio-button--error{background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error);color:#fff}.studio-button--ghost.studio-button--error{background:transparent;color:var(--studio-error)}.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-bg)}.studio-button--solid.studio-button--warning{background:var(--studio-warning);color:#fff}.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-hover)}.studio-button--outline.studio-button--warning{background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning);color:#fff}.studio-button--ghost.studio-button--warning{background:transparent;color:var(--studio-warning)}.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-bg)}.studio-button--full{width:100%}.studio-button--loading{cursor:wait;opacity:.7}.studio-button:disabled{opacity:.5;cursor:not-allowed}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}[data-theme=dark] .studio-button--solid.studio-button--primary,[data-theme=dark] .studio-button--solid.studio-button--secondary,[data-theme=dark] .studio-button--solid.studio-button--success,[data-theme=dark] .studio-button--solid.studio-button--error,[data-theme=dark] .studio-button--solid.studio-button--warning{box-shadow:var(--studio-shadow-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;border-radius:var(--studio-radius-md);transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast)}:host:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}:host(.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}:host(.studio-button--lg){padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}:host(.studio-button--solid.studio-button--primary){background:var(--studio-primary);color:#fff}:host(.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-hover)}:host(.studio-button--outline.studio-button--primary){background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary);color:#fff}:host(.studio-button--ghost.studio-button--primary){background:transparent;color:var(--studio-primary)}:host(.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:#3b82f61a}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:#8b5cf61a}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'studio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'studio-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.disabled]': 'disabled() || loading() ? "" : null',
                         '[attr.type]': 'type()',
                         '(click)': 'handleClick($event)'
                     }, template: `
     <span class="studio-button__content">
-      <ng-content />
+      @if (loading()) {
+        <studio-icon
+          name="loader-2"
+          [size]="iconSize()"
+          class="studio-button__spinner"
+        />
+      }
+      @if (!loading() && icon() && iconPosition() === 'left') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (iconPosition() !== 'only' && !loading()) {
+        <ng-content />
+      }
+      @if (!loading() && icon() && iconPosition() === 'right') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (!loading() && icon() && iconPosition() === 'only') {
+        <studio-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      @if (loading() && iconPosition() === 'only') {
+        <!-- Empty, spinner already shown -->
+      } @else if (loading()) {
+        <span>Loading...</span>
+      }
     </span>
-  `, styles: [":host{display:inline-block}.studio-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast);border-radius:var(--studio-radius-md)}.studio-button:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-button:active:not(:disabled):not(.studio-button--loading){transform:scale(.98)}.studio-button--sm{padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}.studio-button--md{padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}.studio-button--lg{padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}.studio-button--solid.studio-button--primary{background:var(--studio-primary);color:#fff}.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-hover)}.studio-button--solid.studio-button--primary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-primary-active)}.studio-button--outline.studio-button--primary{background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-primary);color:#fff}.studio-button--ghost.studio-button--primary{background:transparent;color:var(--studio-primary)}.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading){background:#3b82f61a}.studio-button--solid.studio-button--secondary{background:var(--studio-secondary);color:#fff}.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-hover)}.studio-button--solid.studio-button--secondary:active:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary-active)}.studio-button--outline.studio-button--secondary{background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-secondary);color:#fff}.studio-button--ghost.studio-button--secondary{background:transparent;color:var(--studio-secondary)}.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading){background:#8b5cf61a}.studio-button--solid.studio-button--success{background:var(--studio-success);color:#fff}.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-hover)}.studio-button--outline.studio-button--success{background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success);color:#fff}.studio-button--ghost.studio-button--success{background:transparent;color:var(--studio-success)}.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-success-bg)}.studio-button--solid.studio-button--error{background:var(--studio-error);color:#fff}.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-hover)}.studio-button--outline.studio-button--error{background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error);color:#fff}.studio-button--ghost.studio-button--error{background:transparent;color:var(--studio-error)}.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-error-bg)}.studio-button--solid.studio-button--warning{background:var(--studio-warning);color:#fff}.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-hover)}.studio-button--outline.studio-button--warning{background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning);color:#fff}.studio-button--ghost.studio-button--warning{background:transparent;color:var(--studio-warning)}.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading){background:var(--studio-warning-bg)}.studio-button--full{width:100%}.studio-button--loading{cursor:wait;opacity:.7}.studio-button:disabled{opacity:.5;cursor:not-allowed}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}[data-theme=dark] .studio-button--solid.studio-button--primary,[data-theme=dark] .studio-button--solid.studio-button--secondary,[data-theme=dark] .studio-button--solid.studio-button--success,[data-theme=dark] .studio-button--solid.studio-button--error,[data-theme=dark] .studio-button--solid.studio-button--warning{box-shadow:var(--studio-shadow-sm)}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;gap:var(--studio-spacing-sm);font-family:var(--studio-font-family);font-weight:var(--studio-font-weight-medium);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;border-radius:var(--studio-radius-md);transition:background-color var(--studio-transition-fast),color var(--studio-transition-fast),border-color var(--studio-transition-fast),box-shadow var(--studio-transition-fast),transform var(--studio-transition-fast)}:host:focus-visible{outline:2px solid var(--studio-primary);outline-offset:2px}:host(.studio-button--sm){padding:var(--studio-spacing-xs) var(--studio-spacing-sm);font-size:var(--studio-font-size-sm);height:2rem;min-width:2rem}:host(.studio-button--md){padding:var(--studio-spacing-sm) var(--studio-spacing-md);font-size:var(--studio-font-size-base);height:2.5rem;min-width:2.5rem}:host(.studio-button--lg){padding:var(--studio-spacing-md) var(--studio-spacing-lg);font-size:var(--studio-font-size-lg);height:3rem;min-width:3rem}:host(.studio-button--solid.studio-button--primary){background:var(--studio-primary);color:#fff}:host(.studio-button--solid.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary-hover)}:host(.studio-button--outline.studio-button--primary){background:transparent;border:1px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-button--outline.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-primary);color:#fff}:host(.studio-button--ghost.studio-button--primary){background:transparent;color:var(--studio-primary)}:host(.studio-button--ghost.studio-button--primary:hover:not(:disabled):not(.studio-button--loading)){background:#3b82f61a}:host(.studio-button--solid.studio-button--secondary){background:var(--studio-secondary);color:#fff}:host(.studio-button--solid.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary-hover)}:host(.studio-button--outline.studio-button--secondary){background:transparent;border:1px solid var(--studio-secondary);color:var(--studio-secondary)}:host(.studio-button--outline.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-secondary);color:#fff}:host(.studio-button--ghost.studio-button--secondary){background:transparent;color:var(--studio-secondary)}:host(.studio-button--ghost.studio-button--secondary:hover:not(:disabled):not(.studio-button--loading)){background:#8b5cf61a}:host(.studio-button--solid.studio-button--success){background:var(--studio-success);color:#fff}:host(.studio-button--solid.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-hover)}:host(.studio-button--outline.studio-button--success){background:transparent;border:1px solid var(--studio-success);color:var(--studio-success)}:host(.studio-button--outline.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success);color:#fff}:host(.studio-button--ghost.studio-button--success){background:transparent;color:var(--studio-success)}:host(.studio-button--ghost.studio-button--success:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-success-bg)}:host(.studio-button--solid.studio-button--error){background:var(--studio-error);color:#fff}:host(.studio-button--solid.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-hover)}:host(.studio-button--outline.studio-button--error){background:transparent;border:1px solid var(--studio-error);color:var(--studio-error)}:host(.studio-button--outline.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error);color:#fff}:host(.studio-button--ghost.studio-button--error){background:transparent;color:var(--studio-error)}:host(.studio-button--ghost.studio-button--error:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-error-bg)}:host(.studio-button--solid.studio-button--warning){background:var(--studio-warning);color:#fff}:host(.studio-button--solid.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-hover)}:host(.studio-button--outline.studio-button--warning){background:transparent;border:1px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-button--outline.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning);color:#fff}:host(.studio-button--ghost.studio-button--warning){background:transparent;color:var(--studio-warning)}:host(.studio-button--ghost.studio-button--warning:hover:not(:disabled):not(.studio-button--loading)){background:var(--studio-warning-bg)}:host(.studio-button--full){width:100%}:host(.studio-button--icon-only){padding:0;aspect-ratio:1}:host(.studio-button--icon-only.studio-button--sm){width:2rem;padding:0}:host(.studio-button--icon-only.studio-button--md){width:2.5rem;padding:0}:host(.studio-button--icon-only.studio-button--lg){width:3rem;padding:0}:host(.studio-button--loading){cursor:wait;pointer-events:none}:host([disabled]){opacity:.6;cursor:not-allowed!important;background:var(--studio-bg-secondary)!important;color:var(--studio-text-tertiary)!important;border-color:var(--studio-border-primary)!important}:host([disabled]:hover){transform:none!important;background:var(--studio-bg-secondary)!important}:host(:active:not([disabled]):not(.studio-button--loading)){transform:scale(.98)}.studio-button__content{display:inline-flex;align-items:center;gap:var(--studio-spacing-sm)}.studio-button__spinner{animation:studio-spin 1s linear infinite}@keyframes studio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * Button component
@@ -216,5 +504,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, STUDIO_CONFIG, StudioConfigService, provideStudioConfig };
+export { ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, provideStudioConfig, provideStudioIcons };
 //# sourceMappingURL=eduboxpro-studio.mjs.map

package/fesm2022/eduboxpro-studio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eduboxpro-studio.mjs","sources":["../../../projects/studio/src/lib/config/studio.config.ts","../../../projects/studio/src/lib/config/studio.service.ts","../../../projects/studio/src/lib/config/provide-studio.ts","../../../projects/studio/src/lib/config/index.ts","../../../projects/studio/src/lib/primitives/button/button.component.ts","../../../projects/studio/src/lib/primitives/button/index.ts","../../../projects/studio/src/lib/primitives/index.ts","../../../projects/studio/src/lib/composites/index.ts","../../../projects/studio/src/lib/education/index.ts","../../../projects/studio/src/lib/utils/index.ts","../../../projects/studio/src/public-api.ts","../../../projects/studio/src/eduboxpro-studio.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\n/**\n * Theme mode: light or dark\n */\nexport type ThemeMode = 'light' | 'dark';\n\n/**\n * Theme configuration interface\n */\nexport interface StudioThemeConfig {\n  /**\n   * Theme mode (default: 'light')\n   */\n  mode?: ThemeMode;\n\n  /**\n   * Color tokens override\n   */\n  colors?: {\n    primary?: string;\n    secondary?: string;\n    success?: string;\n    error?: string;\n    warning?: string;\n    info?: string;\n  };\n\n  /**\n   * Typography tokens override\n   */\n  typography?: {\n    fontFamily?: string;\n    fontSize?: {\n      xs?: string;\n      sm?: string;\n      base?: string;\n      lg?: string;\n      xl?: string;\n      '2xl'?: string;\n    };\n    fontWeight?: {\n      normal?: number;\n      medium?: number;\n      semibold?: number;\n      bold?: number;\n    };\n  };\n\n  /**\n   * Spacing tokens override\n   */\n  spacing?: {\n    xs?: string;\n    sm?: string;\n    md?: string;\n    lg?: string;\n    xl?: string;\n    '2xl'?: string;\n  };\n\n  /**\n   * Border radius tokens override\n   */\n  borderRadius?: {\n    none?: string;\n    sm?: string;\n    md?: string;\n    lg?: string;\n    xl?: string;\n    full?: string;\n  };\n\n  /**\n   * Shadow tokens override\n   */\n  shadows?: {\n    sm?: string;\n    md?: string;\n    lg?: string;\n    xl?: string;\n  };\n}\n\n/**\n * Main Studio configuration interface\n */\nexport interface StudioConfig {\n  /**\n   * Theme configuration\n   */\n  theme?: StudioThemeConfig;\n}\n\n/**\n * Injection token for Studio configuration\n */\nexport const STUDIO_CONFIG = new InjectionToken<StudioConfig>('STUDIO_CONFIG', {\n  providedIn: 'root',\n  factory: () => ({})\n});\n","import { Injectable, inject, signal, effect } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { StudioConfig, StudioThemeConfig, ThemeMode } from './studio.config';\n\n@Injectable({ providedIn: 'root' })\nexport class StudioConfigService {\n  private readonly document = inject(DOCUMENT);\n\n  readonly config = signal<StudioConfig>({});\n  readonly themeMode = signal<ThemeMode>('light');\n\n  constructor() {\n    effect(() => {\n      this.applyTheme(this.config().theme);\n    }, { allowSignalWrites: false });\n  }\n\n  configure(config: StudioConfig): void {\n    this.config.set(config);\n    if (config.theme?.mode) {\n      this.setThemeMode(config.theme.mode);\n    }\n  }\n\n  setThemeMode(mode: ThemeMode): void {\n    this.themeMode.set(mode);\n    this.document.documentElement.setAttribute('data-theme', mode);\n  }\n\n  toggleTheme(): void {\n    const newMode = this.themeMode() === 'light' ? 'dark' : 'light';\n    this.setThemeMode(newMode);\n  }\n\n  async loadFromBackend(organizationSlug: string): Promise<void> {\n    try {\n      const response = await fetch(`/api/organizations/${organizationSlug}/design-config`);\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n      const config = await response.json();\n      this.configure(config);\n    } catch (error) {\n      console.error('[Studio] Failed to load config from backend:', error);\n      throw error;\n    }\n  }\n\n  private applyTheme(theme?: StudioThemeConfig): void {\n    if (!theme) return;\n\n    const root = this.document.documentElement;\n\n    if (theme.colors) {\n      this.applyTokens(root, 'studio', theme.colors);\n    }\n    if (theme.spacing) {\n      this.applyTokens(root, 'studio-spacing', theme.spacing);\n    }\n    if (theme.borderRadius) {\n      this.applyTokens(root, 'studio-radius', theme.borderRadius);\n    }\n    if (theme.shadows) {\n      this.applyTokens(root, 'studio-shadow', theme.shadows);\n    }\n    if (theme.typography?.fontFamily) {\n      root.style.setProperty('--studio-font-family', theme.typography.fontFamily);\n    }\n    if (theme.typography?.fontSize) {\n      this.applyTokens(root, 'studio-font-size', theme.typography.fontSize);\n    }\n    if (theme.typography?.fontWeight) {\n      this.applyTokens(root, 'studio-font-weight', theme.typography.fontWeight);\n    }\n  }\n\n  private applyTokens(\n    root: HTMLElement,\n    prefix: string,\n    tokens: Record<string, string | number>\n  ): void {\n    Object.entries(tokens).forEach(([key, value]) => {\n      if (value !== undefined && value !== null) {\n        root.style.setProperty(`--${prefix}-${key}`, String(value));\n      }\n    });\n  }\n}\n","import { EnvironmentProviders, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, inject } from '@angular/core';\nimport { STUDIO_CONFIG, StudioConfig } from './studio.config';\nimport { StudioConfigService } from './studio.service';\n\n/**\n * Provide Studio configuration for the application\n *\n * @example\n * ```typescript\n * // app.config.ts\n * import { provideStudioConfig } from '@eduboxpro/studio/config';\n *\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideStudioConfig({\n *       theme: {\n *         mode: 'light',\n *         colors: {\n *           primary: '#3b82f6'\n *         }\n *       }\n *     })\n *   ]\n * };\n * ```\n */\nexport function provideStudioConfig(config: StudioConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: STUDIO_CONFIG,\n      useValue: config\n    },\n    {\n      provide: ENVIRONMENT_INITIALIZER,\n      multi: true,\n      useValue: () => {\n        const studioConfig = inject(StudioConfigService);\n        const initialConfig = inject(STUDIO_CONFIG);\n        studioConfig.configure(initialConfig);\n      }\n    }\n  ]);\n}\n","/**\n * Configuration module\n * @module config\n */\n\nexport * from './studio.config';\nexport * from './studio.service';\nexport * from './provide-studio';\n","import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'studio-button',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '[attr.type]': 'type()',\n    '(click)': 'handleClick($event)'\n  },\n  template: `\n    <span class=\"studio-button__content\">\n      <ng-content />\n    </span>\n  `,\n  styleUrl: './button.component.scss'\n})\nexport class ButtonComponent {\n  variant = input<'solid' | 'outline' | 'ghost'>('solid');\n  size = input<'sm' | 'md' | 'lg'>('md');\n  color = input<'primary' | 'secondary' | 'success' | 'error' | 'warning'>('primary');\n  disabled = input<boolean>(false);\n  fullWidth = input<boolean>(false);\n  loading = input<boolean>(false);\n  type = input<'button' | 'submit' | 'reset'>('button');\n\n  clicked = output<MouseEvent>();\n\n  protected hostClasses = computed(() => {\n    return [\n      'studio-button',\n      `studio-button--${this.variant()}`,\n      `studio-button--${this.size()}`,\n      `studio-button--${this.color()}`,\n      this.fullWidth() ? 'studio-button--full' : '',\n      this.loading() ? 'studio-button--loading' : ''\n    ].filter(Boolean).join(' ');\n  });\n\n  protected handleClick(event: MouseEvent): void {\n    if (this.disabled() || this.loading()) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.clicked.emit(event);\n  }\n}\n","/**\n * Button component\n */\n\nexport * from './button.component';\n","/**\n * Primitives (Atoms)\n * Basic building blocks\n */\n\nexport * from './button';\n","/**\n * Composites (Molecules + Organisms)\n * Complex components built from primitives\n */\n\n// Export composite components here\n// Example: export * from './form-field';\n\n// Empty export to make this a valid module\nexport {};\n","/**\n * Education components\n * Domain-specific components for educational platforms\n */\n\n// Export education components here\n// Example: export * from './course-card';\n// Example: export * from './lesson-viewer';\n// Example: export * from './quiz-builder';\n\n// Empty export to make this a valid module\nexport {};\n","/**\n * Utilities\n * Helper functions, directives, pipes\n */\n\n// Export utilities here\n// Example: export * from './format-date.pipe';\n// Example: export * from './auto-focus.directive';\n\n// Empty export to make this a valid module\nexport {};\n","/**\n * Public API Surface of @eduboxpro/studio\n */\n\n/* ========================================\n * Configuration\n * ======================================== */\nexport * from './lib/config';\n\n/* ========================================\n * Components\n * ======================================== */\nexport * from './lib/primitives';\nexport * from './lib/composites';\nexport * from './lib/education';\n\n/* ========================================\n * Utilities\n * ======================================== */\nexport * from './lib/utils';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eduboxpro-studio.mjs","sources":["../../../projects/studio/src/lib/config/studio.config.ts","../../../projects/studio/src/lib/config/studio.service.ts","../../../projects/studio/src/lib/config/provide-studio.ts","../../../projects/studio/src/lib/config/index.ts","../../../projects/studio/src/lib/primitives/icon/icon.component.ts","../../../projects/studio/src/lib/primitives/icon/icon.provider.ts","../../../projects/studio/src/lib/primitives/button/button.component.ts","../../../projects/studio/src/lib/primitives/button/index.ts","../../../projects/studio/src/lib/primitives/index.ts","../../../projects/studio/src/lib/composites/index.ts","../../../projects/studio/src/lib/education/index.ts","../../../projects/studio/src/lib/utils/index.ts","../../../projects/studio/src/public-api.ts","../../../projects/studio/src/eduboxpro-studio.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\n/**\n * Theme mode: light or dark\n */\nexport type ThemeMode = 'light' | 'dark';\n\n/**\n * Color configuration with hover and active states\n */\nexport interface ColorConfig {\n  base?: string;\n  hover?: string;\n  active?: string;\n  bg?: string;\n}\n\n/**\n * Theme configuration interface\n */\nexport interface StudioThemeConfig {\n  /**\n   * Theme mode (default: 'light')\n   */\n  mode?: ThemeMode;\n\n  /**\n   * Color tokens override with hover/active states\n   */\n  colors?: {\n    primary?: ColorConfig | string;\n    secondary?: ColorConfig | string;\n    success?: ColorConfig | string;\n    error?: ColorConfig | string;\n    warning?: ColorConfig | string;\n    info?: ColorConfig | string;\n    bg?: {\n      primary?: string;\n      secondary?: string;\n      tertiary?: string;\n    };\n    text?: {\n      primary?: string;\n      secondary?: string;\n      tertiary?: string;\n      inverse?: string;\n    };\n    border?: {\n      primary?: string;\n      secondary?: string;\n    };\n  };\n\n  /**\n   * Typography tokens override\n   */\n  typography?: {\n    fontFamily?: string;\n    fontMono?: string;\n    fontSize?: {\n      xs?: string;\n      sm?: string;\n      base?: string;\n      lg?: string;\n      xl?: string;\n      '2xl'?: string;\n    };\n    fontWeight?: {\n      normal?: number;\n      medium?: number;\n      semibold?: number;\n      bold?: number;\n    };\n    lineHeight?: {\n      tight?: number;\n      normal?: number;\n      relaxed?: number;\n    };\n  };\n\n  /**\n   * Spacing tokens override\n   */\n  spacing?: {\n    xs?: string;\n    sm?: string;\n    md?: string;\n    lg?: string;\n    xl?: string;\n    '2xl'?: string;\n  };\n\n  /**\n   * Border radius tokens override\n   */\n  borderRadius?: {\n    none?: string;\n    sm?: string;\n    md?: string;\n    lg?: string;\n    xl?: string;\n    full?: string;\n  };\n\n  /**\n   * Shadow tokens override\n   */\n  shadows?: {\n    sm?: string;\n    md?: string;\n    lg?: string;\n    xl?: string;\n  };\n\n  /**\n   * Transition tokens override\n   */\n  transitions?: {\n    fast?: string;\n    base?: string;\n    slow?: string;\n  };\n\n  /**\n   * Z-index tokens override\n   */\n  zIndex?: {\n    dropdown?: number;\n    sticky?: number;\n    fixed?: number;\n    modalBackdrop?: number;\n    modal?: number;\n    popover?: number;\n    tooltip?: number;\n  };\n}\n\n/**\n * Main Studio configuration interface\n */\nexport interface StudioConfig {\n  /**\n   * Theme configuration\n   */\n  theme?: StudioThemeConfig;\n}\n\n/**\n * Injection token for Studio configuration\n */\nexport const STUDIO_CONFIG = new InjectionToken<StudioConfig>('STUDIO_CONFIG', {\n  providedIn: 'root',\n  factory: () => ({})\n});\n","import { Injectable, inject, signal, effect } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { StudioConfig, StudioThemeConfig, ThemeMode, ColorConfig } from './studio.config';\n\n@Injectable({ providedIn: 'root' })\nexport class StudioConfigService {\n  private readonly document = inject(DOCUMENT);\n\n  readonly config = signal<StudioConfig>({});\n  readonly themeMode = signal<ThemeMode>('light');\n\n  constructor() {\n    effect(() => {\n      this.applyTheme(this.config().theme);\n    }, { allowSignalWrites: false });\n  }\n\n  configure(config: StudioConfig): void {\n    this.config.set(config);\n    if (config.theme?.mode) {\n      this.setThemeMode(config.theme.mode);\n    }\n  }\n\n  setThemeMode(mode: ThemeMode): void {\n    this.themeMode.set(mode);\n    this.document.documentElement.setAttribute('data-theme', mode);\n  }\n\n  toggleTheme(): void {\n    const newMode = this.themeMode() === 'light' ? 'dark' : 'light';\n    this.setThemeMode(newMode);\n  }\n\n  async loadFromBackend(organizationSlug: string): Promise<void> {\n    try {\n      const response = await fetch(`/api/organizations/${organizationSlug}/design-config`);\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n      const config = await response.json();\n      this.configure(config);\n    } catch (error) {\n      console.error('[Studio] Failed to load config from backend:', error);\n      throw error;\n    }\n  }\n\n  private applyTheme(theme?: StudioThemeConfig): void {\n    if (!theme) return;\n\n    const root = this.document.documentElement;\n\n    // Apply colors\n    if (theme.colors) {\n      this.applyColorTokens(root, theme.colors);\n    }\n\n    // Apply typography\n    if (theme.typography) {\n      if (theme.typography.fontFamily) {\n        root.style.setProperty('--studio-font-family', theme.typography.fontFamily);\n      }\n      if (theme.typography.fontMono) {\n        root.style.setProperty('--studio-font-mono', theme.typography.fontMono);\n      }\n      if (theme.typography.fontSize) {\n        this.applyTokens(root, 'studio-font-size', theme.typography.fontSize);\n      }\n      if (theme.typography.fontWeight) {\n        this.applyTokens(root, 'studio-font-weight', theme.typography.fontWeight);\n      }\n      if (theme.typography.lineHeight) {\n        this.applyTokens(root, 'studio-line-height', theme.typography.lineHeight);\n      }\n    }\n\n    // Apply spacing\n    if (theme.spacing) {\n      this.applyTokens(root, 'studio-spacing', theme.spacing);\n    }\n\n    // Apply border radius\n    if (theme.borderRadius) {\n      this.applyTokens(root, 'studio-radius', theme.borderRadius);\n    }\n\n    // Apply shadows\n    if (theme.shadows) {\n      this.applyTokens(root, 'studio-shadow', theme.shadows);\n    }\n\n    // Apply transitions\n    if (theme.transitions) {\n      this.applyTokens(root, 'studio-transition', theme.transitions);\n    }\n\n    // Apply z-index\n    if (theme.zIndex) {\n      this.applyZIndexTokens(root, theme.zIndex);\n    }\n  }\n\n  private applyColorTokens(\n    root: HTMLElement,\n    colors: NonNullable<StudioThemeConfig['colors']>\n  ): void {\n    // Brand colors with hover/active states\n    const brandColors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'] as const;\n\n    brandColors.forEach(colorName => {\n      const colorValue = colors[colorName];\n      if (!colorValue) return;\n\n      if (typeof colorValue === 'string') {\n        root.style.setProperty(`--studio-${colorName}`, colorValue);\n      } else {\n        const config = colorValue as ColorConfig;\n        if (config.base) {\n          root.style.setProperty(`--studio-${colorName}`, config.base);\n        }\n        if (config.hover) {\n          root.style.setProperty(`--studio-${colorName}-hover`, config.hover);\n        }\n        if (config.active) {\n          root.style.setProperty(`--studio-${colorName}-active`, config.active);\n        }\n        if (config.bg) {\n          root.style.setProperty(`--studio-${colorName}-bg`, config.bg);\n        }\n      }\n    });\n\n    // Background colors\n    if (colors.bg) {\n      this.applyTokens(root, 'studio-bg', colors.bg);\n    }\n\n    // Text colors\n    if (colors.text) {\n      this.applyTokens(root, 'studio-text', colors.text);\n    }\n\n    // Border colors\n    if (colors.border) {\n      this.applyTokens(root, 'studio-border', colors.border);\n    }\n  }\n\n  private applyZIndexTokens(\n    root: HTMLElement,\n    zIndex: NonNullable<StudioThemeConfig['zIndex']>\n  ): void {\n    const zIndexMap: Record<string, string> = {\n      dropdown: 'dropdown',\n      sticky: 'sticky',\n      fixed: 'fixed',\n      modalBackdrop: 'modal-backdrop',\n      modal: 'modal',\n      popover: 'popover',\n      tooltip: 'tooltip'\n    };\n\n    Object.entries(zIndex).forEach(([key, value]) => {\n      if (value !== undefined && value !== null) {\n        const cssKey = zIndexMap[key] || key;\n        root.style.setProperty(`--studio-z-${cssKey}`, String(value));\n      }\n    });\n  }\n\n  private applyTokens(\n    root: HTMLElement,\n    prefix: string,\n    tokens: Record<string, string | number>\n  ): void {\n    Object.entries(tokens).forEach(([key, value]) => {\n      if (value !== undefined && value !== null) {\n        root.style.setProperty(`--${prefix}-${key}`, String(value));\n      }\n    });\n  }\n}\n","import { EnvironmentProviders, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, inject } from '@angular/core';\nimport { STUDIO_CONFIG, StudioConfig } from './studio.config';\nimport { StudioConfigService } from './studio.service';\n\n/**\n * Provide Studio configuration for the application\n *\n * @example\n * ```typescript\n * // app.config.ts\n * import { provideStudioConfig } from '@eduboxpro/studio/config';\n *\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideStudioConfig({\n *       theme: {\n *         mode: 'light',\n *         colors: {\n *           primary: '#3b82f6'\n *         }\n *       }\n *     })\n *   ]\n * };\n * ```\n */\nexport function provideStudioConfig(config: StudioConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: STUDIO_CONFIG,\n      useValue: config\n    },\n    {\n      provide: ENVIRONMENT_INITIALIZER,\n      multi: true,\n      useValue: () => {\n        const studioConfig = inject(StudioConfigService);\n        const initialConfig = inject(STUDIO_CONFIG);\n        studioConfig.configure(initialConfig);\n      }\n    }\n  ]);\n}\n","/**\n * Configuration module\n * @module config\n */\n\nexport * from './studio.config';\nexport * from './studio.service';\nexport * from './provide-studio';\n","import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\nimport { LucideAngularModule, icons } from 'lucide-angular';\n\n@Component({\n  selector: 'studio-icon',\n  standalone: true,\n  imports: [LucideAngularModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[style.width.px]': 'size()',\n    '[style.height.px]': 'size()',\n  },\n  template: `\n    @if (lucideIcon(); as iconName) {\n      <lucide-icon\n        [name]=\"iconName\"\n        [size]=\"size()\"\n        [color]=\"computedColor()\"\n        [strokeWidth]=\"strokeWidth()\"\n        [absoluteStrokeWidth]=\"absoluteStrokeWidth()\"\n      />\n    }\n  `,\n  styles: [`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n  `]\n})\nexport class IconComponent {\n  name = input.required<string>();\n  size = input<number>(24);\n  color = input<'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'inherit' | string>('inherit');\n  strokeWidth = input<number>(2);\n  absoluteStrokeWidth = input<boolean>(false);\n\n  protected readonly icons = icons;\n\n  protected lucideIcon = computed(() => {\n    const iconName = this.name();\n    return iconName;\n  });\n\n  protected computedColor = computed(() => {\n    const colorValue = this.color();\n\n    const colorMap: Record<string, string> = {\n      'primary': 'var(--studio-primary)',\n      'secondary': 'var(--studio-secondary)',\n      'success': 'var(--studio-success)',\n      'error': 'var(--studio-error)',\n      'warning': 'var(--studio-warning)',\n      'inherit': 'currentColor'\n    };\n\n    return colorMap[colorValue] || colorValue;\n  });\n\n  protected hostClasses = computed(() => {\n    return ['studio-icon'];\n  });\n}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\nimport { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';\nimport {\n  ArrowRight,\n  ArrowLeft,\n  ChevronDown,\n  ChevronUp,\n  ChevronLeft,\n  ChevronRight,\n  Download,\n  Upload,\n  Mail,\n  Phone,\n  Heart,\n  Star,\n  Settings,\n  User,\n  Trash2,\n  Edit,\n  Plus,\n  Minus,\n  Check,\n  X,\n  Search,\n  Filter,\n  ExternalLink,\n  Link,\n  Copy,\n  Share2,\n  Home,\n  Menu,\n  MoreVertical,\n  MoreHorizontal,\n  Bell,\n  Calendar,\n  Clock,\n  Eye,\n  EyeOff,\n  Lock,\n  Unlock,\n  LogIn,\n  LogOut,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  CheckCircle,\n  XCircle,\n  HelpCircle,\n  File,\n  FileText,\n  Folder,\n  Image,\n  Save,\n  Printer,\n  RefreshCw,\n  RotateCw,\n  Loader,\n  Loader2\n} from 'lucide-angular';\n\n/**\n * Провайдер иконок для Studio\n * Регистрирует базовый набор часто используемых иконок\n *\n * @example\n * ```typescript\n * // app.config.ts\n * import { provideStudioIcons } from '@eduboxpro/studio';\n *\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideStudioIcons()\n *   ]\n * };\n * ```\n *\n * Для добавления дополнительных иконок:\n * @example\n * ```typescript\n * import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';\n * import { Zap, Wifi } from 'lucide-angular';\n *\n * providers: [\n *   provideStudioIcons(),\n *   {\n *     provide: LUCIDE_ICONS,\n *     multi: true,\n *     useValue: new LucideIconProvider({ Zap, Wifi })\n *   }\n * ]\n * ```\n */\nexport function provideStudioIcons(): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: LUCIDE_ICONS,\n      multi: true,\n      useValue: new LucideIconProvider({\n        ArrowRight,\n        ArrowLeft,\n        ChevronDown,\n        ChevronUp,\n        ChevronLeft,\n        ChevronRight,\n        Download,\n        Upload,\n        Mail,\n        Phone,\n        Heart,\n        Star,\n        Settings,\n        User,\n        Trash2,\n        Edit,\n        Plus,\n        Minus,\n        Check,\n        X,\n        Search,\n        Filter,\n        ExternalLink,\n        Link,\n        Copy,\n        Share2,\n        Home,\n        Menu,\n        MoreVertical,\n        MoreHorizontal,\n        Bell,\n        Calendar,\n        Clock,\n        Eye,\n        EyeOff,\n        Lock,\n        Unlock,\n        LogIn,\n        LogOut,\n        AlertCircle,\n        AlertTriangle,\n        Info,\n        CheckCircle,\n        XCircle,\n        HelpCircle,\n        File,\n        FileText,\n        Folder,\n        Image,\n        Save,\n        Printer,\n        RefreshCw,\n        RotateCw,\n        Loader,\n        Loader2\n      })\n    }\n  ]);\n}\n","import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';\nimport { IconComponent } from '../icon';\n\n@Component({\n  selector: 'studio-button',\n  standalone: true,\n  imports: [IconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.disabled]': 'disabled() || loading() ? \"\" : null',\n    '[attr.type]': 'type()',\n    '(click)': 'handleClick($event)'\n  },\n  template: `\n    <span class=\"studio-button__content\">\n      @if (loading()) {\n        <studio-icon\n          name=\"loader-2\"\n          [size]=\"iconSize()\"\n          class=\"studio-button__spinner\"\n        />\n      }\n      @if (!loading() && icon() && iconPosition() === 'left') {\n        <studio-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (iconPosition() !== 'only' && !loading()) {\n        <ng-content />\n      }\n      @if (!loading() && icon() && iconPosition() === 'right') {\n        <studio-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (!loading() && icon() && iconPosition() === 'only') {\n        <studio-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (loading() && iconPosition() === 'only') {\n        <!-- Empty, spinner already shown -->\n      } @else if (loading()) {\n        <span>Loading...</span>\n      }\n    </span>\n  `,\n  styleUrl: './button.component.scss'\n})\nexport class ButtonComponent {\n  variant = input<'solid' | 'outline' | 'ghost'>('solid');\n  size = input<'sm' | 'md' | 'lg'>('md');\n  color = input<'primary' | 'secondary' | 'success' | 'error' | 'warning'>('primary');\n  disabled = input<boolean>(false);\n  fullWidth = input<boolean>(false);\n  loading = input<boolean>(false);\n  type = input<'button' | 'submit' | 'reset'>('button');\n  icon = input<string>();\n  iconPosition = input<'left' | 'right' | 'only'>('left');\n\n  clicked = output<MouseEvent>();\n\n  protected iconSize = computed(() => {\n    const sizeMap = { sm: 16, md: 18, lg: 20 };\n    return sizeMap[this.size()];\n  });\n\n  protected hostClasses = computed(() => {\n    return [\n      'studio-button',\n      `studio-button--${this.variant()}`,\n      `studio-button--${this.size()}`,\n      `studio-button--${this.color()}`,\n      this.fullWidth() ? 'studio-button--full' : '',\n      this.loading() ? 'studio-button--loading' : '',\n      this.iconPosition() === 'only' ? 'studio-button--icon-only' : ''\n    ].filter(Boolean).join(' ');\n  });\n\n  protected handleClick(event: MouseEvent): void {\n    if (this.disabled() || this.loading()) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.clicked.emit(event);\n  }\n}\n","/**\n * Button component\n */\n\nexport * from './button.component';\n","/**\n * Primitives (Atoms)\n * Basic building blocks\n */\n\nexport * from './button';\nexport * from './icon';\n","/**\n * Composites (Molecules + Organisms)\n * Complex components built from primitives\n */\n\n// Export composite components here\n// Example: export * from './form-field';\n\n// Empty export to make this a valid module\nexport {};\n","/**\n * Education components\n * Domain-specific components for educational platforms\n */\n\n// Export education components here\n// Example: export * from './course-card';\n// Example: export * from './lesson-viewer';\n// Example: export * from './quiz-builder';\n\n// Empty export to make this a valid module\nexport {};\n","/**\n * Utilities\n * Helper functions, directives, pipes\n */\n\n// Export utilities here\n// Example: export * from './format-date.pipe';\n// Example: export * from './auto-focus.directive';\n\n// Empty export to make this a valid module\nexport {};\n","/**\n * Public API Surface of @eduboxpro/studio\n */\n\n/* ========================================\n * Configuration\n * ======================================== */\nexport * from './lib/config';\n\n/* ========================================\n * Components\n * ======================================== */\nexport * from './lib/primitives';\nexport * from './lib/composites';\nexport * from './lib/education';\n\n/* ========================================\n * Utilities\n * ======================================== */\nexport * from './lib/utils';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,10 +1,20 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders } from '@angular/core';
+import { icons } from 'lucide-angular';
 
 /**
  * Theme mode: light or dark
  */
 type ThemeMode = 'light' | 'dark';
+/**
+ * Color configuration with hover and active states
+ */
+interface ColorConfig {
+    base?: string;
+    hover?: string;
+    active?: string;
+    bg?: string;
+}
 /**
  * Theme configuration interface
  */
@@ -14,21 +24,37 @@ interface StudioThemeConfig {
      */
     mode?: ThemeMode;
     /**
-     * Color tokens override
+     * Color tokens override with hover/active states
      */
     colors?: {
-        primary?: string;
-        secondary?: string;
-        success?: string;
-        error?: string;
-        warning?: string;
-        info?: string;
+        primary?: ColorConfig | string;
+        secondary?: ColorConfig | string;
+        success?: ColorConfig | string;
+        error?: ColorConfig | string;
+        warning?: ColorConfig | string;
+        info?: ColorConfig | string;
+        bg?: {
+            primary?: string;
+            secondary?: string;
+            tertiary?: string;
+        };
+        text?: {
+            primary?: string;
+            secondary?: string;
+            tertiary?: string;
+            inverse?: string;
+        };
+        border?: {
+            primary?: string;
+            secondary?: string;
+        };
     };
     /**
      * Typography tokens override
      */
     typography?: {
         fontFamily?: string;
+        fontMono?: string;
         fontSize?: {
             xs?: string;
             sm?: string;
@@ -43,6 +69,11 @@ interface StudioThemeConfig {
             semibold?: number;
             bold?: number;
         };
+        lineHeight?: {
+            tight?: number;
+            normal?: number;
+            relaxed?: number;
+        };
     };
     /**
      * Spacing tokens override
@@ -75,6 +106,26 @@ interface StudioThemeConfig {
         lg?: string;
         xl?: string;
     };
+    /**
+     * Transition tokens override
+     */
+    transitions?: {
+        fast?: string;
+        base?: string;
+        slow?: string;
+    };
+    /**
+     * Z-index tokens override
+     */
+    zIndex?: {
+        dropdown?: number;
+        sticky?: number;
+        fixed?: number;
+        modalBackdrop?: number;
+        modal?: number;
+        popover?: number;
+        tooltip?: number;
+    };
 }
 /**
  * Main Studio configuration interface
@@ -100,6 +151,8 @@ declare class StudioConfigService {
     toggleTheme(): void;
     loadFromBackend(organizationSlug: string): Promise<void>;
     private applyTheme;
+    private applyColorTokens;
+    private applyZIndexTokens;
     private applyTokens;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StudioConfigService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<StudioConfigService>;
@@ -131,18 +184,69 @@ declare function provideStudioConfig(config?: StudioConfig): EnvironmentProvider
 
 declare class ButtonComponent {
     variant: _angular_core.InputSignal<"solid" | "outline" | "ghost">;
-    size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    size: _angular_core.InputSignal<"sm" | "lg" | "md">;
     color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "error" | "warning">;
     disabled: _angular_core.InputSignal<boolean>;
     fullWidth: _angular_core.InputSignal<boolean>;
     loading: _angular_core.InputSignal<boolean>;
     type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    icon: _angular_core.InputSignal<string | undefined>;
+    iconPosition: _angular_core.InputSignal<"left" | "right" | "only">;
     clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    protected iconSize: _angular_core.Signal<number>;
     protected hostClasses: _angular_core.Signal<string>;
     protected handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "studio-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "studio-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+declare class IconComponent {
+    name: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<number>;
+    color: _angular_core.InputSignal<string>;
+    strokeWidth: _angular_core.InputSignal<number>;
+    absoluteStrokeWidth: _angular_core.InputSignal<boolean>;
+    protected readonly icons: typeof icons;
+    protected lucideIcon: _angular_core.Signal<string>;
+    protected computedColor: _angular_core.Signal<string>;
+    protected hostClasses: _angular_core.Signal<string[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "studio-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "absoluteStrokeWidth": { "alias": "absoluteStrokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { ButtonComponent, STUDIO_CONFIG, StudioConfigService, provideStudioConfig };
-export type { StudioConfig, StudioThemeConfig, ThemeMode };
+/**
+ * Провайдер иконок для Studio
+ * Регистрирует базовый набор часто используемых иконок
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideStudioIcons } from '@eduboxpro/studio';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideStudioIcons()
+ *   ]
+ * };
+ * ```
+ *
+ * Для добавления дополнительных иконок:
+ * @example
+ * ```typescript
+ * import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
+ * import { Zap, Wifi } from 'lucide-angular';
+ *
+ * providers: [
+ *   provideStudioIcons(),
+ *   {
+ *     provide: LUCIDE_ICONS,
+ *     multi: true,
+ *     useValue: new LucideIconProvider({ Zap, Wifi })
+ *   }
+ * ]
+ * ```
+ */
+declare function provideStudioIcons(): EnvironmentProviders;
+
+export { ButtonComponent, IconComponent, STUDIO_CONFIG, StudioConfigService, provideStudioConfig, provideStudioIcons };
+export type { ColorConfig, StudioConfig, StudioThemeConfig, ThemeMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduboxpro/studio",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Modern Angular UI library for educational platforms with customizable design system",
   "keywords": [
     "angular",
@@ -16,7 +16,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/eduboxpro/studio"
+    "url": "git+https://github.com/eduboxpro/studio.git"
   },
   "peerDependencies": {
     "@angular/common": "^20.3.0",

package/src/styles/_mixins.scss

@@ -0,0 +1,157 @@
+/**
+ * SCSS Mixins
+ * Reusable style patterns
+ */
+
+/**
+ * Flex center
+ */
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/**
+ * Absolute center
+ */
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * Line clamp (multi-line truncate)
+ */
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/**
+ * Focus ring (accessible focus state)
+ */
+@mixin focus-ring($color: var(--studio-primary), $offset: 2px) {
+  outline: 2px solid $color;
+  outline-offset: $offset;
+}
+
+/**
+ * Visually hidden (accessible but invisible)
+ */
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/**
+ * Reset button styles
+ */
+@mixin reset-button {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+/**
+ * Reset list styles
+ */
+@mixin reset-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/**
+ * Scrollbar styles
+ */
+@mixin custom-scrollbar($width: 8px, $track-color: transparent, $thumb-color: var(--studio-border-secondary)) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $track-color;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $thumb-color;
+    border-radius: var(--studio-radius-full);
+
+    &:hover {
+      background: var(--studio-text-tertiary);
+    }
+  }
+}
+
+/**
+ * Smooth transition
+ */
+@mixin transition($properties...) {
+  transition-property: $properties;
+  transition-duration: var(--studio-transition-base);
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/**
+ * Responsive breakpoints
+ */
+@mixin breakpoint($size) {
+  @if $size == 'sm' {
+    @media (min-width: 640px) { @content; }
+  } @else if $size == 'md' {
+    @media (min-width: 768px) { @content; }
+  } @else if $size == 'lg' {
+    @media (min-width: 1024px) { @content; }
+  } @else if $size == 'xl' {
+    @media (min-width: 1280px) { @content; }
+  } @else if $size == '2xl' {
+    @media (min-width: 1536px) { @content; }
+  }
+}
+
+/**
+ * Hover state (respects prefers-reduced-motion)
+ */
+@mixin hover {
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+/**
+ * Animation (respects prefers-reduced-motion)
+ */
+@mixin animate($name, $duration: var(--studio-transition-base)) {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: $name $duration;
+  }
+}

package/src/styles/_reset.scss

@@ -0,0 +1,65 @@
+/**
+ * CSS Reset
+ * Minimal CSS reset for consistent styling
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--studio-font-family);
+  font-size: var(--studio-font-size-base);
+  line-height: var(--studio-line-height-normal);
+  color: var(--studio-text-primary);
+  background-color: var(--studio-bg-primary);
+  transition: background-color var(--studio-transition-base), color var(--studio-transition-base);
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/src/styles/_tokens.scss

@@ -0,0 +1,181 @@
+/**
+ * Design Tokens
+ * CSS Custom Properties for theme customization
+ */
+
+:root {
+  /* ========================================
+   * COLORS - Light Theme (Default)
+   * ======================================== */
+
+  /* Background colors */
+  --studio-bg-primary: #ffffff;
+  --studio-bg-secondary: #f3f4f6;
+  --studio-bg-tertiary: #e5e7eb;
+
+  /* Text colors */
+  --studio-text-primary: #111827;
+  --studio-text-secondary: #6b7280;
+  --studio-text-tertiary: #9ca3af;
+  --studio-text-inverse: #ffffff;
+
+  /* Border colors */
+  --studio-border-primary: #e5e7eb;
+  --studio-border-secondary: #d1d5db;
+
+  /* Brand colors */
+  --studio-primary: #7c3aed;
+  --studio-primary-hover: #6d28d9;
+  --studio-primary-active: #5b21b6;
+
+  --studio-secondary: #6366f1;
+  --studio-secondary-hover: #4f46e5;
+  --studio-secondary-active: #4338ca;
+
+  /* Semantic colors */
+  --studio-success: #10b981;
+  --studio-success-hover: #059669;
+  --studio-success-bg: #d1fae5;
+
+  --studio-error: #ef4444;
+  --studio-error-hover: #dc2626;
+  --studio-error-bg: #fee2e2;
+
+  --studio-warning: #f59e0b;
+  --studio-warning-hover: #d97706;
+  --studio-warning-bg: #fef3c7;
+
+  --studio-info: #0ea5e9;
+  --studio-info-hover: #0284c7;
+  --studio-info-bg: #dbeafe;
+
+  /* ========================================
+   * TYPOGRAPHY
+   * ======================================== */
+
+  --studio-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --studio-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+
+  /* Font sizes */
+  --studio-font-size-xs: 0.75rem;    /* 12px */
+  --studio-font-size-sm: 0.875rem;   /* 14px */
+  --studio-font-size-base: 1rem;     /* 16px */
+  --studio-font-size-lg: 1.125rem;   /* 18px */
+  --studio-font-size-xl: 1.25rem;    /* 20px */
+  --studio-font-size-2xl: 1.5rem;    /* 24px */
+
+  /* Font weights */
+  --studio-font-weight-normal: 400;
+  --studio-font-weight-medium: 500;
+  --studio-font-weight-semibold: 600;
+  --studio-font-weight-bold: 700;
+
+  /* Line heights */
+  --studio-line-height-tight: 1.25;
+  --studio-line-height-normal: 1.5;
+  --studio-line-height-relaxed: 1.75;
+
+  /* ========================================
+   * SPACING
+   * ======================================== */
+
+  --studio-spacing-xs: 0.25rem;   /* 4px */
+  --studio-spacing-sm: 0.5rem;    /* 8px */
+  --studio-spacing-md: 1rem;      /* 16px */
+  --studio-spacing-lg: 1.5rem;    /* 24px */
+  --studio-spacing-xl: 2rem;      /* 32px */
+  --studio-spacing-2xl: 3rem;     /* 48px */
+
+  /* ========================================
+   * BORDER RADIUS
+   * ======================================== */
+
+  --studio-radius-none: 0;
+  --studio-radius-sm: 0.25rem;    /* 4px */
+  --studio-radius-md: 0.5rem;     /* 8px */
+  --studio-radius-lg: 0.75rem;    /* 12px */
+  --studio-radius-xl: 1rem;       /* 16px */
+  --studio-radius-full: 9999px;
+
+  /* ========================================
+   * SHADOWS
+   * ======================================== */
+
+  --studio-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --studio-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --studio-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --studio-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* ========================================
+   * TRANSITIONS
+   * ======================================== */
+
+  --studio-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --studio-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --studio-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ========================================
+   * Z-INDEX
+   * ======================================== */
+
+  --studio-z-dropdown: 1000;
+  --studio-z-sticky: 1020;
+  --studio-z-fixed: 1030;
+  --studio-z-modal-backdrop: 1040;
+  --studio-z-modal: 1050;
+  --studio-z-popover: 1060;
+  --studio-z-tooltip: 1070;
+}
+
+/* ========================================
+ * DARK THEME
+ * ======================================== */
+
+[data-theme="dark"] {
+  /* Background colors */
+  --studio-bg-primary: #111827;
+  --studio-bg-secondary: #1f2937;
+  --studio-bg-tertiary: #374151;
+
+  /* Text colors */
+  --studio-text-primary: #f9fafb;
+  --studio-text-secondary: #d1d5db;
+  --studio-text-tertiary: #9ca3af;
+  --studio-text-inverse: #111827;
+
+  /* Border colors */
+  --studio-border-primary: #374151;
+  --studio-border-secondary: #4b5563;
+
+  /* Brand colors - slightly adjusted for dark mode */
+  --studio-primary: #a78bfa;
+  --studio-primary-hover: #c4b5fd;
+  --studio-primary-active: #ddd6fe;
+
+  --studio-secondary: #818cf8;
+  --studio-secondary-hover: #a5b4fc;
+  --studio-secondary-active: #c7d2fe;
+
+  /* Semantic colors */
+  --studio-success: #34d399;
+  --studio-success-hover: #6ee7b7;
+  --studio-success-bg: #064e3b;
+
+  --studio-error: #f87171;
+  --studio-error-hover: #fca5a5;
+  --studio-error-bg: #7f1d1d;
+
+  --studio-warning: #fbbf24;
+  --studio-warning-hover: #fcd34d;
+  --studio-warning-bg: #78350f;
+
+  --studio-info: #38bdf8;
+  --studio-info-hover: #7dd3fc;
+  --studio-info-bg: #0c4a6e;
+
+  /* Shadows - darker for dark mode */
+  --studio-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --studio-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --studio-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
+  --studio-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}

package/src/styles/studio.scss

@@ -0,0 +1,15 @@
+/**
+ * @eduboxpro/studio - Main Stylesheet
+ *
+ * Import this file in your angular.json or styles array:
+ * "styles": ["node_modules/@eduboxpro/studio/styles/studio.scss"]
+ */
+
+/* Design Tokens */
+@import 'tokens';
+
+/* CSS Reset */
+@import 'reset';
+
+/* Mixins - import in component styles as needed */
+/* @import '@eduboxpro/studio/styles/mixins'; */