@surgeui/ds-vue 2.0.0 → 2.2.0

package/dist/composables/index.d.ts

@@ -1,3 +1,6 @@
 import { useTheme } from './useTheme';
-export { useTheme, };
+import { useCustomTheme } from './useCustomTheme';
+import { useUniqueId } from './useUniqueId';
+import { useBreakpoint } from './useBreakpoint';
+export { useTheme, useCustomTheme, useUniqueId, useBreakpoint, };
 //# sourceMappingURL=index.d.ts.map

package/dist/composables/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EACL,QAAQ,GACT,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/composables/useBreakpoint.d.ts

@@ -0,0 +1,83 @@
+export type BreakpointKey = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface BreakpointConfig {
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+}
+export interface UseBreakpointOptions {
+    /** Surcharge des breakpoints par défaut */
+    breakpoints?: BreakpointConfig;
+}
+export interface BreakpointMatches {
+    sm: boolean;
+    md: boolean;
+    lg: boolean;
+    xl: boolean;
+    '2xl': boolean;
+}
+/**
+ * Composable pour la détection réactive des breakpoints.
+ *
+ * Utilise `window.matchMedia` pour une détection performante
+ * sans écouter l'événement `resize`. Compatible SSR (valeurs
+ * neutres côté serveur).
+ *
+ * @example
+ * ```ts
+ * const { current, isUp, isDown, isBetween, matches } = useBreakpoint()
+ *
+ * // Breakpoint actif
+ * current.value // 'md'
+ *
+ * // Vérifications
+ * isUp('md')    // true si largeur >= 768px
+ * isDown('lg')  // true si largeur < 1024px
+ * isBetween('sm', 'lg') // true si >= 640px et < 1024px
+ *
+ * // Objet réactif complet
+ * matches.value // { sm: true, md: true, lg: false, xl: false, '2xl': false }
+ * ```
+ */
+export declare function useBreakpoint(options?: UseBreakpointOptions): {
+    /** Breakpoint actif le plus large ('xs' si aucun) */
+    current: import('vue').ComputedRef<"xs" | BreakpointKey>;
+    /** Largeur du viewport en pixels (réactif) */
+    width: Readonly<import('vue').Ref<number, number>>;
+    /** Objet réactif { sm: bool, md: bool, lg: bool, xl: bool, '2xl': bool } */
+    matches: Readonly<import('vue').Ref<{
+        readonly sm: boolean;
+        readonly md: boolean;
+        readonly lg: boolean;
+        readonly xl: boolean;
+        readonly '2xl': boolean;
+    }, {
+        readonly sm: boolean;
+        readonly md: boolean;
+        readonly lg: boolean;
+        readonly xl: boolean;
+        readonly '2xl': boolean;
+    }>>;
+    /** true si largeur >= breakpoint */
+    isUp: (breakpoint: BreakpointKey) => boolean;
+    /** true si largeur < breakpoint */
+    isDown: (breakpoint: BreakpointKey) => boolean;
+    /** true si largeur >= min et < max */
+    isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean;
+    /** Configuration des breakpoints utilisée */
+    breakpoints: Readonly<import('vue').Ref<{
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly '2xl': number;
+    }, {
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly '2xl': number;
+    }>>;
+};
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/composables/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/composables/useBreakpoint.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,WAAW,CAAC,EAAE,gBAAgB,CAAA;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,OAAO,CAAA;IACX,EAAE,EAAE,OAAO,CAAA;IACX,EAAE,EAAE,OAAO,CAAA;IACX,EAAE,EAAE,OAAO,CAAA;IACX,KAAK,EAAE,OAAO,CAAA;CACf;AA2BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB;IAkJ5D,qDAAqD;;IAGrD,8CAA8C;;IAG9C,4EAA4E;;qBA/M1E,OAAO;qBACP,OAAO;qBACP,OAAO;qBACP,OAAO;wBACJ,OAAO;;qBAJV,OAAO;qBACP,OAAO;qBACP,OAAO;qBACP,OAAO;wBACJ,OAAO;;IA8MZ,oCAAoC;uBAhFZ,aAAa,KAAG,OAAO;IAmF/C,mCAAmC;yBA5ET,aAAa,KAAG,OAAO;IA+EjD,sCAAsC;qBAxEhB,aAAa,OAAO,aAAa,KAAG,OAAO;IA2EjE,6CAA6C;;qBAxO1C,MAAM;qBACN,MAAM;qBACN,MAAM;qBACN,MAAM;wBACH,MAAM;;qBAJT,MAAM;qBACN,MAAM;qBACN,MAAM;qBACN,MAAM;wBACH,MAAM;;EAuOf"}

package/dist/composables/useCustomTheme.d.ts

