@weni/unnnic-system 3.3.2 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -54,10 +54,13 @@
     "@vueuse/components": "^10.4.1",
     "emoji-mart-vue-fast": "^15.0.5",
     "lodash": "^4.17.21",
+    "lucide-vue-next": "^0.546.0",
     "mime": "^4.0.1",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
+    "reka-ui": "^2.6.0",
     "remark-gfm": "^4.0.0",
+    "tw-animate-css": "^1.4.0",
     "vue": "^3.4.8",
     "vue-i18n": "9",
     "vue-the-mask": "^0.11.1"
@@ -84,16 +87,24 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@weni/eslint-config": "^2.0.0",
+    "ajv": "^8.17.1",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "eslint": "^9.37.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "10.4.0",
     "jsdom": "^24.1.1",
+    "postcss": "^8.5.6",
     "prettier": "3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.0",
     "storybook": "^8.0.10",
     "style-dictionary": "^5.0.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^3.4.18",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.2",
     "vite": "4.3.5",
     "vite-plugin-dts": "^4.5.4",
@@ -101,4 +112,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/scss/colors-hsl.scss

@@ -0,0 +1,119 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-color-white-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-black-hsl: 0 0% 0%; /* #000000 */
+$unnnic-color-gray-50-hsl: 220 20% 97%; /* #F6F7F9 */
+$unnnic-color-gray-100-hsl: 220 19% 94%; /* #ECEEF2 */
+$unnnic-color-gray-200-hsl: 224 15% 86%; /* #D6D9E1 */
+$unnnic-color-gray-300-hsl: 220 16% 74%; /* #B2B9C7 */
+$unnnic-color-gray-400-hsl: 219 16% 60%; /* #8893A8 */
+$unnnic-color-gray-500-hsl: 220 15% 47%; /* #67738B */
+$unnnic-color-gray-600-hsl: 222 16% 39%; /* #545E75 */
+$unnnic-color-gray-700-hsl: 222 16% 32%; /* #454D5F */
+$unnnic-color-gray-800-hsl: 224 16% 27%; /* #3B4151 */
+$unnnic-color-gray-900-hsl: 225 13% 24%; /* #353945 */
+$unnnic-color-gray-950-hsl: 224 14% 16%; /* #23262E */
+$unnnic-color-teal-50-hsl: 172 88% 97%; /* #EFFEFC */
+$unnnic-color-teal-100-hsl: 171 100% 89%; /* #C7FFF7 */
+$unnnic-color-teal-200-hsl: 171 100% 78%; /* #90FFEF */
+$unnnic-color-teal-300-hsl: 174 91% 64%; /* #51F7E7 */
+$unnnic-color-teal-400-hsl: 176 79% 50%; /* #1DE4D7 */
+$unnnic-color-teal-500-hsl: 177 96% 40%; /* #04C8BD */
+$unnnic-color-teal-600-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-teal-700-hsl: 179 92% 26%; /* #05807D */
+$unnnic-color-teal-800-hsl: 179 82% 22%; /* #0A6564 */
+$unnnic-color-teal-900-hsl: 179 73% 19%; /* #0D5453 */
+$unnnic-color-teal-950-hsl: 182 100% 10%; /* #003133 */
+$unnnic-color-green-50-hsl: 140 43% 96%; /* #F0F9F3 */
+$unnnic-color-green-100-hsl: 136 45% 90%; /* #DAF1E0 */
+$unnnic-color-green-200-hsl: 140 44% 80%; /* #B7E3C6 */
+$unnnic-color-green-300-hsl: 144 41% 67%; /* #88CDA4 */
+$unnnic-color-green-400-hsl: 146 37% 52%; /* #56B17E */
+$unnnic-color-green-500-hsl: 148 48% 43%; /* #38A169 */
+$unnnic-color-green-600-hsl: 149 54% 30%; /* #24774C */
+$unnnic-color-green-700-hsl: 151 53% 24%; /* #1D5F3F */
+$unnnic-color-green-800-hsl: 152 50% 20%; /* #194C34 */
+$unnnic-color-green-900-hsl: 153 50% 16%; /* #153F2C */
+$unnnic-color-green-950-hsl: 153 52% 9%; /* #0B2318 */
+$unnnic-color-blue-50-hsl: 213 73% 97%; /* #F2F7FD */
+$unnnic-color-blue-100-hsl: 213 63% 94%; /* #E5EEF9 */
+$unnnic-color-blue-200-hsl: 211 66% 86%; /* #C4DBF3 */
+$unnnic-color-blue-300-hsl: 210 67% 74%; /* #90BDE9 */
+$unnnic-color-blue-400-hsl: 209 65% 60%; /* #559BDB */
+$unnnic-color-blue-500-hsl: 209 62% 50%; /* #3182CE */
+$unnnic-color-blue-600-hsl: 211 68% 39%; /* #2062A9 */
+$unnnic-color-blue-700-hsl: 212 67% 32%; /* #1B4F89 */
+$unnnic-color-blue-800-hsl: 211 63% 27%; /* #1A4472 */
+$unnnic-color-blue-900-hsl: 213 56% 24%; /* #1B3A5F */
+$unnnic-color-blue-950-hsl: 215 56% 16%; /* #12253F */
+$unnnic-color-purple-50-hsl: 248 67% 98%; /* #F6F5FD */
+$unnnic-color-purple-100-hsl: 248 65% 95%; /* #EEECFB */
+$unnnic-color-purple-200-hsl: 246 67% 92%; /* #DFDCF8 */
+$unnnic-color-purple-300-hsl: 249 68% 85%; /* #C7BFF3 */
+$unnnic-color-purple-400-hsl: 251 65% 76%; /* #AA9BEA */
+$unnnic-color-purple-500-hsl: 255 64% 66%; /* #8D72E0 */
+$unnnic-color-purple-600-hsl: 259 59% 59%; /* #805AD5 */
+$unnnic-color-purple-700-hsl: 260 50% 50%; /* #6B41C0 */
+$unnnic-color-purple-800-hsl: 260 50% 42%; /* #5A36A1 */
+$unnnic-color-purple-900-hsl: 260 48% 35%; /* #4B2E84 */
+$unnnic-color-purple-950-hsl: 258 52% 23%; /* #2E1C59 */
+$unnnic-color-red-50-hsl: 0 71% 97%; /* #FDF3F3 */
+$unnnic-color-red-100-hsl: 0 87% 94%; /* #FDE3E3 */
+$unnnic-color-red-200-hsl: 0 89% 89%; /* #FCCCCC */
+$unnnic-color-red-300-hsl: 0 85% 82%; /* #F8A9A9 */
+$unnnic-color-red-400-hsl: 0 83% 71%; /* #F27777 */
+$unnnic-color-red-500-hsl: 0 76% 57%; /* #E53E3E */
+$unnnic-color-red-600-hsl: 0 65% 51%; /* #D32F2F */
+$unnnic-color-red-700-hsl: 0 67% 42%; /* #B22323 */
+$unnnic-color-red-800-hsl: 0 63% 35%; /* #932121 */
+$unnnic-color-red-900-hsl: 0 56% 31%; /* #7A2222 */
+$unnnic-color-red-950-hsl: 0 67% 15%; /* #420D0D */
+$unnnic-color-orange-50-hsl: 39 78% 96%; /* #FDF8EF */
+$unnnic-color-orange-100-hsl: 37 81% 92%; /* #FBEED9 */
+$unnnic-color-orange-200-hsl: 35 81% 83%; /* #F7DAB1 */
+$unnnic-color-orange-300-hsl: 34 80% 72%; /* #F1C080 */
+$unnnic-color-orange-400-hsl: 31 80% 61%; /* #EB9D4C */
+$unnnic-color-orange-500-hsl: 28 78% 53%; /* #E5812A */
+$unnnic-color-orange-600-hsl: 24 75% 50%; /* #DD6B20 */
+$unnnic-color-orange-700-hsl: 21 73% 40%; /* #B2501C */
+$unnnic-color-orange-800-hsl: 18 65% 34%; /* #8E401E */
+$unnnic-color-orange-900-hsl: 18 62% 28%; /* #73361B */
+$unnnic-color-orange-950-hsl: 17 68% 15%; /* #3E1A0C */
+$unnnic-color-yellow-50-hsl: 45 67% 95%; /* #FBF7EB */
+$unnnic-color-yellow-100-hsl: 48 67% 88%; /* #F5EDCC */
+$unnnic-color-yellow-200-hsl: 45 69% 77%; /* #EDD89B */
+$unnnic-color-yellow-300-hsl: 42 69% 64%; /* #E2BC62 */
+$unnnic-color-yellow-400-hsl: 40 67% 51%; /* #D69E2E */
+$unnnic-color-yellow-500-hsl: 38 65% 47%; /* #C88D2A */
+$unnnic-color-yellow-600-hsl: 33 67% 40%; /* #AC6E22 */
+$unnnic-color-yellow-700-hsl: 28 64% 33%; /* #8A501E */
+$unnnic-color-yellow-800-hsl: 24 56% 29%; /* #734120 */
+$unnnic-color-yellow-900-hsl: 21 51% 26%; /* #633720 */
+$unnnic-color-yellow-950-hsl: 17 58% 14%; /* #391B0F */
+$unnnic-color-bg-base-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-bg-soft-hsl: 220 20% 97%; /* #F6F7F9 */
+$unnnic-color-bg-muted-hsl: 220 19% 94%; /* #ECEEF2 */
+$unnnic-color-bg-active-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-bg-info-hsl: 213 73% 97%; /* #F2F7FD */
+$unnnic-color-bg-success-hsl: 140 43% 96%; /* #F0F9F3 */
+$unnnic-color-bg-warning-hsl: 45 67% 95%; /* #FBF7EB */
+$unnnic-color-bg-critical-hsl: 0 71% 97%; /* #FDF3F3 */
+$unnnic-color-fg-base-hsl: 220 15% 47%; /* #67738B */
+$unnnic-color-fg-muted-hsl: 220 16% 74%; /* #B2B9C7 */
+$unnnic-color-fg-emphasized-hsl: 225 13% 24%; /* #353945 */
+$unnnic-color-fg-inverted-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-fg-active-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-fg-info-hsl: 209 62% 50%; /* #3182CE */
+$unnnic-color-fg-success-hsl: 148 48% 43%; /* #38A169 */
+$unnnic-color-fg-warning-hsl: 38 65% 47%; /* #C88D2A */
+$unnnic-color-fg-critical-hsl: 0 76% 57%; /* #E53E3E */
+$unnnic-color-border-base-hsl: 224 15% 86%; /* #D6D9E1 */
+$unnnic-color-border-soft-hsl: 220 19% 94%; /* #ECEEF2 */
+$unnnic-color-border-muted-hsl: 224 15% 86%; /* #D6D9E1 */
+$unnnic-color-border-emphasized-hsl: 219 16% 60%; /* #8893A8 */
+$unnnic-color-border-active-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-border-info-hsl: 210 67% 74%; /* #90BDE9 */
+$unnnic-color-border-success-hsl: 144 41% 67%; /* #88CDA4 */
+$unnnic-color-border-warning-hsl: 42 69% 64%; /* #E2BC62 */
+$unnnic-color-border-critical-hsl: 0 85% 82%; /* #F8A9A9 */

