@weni/unnnic-system 3.2.1 → 3.2.3

package/CHANGELOG.md

@@ -5,6 +5,37 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# 3.2.3 (2025-09-12)
+
+### Added
+
+- **TypeScript Composition API Migration**: Migrated Icon, Button, and Disclaimer components from Options API to Composition API with full TypeScript support
+- **Component Renaming**: Renamed `Icon` component to `UnnnicIcon` for Pascal Case consistency
+- **Type Definitions**: Added comprehensive TypeScript interfaces and types:
+  - `IconSize`, `LineHeight`, `SchemeColor`, `IconProps` for Icon component
+  - `ButtonSize`, `ButtonType`, `ButtonProps` for Button component  
+  - `DisclaimerProps` for Disclaimer component
+- **Type Safety**: Full compile-time type validation for all component props
+- **Modular Types**: Separate type definition files for each component (`types.ts`)
+
+### Changed
+
+- **BREAKING**: Icon component name changed from `Icon` to `UnnnicIcon`
+- **BREAKING**: Components migrated to `<script setup lang="ts">` syntax
+- **Test Updates**: Updated all component tests to work with new TypeScript structure
+- **Prop Validation**: Replaced runtime validators with TypeScript compile-time validation
+
+### Fixed
+
+- CSS warning for `font-feature-settings` compatibility in Icon component
+- Style property typing issues in Button component
+
+
+# 3.2.2 (2025-09-12)
+
+### Added
+- **ChatsMessage**: Added automatic message variation
+
 # 3.2.1 (2025-09-11)
 
 ### Fixed

package/dist/components/Accordion/Accordion.vue.d.ts