@@ -0,0 +1,65 @@
+import { SurgeuiTheme } from '../plugin/theme';
+/**
+ * Composable pour gérer les variables CSS custom du système de thème
+ *
+ * Permet de:
+ * - Appliquer des variables CSS custom au DOM
+ * - Définir des variables individuelles
+ * - Réinitialiser les variables
+ * - Fusionner avec des thèmes existants
+ */
+export declare function useCustomTheme(): {
+    customTheme: import('vue').ComputedRef<{
+        textPrimary?: string | undefined;
+        textSecondary?: string | undefined;
+        textTertiary?: string | undefined;
+        textDisabled?: string | undefined;
+        textInverse?: string | undefined;
+        linkDefault?: string | undefined;
+        linkHover?: string | undefined;
+        linkVisited?: string | undefined;
+        linkMuted?: string | undefined;
+        bgCanvas?: string | undefined;
+        bgSurface?: string | undefined;
+        bgSurfaceElevated?: string | undefined;
+        bgOverlay?: string | undefined;
+        bgDisabled?: string | undefined;
+        bgHover?: string | undefined;
+        bgActive?: string | undefined;
+        bgSelected?: string | undefined;
+        borderDefault?: string | undefined;
+        borderSubtle?: string | undefined;
+        borderStrong?: string | undefined;
+        borderFocus?: string | undefined;
+        borderDisabled?: string | undefined;
+        stateSuccess?: string | undefined;
+        stateSuccessBg?: string | undefined;
+        stateWarning?: string | undefined;
+        stateWarningBg?: string | undefined;
+        stateError?: string | undefined;
+        stateErrorBg?: string | undefined;
+        stateInfo?: string | undefined;
+        stateInfoBg?: string | undefined;
+        primaryDefault?: string | undefined;
+        primaryHover?: string | undefined;
+        primaryActive?: string | undefined;
+        primaryDisabled?: string | undefined;
+        primaryText?: string | undefined;
+        secondaryDefault?: string | undefined;
+        secondaryHover?: string | undefined;
+        secondaryActive?: string | undefined;
+        secondaryDisabled?: string | undefined;
+        secondaryText?: string | undefined;
+        shadowColor?: string | undefined;
+        linkVariant?: Exclude<import('..').LinkVariant, "custom"> | undefined;
+        linkSize?: Exclude<import('..').LinkSize, "default"> | undefined;
+        linkUnderline?: Exclude<import('..').LinkUnderline, "default"> | undefined;
+        dialogDisplay?: Exclude<import('..').DialogDisplay, "center"> | undefined;
+    }>;
+    applyCustomTheme: (theme: SurgeuiTheme) => void;
+    setCustomVariable: (property: string, value: string) => void;
+    getCustomTheme: () => SurgeuiTheme;
+    resetCustomTheme: () => void;
+    mergeWithTheme: (baseTheme: SurgeuiTheme, overrideTheme: SurgeuiTheme) => SurgeuiTheme;
+};
+//# sourceMappingURL=useCustomTheme.d.ts.map

package/dist/composables/useCustomTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useCustomTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlD;;;;;;;;GAQG;AACH,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAcK,YAAY,KAAG,IAAI;kCAgBf,MAAM,SAAS,MAAM,KAAG,IAAI;0BAwBtC,YAAY;4BAOV,IAAI;gCA0BE,YAAY,iBAAiB,YAAY,KAAG,YAAY;EA+B5F"}

package/dist/composables/useTheme.d.ts

@@ -1,9 +1,11 @@
-import { ThemeName, ContrastMode, MotionMode, ThemeMetadata, UseThemeOptions } from '../types/theme';
+import { ThemeName, ThemeMode, ContrastMode, MotionMode, ThemeMetadata, UseThemeOptions, DeprecatedThemeName } from '../types/theme';
 export declare function useTheme(options?: UseThemeOptions): {
     themeName: import('vue').Ref<ThemeName, ThemeName>;
+    themeMode: import('vue').Ref<ThemeMode, ThemeMode>;
     contrastMode: import('vue').Ref<ContrastMode, ContrastMode>;
     motionMode: import('vue').Ref<MotionMode, MotionMode>;
-    effectiveTheme: import('vue').ComputedRef<"dark" | "light" | "ocean" | "forest" | "sunset">;
+    effectiveTheme: import('vue').ComputedRef<ThemeName>;
+    effectiveThemeMode: import('vue').ComputedRef<"dark" | "light">;
     effectiveContrast: import('vue').ComputedRef<"normal" | "high">;
     effectiveMotion: import('vue').ComputedRef<"reduce" | "normal">;
     systemTheme: import('vue').ComputedRef<"dark" | "light">;
@@ -14,9 +16,11 @@ export declare function useTheme(options?: UseThemeOptions): {
     availableThemes: import('vue').ComputedRef<ThemeMetadata[]>;
     systemThemes: import('vue').ComputedRef<ThemeMetadata[]>;
     colorThemes: import('vue').ComputedRef<ThemeMetadata[]>;
-    setTheme: (theme: ThemeName) => void;
+    setTheme: (name: ThemeName | DeprecatedThemeName) => void;
+    setThemeMode: (mode: ThemeMode) => void;
     setContrast: (contrast: ContrastMode) => void;
     setMotion: (motion: MotionMode) => void;
+    toggleMode: () => void;
     toggleTheme: () => void;
     cycleTheme: () => void;
     clearConfig: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EAEV,aAAa,EACb,eAAe,EAChB,MAAM,eAAe,CAAC;AA8DvB,wBAAgB,QAAQ,CAAC,OAAO,GAAE,eAAoB;;;;;;;;;;;;;;;sBAsJ3B,SAAS;4BAcH,YAAY;wBAKhB,UAAU;;;;EAiFtC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EAEV,aAAa,EACb,eAAe,EACf,mBAAmB,EACpB,MAAM,eAAe,CAAC;AA2DvB,wBAAgB,QAAQ,CAAC,OAAO,GAAE,eAAoB;;;;;;;;;;;;;;;;;qBA4L5B,SAAS,GAAG,mBAAmB;yBAuC3B,SAAS;4BAMN,YAAY;wBAMhB,UAAU;;;;;EA4GtC"}