package/src/assets/scss/colors.scss

@@ -95,8 +95,8 @@ $unnnic-color-bg-base: #FFFFFF;
 $unnnic-color-bg-soft: #F6F7F9;
 $unnnic-color-bg-muted: #ECEEF2;
 $unnnic-color-bg-active: #00A49F;
-$unnnic-color-bg-info: #E5EEF9;
-$unnnic-color-bg-success: #DAF1E0;
+$unnnic-color-bg-info: #F2F7FD;
+$unnnic-color-bg-success: #F0F9F3;
 $unnnic-color-bg-warning: #FBF7EB;
 $unnnic-color-bg-critical: #FDF3F3;
 $unnnic-color-fg-base: #67738B;

package/src/assets/scss/tailwind.scss

@@ -0,0 +1,96 @@
+@import './colors-hsl.scss';
+@import './radii.scss';
+@import './fonts.scss';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Background colors */
+    --background: #{$unnnic-color-bg-base-hsl};
+    --foreground: #{$unnnic-color-fg-emphasized-hsl};
+    
+    /* Card colors */
+    --card: #{$unnnic-color-bg-base-hsl};
+    --card-foreground: #{$unnnic-color-fg-emphasized-hsl};
+    
+    /* Popover colors */
+    --popover: #{$unnnic-color-bg-base-hsl};
+    --popover-foreground: #{$unnnic-color-fg-emphasized-hsl};
+    
+    /* Primary colors - Teal (marca Weni) */
+    --primary: #{$unnnic-color-teal-600-hsl};
+    --primary-foreground: #{$unnnic-color-fg-inverted-hsl};
+    
+    /* Secondary colors - Gray */
+    --secondary: #{$unnnic-color-gray-100-hsl};
+    --secondary-foreground: #{$unnnic-color-gray-900-hsl};
+    
+    /* Muted colors */
+    --muted: #{$unnnic-color-gray-100-hsl};
+    --muted-foreground: #{$unnnic-color-fg-base-hsl};
+    
+    /* Accent colors - Teal soft */
+    --accent: #{$unnnic-color-gray-50-hsl};
+    --accent-foreground: #{$unnnic-color-gray-900-hsl};
+    
+    /* Destructive colors - Red (critical) */
+    --destructive: #{$unnnic-color-red-500-hsl};
+    --destructive-foreground: #{$unnnic-color-white-hsl};
+    
+    /* Border colors */
+    --border: #{$unnnic-color-border-base-hsl};
+    --input: #{$unnnic-color-border-base-hsl};
+    
+    /* Ring color (focus) - Teal */
+    --ring: #{$unnnic-color-teal-600-hsl};
+    
+    /* Border radius */
+    --radius: #{$unnnic-radius-2};
+  }
+
+  .dark {
+    --background: #{$unnnic-color-gray-900-hsl};
+    --foreground: #{$unnnic-color-white-hsl};
+    
+    --card: #{$unnnic-color-gray-800-hsl};
+    --card-foreground: #{$unnnic-color-white-hsl};
+    
+    --popover: #{$unnnic-color-gray-800-hsl};
+    --popover-foreground: #{$unnnic-color-white-hsl};
+    
+    --primary: #{$unnnic-color-teal-400-hsl};
+    --primary-foreground: #{$unnnic-color-gray-900-hsl};
+    
+    --secondary: #{$unnnic-color-gray-700-hsl};
+    --secondary-foreground: #{$unnnic-color-white-hsl};
+    
+    --muted: #{$unnnic-color-gray-700-hsl};
+    --muted-foreground: #{$unnnic-color-gray-300-hsl};
+    
+    --accent: #{$unnnic-color-gray-700-hsl};
+    --accent-foreground: #{$unnnic-color-white-hsl};
+    
+    --destructive: #{$unnnic-color-red-600-hsl};
+    --destructive-foreground: #{$unnnic-color-white-hsl};
+    
+    --border: #{$unnnic-color-gray-700-hsl};
+    --input: #{$unnnic-color-gray-700-hsl};
+    
+    --ring: #{$unnnic-color-teal-400-hsl};
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  
+  body {
+    @apply bg-background text-foreground;
+    font-family: $unnnic-font-family;
+  }
+}
+

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import Unnnic from './index';
+import './assets/scss/tailwind.scss';
 
 const app = createApp(App);