@weni/unnnic-system 3.10.0 → 3.11.0

package/CHANGELOG.md

@@ -5,6 +5,86 @@ 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.11.0 (2025-11-24)
+
+### Added
+
+- **Toast Component**: New inline notification system with ToastManager for programmatic toast display
+  - **Component**: Complete Toast component with multiple variants (success, info, warning, error)
+  - **Toast Manager**: Programmatic API for displaying toasts via `this.$unnnicCallToast()`
+  - **Storybook Documentation**: Complete documentation with interactive examples
+
+- **PageHeader Component**: New page header component for consistent page layouts
+  - **Flexible Layout**: Support for title, subtitle, and custom content slots
+  - **Slot Support**: Left and right content slots for custom elements
+
+- **Form Group Components**: New wrapper components for better form organization
+  - **CheckboxGroup**: Group multiple checkboxes with shared label and tooltip support
+  - **RadioGroup**: Group radio buttons with helper text and label styling
+
+- **Form Elements Enhancement**: Major improvements to all form components
+  - **Tooltip Support**: Added to Input, TextArea, Label, and Radio components
+  - **Helper Text**: Added to Radio and RadioGroup components
+  - **MaxLength Support**: Added to Input component with visual feedback
+  - **Disabled State**: Improved disabled state styling across all form elements
+
+- **New Icons**: Added dedicated SVG icons for form states
+  - `checkbox-checked.svg` and `checkbox-checked-disabled.svg`
+  - `checkbox-less.svg` and `checkbox-less-disabled.svg`
+  - `radio-checked.svg`
+  - `switch-checked.svg` and `switch-checked-disabled.svg`
+
+- **Icon Component**: New foreground color types added to color scheme
+
+### Changed
+
+- **Form Elements Redesign**: Complete visual and structural redesign of form components
+  - **Button**: Updated to use new design tokens, removed 'alternative' type, added transition effects
+  - **Checkbox**: Redesigned with improved styling, restored intermediate state, new disabled state handling, also removed size prop
+  - **Radio**: Complete redesign with improved structure and styling, also removed size prop
+  - **Switch**: Redesigned with updated icons and improved component styles
+  - **Input**: Enhanced with computed error handling, improved layout, dynamic styling based on size
+  - **TextArea**: Restructured with improved error handling and message display
+  - **Label**: Refactored with tooltip support and improved structure
+
+- **FormElement Component**: Major refactoring for better structure and maintainability
+  - **Label Integration**: Now uses UnnnicLabel component for improved consistency
+  - **Error Handling**: Updated to allow null type for TextArea errors
+  - **Improved Layout**: Restructured for better clarity and usability
+  - **Spacing Updates**: Enhanced spacing for improved visual hierarchy
+
+- **Tag Component**: Restructured and simplified
+  - **Default Variation**: Consolidated to contain only default variation
+  - **Improved Styling**: Enhanced with fit-content width and text overflow handling
+  - **Type Safety**: Added comprehensive prop type definitions
+
+- **Alert Component**: Simplified architecture
+  - **Toast Integration**: Integrated with new UnnnicToast component
+  - **Removed Deprecated**: Removed version variation 1.0 and AlertBanner and AlertCaller components
+  - **Streamlined version 1.1**: Removed link (linkHref prop) variation
+  - **Updated Tests**: Reflected version changes and removed deprecated props
+
+- **Tab Component**: Enhanced functionality
+  - **Disabled State**: Added support for disabled tabs
+  - **Dynamic Tooltip**: Tooltip icon size now adjusts based on tab size
+
+- **SelectSmart Component**: Improved consistency
+  - **Border Styling**: Updated border radius and border styling
+  - **Layout Adjustments**: Improved margin properties for better layout
+
+- **ChatsContact Component**: Changed to have its own tag instead of using UnnnicTag
+
+### Fixed
+
+- **Input Component**: Added transition effect for smoother border color change on focus
+- **Icon Component**: Fixed cursor styling for better UX
+
+### Refactored
+
+- **Button Component**: Replaced 'next' prop with 'clickable' for icon buttons, standardized text across stories
+- **Input Component**: Replaced label section with UnnnicLabel component for improved structure
+- **Label Component**: Renamed Props interface to LabelProps for clarity
+
 # 3.10.0 (2025-11-24)
 
 ### Added

package/dist/assets/tokens/colors.json.d.ts

