@evixcard/evx-ui-kit 0.2.0 → 1.1.0

package/dist/index.d.ts

@@ -10,6 +10,15 @@ export * from './components/EvHeader';
 export * from './components/EvAccordion';
 export * from './components/BrandCard';
 export * from './components/EvBackground';
+export * from './components/EvBrandBackdrop';
+export * from './components/EvBadge';
+export * from './components/EvStatCard';
+export * from './components/EvSidebar';
+export * from './components/EvCurrencySelect';
+export * from './components/EvSegmentedControl';
+export * from './components/EvPeriodSelector';
+export * from './components/EvProgressBar';
+export * from './components/EvInsightBar';
 export * from './components/EvFooter';
 export * from './components/BadgeFilters';
 export * from './components/EvList';
@@ -20,9 +29,21 @@ export * from './components/PageHeader';
 export * from './components/EvSpinner';
 export * from './components/EvAlert';
 export * from './components/EvSelect';
+export * from './components/EvDropdown';
+export * from './components/EvPagination';
+export * from './components/EvFilterChip';
+export * from './components/EvTagInput';
+export * from './components/EvIconButton';
 export * from './components/EvConfirmDialog';
 export * from './components/EvGlassCard';
 export * from './components/EvAppBackground';
 export * from './components/EvCookieBanner';
 export * from './components/EvHowToStep';
+export * from './components/EvModal';
+export * from './components/EvDataTable';
+export * from './components/EvToast';
+export * from './components/EvStepper';
+export * from './components/EvCategoryLabel';
+export * from './components/EvCopyField';
+export * from './components/charts';
 export * from './icons';

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme.css

