sv5ui 1.3.0 → 1.5.0

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

@@ -19,6 +19,8 @@ export * from './Drawer/index.js';
 export * from './Tooltip/index.js';
 export * from './Modal/index.js';
 export * from './Accordion/index.js';
+export * from './Collapsible/index.js';
+export * from './Command/index.js';
 export * from './Slideover/index.js';
 export * from './Popover/index.js';
 export * from './Breadcrumb/index.js';
@@ -41,5 +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

@@ -20,6 +20,8 @@ export * from './Drawer/index.js';
 export * from './Tooltip/index.js';
 export * from './Modal/index.js';
 export * from './Accordion/index.js';
+export * from './Collapsible/index.js';
+export * from './Command/index.js';
 export * from './Slideover/index.js';
 export * from './Popover/index.js';
 export * from './Breadcrumb/index.js';
@@ -42,5 +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/dist/theme.css

@@ -597,3 +597,39 @@
         scale: 0.95;
     }
 }
+
+/* ==================== Scrollbar ==================== */
+
+@utility scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-outline-variant) transparent;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-outline-variant);
+        border-radius: 3px;
+    }
+}
+
+@keyframes collapsible-down {
+    0% {
+        height: 0;
+    }
+    to {
+        height: var(--bits-collapsible-content-height);
+    }
+}
+
+@keyframes collapsible-up {
+    0% {
+        height: var(--bits-collapsible-content-height);
+    }
+    to {
+        height: 0;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.3.0",
+    "version": "1.5.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",
@@ -99,6 +99,7 @@
         "@iconify/svelte": "^5.2.1",
         "@internationalized/date": "^3.11.0",
         "bits-ui": "^2.15.4",
+        "svelte-sonner": "^1.1.0",
         "tailwind-merge": "^3.4.0",
         "tailwind-variants": "^3.2.2",
         "vaul-svelte": "1.0.0-next.7"