@@ -0,0 +1,376 @@
+declare const _default: {
+  "color": {
+    "white": {
+      "value": "#FFFFFF"
+    },
+    "black": {
+      "value": "#000000"
+    },
+    "gray": {
+      "50": {
+        "value": "#F6F7F9"
+      },
+      "100": {
+        "value": "#ECEEF2"
+      },
+      "200": {
+        "value": "#D6D9E1"
+      },
+      "300": {
+        "value": "#B2B9C7"
+      },
+      "400": {
+        "value": "#8893A8"
+      },
+      "500": {
+        "value": "#67738B"
+      },
+      "600": {
+        "value": "#545E75"
+      },
+      "700": {
+        "value": "#454D5F"
+      },
+      "800": {
+        "value": "#3B4151"
+      },
+      "900": {
+        "value": "#353945"
+      },
+      "950": {
+        "value": "#23262E"
+      }
+    },
+    "teal": {
+      "50": {
+        "value": "#EFFEFC"
+      },
+      "100": {
+        "value": "#C7FFF7"
+      },
+      "200": {
+        "value": "#90FFEF"
+      },
+      "300": {
+        "value": "#51F7E7"
+      },
+      "400": {
+        "value": "#1DE4D7"
+      },
+      "500": {
+        "value": "#04C8BD"
+      },
+      "600": {
+        "value": "#00A49F"
+      },
+      "700": {
+        "value": "#05807D"
+      },
+      "800": {
+        "value": "#0A6564"
+      },
+      "900": {
+        "value": "#0D5453"
+      },
+      "950": {
+        "value": "#003133"
+      }
+    },
+      "green": {
+        "50": {
+          "value": "#F0F9F3"
+        },
+        "100": {
+          "value": "#DAF1E0"
+        },
+        "200": {
+          "value": "#B7E3C6"
+        },
+        "300": {
+          "value": "#88CDA4"
+        },
+        "400": {
+          "value": "#56B17E"
+        },
+        "500": {
+          "value": "#38A169"
+        },
+        "600": {
+          "value": "#24774C"
+        },
+        "700": {
+          "value": "#1D5F3F"
+        },
+        "800": {
+          "value": "#194C34"
+        },
+        "900": {
+          "value": "#153F2C"
+        },
+        "950": {
+          "value": "#0B2318"
+        }
+      },
+      "blue": {
+        "50": {
+          "value": "#F2F7FD"
+        },
+        "100": {
+          "value": "#E5EEF9"
+        },
+        "200": {
+          "value": "#C4DBF3"
+        },
+        "300": {
+          "value": "#90BDE9"
+        },
+        "400": {
+          "value": "#559BDB"
+        },
+        "500": {
+          "value": "#3182CE"
+        },
+        "600": {
+          "value": "#2062A9"
+        },
+        "700": {
+          "value": "#1B4F89"
+        },
+        "800": {
+          "value": "#1A4472"
+        },
+        "900": {
+          "value": "#1B3A5F"
+        },
+        "950": {
+          "value": "#12253F"
+        }
+      },
+      "purple": {
+        "50": {
+          "value": "#F6F5FD"
+        },
+        "100": {
+          "value": "#EEECFB"
+        },
+        "200": {
+          "value": "#DFDCF8"
+        },
+        "300": {
+          "value": "#C7BFF3"
+        },
+        "400": {
+          "value": "#AA9BEA"
+        },
+        "500": {
+          "value": "#8D72E0"
+        },
+        "600": {
+          "value": "#805AD5"
+        },
+        "700": {
+          "value": "#6B41C0"
+        },
+        "800": {
+          "value": "#5A36A1"
+        },
+        "900": {
+          "value": "#4B2E84"
+        },
+        "950": {
+          "value": "#2E1C59"
+        }
+      },
+      "red": {
+        "50": {
+          "value": "#FDF3F3"
+        },
+        "100": {
+          "value": "#FDE3E3"
+        },
+        "200": {
+          "value": "#FCCCCC"
+        },
+        "300": {
+          "value": "#F8A9A9"
+        },
+        "400": {
+          "value": "#F27777"
+        },
+        "500": {
+          "value": "#E53E3E"
+        },
+        "600": {
+          "value": "#D32F2F"
+        },
+        "700": {
+          "value": "#B22323"
+        },
+        "800": {
+          "value": "#932121"
+        },
+        "900": {
+          "value": "#7A2222"
+        },
+        "950": {
+          "value": "#420D0D"
+        }
+      },
+      "orange": {
+        "50": {
+          "value": "#FDF8EF"
+        },
+        "100": {
+          "value": "#FBEED9"
+        },
+        "200": {
+          "value": "#F7DAB1"
+        },
+        "300": {
+          "value": "#F1C080"
+        },
+        "400": {
+          "value": "#EB9D4C"
+        },
+        "500": {
+          "value": "#E5812A"
+        },
+        "600": {
+          "value": "#DD6B20"
+        },
+        "700": {
+          "value": "#B2501C"
+        },
+        "800": {
+          "value": "#8E401E"
+        },
+        "900": {
+          "value": "#73361B"
+        },
+        "950": {
+          "value": "#3E1A0C"
+        }
+      },
+      "yellow": {
+        "50": {
+          "value": "#FBF7EB"
+        },
+        "100": {
+          "value": "#F5EDCC"
+        },
+        "200": {
+          "value": "#EDD89B"
+        },
+        "300": {
+          "value": "#E2BC62"
+        },
+        "400": {
+          "value": "#D69E2E"
+        },
+        "500": {
+          "value": "#C88D2A"
+        },
+        "600": {
+          "value": "#AC6E22"
+        },
+        "700": {
+          "value": "#8A501E"
+        },
+        "800": {
+          "value": "#734120"
+        },
+        "900": {
+          "value": "#633720"
+        },
+        "950": {
+          "value": "#391B0F"
+        }
+      },
+    "bg": {
+      "base": {
+        "value": "{color.white}"
+      },
+      "soft": {
+        "value": "{color.gray.50}"
+      },
+      "muted": {
+        "value": "{color.gray.100}"
+      },
+      "active": {
+        "value": "{color.teal.600}"
+      },
+      "info": {
+        "value": "{color.blue.50}"
+      },
+      "success": {
+        "value": "{color.green.50}"
+      },
+      "warning": {
+        "value": "{color.yellow.50}"
+      },
+      "critical": {
+        "value": "{color.red.50}"
+      }
+    },
+    "fg": {
+      "base": {
+        "value": "{color.gray.500}"
+      },
+      "muted": {
+        "value": "{color.gray.300}"
+      },
+      "emphasized": {
+        "value": "{color.gray.900}"
+      },
+      "inverted": {
+        "value": "{color.white}"
+      },
+      "active": {
+        "value": "{color.teal.600}"
+      },
+      "info": {
+        "value": "{color.blue.500}"
+      },
+      "success": {
+        "value": "{color.green.500}"
+      },
+      "warning": {
+        "value": "{color.yellow.500}"
+      },
+      "critical": {
+        "value": "{color.red.500}"
+      }
+    },
+    "border": {
+      "base": {
+        "value": "{color.gray.200}"
+      },
+      "soft": {
+        "value": "{color.gray.100}"
+      },
+      "muted": {
+        "value": "{color.gray.200}"
+      },
+      "emphasized": {
+        "value": "{color.gray.400}"
+      },
+      "active": {
+        "value": "{color.teal.600}"
+      },
+      "info": {
+        "value": "{color.blue.300}"
+      },
+      "success": {
+        "value": "{color.green.300}"
+      },
+      "warning": {
+        "value": "{color.yellow.300}"
+      },
+      "critical": {
+        "value": "{color.red.300}"
+      }
+    }
+  }
+};
+
+export default _default;

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