@@ -0,0 +1,352 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Brand */
+  --brand-black: #000000;
+  --brand-blue: #6888fb;
+  --brand-blue-hover: #4f6ef2;
+  --brand-blue-active: #3c55d8;
+  --brand-violet: #c447be;
+  --brand-violet-hover: #e56be0;
+  --brand-violet-active: #92328e;
+  --brand-pink: #f7a1f4;
+  --brand-yellow: #f6dd85;
+  --brand-yellow-hover: #eec95f;
+  --brand-green-warm: #b4d94a;
+  --brand-green-cold: #36dec1;
+  --brand-green-cold-hover: #1fc4aa;
+  --brand-green-cold-active: #159a88;
+  --brand-red: #ff5a45;
+  --brand-red-hover: #e64230;
+  --brand-red-active: #b93022;
+  --brand-pending: #d8aa35;
+
+  /* Semantic state colors (each with -bg / -text companions where used) */
+  --color-info: #6888fb;
+  --color-info-bg: #eef3ff;
+  --color-focus: #c447be;
+  --color-focus-ring: #fdcbfb;
+  --color-warning: #f6dd85;
+  --color-warning-bg: #fffbea;
+  --color-warning-text: #5b4211;
+  --color-pending: #d8aa35;
+  --color-pending-bg: #fff4c7;
+  --color-pending-text: #5b4211;
+  --color-success: #36dec1;
+  --color-success-bg: #ecfffa;
+  --color-growth: #b4d94a;
+  --color-growth-bg: #fafceb;
+  --color-error: #ff5a45;
+  --color-error-bg: #fff2ef;
+  --color-error-text: #7a1e16;
+  /* Trend pills (KPI deltas) */
+  --color-trend-up: #4f7a14;
+  --color-trend-up-bg: #e5f2b5;
+  --color-trend-down: #b93022;
+  --color-trend-down-bg: #ffe0d9;
+  /* Brand backdrop base (behind the gradient image) */
+  --color-backdrop: #ededef;
+  --color-disabled: #cfcfcf;
+  --color-disabled-bg: #f2f2f2;
+  --color-disabled-text: #828282;
+  --color-border: #e2e2e2;
+  --color-surface: #f2f2f2;
+  --color-muted: #707070;
+
+  /* Gray scale */
+  --gray-darkest: #5c505c;
+  --gray-dark: #a5a5a5;
+  --gray-medium: #dbdbdb;
+  --gray-light: #e7e7e7;
+  --gray-lightest: #f8f8f8;
+  --white: #ffffff;
+
+  /* Surfaces */
+  --background: #f2f2f2;
+  --foreground: var(--brand-black);
+  --card: #ffffff;
+  --card-foreground: var(--brand-black);
+  --popover: #ffffff;
+  --popover-foreground: var(--brand-black);
+
+  /* shadcn-style semantic mapping.
+   * secondary follows the live design component (violet); flip to brand-pink
+   * here if the designer confirms the palette doc instead. */
+  --primary: var(--brand-black);
+  --primary-foreground: #ffffff;
+  --accent-blue: var(--brand-blue);
+  --secondary: var(--brand-violet);
+  --secondary-foreground: #ffffff;
+  --muted: var(--gray-lightest);
+  --muted-foreground: var(--gray-darkest);
+  --accent: var(--brand-yellow);
+  --accent-foreground: var(--brand-black);
+  --destructive: var(--brand-red);
+  --destructive-foreground: #ffffff;
+  --success: var(--brand-green-cold);
+  --success-foreground: #ffffff;
+  --warning: var(--brand-yellow);
+  --warning-foreground: var(--brand-black);
+
+  --border: var(--color-border);
+  --input: transparent;
+  --input-background: var(--white);
+  --input-border: var(--gray-light);
+  --switch-background: var(--gray-medium);
+  --ring: var(--brand-blue);
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-size: 16px;
+
+  /* Charts */
+  --chart-1: var(--brand-blue);
+  --chart-2: var(--brand-pink);
+  --chart-3: var(--brand-yellow);
+  --chart-4: var(--brand-violet);
+  --chart-5: var(--brand-green-cold);
+
+  /* Radius */
+  --radius: 0.5rem;
+  --radius-button: 4px;
+  --radius-form-sm: 4px;
+  --radius-form-md: 8px;
+  --radius-form-lg: 12px;
+  --radius-form-xl: 16px;
+
+  /* Sidebar */
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--brand-black);
+  --sidebar-primary: var(--brand-blue);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(255, 255, 255, 0.5);
+  --sidebar-accent-foreground: var(--gray-darkest);
+  --sidebar-border: var(--gray-light);
+  --sidebar-ring: var(--brand-blue);
+
+  /* Brand gradient */
+  --brand-gradient: linear-gradient(135deg, #f6dd85 0%, #f7a1f4 46%, #6888fb 100%);
+  /* Soft control gradient used by toggles/tabs (white → pink → light blue) */
+  --gradient-control: linear-gradient(83.73deg, #ffffff -45.99%, #f4ceff 115.78%, #84c7fe 169.71%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent-blue: var(--accent-blue);
+  /* Muted TEXT color per design (#707070). NB: `--muted` (shadcn bg token) is
+     gray-lightest (#f8f8f8) — using it for text-muted rendered near-white,
+     illegible text. text-muted must be the readable design grey. */
+  --color-muted: #707070;
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--color-info);
+  --color-info-bg: var(--color-info-bg);
+  --color-success-bg: var(--color-success-bg);
+  --color-warning-bg: var(--color-warning-bg);
+  --color-warning-text: var(--color-warning-text);
+  --color-error: var(--color-error);
+  --color-error-bg: var(--color-error-bg);
+  --color-error-text: var(--color-error-text);
+  --color-pending: var(--color-pending);
+  --color-pending-bg: var(--color-pending-bg);
+  --color-pending-text: var(--color-pending-text);
+  --color-focus: var(--color-focus);
+  --color-focus-ring: var(--color-focus-ring);
+  --color-growth: var(--color-growth);
+  --color-growth-bg: var(--color-growth-bg);
+  --color-trend-up: var(--color-trend-up);
+  --color-trend-up-bg: var(--color-trend-up-bg);
+  --color-trend-down: var(--color-trend-down);
+  --color-trend-down-bg: var(--color-trend-down-bg);
+  --color-backdrop: var(--color-backdrop);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-input-border: var(--input-border);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-surface: var(--color-surface);
+  --color-muted-strong: var(--color-muted);
+  --color-disabled: var(--color-disabled);
+  --color-disabled-bg: var(--color-disabled-bg);
+  --color-disabled-text: var(--color-disabled-text);
+  --color-brand-black: var(--brand-black);
+  --color-brand-blue: var(--brand-blue);
+  --color-brand-blue-hover: var(--brand-blue-hover);
+  --color-brand-blue-active: var(--brand-blue-active);
+  --color-brand-violet: var(--brand-violet);
+  --color-brand-violet-hover: var(--brand-violet-hover);
+  --color-brand-violet-active: var(--brand-violet-active);
+  --color-brand-pink: var(--brand-pink);
+  --color-brand-yellow: var(--brand-yellow);
+  --color-brand-yellow-hover: var(--brand-yellow-hover);
+  --color-brand-green-warm: var(--brand-green-warm);
+  --color-brand-green-cold: var(--brand-green-cold);
+  --color-brand-green-cold-hover: var(--brand-green-cold-hover);
+  --color-brand-green-cold-active: var(--brand-green-cold-active);
+  --color-brand-red: var(--brand-red);
+  --color-brand-red-hover: var(--brand-red-hover);
+  --color-brand-red-active: var(--brand-red-active);
+  --color-brand-pending: var(--brand-pending);
+  --color-gray-darkest: var(--gray-darkest);
+  --color-gray-dark: var(--gray-dark);
+  --color-gray-medium: var(--gray-medium);
+  --color-gray-light: var(--gray-light);
+  --color-gray-lightest: var(--gray-lightest);
+  --color-white: var(--white);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-button: var(--radius-button);
+  --radius-sm: var(--radius-form-sm);
+  --radius-md: var(--radius-form-md);
+  --radius-lg: var(--radius-form-lg);
+  --radius-xl: var(--radius-form-xl);
+  --font-sans: 'Rooftop', system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+@layer base {
+  html,
+  body,
+  button,
+  input,
+  select,
+  textarea {
+    font-family: var(--font-sans);
+  }
+
+  h1 {
+    font-size: 48px;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  h2 {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  h3 {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  h4 {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  label,
+  button {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+  input,
+  p {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}
+
+/* Display / typography utilities */
+.text-display-72 {
+  font-size: 72px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+.text-display-60 {
+  font-size: 60px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+.text-display-48 {
+  font-size: 48px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+.text-display-40 {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+.text-h-32 {
+  font-size: 32px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.text-h-28 {
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.text-lg-medium {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.text-lg-regular {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.2;
+}
+.text-md-medium {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.text-md-regular {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.2;
+}
+.text-sm-medium {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.text-sm-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+.text-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.text-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evixcard/evx-ui-kit",
-  "version": "0.2.0",
+  "version": "1.1.0",
   "private": false,
   "type": "module",
   "engines": {
@@ -13,6 +13,8 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "story:dev": "CHOKIDAR_USEPOLLING=true histoire dev",
     "story:build": "CHOKIDAR_USEPOLLING=true histoire build",
     "story:preview": "histoire preview",
@@ -33,7 +35,9 @@
       "types": "./dist/icons/index.d.ts",
       "import": "./dist/icons.es.js",
       "require": "./dist/icons.cjs.js"
-    }
+    },
+    "./theme.css": "./dist/theme.css",
+    "./dist/evx-ui-kit.css": "./dist/evx-ui-kit.css"
   },
   "files": [
     "dist"
@@ -43,6 +47,9 @@
   ],
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "motion-v": "^2.2.1",
     "tailwind-merge": "^3.4.0",
     "vue": "^3.5.25"
   },
@@ -52,24 +59,30 @@
   "devDependencies": {
     "@histoire/plugin-vue": "1.0.0-alpha.5",
     "@tailwindcss/vite": "^4.1.17",
-    "tailwindcss": "^4.1.17",
     "@tsconfig/node24": "^24.0.3",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/coverage-v8": "^3",
     "@vitest/eslint-plugin": "^1.5.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4",
     "@vue/tsconfig": "^0.8.1",
     "eslint": "^9.39.1",
     "eslint-plugin-vue": "~10.5.1",
     "histoire": "1.0.0-alpha.5",
     "jiti": "^2.6.1",
+    "jsdom": "^25",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
+    "tailwindcss": "^4.1.17",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^3",
     "vue-tsc": "^3.1.5"
   },
   "publishConfig": {