sv5ui 1.4.0 → 1.5.1

package/dist/hooks/useMediaQuery.svelte.d.ts

@@ -0,0 +1,31 @@
+export interface UseMediaQueryOptions {
+    /**
+     * Initial value before the media query is evaluated (SSR-safe).
+     * @default false
+     */
+    initialValue?: boolean;
+}
+export interface UseMediaQueryReturn {
+    /** Whether the media query currently matches */
+    readonly matches: boolean;
+}
+/**
+ * Reactive media query hook. Tracks whether a CSS media query matches.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useMediaQuery } from 'sv5ui'
+ *
+ *   const isMobile = useMediaQuery('(max-width: 640px)')
+ *   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
+ * </script>
+ *
+ * {#if isMobile.matches}
+ *   <MobileLayout />
+ * {:else}
+ *   <DesktopLayout />
+ * {/if}
+ * ```
+ */
+export declare function useMediaQuery(query: string | (() => string), options?: UseMediaQueryOptions): UseMediaQueryReturn;

package/dist/hooks/useMediaQuery.svelte.js

@@ -0,0 +1,38 @@
+/**
+ * Reactive media query hook. Tracks whether a CSS media query matches.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useMediaQuery } from 'sv5ui'
+ *
+ *   const isMobile = useMediaQuery('(max-width: 640px)')
+ *   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
+ * </script>
+ *
+ * {#if isMobile.matches}
+ *   <MobileLayout />
+ * {:else}
+ *   <DesktopLayout />
+ * {/if}
+ * ```
+ */
+export function useMediaQuery(query, options = {}) {
+    const { initialValue = false } = options;
+    const resolveQuery = typeof query === 'function' ? query : () => query;
+    let matches = $state(initialValue);
+    $effect(() => {
+        const mediaQuery = window.matchMedia(resolveQuery());
+        matches = mediaQuery.matches;
+        function handler(event) {
+            matches = event.matches;
+        }
+        mediaQuery.addEventListener('change', handler);
+        return () => mediaQuery.removeEventListener('change', handler);
+    });
+    return {
+        get matches() {
+            return matches;
+        }
+    };
+}

package/dist/index.d.ts

@@ -43,6 +43,8 @@ export * from './FileUpload/index.js';
 export * from './Slider/index.js';
 export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
+export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './hooks/index.js';
 export { defineConfig } from './config.js';
 export type { UIConfig } from './config.js';

package/dist/index.js

@@ -44,6 +44,9 @@ export * from './FileUpload/index.js';
 export * from './Slider/index.js';
 export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
+export * from './Table/index.js';
 export * from './Toast/index.js';
+// Composables
+export * from './hooks/index.js';
 // Configuration
 export { defineConfig } from './config.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.4.0",
+    "version": "1.5.1",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",