@datametria/vue-components 2.1.0 → 2.1.1

package/dist/src/composables/useRipple.d.ts

@@ -0,0 +1,49 @@
+interface RippleOptions {
+    color?: string;
+    duration?: number;
+    disabled?: boolean;
+}
+interface RippleEffect {
+    x: number;
+    y: number;
+    size: number;
+    id: string;
+}
+/**
+ * Composable para efeito ripple em elementos clicáveis
+ * Implementa Material Design ripple effect com acessibilidade
+ */
+export declare function useRipple(options?: RippleOptions): {
+    rippleRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    ripples: import('vue').Ref<{
+        x: number;
+        y: number;
+        size: number;
+        id: string;
+    }[], RippleEffect[] | {
+        x: number;
+        y: number;
+        size: number;
+        id: string;
+    }[]>;
+    applyRipple: (element: HTMLElement) => (() => void) | undefined;
+    removeRipple: (id: string) => void;
+    clearRipples: () => void;
+    getRippleStyle: (ripple: RippleEffect) => {
+        position: "absolute";
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        borderRadius: string;
+        backgroundColor: string;
+        transform: string;
+        animation: string;
+        pointerEvents: "none";
+        zIndex: number;
+    };
+    createRipple: (event: MouseEvent | TouchEvent) => void;
+    addRippleEffect: () => (() => void) | undefined;
+    removeRippleEffect: () => void;
+};
+export {};

package/dist/src/composables/useTheme.d.ts

@@ -0,0 +1,10 @@
+export declare function resetTheme(): void;
+export declare function useTheme(): {
+    isDark: import('vue').Ref<boolean, boolean>;
+    currentTheme: import('vue').ComputedRef<"dark" | "light">;
+    toggle: () => void;
+    setTheme: (theme: "light" | "dark") => void;
+    setDark: () => void;
+    setLight: () => void;
+    initTheme: () => void;
+};

package/dist/src/composables/useValidation.d.ts

@@ -0,0 +1,14 @@
+export declare const required: (value: any) => boolean;
+export declare const email: (value: any) => boolean;
+export declare const minLength: (min: number) => (value: any) => boolean;
+export declare const maxLength: (max: number) => (value: any) => boolean;
+export declare const pattern: (regex: RegExp) => (value: any) => boolean;
+export declare const custom: (validator: (value: any) => boolean) => (value: any) => boolean;
+export declare function useValidation(): {
+    required: (value: any) => boolean;
+    email: (value: any) => boolean;
+    minLength: (min: number) => (value: any) => boolean;
+    maxLength: (max: number) => (value: any) => boolean;
+    pattern: (regex: RegExp) => (value: any) => boolean;
+    custom: (validator: (value: any) => boolean) => (value: any) => boolean;
+};

package/dist/src/index.d.ts

@@ -0,0 +1,53 @@
+export { default as DatametriaButton } from './components/DatametriaButton.vue';
+export { default as DatametriaInput } from './components/DatametriaInput.vue';
+export { default as DatametriaPasswordInput } from './components/DatametriaPasswordInput.vue';
+export { default as DatametriaSelect } from './components/DatametriaSelect.vue';
+export { default as DatametriaCheckbox } from './components/DatametriaCheckbox.vue';
+export { default as DatametriaRadio } from './components/DatametriaRadio.vue';
+export { default as DatametriaSwitch } from './components/DatametriaSwitch.vue';
+export { default as DatametriaTextarea } from './components/DatametriaTextarea.vue';
+export { default as DatametriaDatePicker } from './components/DatametriaDatePicker.vue';
+export { default as DatametriaTimePicker } from './components/DatametriaTimePicker.vue';
+export { default as DatametriaSlider } from './components/DatametriaSlider.vue';
+export { default as DatametriaFileUpload } from './components/DatametriaFileUpload.vue';
+export { default as DatametriaAutocomplete } from './components/DatametriaAutocomplete.vue';
+export { default as DatametriaCard } from './components/DatametriaCard.vue';
+export { default as DatametriaModal } from './components/DatametriaModal.vue';
+export { default as DatametriaContainer } from './components/DatametriaContainer.vue';
+export { default as DatametriaGrid } from './components/DatametriaGrid.vue';
+export { default as DatametriaDivider } from './components/DatametriaDivider.vue';
+export { default as DatametriaAlert } from './components/DatametriaAlert.vue';
+export { default as DatametriaToast } from './components/DatametriaToast.vue';
+export { default as DatametriaTooltip } from './components/DatametriaTooltip.vue';
+export { default as DatametriaSkeleton } from './components/DatametriaSkeleton.vue';
+export { default as DatametriaProgress } from './components/DatametriaProgress.vue';
+export { default as DatametriaSpinner } from './components/DatametriaSpinner.vue';
+export { default as DatametriaTable } from './components/DatametriaTable.vue';
+export { default as DatametriaSortableTable } from './components/DatametriaSortableTable.vue';
+export { default as DatametriaAvatar } from './components/DatametriaAvatar.vue';
+export { default as DatametriaBadge } from './components/DatametriaBadge.vue';
+export { default as DatametriaChip } from './components/DatametriaChip.vue';
+export { default as DatametriaNavbar } from './components/DatametriaNavbar.vue';
+export { default as DatametriaSidebar } from './components/DatametriaSidebar.vue';
+export { default as DatametriaFloatingBar } from './components/DatametriaFloatingBar.vue';
+export { default as DatametriaMenu } from './components/DatametriaMenu.vue';
+export { default as DatametriaBreadcrumb } from './components/DatametriaBreadcrumb.vue';
+export { default as DatametriaTabs } from './components/DatametriaTabs.vue';
+export { useValidation, required, email, minLength, maxLength, pattern, custom } from './composables/useValidation';
+export { useAPI } from './composables/useAPI';
+export { useAccessibilityScale } from './composables/useAccessibilityScale';
+export { useBreakpoints } from './composables/useBreakpoints';
+export { useRipple } from './composables/useRipple';
+export { useHapticFeedback } from './composables/useHapticFeedback';
+export { useLocalStorage } from './composables/useLocalStorage';
+export { useDebounce } from './composables/useDebounce';
+export { useClipboard } from './composables/useClipboard';
+export { default as ThemeProvider } from './theme/ThemeProvider.vue';
+export { useTheme } from './theme/useTheme';
+export { datametriaTheme, defaultTheme } from './theme/presets';
+export type { Theme, ThemeTokens } from './theme/types';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'sm' | 'md' | 'lg';

