@tolle_/tolle-ui 0.0.19-beta → 0.0.22-beta

package/lib/button.component.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
     busy?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -12,9 +12,8 @@ export declare class ButtonComponent {
     size: ButtonProps['size'];
     disabled: boolean;
     busy: boolean;
-    readonly: boolean;
     get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "tolle-button", never, { "class": { "alias": "class"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "tolle-button", never, { "class": { "alias": "class"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export {};

package/lib/input.component.d.ts

@@ -1,9 +1,10 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { cn } from './utils/cn';
 import * as i0 from "@angular/core";
-export declare class InputComponent implements ControlValueAccessor {
+export declare class InputComponent implements ControlValueAccessor, AfterViewInit {
     private cdr;
+    inputElement: ElementRef<HTMLInputElement>;
     id: string;
     label: string;
     hint: string;
@@ -16,18 +17,25 @@ export declare class InputComponent implements ControlValueAccessor {
     disabled: boolean;
     readonly: boolean;
     error: boolean;
+    hideHintOnFocus: boolean;
     value: any;
     onChange: any;
     onTouched: any;
+    isFocused: boolean;
     constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     onInputChange(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    focusInput(): void;
     protected readonly cn: typeof cn;
+    get computedLabelClass(): string;
     get computedContainerClass(): string;
     get computedInputClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "tolle-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "class": { "alias": "class"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, ["[prefix]", "[suffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "tolle-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "class": { "alias": "class"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "hideHintOnFocus": { "alias": "hideHintOnFocus"; "required": false; }; }, {}, never, ["[prefix]", "[suffix]"], true, never>;
 }

package/lib/masked-input.component.d.ts

@@ -19,17 +19,23 @@ export declare class MaskedInputComponent implements ControlValueAccessor, After
     error: boolean;
     size: 'xs' | 'sm' | 'default' | 'lg';
     returnRaw: boolean;
+    hideHintOnFocus: boolean;
     inputEl: ElementRef<HTMLInputElement>;
     hasPrefix: boolean;
     hasSuffix: boolean;
     displayValue: string;
+    isFocused: boolean;
     private tokens;
     onChange: any;
     onTouched: any;
     constructor(el: ElementRef, cdr: ChangeDetectorRef);
     ngAfterContentChecked(): void;
+    get computedLabelClass(): string;
     get computedContainerClass(): string;
     get computedInputClass(): string;
+    focusInput(): void;
+    onFocus(): void;
+    onBlur(): void;
     onInput(event: Event): void;
     private applyMask;
     private unmask;
@@ -39,5 +45,5 @@ export declare class MaskedInputComponent implements ControlValueAccessor, After
     setDisabledState(isDisabled: boolean): void;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<MaskedInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MaskedInputComponent, "tolle-masked-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "class": { "alias": "class"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "error": { "alias": "error"; "required": false; }; "size": { "alias": "size"; "required": false; }; "returnRaw": { "alias": "returnRaw"; "required": false; }; }, {}, never, ["[prefix]", "[suffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaskedInputComponent, "tolle-masked-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "class": { "alias": "class"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "error": { "alias": "error"; "required": false; }; "size": { "alias": "size"; "required": false; }; "returnRaw": { "alias": "returnRaw"; "required": false; }; "hideHintOnFocus": { "alias": "hideHintOnFocus"; "required": false; }; }, {}, never, ["[prefix]", "[suffix]"], true, never>;
 }

package/lib/otp-slot.component.d.ts

@@ -7,6 +7,7 @@ export declare class OtpSlotComponent {
     isLast: boolean;
     class: string;
     protected cn: typeof cn;
+    get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<OtpSlotComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OtpSlotComponent, "tolle-otp-slot", never, { "char": { "alias": "char"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; "isFirst": { "alias": "isFirst"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/select.component.d.ts

@@ -14,6 +14,7 @@ export declare class SelectComponent implements ControlValueAccessor, AfterConte
     readonly: boolean;
     trigger: ElementRef;
     popover: ElementRef;
+    container: ElementRef;
     items: QueryList<SelectItemComponent>;
     private sub;
     searchQuery: string;

package/lib/textarea.component.d.ts

@@ -7,25 +7,32 @@ export declare class TextareaComponent implements ControlValueAccessor, AfterVie
     label: string;
     placeholder: string;
     hint: string;
+    errorMessage: string;
     rows: number;
     maxLength?: number;
     showCharacterCount: boolean;
     autoGrow: boolean;
     error: boolean;
     className: string;
+    hideHintOnFocus: boolean;
+    hideCharacterCountOnFocus: boolean;
     disabled: boolean;
     readonly: boolean;
     value: string;
+    isFocused: boolean;
     onChange: any;
     onTouched: any;
     ngAfterViewInit(): void;
+    get computedLabelClass(): string;
     get textareaClasses(): string;
     handleInput(event: any): void;
+    onFocus(): void;
+    onBlur(): void;
     private resize;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "tolle-textarea", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "autoGrow": { "alias": "autoGrow"; "required": false; }; "error": { "alias": "error"; "required": false; }; "className": { "alias": "className"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "tolle-textarea", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "autoGrow": { "alias": "autoGrow"; "required": false; }; "error": { "alias": "error"; "required": false; }; "className": { "alias": "className"; "required": false; }; "hideHintOnFocus": { "alias": "hideHintOnFocus"; "required": false; }; "hideCharacterCountOnFocus": { "alias": "hideCharacterCountOnFocus"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/theme.service.d.ts

@@ -12,14 +12,41 @@ export declare class ThemeService {
     constructor(document: Document, platformId: Object, config: TolleConfig, rendererFactory: RendererFactory2);
     private initializeTheme;
     /**
-     * Applies the brand identity variables with full shade palette
+     * Sets the border radius for all components
      */
-    applyBrandConfig(config: TolleConfig): void;
+    setRadius(radius: string, persist?: boolean): void;
+    /**
+     * Updates the radius calculations in dynamic styles
+     */
+    private updateRadiusInDynamicStyles;
     /**
      * Generates full primary color palette (50-900) based on base color
-     * Uses color-mix() for consistency with your existing approach
      */
     private generatePrimaryShades;
+    /**
+     * Convert hex color to RGB object
+     */
+    private hexToRgb;
+    /**
+     * Convert hex to RGB string format for CSS (space-separated)
+     */
+    private hexToRgbString;
+    /**
+     * Get contrast color in RGB format
+     */
+    private getContrastColorRgb;
+    /**
+     * Lighten a hex color by a percentage
+     */
+    private lightenColor;
+    /**
+     * Darken a hex color by a percentage
+     */
+    private darkenColor;
+    /**
+     * Calculate contrast color (black or white) based on background color
+     */
+    private getContrastColor;
     private injectDynamicStyles;
     toggleTheme(): void;
     private enableDarkMode;
@@ -27,6 +54,22 @@ export declare class ThemeService {
     setPrimaryColor(color: string, persist?: boolean): void;
     get currentTheme(): 'dark' | 'light';
     get primaryColor(): string | null;
+    /**
+     * Reset to config defaults (clears user preferences)
+     */
+    resetToConfigDefaults(): void;
+    /**
+     * Get current user preferences
+     */
+    getUserPreferences(): {
+        theme: string | null;
+        primaryColor: string | null;
+        radius: string | null;
+    } | null;
+    /**
+     * Clear all user preferences
+     */
+    clearUserPreferences(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, [null, null, { optional: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "0.0.19-beta",
+  "version": "0.0.22-beta",
   "publishConfig": {
     "access": "public"
   },

package/preset.js

@@ -1,48 +1,56 @@
-/** @type {import('tailwindcss').Config} */
+// tolle-preset.js
 module.exports = {
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
-        // Primary with full palette
+        // CSS Variables with RGB values
+        border: 'rgb(var(--border) / <alpha-value>)',
+        input: 'rgb(var(--input) / <alpha-value>)',
+        ring: 'rgb(var(--ring) / <alpha-value>)',
+        background: 'rgb(var(--background) / <alpha-value>)',
+        foreground: 'rgb(var(--foreground) / <alpha-value>)',
+
+        // Primary colors with opacity support
         primary: {
-          50: 'var(--primary-50)',
-          100: 'var(--primary-100)',
-          200: 'var(--primary-200)',
-          300: 'var(--primary-300)',
-          400: 'var(--primary-400)',
-          500: 'var(--primary-500)',
-          600: 'var(--primary-600)',
-          700: 'var(--primary-700)',
-          800: 'var(--primary-800)',
-          900: 'var(--primary-900)',
-          DEFAULT: 'var(--primary-500)',
-          foreground: 'var(--primary-foreground)',
+          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
+          foreground: 'rgb(var(--primary-foreground) / <alpha-value>)',
+          50: 'rgb(var(--primary-50) / <alpha-value>)',
+          100: 'rgb(var(--primary-100) / <alpha-value>)',
+          200: 'rgb(var(--primary-200) / <alpha-value>)',
+          300: 'rgb(var(--primary-300) / <alpha-value>)',
+          400: 'rgb(var(--primary-400) / <alpha-value>)',
+          500: 'rgb(var(--primary-500) / <alpha-value>)',
+          600: 'rgb(var(--primary-600) / <alpha-value>)',
+          700: 'rgb(var(--primary-700) / <alpha-value>)',
+          800: 'rgb(var(--primary-800) / <alpha-value>)',
+          900: 'rgb(var(--primary-900) / <alpha-value>)',
         },
-        // Other colors
+
+        // Semantic colors with opacity support
         secondary: {
-          DEFAULT: 'var(--secondary)',
-          foreground: 'var(--secondary-foreground)',
+          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
+          foreground: 'rgb(var(--secondary-foreground) / <alpha-value>)',
+        },
+        destructive: {
+          DEFAULT: 'rgb(var(--destructive) / <alpha-value>)',
+          foreground: 'rgb(var(--destructive-foreground) / <alpha-value>)',
         },
         muted: {
-          DEFAULT: 'var(--muted)',
-          foreground: 'var(--muted-foreground)',
+          DEFAULT: 'rgb(var(--muted) / <alpha-value>)',
+          foreground: 'rgb(var(--muted-foreground) / <alpha-value>)',
         },
         accent: {
-          DEFAULT: 'var(--accent)',
-          foreground: 'var(--accent-foreground)',
-        },
-        destructive: {
-          DEFAULT: 'var(--destructive)',
-          foreground: 'var(--destructive-foreground)',
+          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
+          foreground: 'rgb(var(--accent-foreground) / <alpha-value>)',
         },
-        border: 'var(--border)',
-        input: 'var(--input)',
-        ring: 'var(--ring)',
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
         popover: {
-          DEFAULT: 'var(--popover)',
-          foreground: 'var(--popover-foreground)',
+          DEFAULT: 'rgb(var(--popover) / <alpha-value>)',
+          foreground: 'rgb(var(--popover-foreground) / <alpha-value>)',
+        },
+        card: {
+          DEFAULT: 'rgb(var(--card) / <alpha-value>)',
+          foreground: 'rgb(var(--card-foreground) / <alpha-value>)',
         },
       },
       borderRadius: {
@@ -50,7 +58,13 @@ module.exports = {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+      },
     },
   },
   plugins: [],
-};
+}