@avenirs-esr/avenirs-dsav 0.1.52 → 0.1.53

package/dist/composables/index.d.ts

@@ -1,3 +1,3 @@
-export * from './use-breakpoint/use-breakpoint';
+export * from './use-av-breakpoints/use-av-breakpoints';
 export * from './use-focus-trap/use-focus-trap';
 export * from './use-global-background-color/use-global-background-color';

package/dist/composables/use-av-breakpoints/use-av-breakpoints.d.ts

@@ -0,0 +1,72 @@
+import type { Ref } from 'vue';
+/**
+ * Named viewport breakpoints for responsive behavior.
+ * These values are aligned with the DSFR / Avenirs design system.
+ */
+export declare const AV_BREAKPOINTS: {
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1440;
+};
+/**
+ * Result returned by the `useAvBreakpoints` composable.
+ *
+ * Each property is a reactive reference (`Ref<boolean>`) that updates automatically
+ * when the viewport width changes. It provides both **granular breakpoint flags**
+ * (`isBelowSm`, `isAboveLg`, etc.) and **semantic viewport categories**
+ * (`isMobile`, `isTablet`, `isDesktop`).
+ */
+export interface UseAvBreakpointsReturn {
+    /**
+     * True if the viewport width is considered mobile.
+     * Equivalent to `width < 768px (48rem)` (below md).
+     */
+    isMobile: Ref<boolean>;
+    /**
+     * True if the viewport width is considered tablet.
+     * Equivalent to `768px (48rem) <= width < 1024px (64rem)` (between md and lg).
+     */
+    isTablet: Ref<boolean>;
+    /**
+     * True if the viewport width is considered desktop.
+     * Equivalent to `width >= 1024px (64rem)` (lg and above).
+     */
+    isDesktop: Ref<boolean>;
+    /** True if viewport width is below 576px (36rem). */
+    isBelowSm: Ref<boolean>;
+    /** True if viewport width is below 768px (48rem). */
+    isBelowMd: Ref<boolean>;
+    /** True if viewport width is below 1024px (64rem). */
+    isBelowLg: Ref<boolean>;
+    /** True if viewport width is below 1440px (90rem). */
+    isBelowXl: Ref<boolean>;
+    /** True if viewport width is above or equal to 768px (48rem). */
+    isAboveMd: Ref<boolean>;
+    /** True if viewport width is above or equal to 1024px (64rem). */
+    isAboveLg: Ref<boolean>;
+}
+/**
+ * Vue composable providing reactive responsive utilities
+ * based on the current viewport width.
+ *
+ * It uses VueUse useBreakpoints with DSAV breakpoints:
+ * - sm: 576px (36rem),
+ * - md: 768px (48rem),
+ * - lg: 1024px (64rem),
+ * - xl: 1440px (90rem),
+ *
+ * @example
+ * ```ts
+ * import { useAvBreakpoints } from '@avenirs-esr/avenirs-dsav'
+ *
+ * const { isMobile, isDesktop, isBelowMd, isAboveLg } = useAvBreakpoints()
+ * ```
+ *
+ * @returns {UseAvBreakpointsReturn} Object containing:
+ * - `isBelowSm|Md|Lg|Xl`: computed refs returning true if below a breakpoint
+ * - `isAboveMd|Lg`: computed refs returning true if above a breakpoint
+ *
+ * @see {@link https://vueuse.org/core/useBreakpoints/ useBreakpoints on VueUse}
+ */
+export declare function useAvBreakpoints(): UseAvBreakpointsReturn;

package/dist/config/index.d.ts

@@ -1,2 +1 @@
-export * from './breakpoints';
 export * from './page-sizes';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "repository": {
     "type": "git",
     "url": "https://github.com/avenirs-esr/avenirs-dsav"
@@ -68,7 +68,7 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@playwright/test": "1.56.0",
+    "@playwright/test": "^1.55.0",
     "@rushstack/eslint-patch": "^1.10.4",
     "@storybook/addon-a11y": "^9.1.6",
     "@storybook/addon-docs": "^9.1.6",
@@ -96,7 +96,7 @@
     "jsdom": "^25.0.0",
     "lint-staged": "^16.1.6",
     "npm-run-all2": "^6.2.2",
-    "playwright": "1.56.0",
+    "playwright": "^1.55.0",
     "rimraf": "^5.0.10",
     "sass-embedded": "^1.92.1",
     "storybook": "^9.1.6",

package/dist/composables/use-breakpoint/use-breakpoint.d.ts

@@ -1,54 +0,0 @@
-import type { ComputedRef } from 'vue';
-import type { BREAKPOINTS } from '@/config';
-/**
- * Result returned by the useBreakpoint composable.
- */
-export interface UseBreakpointReturn {
-    /**
-     * Returns a computed boolean that is `true` when the viewport width
-     * is strictly **below** the given breakpoint (`max-width: bp - 1px`).
-     *
-     * Equivalent to the Sass mixin: `@include respond-below($breakpoint)`
-     *
-     * @example
-     * ```ts
-     * const isMobile = respondBelow(BREAKPOINTS.MD) // true if width <= 767px
-     * ```
-     */
-    respondBelow: (bp: BREAKPOINTS) => ComputedRef<boolean>;
-    /**
-     * Returns a computed boolean that is `true` when the viewport width
-     * is **at or above** the given breakpoint (`min-width: bp`).
-     *
-     * Equivalent to the Sass mixin: `@include respond-to($breakpoint)`
-     *
-     * @example
-     * ```ts
-     * const isDesktop = respondTo(BREAKPOINTS.LG) // true if width >= 1024px
-     * ```
-     */
-    respondTo: (bp: BREAKPOINTS) => ComputedRef<boolean>;
-}
-/**
- * Vue composable to handle responsive breakpoints based on the current viewport width.
- *
- * This composable provides reactive utilities (`respondBelow` and `respondTo`)
- * that mirror the behavior of the Sass mixins `@include respond-below($breakpoint)`
- * and `@include respond-to($breakpoint)`, allowing you to keep logic and styles
- * perfectly in sync.
- *
- * @example
- * ```ts
- * const { respondBelow, respondTo } = useBreakpoint()
- *
- * const isMobile = respondBelow(BREAKPOINTS.MD) // true if width < 768px
- * const isDesktop = respondTo(BREAKPOINTS.LG)  // true if width >= 1024px
- * ```
- *
- * @returns {UseBreakpointReturn} Object containing:
- *  - `respondBelow`: Returns a computed boolean (`true` if width < breakpoint),
- *  - `respondTo`: Returns a computed boolean (`true` if width >= breakpoint).
- *
- * @see BREAKPOINTS for the defined responsive thresholds.
- */
-export declare function useBreakpoint(): UseBreakpointReturn;

package/dist/config/breakpoints.d.ts

@@ -1,10 +0,0 @@
-/**
- * Breakpoints as defined in src/styles/breakpoints.scss
- * Values are in px to be able to work with window.with
- */
-export declare enum BREAKPOINTS {
-    SM = 576,/* 36rem */
-    MD = 768,/* 48rem */
-    LG = 1024,/* 64rem */
-    XL = 1440
-}