package/dist/src/theme/ThemeProvider.vue.d.ts

@@ -0,0 +1,24 @@
+import { Theme } from './types';
+interface Props {
+    theme: Theme;
+    prefix?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    prefix: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/theme/constants.d.ts

@@ -0,0 +1,5 @@
+import { InjectionKey, ComputedRef } from 'vue';
+import { Theme } from './types';
+export declare const THEME_INJECTION_KEY: InjectionKey<ComputedRef<Theme>>;
+export declare const DEFAULT_THEME_PREFIX = "dm";
+export declare const CSS_VARIABLE_PREFIX = "--";

package/dist/src/theme/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Theme System Exports
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+export { default as ThemeProvider } from './ThemeProvider.vue';
+export { useTheme } from './useTheme';
+export * from './types';
+export * from './constants';
+export * from './tokens';
+export * from './presets';

package/dist/src/theme/presets/datametria.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../types';
+export declare const datametriaTheme: Theme;

package/dist/src/theme/presets/default.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../types';
+export declare const defaultTheme: Theme;

package/dist/src/theme/presets/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Theme Presets Index
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+export { datametriaTheme } from './datametria';
+export { defaultTheme } from './default';

package/dist/src/theme/tokens/colors.d.ts

@@ -0,0 +1,2 @@
+import { ColorTokens } from '../types';
+export declare const defaultColors: ColorTokens;

package/dist/src/theme/tokens/index.d.ts

@@ -0,0 +1,8 @@
+import { ThemeTokens, RadiusTokens, ShadowTokens, TransitionTokens } from '../types';
+export declare const defaultRadius: RadiusTokens;
+export declare const defaultShadows: ShadowTokens;
+export declare const defaultTransitions: TransitionTokens;
+export declare const defaultTokens: ThemeTokens;
+export * from './colors';
+export * from './typography';
+export * from './spacing';

package/dist/src/theme/tokens/spacing.d.ts

@@ -0,0 +1,2 @@
+import { SpacingTokens } from '../types';
+export declare const defaultSpacing: SpacingTokens;

package/dist/src/theme/tokens/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyTokens } from '../types';
+export declare const defaultTypography: TypographyTokens;

package/dist/src/theme/types.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Theme System Types
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+export interface ColorTokens {
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    neutral: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+}
+export interface TypographyTokens {
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+}
+export interface SpacingTokens {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+}
+export interface RadiusTokens {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+export interface ShadowTokens {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+export interface TransitionTokens {
+    fast: string;
+    base: string;
+    slow: string;
+}
+export interface ThemeTokens {
+    colors: ColorTokens;
+    typography: TypographyTokens;
+    spacing: SpacingTokens;
+    radius: RadiusTokens;
+    shadows: ShadowTokens;
+    transitions: TransitionTokens;
+}
+export interface Theme {
+    name: string;
+    tokens: ThemeTokens;
+}
+export interface ThemeConfig {
+    theme: Theme;
+    prefix?: string;
+}

package/dist/src/theme/useTheme.d.ts

@@ -0,0 +1,8 @@
+import { ComputedRef } from 'vue';
+import { Theme } from './types';
+/**
+ * Access the current theme from ThemeProvider
+ * @throws Error if used outside ThemeProvider
+ * @returns Current theme object (reactive)
+ */
+export declare function useTheme(): ComputedRef<Theme>;

package/dist/src/types/index.d.ts

@@ -0,0 +1,47 @@
+export declare enum ButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    OUTLINE = "outline",
+    GHOST = "ghost"
+}
+export declare enum ButtonSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+export interface InputProps {
+    modelValue?: string | number;
+    label?: string;
+    placeholder?: string;
+    errorMessage?: string;
+    disabled?: boolean;
+    required?: boolean;
+}
+export interface CardProps {
+    title?: string;
+    padding?: boolean;
+}
+export interface TableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+}
+export interface SortableTableProps {
+    columns: TableColumn[];
+    data: Record<string, any>[];
+    selectable?: boolean;
+    searchable?: boolean;
+    filterable?: boolean;
+    paginated?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datametria/vue-components",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 32 components with theming support, WCAG 2.2 AA, dark mode, responsive system",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -12,7 +12,8 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/vue-components.css",
+    "./dist/vue-components.css": "./dist/vue-components.css"
   },
   "files": [
     "dist",
@@ -59,6 +60,7 @@
     "prettier": "^3.4.0",
     "typescript": "~5.7.0",
     "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^2.1.0",
     "vue-tsc": "^2.2.0"
   },