@@ -29,10 +29,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onMousedown?: ((event: Event) => any) | undefined;
         onMouseup?: ((event: Event) => any) | undefined;
     }>, {
+        size: import('../Icon.vue').IconSize;
         filled: boolean;
         icon: string | null;
         clickable: boolean;
-        size: import('../Icon.vue').IconSize;
         scheme: import('../Icon.vue').SchemeColor;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -3,10 +3,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-    title: {
-        type: StringConstructor;
-        default: null;
-    };
     text: {
         type: StringConstructor;
         default: null;
@@ -15,47 +11,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: null;
     };
-    icon: {
-        type: StringConstructor;
-        default: null;
-    };
     onClose: {
         type: FunctionConstructor;
         default: () => void;
     };
-    closeText: {
-        type: StringConstructor;
-        default: string;
-    };
-    position: {
-        type: StringConstructor;
-        default: string;
-    };
-    linkHref: {
-        type: StringConstructor;
-        default: string;
-    };
-    linkTarget: {
-        type: StringConstructor;
-        default: string;
-    };
-    linkText: {
-        type: StringConstructor;
-        default: string;
-    };
     type: {
         type: StringConstructor;
         default: string;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {
+    toastType(): "error" | "attention" | "informational" | "success";
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     version: {
         type: StringConstructor;
         default: string;
     };
-    title: {
-        type: StringConstructor;
-        default: null;
-    };
     text: {
         type: StringConstructor;
         default: null;
@@ -64,72 +34,35 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: null;
     };
-    icon: {
-        type: StringConstructor;
-        default: null;
-    };
     onClose: {
         type: FunctionConstructor;
         default: () => void;
     };
-    closeText: {
-        type: StringConstructor;
-        default: string;
-    };
-    position: {
-        type: StringConstructor;
-        default: string;
-    };
-    linkHref: {
-        type: StringConstructor;
-        default: string;
-    };
-    linkTarget: {
-        type: StringConstructor;
-        default: string;
-    };
-    linkText: {
-        type: StringConstructor;
-        default: string;
-    };
     type: {
         type: StringConstructor;
         default: string;
     };
 }>> & Readonly<{}>, {
-    title: string;
     text: string;
-    icon: string;
-    scheme: string;
     type: string;
-    position: string;
+    scheme: string;
     onClose: Function;
     version: string;
-    linkHref: string;
-    linkTarget: string;
-    linkText: string;
-    closeText: string;
 }, {}, {
-    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;
+    UnnnicToast: import('vue').DefineComponent<import('../Toast/types').ToastProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        close: () => any;
+        destroy: () => any;
+    }, string, import('vue').PublicProps, Readonly<import('../Toast/types').ToastProps> & Readonly<{
+        onClose?: (() => any) | undefined;
+        onDestroy?: (() => any) | undefined;
     }>, {
-        filled: boolean;
-        icon: string | null;
-        clickable: boolean;
-        size: import('../Icon.vue').IconSize;
-        scheme: import('../Icon.vue').SchemeColor;
+        type: import('../Toast/types').ToastType;
+        description: string;
+        button: import('../Toast/types').ToastButton;
+        title: string;
+        timeout: number;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
     Version1dot1: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        version: {
-            type: StringConstructor;
-            default: string;
-        };
         text: {
             type: StringConstructor;
             default: null;
@@ -142,18 +75,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: FunctionConstructor;
             default: () => void;
         };
-        linkHref: {
-            type: StringConstructor;
-            default: string;
-        };
-        linkTarget: {
-            type: StringConstructor;
-            default: string;
-        };
-        linkText: {
-            type: StringConstructor;
-            default: string;
-        };
         type: {
             type: StringConstructor;
             default: string;
@@ -161,10 +82,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     }>, {}, {}, {}, {
         emitClose(): void;
     }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "close"[], "close", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        version: {
-            type: StringConstructor;
-            default: string;
-        };
         text: {
             type: StringConstructor;
             default: null;
@@ -177,18 +94,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: FunctionConstructor;
             default: () => void;
         };
-        linkHref: {
-            type: StringConstructor;
-            default: string;
-        };
-        linkTarget: {
-            type: StringConstructor;
-            default: string;
-        };
-        linkText: {
-            type: StringConstructor;
-            default: string;
-        };
         type: {
             type: StringConstructor;
             default: string;
@@ -197,13 +102,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onClose?: ((...args: any[]) => any) | undefined;
     }>, {
         text: string;
-        scheme: string;
         type: string;
+        scheme: string;
         onClose: Function;
-        version: string;
-        linkHref: string;
-        linkTarget: string;
-        linkText: string;
     }, {}, {
         UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             click: (event: Event) => any;
@@ -214,10 +115,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             onMousedown?: ((event: Event) => any) | undefined;
             onMouseup?: ((event: Event) => any) | undefined;
         }>, {
+            size: import('../Icon.vue').IconSize;
             filled: boolean;
             icon: string | null;
             clickable: boolean;
-            size: import('../Icon.vue').IconSize;
             scheme: import('../Icon.vue').SchemeColor;
         }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.vue"],"names":[],"mappings":"AA2CA;"}
+{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.vue"],"names":[],"mappings":"AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,wBA0CG"}