@@ -20,82 +20,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{}>, {
     open: boolean;
 }, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {}, {}, {
-        svg(): any;
-        materialSymbolsName(): any;
-    }, {
-        onClick($event: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "mousedown" | "mouseup")[], "click" | "mousedown" | "mouseup", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onClick?: ((...args: any[]) => any) | undefined;
-        onMousedown?: ((...args: any[]) => any) | undefined;
-        onMouseup?: ((...args: any[]) => any) | undefined;
+    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: Event) => any;
+        mousedown: (event: Event) => any;
+        mouseup: (event: Event) => any;
+    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
+        onClick?: ((event: Event) => any) | undefined;
+        onMousedown?: ((event: Event) => any) | undefined;
+        onMouseup?: ((event: Event) => any) | undefined;
     }>, {
         filled: boolean;
         next: boolean;
-        icon: string;
+        icon: string | null;
         clickable: boolean;
-        size: string;
-        lineHeight: string;
-        scheme: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        size: import('../Icon.vue').IconSize;
+        lineHeight: import('../Icon.vue').LineHeight | null;
+        scheme: import('../Icon.vue').SchemeColor;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=Accordion.vue.d.ts.map

package/dist/components/Alert/Alert.vue.d.ts

@@ -99,9 +99,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{}>, {
     title: string;
     text: string;
-    type: string;
     icon: string;
     scheme: string;
+    type: string;
     position: string;
     version: string;
     onClose: Function;
@@ -110,82 +110,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     linkText: string;
     closeText: string;
 }, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {}, {}, {
-        svg(): any;
-        materialSymbolsName(): any;
-    }, {
-        onClick($event: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "mousedown" | "mouseup")[], "click" | "mousedown" | "mouseup", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onClick?: ((...args: any[]) => any) | undefined;
-        onMousedown?: ((...args: any[]) => any) | undefined;
-        onMouseup?: ((...args: any[]) => any) | undefined;
+    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: Event) => any;
+        mousedown: (event: Event) => any;
+        mouseup: (event: Event) => any;
+    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
+        onClick?: ((event: Event) => any) | undefined;
+        onMousedown?: ((event: Event) => any) | undefined;
+        onMouseup?: ((event: Event) => any) | undefined;
     }>, {
         filled: boolean;
         next: boolean;
-        icon: string;
+        icon: string | null;
         clickable: boolean;
-        size: string;
-        lineHeight: string;
-        scheme: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        size: import('../Icon.vue').IconSize;
+        lineHeight: import('../Icon.vue').LineHeight | null;
+        scheme: import('../Icon.vue').SchemeColor;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
     Version1dot1: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         version: {
             type: StringConstructor;
@@ -258,90 +199,31 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onClose?: ((...args: any[]) => any) | undefined;
     }>, {
         text: string;
-        type: string;
         scheme: string;
+        type: string;
         version: string;
         onClose: Function;
         linkHref: string;
         linkTarget: string;
         linkText: string;
     }, {}, {
-        UnnnicIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-            filled: {
-                type: BooleanConstructor;
-            };
-            next: {
-                type: BooleanConstructor;
-            };
-            icon: {
-                type: StringConstructor;
-                default: null;
-            };
-            clickable: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            size: {
-                type: StringConstructor;
-                default: string;
-                validator(value: unknown): boolean;
-            };
-            lineHeight: {
-                type: StringConstructor;
-                default: null;
-                validator(value: unknown): boolean;
-            };
-            scheme: {
-                type: StringConstructor;
-                default: string;
-            };
-        }>, {}, {}, {
-            svg(): any;
-            materialSymbolsName(): any;
-        }, {
-            onClick($event: any): void;
-        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "mousedown" | "mouseup")[], "click" | "mousedown" | "mouseup", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-            filled: {
-                type: BooleanConstructor;
-            };
-            next: {
-                type: BooleanConstructor;
-            };
-            icon: {
-                type: StringConstructor;
-                default: null;
-            };
-            clickable: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            size: {
-                type: StringConstructor;
-                default: string;
-                validator(value: unknown): boolean;
-            };
-            lineHeight: {
-                type: StringConstructor;
-                default: null;
-                validator(value: unknown): boolean;
-            };
-            scheme: {
-                type: StringConstructor;
-                default: string;
-            };
-        }>> & Readonly<{
-            onClick?: ((...args: any[]) => any) | undefined;
-            onMousedown?: ((...args: any[]) => any) | undefined;
-            onMouseup?: ((...args: any[]) => any) | undefined;
+        UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (event: Event) => any;
+            mousedown: (event: Event) => any;
+            mouseup: (event: Event) => any;
+        }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
+            onClick?: ((event: Event) => any) | undefined;
+            onMousedown?: ((event: Event) => any) | undefined;
+            onMouseup?: ((event: Event) => any) | undefined;
         }>, {
             filled: boolean;
             next: boolean;
-            icon: string;
+            icon: string | null;
             clickable: boolean;
-            size: string;
-            lineHeight: string;
-            scheme: string;
-        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+            size: import('../Icon.vue').IconSize;
+            lineHeight: import('../Icon.vue').LineHeight | null;
+            scheme: import('../Icon.vue').SchemeColor;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/Alert/Version1dot1.vue.d.ts

@@ -70,90 +70,31 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     text: string;
-    type: string;
     scheme: string;
+    type: string;
     version: string;
     onClose: Function;
     linkHref: string;
     linkTarget: string;
     linkText: string;
 }, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {}, {}, {
-        svg(): any;
-        materialSymbolsName(): any;
-    }, {
-        onClick($event: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "mousedown" | "mouseup")[], "click" | "mousedown" | "mouseup", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onClick?: ((...args: any[]) => any) | undefined;
-        onMousedown?: ((...args: any[]) => any) | undefined;
-        onMouseup?: ((...args: any[]) => any) | undefined;
+    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: Event) => any;
+        mousedown: (event: Event) => any;
+        mouseup: (event: Event) => any;
+    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
+        onClick?: ((event: Event) => any) | undefined;
+        onMousedown?: ((event: Event) => any) | undefined;
+        onMouseup?: ((event: Event) => any) | undefined;
     }>, {
         filled: boolean;
         next: boolean;
-        icon: string;
+        icon: string | null;
         clickable: boolean;
-        size: string;
-        lineHeight: string;
-        scheme: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        size: import('../Icon.vue').IconSize;
+        lineHeight: import('../Icon.vue').LineHeight | null;
+        scheme: import('../Icon.vue').SchemeColor;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=Version1dot1.vue.d.ts.map

package/dist/components/AudioRecorder/AudioHandler.vue.d.ts

@@ -24,82 +24,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     time: string;
     isRecording: boolean;
 }, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {}, {}, {
-        svg(): any;
-        materialSymbolsName(): any;
-    }, {
-        onClick($event: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "mousedown" | "mouseup")[], "click" | "mousedown" | "mouseup", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onClick?: ((...args: any[]) => any) | undefined;
-        onMousedown?: ((...args: any[]) => any) | undefined;
-        onMouseup?: ((...args: any[]) => any) | undefined;
+    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: Event) => any;
+        mousedown: (event: Event) => any;
+        mouseup: (event: Event) => any;
+    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
+        onClick?: ((event: Event) => any) | undefined;
+        onMousedown?: ((event: Event) => any) | undefined;
+        onMouseup?: ((event: Event) => any) | undefined;
     }>, {
         filled: boolean;
         next: boolean;
-        icon: string;
+        icon: string | null;
         clickable: boolean;
-        size: string;
-        lineHeight: string;
-        scheme: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        size: import('../Icon.vue').IconSize;
+        lineHeight: import('../Icon.vue').LineHeight | null;
+        scheme: import('../Icon.vue').SchemeColor;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
     UnnnicToolTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         text: {
             type: StringConstructor;

package/dist/components/AudioRecorder/AudioPlayer.vue.d.ts

@@ -75,82 +75,23 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     isPlaying: boolean;
     progressBarPercentualValue: number;
 }, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {}, {}, {
-        svg(): any;
-        materialSymbolsName(): any;
-    }, {
-        onClick($event: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "mousedown" | "mouseup")[], "click" | "mousedown" | "mouseup", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        filled: {
-            type: BooleanConstructor;
-        };
-        next: {
-            type: BooleanConstructor;
-        };
-        icon: {
-            type: StringConstructor;
-            default: null;
-        };
-        clickable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        lineHeight: {
-            type: StringConstructor;
-            default: null;
-            validator(value: unknown): boolean;
-        };
-        scheme: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onClick?: ((...args: any[]) => any) | undefined;
-        onMousedown?: ((...args: any[]) => any) | undefined;
-        onMouseup?: ((...args: any[]) => any) | undefined;
+    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: Event) => any;
+        mousedown: (event: Event) => any;
+        mouseup: (event: Event) => any;
+    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
+        onClick?: ((event: Event) => any) | undefined;
+        onMousedown?: ((event: Event) => any) | undefined;
+        onMouseup?: ((event: Event) => any) | undefined;
     }>, {
         filled: boolean;
         next: boolean;
-        icon: string;
+        icon: string | null;
         clickable: boolean;
-        size: string;
-        lineHeight: string;
-        scheme: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        size: import('../Icon.vue').IconSize;
+        lineHeight: import('../Icon.vue').LineHeight | null;
+        scheme: import('../Icon.vue').SchemeColor;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=AudioPlayer.vue.d.ts.map