sv5ui 1.2.0 → 1.4.0

package/dist/Toast/toast.js

@@ -0,0 +1,73 @@
+import { toast as sonnerToast } from 'svelte-sonner';
+import { mount, unmount } from 'svelte';
+import Icon from '../Icon/Icon.svelte';
+import Avatar from '../Avatar/Avatar.svelte';
+function createIconComponent(name) {
+    function SvelteSonnerIcon(anchor) {
+        if (!anchor.parentNode)
+            return { destroy() { } };
+        const instance = mount(Icon, {
+            target: anchor.parentNode,
+            anchor,
+            props: { name, size: '18' }
+        });
+        return {
+            destroy() {
+                unmount(instance);
+            }
+        };
+    }
+    return SvelteSonnerIcon;
+}
+function createAvatarComponent(props) {
+    function SvelteSonnerAvatar(anchor) {
+        if (!anchor.parentNode)
+            return { destroy() { } };
+        const instance = mount(Avatar, {
+            target: anchor.parentNode,
+            anchor,
+            props: { size: 'sm', ...props }
+        });
+        return {
+            destroy() {
+                unmount(instance);
+            }
+        };
+    }
+    return SvelteSonnerAvatar;
+}
+function resolveOptions(data) {
+    if (!data)
+        return data;
+    const { color, icon, avatar, ...rest } = data;
+    const resolved = { ...rest };
+    // Color -> class
+    if (color) {
+        const existing = resolved.class ?? '';
+        resolved.class = `${existing} sv5ui-color-${color}`.trim();
+    }
+    // Avatar takes priority over icon
+    if (avatar) {
+        resolved.icon = createAvatarComponent(avatar);
+    }
+    else if (typeof icon === 'string') {
+        resolved.icon = createIconComponent(icon);
+    }
+    else if (icon !== undefined) {
+        resolved.icon = icon;
+    }
+    return resolved;
+}
+function toastFn(message, data) {
+    return sonnerToast(message, resolveOptions(data));
+}
+toastFn.success = (message, data) => sonnerToast.success(message, resolveOptions(data));
+toastFn.error = (message, data) => sonnerToast.error(message, resolveOptions(data));
+toastFn.warning = (message, data) => sonnerToast.warning(message, resolveOptions(data));
+toastFn.info = (message, data) => sonnerToast.info(message, resolveOptions(data));
+toastFn.loading = (message, data) => sonnerToast.loading(message, resolveOptions(data));
+toastFn.promise = sonnerToast.promise;
+toastFn.dismiss = sonnerToast.dismiss;
+toastFn.custom = sonnerToast.custom;
+toastFn.message = sonnerToast.message;
+export { toastFn as toast };

package/dist/Toast/toast.types.d.ts

@@ -0,0 +1,19 @@
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ToasterProps as SonnerToasterProps } from 'svelte-sonner';
+import type { ToastVariant } from './toast.variants.js';
+export type ToasterProps = Omit<SonnerToasterProps, 'class' | 'toastOptions' | 'richColors'> & {
+    /**
+     * The visual style variant.
+     * - `outline`: Border with surface background, semantic border accent per type (default)
+     * - `soft`: Light tinted background per type
+     * - `subtle`: Light tinted background + semantic border per type
+     * - `solid`: Full semantic color background per type
+     * - `accent`: Left color stripe with surface background
+     * @default 'outline'
+     */
+    variant?: ToastVariant;
+    /**
+     * Additional CSS classes for the toaster container.
+     */
+    class?: ClassNameValue;
+};

package/dist/Toast/toast.types.js

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

package/dist/Toast/toast.variants.d.ts

@@ -0,0 +1,7 @@
+export type ToastVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'accent';
+export type ToastColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
+export declare const toastDefaults: {
+    defaultVariants: {
+        variant: ToastVariant;
+    };
+};

package/dist/Toast/toast.variants.js

@@ -0,0 +1,5 @@
+export const toastDefaults = {
+    defaultVariants: {
+        variant: 'outline'
+    }
+};

package/dist/config.d.ts

@@ -33,6 +33,11 @@ export declare const iconsDefaults: {
     check: string;
     light: string;
     dark: string;
+    upload: string;
+    file: string;
+    zoomIn: string;
+    trash: string;
+    search: string;
 };
 /** Deep partial type for config objects */
 type DeepPartial<T> = {

package/dist/config.js

@@ -33,7 +33,12 @@ export const iconsDefaults = {
     close: 'lucide:x',
     check: 'lucide:check',
     light: 'lucide:sun',
-    dark: 'lucide:moon'
+    dark: 'lucide:moon',
+    upload: 'lucide:upload',
+    file: 'lucide:file',
+    zoomIn: 'lucide:zoom-in',
+    trash: 'lucide:trash-2',
+    search: 'lucide:search'
 };
 // ==================== GLOBAL STATE ====================
 let globalConfig = {};

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';
@@ -35,7 +37,12 @@ export * from './Select/index.js';
 export * from './SelectMenu/index.js';
 export * from './Switch/index.js';
 export * from './Checkbox/index.js';
+export * from './CheckboxGroup/index.js';
 export * from './RadioGroup/index.js';
+export * from './FileUpload/index.js';
+export * from './Slider/index.js';
+export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
+export * from './Toast/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';
@@ -36,7 +38,12 @@ export * from './Select/index.js';
 export * from './SelectMenu/index.js';
 export * from './Switch/index.js';
 export * from './Checkbox/index.js';
+export * from './CheckboxGroup/index.js';
 export * from './RadioGroup/index.js';
+export * from './FileUpload/index.js';
+export * from './Slider/index.js';
+export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
+export * from './Toast/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.2.0",
+    "version": "1.4.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"