@evixcard/evx-ui-kit 1.1.1 → 1.4.0

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export * from './components/EvSpinner';
 export * from './components/EvAlert';
 export * from './components/EvSelect';
 export * from './components/EvDropdown';
+export * from './components/EvComboboxSelect';
+export * from './components/EvDatePicker';
 export * from './components/EvPagination';
 export * from './components/EvFilterChip';
 export * from './components/EvTagInput';
@@ -45,5 +47,11 @@ export * from './components/EvToast';
 export * from './components/EvStepper';
 export * from './components/EvCategoryLabel';
 export * from './components/EvCopyField';
+export * from './components/EvIcon';
+export { EvTooltip } from './components/EvTooltip';
+export type { EvTooltipPosition } from './components/EvTooltip';
+export * from './components/EvMenu';
+export { EvMultiSelect } from './components/EvMultiSelect';
+export type { EvMultiSelectOption, EvMultiSelectValue } from './components/EvMultiSelect';
 export * from './components/charts';
 export * from './icons';

package/dist/theme.css

@@ -47,7 +47,8 @@
   /* Brand backdrop base (behind the gradient image) */
   --color-backdrop: #ededef;
   --color-disabled: #cfcfcf;
-  --color-disabled-bg: #f2f2f2;
+  /* Canon disabled surface (design v14 button spec). Admin used to override this. */
+  --color-disabled-bg: #e2e2e2;
   --color-disabled-text: #828282;
   --color-border: #e2e2e2;
   --color-surface: #f2f2f2;
@@ -101,10 +102,10 @@
 
   /* 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);
+  --chart-2: var(--brand-violet);
+  --chart-3: var(--brand-pink);
+  --chart-4: var(--brand-green-warm);
+  --chart-5: var(--brand-yellow);
 
   /* Radius */
   --radius: 0.5rem;
@@ -124,6 +125,14 @@
   --sidebar-border: var(--gray-light);
   --sidebar-ring: var(--brand-blue);
 
+  /* Button */
+  --button-primary: #343434;
+  --button-primary-hover: var(--brand-black);
+  --button-primary-active: #292929;
+  --button-secondary: #ffffff;
+  --button-secondary-hover: #E4E4E4;
+  --button-secondary-active: #F0F0F0;
+
   /* Brand gradient */
   --brand-gradient: linear-gradient(135deg, #f6dd85 0%, #f7a1f4 46%, #6888fb 100%);
   /* Soft control gradient used by toggles/tabs (white → pink → light blue) */
@@ -223,6 +232,12 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-button-primary: var(--button-primary);
+  --color-button-primary-hover: var(--button-primary-hover);
+  --color-button-primary-active: var(--button-primary-active);
+  --color-button-secondary: var(--button-secondary);
+  --color-button-secondary-hover: var(--button-secondary-hover);
+  --color-button-secondary-active: var(--button-secondary-active);
   --radius-button: var(--radius-button);
   --radius-sm: var(--radius-form-sm);
   --radius-md: var(--radius-form-md);
@@ -350,3 +365,154 @@
   font-weight: 400;
   line-height: 1.4;
 }
+.text-xxs-medium {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.text-xxs-regular {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* Uppercase label variants — eyebrows, table captions, section headers.
+   Tighter line-height (130%) + letter-spacing; small label sizes only. */
+.text-sm-uppercase-medium {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.text-sm-uppercase-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.text-xs-uppercase-medium {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.text-xs-uppercase-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.text-xxs-uppercase-medium {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.text-xxs-uppercase-regular {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/* Elevation — soft card / popover shadows (design v14). */
+.shadow-card {
+  box-shadow:
+    0 1px 0 rgba(15, 22, 41, 0.04),
+    0 4px 14px rgba(15, 22, 41, 0.04);
+}
+.shadow-popover {
+  box-shadow:
+    0 12px 36px rgba(15, 22, 41, 0.12),
+    0 2px 8px rgba(15, 22, 41, 0.06);
+}
+
+/* Thin scrollbar — for inline scroll regions like tables. */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: #00000030 transparent;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: #00000033;
+  border-radius: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: #00000066;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Entrance animations (design v14) — overlays, modals, drawers. */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes overlayIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes drawerInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes drawerInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.fade-in {
+  animation: fadeIn 0.18s ease-out;
+}
+.overlay-in {
+  animation: overlayIn 0.15s ease-out;
+}
+.modal-in {
+  animation: modalIn 0.18s ease-out;
+}
+.drawer-in-right {
+  animation: drawerInRight 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.drawer-in-left {
+  animation: drawerInLeft 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evixcard/evx-ui-kit",
-  "version": "1.1.1",
+  "version": "1.4.0",
   "private": false,
   "type": "module",
   "engines": {
@@ -49,6 +49,7 @@
     "@headlessui/vue": "^1.7.23",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "lucide-vue-next": "^0.487.0",
     "motion-v": "^2.2.1",
     "tailwind-merge": "^3.4.0",
     "vue": "^3.5.25"

package/dist/components/EvCopyField/icons.d.ts

@@ -1,32 +0,0 @@
-import { PropType } from 'vue';
-/**
- * Inline lucide-style icons used by EvCopyField. The kit has no lucide
- * dependency, so we render the same geometric children inside an <svg> shell
- * (matching the reference CopyField which used lucide `eye` / `eye-off` /
- * `copy` / `check`).
- */
-type IconName = 'eye' | 'eye-off' | 'copy' | 'check';
-export declare const EvCopyFieldIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    name: {
-        type: PropType<IconName>;
-        required: true;
-    };
-    size: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    name: {
-        type: PropType<IconName>;
-        required: true;
-    };
-    size: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    size: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export type { IconName };