@weni/unnnic-system 3.10.0 → 3.11.0-alpha.2

package/CHANGELOG.md

@@ -5,6 +5,112 @@ 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.1 (2025-11-27)
+
+### Added
+
+- **DatePicker Component**:
+  - Added `periodBaseDate` prop to allow custom reference dates for predefined periods (e.g. `last-7-days`, `last-12-months`, `current-month`, `previous-month`), enabling use cases like "Last 7 days (up to 24h ago)".
+  - Added `data-testid` attributes to key interactive elements (root, navigation buttons, day/month/year cells, options, clear/apply buttons) to improve testability and coverage quality.
+  - Added new Storybook stories demonstrating multiple usage patterns:
+    - `SmallDayPicker` (type `day`, size `small`)
+    - `MonthView` (type `month`)
+    - `YearView` (type `year`)
+    - `WithMinAndMaxDateRange` (date range constrained by `minDate` and `maxDate`)
+    - `WithCustomLabelsAndDisableClear` (custom action/clear labels and `disableClear`)
+    - `CustomRelativePeriodsWithBaseDate` (custom relative filters backed by `periodBaseDate`).
+
+### Changed
+
+- **DatePicker Component**:
+  - Migrated implementation to `<script setup lang="ts">` with Vue 3 Composition API while preserving the existing public API (props, events, and behavior) for backward compatibility.
+  - Normalized internal date-handling logic to use typed helpers (`dateToString`, `stringToTime`, etc.) for safer arithmetic across day, month, and year views.
+
+### Fixed
+
+- **DatePicker Component**:
+  - Corrected month label rendering in `type="month"` view by aligning month indices with the localized `monthsLocale` array (fixes incorrect labels and potential indexing errors).
+
+# 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>;