@evixcard/evx-ui-kit 1.5.0 → 1.7.0

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

@@ -1,3 +1,4 @@
+import { EvFieldSize } from '../EvSelectBase/fieldSize';
 import { EvComboboxOption } from './types';
 type __VLS_Props = {
     options: EvComboboxOption[];
@@ -9,6 +10,8 @@ type __VLS_Props = {
     label?: string;
     /** Title rendered in the menu header. Omit to hide the header. */
     headerTitle?: string;
+    /** Trigger height — sm ≈40 / md ≈42 (default) / lg ≈56. */
+    size?: EvFieldSize;
     /** Show a "Clear" action in the menu header that resets the selection. */
     clearable?: boolean;
     /** Text shown when the search yields no matches. */
@@ -42,6 +45,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
 }>, {
+    size: EvFieldSize;
     disabled: boolean;
     placeholder: string;
     error: boolean;

package/dist/components/EvCurrencySelect/flags.d.ts

@@ -10,5 +10,14 @@ export declare const FlagEUR: Component;
 export declare const FlagUSD: Component;
 export declare const FlagGBP: Component;
 export declare const FlagJPY: Component;
+export declare const FlagMXN: Component;
+/**
+ * Neutral globe used for any currency without a dedicated flag illustration, so
+ * the toggle never renders an icon-less, ragged option. Grey (not national
+ * colours) — it reads as "other / international".
+ */
+export declare const FlagFallback: Component;
 /** Returns the flag component for a currency code, or undefined if unknown. */
 export declare function flagFor(code: string): Component | undefined;
+/** Always returns a renderable flag — the dedicated illustration or a neutral fallback. */
+export declare function currencyFlag(code: string): Component;

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

@@ -11,8 +11,18 @@ declare const _default: <T extends Record<string, unknown> = Record<string, unkn
     slots: Partial<Record<`cell-${string}`, (_: {
         row: T;
         value: unknown;
+    }) => any>> & Partial<Record<`cell-${string}`, (_: {
+        row: T;
+        value: unknown;
+    }) => any>> & Partial<Record<`cell-${string}`, (_: {
+        row: T;
+        value: unknown;
+    }) => any>> & Partial<Record<`cell-${string}`, (_: {
+        row: T;
+        value: unknown;
     }) => any>> & {
         empty?(_: {}): any;
+        empty?(_: {}): any;
     };
     emit: ((evt: "sort", field: string, direction: "desc" | "asc") => void) & ((evt: "update:page", page: number) => void) & ((evt: "row-click", row: T) => void) & ((evt: "update:selectedKeys", keys: (string | number)[]) => void);
 }>) => import('vue').VNode & {

package/dist/components/EvDataTable/types.d.ts

@@ -14,4 +14,19 @@ export interface EvDataTableProps<T extends Record<string, unknown> = Record<str
     selectable?: boolean;
     selectedKeys?: (string | number)[];
     rowKey?: string;
+    /**
+     * How the table renders on narrow (< lg) viewports.
+     * - 'auto' (default): show a Card/Table segmented toggle; default to cards.
+     * - 'cards': always cards under lg (no toggle).
+     * - 'table': keep the horizontally-scrolling table (legacy behaviour).
+     * Desktop (lg+) always renders the table.
+     */
+    mobileLayout?: 'auto' | 'cards' | 'table';
+    /** Column key used as the card title in card layout. Defaults to the first column. */
+    cardTitleKey?: string;
+    /**
+     * Accessible-name builder for the per-row selection checkbox (card + table).
+     * Defaults to `Select <rowKey value>`. The header select-all is always "Select all".
+     */
+    selectionLabel?: (row: T) => string;
 }

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

