@avenirs-esr/avenirs-dsav 0.1.43 → 0.1.46

package/dist/components/interaction/toggles/index.d.ts

@@ -1 +1 @@
-export { default as AvToggle } from './AvToggle/AvToggle.vue';
+export { default as AvToggle, type AvToggleProps } from './AvToggle/AvToggle.vue';

package/dist/composables/index.d.ts

@@ -1 +1,2 @@
+export * from './use-breakpoint/use-breakpoint';
 export * from './use-focus-trap/use-focus-trap';

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

@@ -0,0 +1,54 @@
+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/composables/use-breakpoint/use-breakpoint.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/config/breakpoints.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+}

package/dist/config/index.d.ts

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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import '@/styles/main.scss';
-export * from './components';
+export * from './components/index';
 export * from './composables';
 export * from './config';
 export * from './tests';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.43",
+  "version": "0.1.46",
   "main": "dist/avenirs-dsav.umd.js",
   "module": "dist/avenirs-dsav.es.js",
   "types": "dist/index.d.ts",