@@ -1,8 +1,11 @@
+import { EvFieldSize } from '../EvSelectBase/fieldSize';
 type __VLS_Props = {
     placeholder?: string;
     disabled?: boolean;
     error?: boolean;
     label?: string;
+    /** Trigger height — sm ≈40 / md ≈42 (default) / lg ≈56. */
+    size?: EvFieldSize;
     class?: string;
     /** Lower bound, inclusive — ISO 'YYYY-MM-DD'. */
     min?: string | null;
@@ -17,6 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
+    size: EvFieldSize;
     disabled: boolean;
     placeholder: string;
     error: boolean;

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

@@ -36,14 +36,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     input: (value: Event) => any;
     "update:modelValue": (value: string | number | null) => any;
     change: (value: Event) => any;
-    focus: (value: FocusEvent) => any;
     blur: (value: FocusEvent) => any;
+    focus: (value: FocusEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onInput?: ((value: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
     onChange?: ((value: Event) => any) | undefined;
-    onFocus?: ((value: FocusEvent) => any) | undefined;
     onBlur?: ((value: FocusEvent) => any) | undefined;
+    onFocus?: ((value: FocusEvent) => any) | undefined;
 }>, {
     size: EvInputSize;
     type: InputType;

package/dist/components/EvInput/styles.d.ts

@@ -1,6 +1,7 @@
 export declare const variants: {
-    md: string;
     sm: string;
+    md: string;
+    lg: string;
 };
-export declare const containerBaseClasses = "\n  w-full cursor-text\n  flex items-center\n  gap-4\n  bg-white text-black\n  border border-[#F1F1F1]\n  outline-none\n  transition-colors\n  focus-within:border-[#888A8D]\n";
-export declare const inputBaseClasses = "\n  flex-1\n  bg-transparent\n  border-0 outline-none\n  placeholder:text-[#8C8C8C]\n  !leading-[12px]\n  text-[14px]\n  disabled:cursor-not-allowed\n";
+export declare const containerBaseClasses = "\n  w-full cursor-text\n  flex items-center\n  gap-4\n  bg-white text-black\n  border border-[color:var(--ev-input-border,#F1F1F1)]\n  outline-none\n  transition-colors\n  focus-within:border-[color:var(--ev-input-focus,#888A8D)]\n";
+export declare const inputBaseClasses = "\n  flex-1\n  bg-transparent\n  border-0 outline-none\n  placeholder:text-[#8C8C8C]\n  text-[16px]\n  disabled:cursor-not-allowed\n";

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

@@ -23,11 +23,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    open: () => any;
     close: () => any;
+    open: () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onOpen?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {
     align: EvMenuAlign;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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

@@ -4,6 +4,14 @@ export interface EvModalProps {
     title: string;
     size?: EvModalSize;
     closable?: boolean;
+    /**
+     * Where to move focus when the modal opens.
+     * - 'first' (default): the first focusable element in the panel.
+     * - 'none': leave focus on the panel container (no autofocus of a control).
+     * - any other string: treated as a CSS selector queried within the panel
+     *   (e.g. '[data-autofocus]'); falls back to 'first' if nothing matches.
+     */
+    initialFocus?: 'first' | 'none' | string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -24,6 +32,7 @@ declare const __VLS_component: import('vue').DefineComponent<EvModalProps, {}, {
     onClose?: (() => any) | undefined;
 }>, {
     size: EvModalSize;
+    initialFocus: "first" | "none" | string;
     closable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;

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

@@ -1,3 +1,4 @@
+import { EvFieldSize } from '../EvSelectBase/fieldSize';
 import { EvMultiSelectOption, EvMultiSelectValue } from './types';
 type __VLS_Props = {
     options: EvMultiSelectOption[];
@@ -6,6 +7,8 @@ type __VLS_Props = {
     disabled?: boolean;
     error?: boolean;
     label?: string;
+    /** Control min-height — sm ≈40 / md ≈42 (default) / lg ≈56. Grows with chips. */
+    size?: EvFieldSize;
     class?: string;
 };
 type __VLS_PublicProps = {
@@ -16,11 +19,13 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: EvMultiSelectValue[]) => any) | undefined;
 }>, {
+    size: EvFieldSize;
     disabled: boolean;
     placeholder: string;
     error: boolean;
     searchable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     root: HTMLDivElement;
+    panelRef: HTMLDivElement;
 }, any>;
 export default _default;

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

@@ -42,8 +42,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
             readonly onInput?: ((value: Event) => any) | undefined;
             readonly "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
             readonly onChange?: ((value: Event) => any) | undefined;
-            readonly onFocus?: ((value: FocusEvent) => any) | undefined;
             readonly onBlur?: ((value: FocusEvent) => any) | undefined;
+            readonly onFocus?: ((value: FocusEvent) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
@@ -59,7 +59,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
         $root: import('vue').ComponentPublicInstance | null;
         $parent: import('vue').ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "input", value: Event) => void) & ((event: "update:modelValue", value: string | number | null) => void) & ((event: "change", value: Event) => void) & ((event: "focus", value: FocusEvent) => void) & ((event: "blur", value: FocusEvent) => void);
+        $emit: ((event: "input", value: Event) => void) & ((event: "update:modelValue", value: string | number | null) => void) & ((event: "change", value: Event) => void) & ((event: "blur", value: FocusEvent) => void) & ((event: "focus", value: FocusEvent) => void);
         $el: any;
         $options: import('vue').ComponentOptionsBase<Readonly<{
             modelValue?: string | number | null;
@@ -81,8 +81,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
             onInput?: ((value: Event) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
             onChange?: ((value: Event) => any) | undefined;
-            onFocus?: ((value: FocusEvent) => any) | undefined;
             onBlur?: ((value: FocusEvent) => any) | undefined;
+            onFocus?: ((value: FocusEvent) => any) | undefined;
         }>, {
             focus: () => void;
             blur: () => void | undefined;
@@ -91,8 +91,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
             input: (value: Event) => any;
             "update:modelValue": (value: string | number | null) => any;
             change: (value: Event) => any;
-            focus: (value: FocusEvent) => any;
             blur: (value: FocusEvent) => any;
+            focus: (value: FocusEvent) => any;
         }, string, {
             size: EvInputSize;
             type: import('../EvInput').InputType;
@@ -143,9 +143,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
         onInput?: ((value: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
         onChange?: ((value: Event) => any) | undefined;
-        onFocus?: ((value: FocusEvent) => any) | undefined;
         onBlur?: ((value: FocusEvent) => any) | undefined;
-    }>, "select" | "focus" | "blur" | ("size" | "type" | "disabled" | "required")> & import('vue').ShallowUnwrapRef<{
+        onFocus?: ((value: FocusEvent) => any) | undefined;
+    }>, "select" | "blur" | "focus" | ("size" | "type" | "disabled" | "required")> & import('vue').ShallowUnwrapRef<{
         focus: () => void;
         blur: () => void | undefined;
         select: () => void | undefined;

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

@@ -14,9 +14,12 @@ type __VLS_Props = {
     class?: string;
     selectClass?: string;
     /**
-     * Opt-in custom dropdown with a filterable text input. When `false`
-     * (default) the component renders the native `<select>` exactly as before.
+     * Escape hatch: render the platform-native `<select>` instead of the kit's
+     * custom dropdown. Default `false` — the custom styled dropdown is the default
+     * (its open list can be themed, unlike the OS-rendered native one).
      */
+    native?: boolean;
+    /** Show a filterable text input inside the custom dropdown. */
     searchable?: boolean;
     /** Placeholder for the filter input shown in `searchable` mode. */
     searchPlaceholder?: string;
@@ -26,17 +29,18 @@ type __VLS_Props = {
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | number | null) => any;
     change: (value: Event) => any;
-    focus: (value: FocusEvent) => any;
     blur: (value: FocusEvent) => any;
+    focus: (value: FocusEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
     onChange?: ((value: Event) => any) | undefined;
-    onFocus?: ((value: FocusEvent) => any) | undefined;
     onBlur?: ((value: FocusEvent) => any) | undefined;
+    onFocus?: ((value: FocusEvent) => any) | undefined;
 }>, {
     size: EvSelectSize;
     disabled: boolean;
     required: boolean;
+    native: boolean;
     searchable: boolean;
     searchPlaceholder: string;
     noResultsText: string;

package/dist/components/EvSelect/types.d.ts

@@ -1,4 +1,4 @@
-export type EvSelectSize = 'sm' | 'md';
+export type { EvFieldSize as EvSelectSize } from '../EvSelectBase/fieldSize';
 export interface EvSelectOption {
     value: string | number;
     label: string;

package/dist/components/EvSelectBase/fieldSize.d.ts

@@ -0,0 +1,5 @@
+export type EvFieldSize = 'sm' | 'md' | 'lg';
+/** Fixed-height triggers — single-line value (EvSelect, EvDatePicker). */
+export declare const FIELD_HEIGHT: Record<EvFieldSize, string>;
+/** Minimum-height controls that grow with content (EvMultiSelect, EvTagInput, EvComboboxSelect). */
+export declare const FIELD_MIN_HEIGHT: Record<EvFieldSize, string>;

package/dist/components/EvSelectBase/useSelectField.d.ts

@@ -0,0 +1,67 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+/**
+ * Shared dropdown engine for the kit's select family (EvSelect / EvMultiSelect /
+ * EvComboboxSelect). It owns the behaviour the three components used to duplicate:
+ * open/close, substring filtering, roving keyboard navigation, outside-click
+ * dismissal, focus management, scroll-active-into-view and value matching.
+ *
+ * Each component keeps its OWN template (chips / checkbox rows / title+meta rows,
+ * teleport vs inline panel) and just wires it to the state + handlers returned here.
+ *
+ * a11y baseline (DEV-604): roving Arrow navigation + Space/Enter selection + an
+ * `activeIndex` for aria-activedescendant are provided here, so EvSelect and
+ * EvMultiSelect gain the keyboard navigation they previously lacked (only
+ * EvComboboxSelect had it). The search semantics stay the kit's own substring
+ * `includes()` (or a per-component `filterPredicate`) — NOT headlessui's startsWith
+ * type-ahead — to preserve the multi-field (title+meta) search contract.
+ */
+export type SelectPrimitive = string | number;
+export interface UseSelectFieldConfig<T> {
+    /** Reactive source list of option objects. */
+    options: Ref<T[]>;
+    /** Stable primitive value of an option (used for selection + keys). */
+    getValue: (option: T) => SelectPrimitive;
+    /** Text matched against the query in searchable mode (e.g. label, or title+meta). */
+    getFilterText: (option: T) => string;
+    /** Custom match predicate; overrides getFilterText. Receives the lowercased query. */
+    filterPredicate?: (option: T, query: string) => boolean;
+    /** Whether an option is non-selectable. Defaults to never-disabled. */
+    isDisabled?: (option: T) => boolean;
+    /** Field-level disabled — blocks opening. */
+    disabled: Ref<boolean>;
+    /** Current selection for highlight/aria: a single value, an array, or null. */
+    selected: Ref<SelectPrimitive | SelectPrimitive[] | null | undefined>;
+    /** Called when a non-disabled option is chosen; the component updates its model. */
+    onPick: (option: T) => void;
+    /** Multi-select: selection toggles and the menu stays open. Default false. */
+    multiple?: boolean;
+    /** A filter input lives in the panel and drives `query`/`filtered`. Reactive; default false. */
+    searchable?: MaybeRefOrGetter<boolean>;
+    /** Close after a pick. Defaults to `!multiple` (single closes, multi stays open). */
+    closeOnSelect?: boolean;
+    /** Return focus to the trigger on close (EvSelect contract). Default false. */
+    returnFocusOnClose?: boolean;
+    /** Move focus into the panel search input on open. Defaults to `searchable`. */
+    focusSearchOnOpen?: boolean;
+    /** Value equality. Defaults to String()-coercion (matches EvSelect's behaviour). */
+    by?: (a: SelectPrimitive, b: SelectPrimitive) => boolean;
+}
+export declare function useSelectField<T>(cfg: UseSelectFieldConfig<T>): {
+    open: Ref<boolean, boolean>;
+    query: Ref<string, string>;
+    activeIndex: Ref<number, number>;
+    filtered: import('vue').ComputedRef<T[]>;
+    rootRef: Ref<HTMLElement | null, HTMLElement | null>;
+    triggerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    panelRef: Ref<HTMLElement | null, HTMLElement | null>;
+    searchRef: Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    isSelected: (option: T) => boolean;
+    optionDisabled: (o: T) => boolean;
+    openMenu: () => void;
+    closeMenu: (returnFocus?: boolean) => void;
+    toggle: () => void;
+    pick: (option: T) => void;
+    moveActive: (delta: number) => void;
+    onTriggerKeydown: (e: KeyboardEvent) => void;
+    onListKeydown: (e: KeyboardEvent) => void;
+};

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

@@ -15,6 +15,12 @@ export interface EvTabsProps {
     modelValue?: number;
     /** Initial active tab index when uncontrolled (no `modelValue`). Defaults to 0. */
     defaultTab?: number;
+    /**
+     * Pill variant only: render the default white plate (`bg-white p-3`) around the
+     * panel content. Off by default — most consumers fill the panel themselves and
+     * the extra backing reads as a stray box.
+     */
+    panelBacking?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -23,7 +29,9 @@ declare function __VLS_template(): {
     }) => any>> & Partial<Record<`tab-${number}`, (_: {
         tab: TabItem;
     }) => any>>;
-    refs: {};
+    refs: {
+        tabListRef: HTMLDivElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -35,7 +43,10 @@ declare const __VLS_component: import('vue').DefineComponent<EvTabsProps, {}, {}
     size: "sm" | "md" | "lg";
     variant: "pill" | "underline";
     defaultTab: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    panelBacking: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    tabListRef: HTMLDivElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,6 +1,9 @@
+import { EvFieldSize } from '../EvSelectBase/fieldSize';
 type __VLS_Props = {
     suggestions?: string[];
     placeholder?: string;
+    /** Box min-height — sm ≈40 / md ≈42 (default) / lg ≈56. Grows with chips. */
+    size?: EvFieldSize;
     class?: string;
 };
 type __VLS_PublicProps = {
@@ -13,6 +16,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
+    size: EvFieldSize;
     placeholder: string;
     suggestions: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;