sv5ui 2.1.0 → 2.2.0

package/dist/hooks/useTimers/useTimers.svelte.js

@@ -0,0 +1,90 @@
+import { toGetter } from '../utils.js';
+/**
+ * Run a callback on an interval with proper runes teardown.
+ *
+ * The delay may be a value or a getter; changing it restarts the interval with
+ * the new period. A `null`/`undefined` or non-positive delay disables it, as
+ * does `pause()` or the `paused` option. SSR-safe: no timer runs on the server.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useInterval } from 'sv5ui'
+ *
+ *   let count = $state(0)
+ *   const timer = useInterval(() => count++, 1000)
+ * </script>
+ *
+ * <button onclick={timer.pause}>Pause</button>
+ * ```
+ */
+export function useInterval(callback, delay, options = {}) {
+    const resolveDelay = toGetter(delay);
+    const resolvePaused = toGetter(options.paused ?? false);
+    let manuallyPaused = $state(false);
+    const active = $derived.by(() => {
+        if (manuallyPaused || resolvePaused())
+            return false;
+        const ms = resolveDelay();
+        return typeof ms === 'number' && ms > 0;
+    });
+    $effect(() => {
+        if (!active)
+            return;
+        const ms = resolveDelay();
+        if (typeof ms !== 'number' || ms <= 0)
+            return;
+        const id = setInterval(callback, ms);
+        return () => clearInterval(id);
+    });
+    return {
+        pause() {
+            manuallyPaused = true;
+        },
+        resume() {
+            manuallyPaused = false;
+        },
+        get active() {
+            return active;
+        }
+    };
+}
+/**
+ * Schedule a callback to run once after a delay, with proper runes teardown.
+ *
+ * Starts on mount. The delay may be a value or a getter; changing it restarts
+ * the timer. A `null`/`undefined` or negative delay schedules nothing. SSR-safe:
+ * no timer runs on the server.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useTimeout } from 'sv5ui'
+ *
+ *   const timer = useTimeout(() => (visible = false), 3000)
+ * </script>
+ *
+ * <button onclick={timer.restart}>Reset</button>
+ * ```
+ */
+export function useTimeout(callback, delay) {
+    const resolveDelay = toGetter(delay);
+    let timeoutId;
+    let restartToken = $state(0);
+    $effect(() => {
+        void restartToken;
+        const ms = resolveDelay();
+        if (typeof ms !== 'number' || ms < 0)
+            return;
+        timeoutId = setTimeout(callback, ms);
+        return () => clearTimeout(timeoutId);
+    });
+    return {
+        restart() {
+            restartToken++;
+        },
+        cancel() {
+            clearTimeout(timeoutId);
+        }
+    };
+}

package/dist/hooks/utils.d.ts

@@ -0,0 +1 @@
+export declare function toGetter<T>(value: T | (() => T)): () => T;

package/dist/hooks/utils.js

@@ -0,0 +1,3 @@
+export function toGetter(value) {
+    return typeof value === 'function' ? value : () => value;
+}

package/dist/index.d.ts

@@ -1,54 +1,54 @@
-export * from './Icon/index.js';
-export * from './Button/index.js';
-export * from './Avatar/index.js';
-export * from './AvatarGroup/index.js';
-export * from './Alert/index.js';
-export * from './Card/index.js';
-export * from './Link/index.js';
-export * from './Separator/index.js';
-export * from './Chip/index.js';
-export * from './Progress/index.js';
-export * from './Badge/index.js';
-export * from './Kbd/index.js';
-export * from './Container/index.js';
-export * from './Timeline/index.js';
-export * from './User/index.js';
-export * from './Empty/index.js';
-export * from './Skeleton/index.js';
-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';
-export * from './Calendar/index.js';
-export * from './DropdownMenu/index.js';
-export * from './ContextMenu/index.js';
-export * from './Tabs/index.js';
-export * from './Pagination/index.js';
-export * from './FieldGroup/index.js';
-export * from './FormField/index.js';
-export * from './Form/index.js';
-export * from './Input/index.js';
-export * from './Textarea/index.js';
-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 './Table/index.js';
-export * from './Toast/index.js';
-export * from './Carousel/index.js';
-export * from './Banner/index.js';
-export * from './Stepper/index.js';
+export * from './components/Icon/index.js';
+export * from './components/Button/index.js';
+export * from './components/Avatar/index.js';
+export * from './components/AvatarGroup/index.js';
+export * from './components/Alert/index.js';
+export * from './components/Card/index.js';
+export * from './components/Link/index.js';
+export * from './components/Separator/index.js';
+export * from './components/Chip/index.js';
+export * from './components/Progress/index.js';
+export * from './components/Badge/index.js';
+export * from './components/Kbd/index.js';
+export * from './components/Container/index.js';
+export * from './components/Timeline/index.js';
+export * from './components/User/index.js';
+export * from './components/Empty/index.js';
+export * from './components/Skeleton/index.js';
+export * from './components/Drawer/index.js';
+export * from './components/Tooltip/index.js';
+export * from './components/Modal/index.js';
+export * from './components/Accordion/index.js';
+export * from './components/Collapsible/index.js';
+export * from './components/Command/index.js';
+export * from './components/Slideover/index.js';
+export * from './components/Popover/index.js';
+export * from './components/Breadcrumb/index.js';
+export * from './components/Calendar/index.js';
+export * from './components/DropdownMenu/index.js';
+export * from './components/ContextMenu/index.js';
+export * from './components/Tabs/index.js';
+export * from './components/Pagination/index.js';
+export * from './components/FieldGroup/index.js';
+export * from './components/FormField/index.js';
+export * from './components/Form/index.js';
+export * from './components/Input/index.js';
+export * from './components/Textarea/index.js';
+export * from './components/Select/index.js';
+export * from './components/SelectMenu/index.js';
+export * from './components/Switch/index.js';
+export * from './components/Checkbox/index.js';
+export * from './components/CheckboxGroup/index.js';
+export * from './components/RadioGroup/index.js';
+export * from './components/FileUpload/index.js';
+export * from './components/Slider/index.js';
+export * from './components/PinInput/index.js';
+export * from './components/ThemeModeButton/index.js';
+export * from './components/Table/index.js';
+export * from './components/Toast/index.js';
+export * from './components/Carousel/index.js';
+export * from './components/Banner/index.js';
+export * from './components/Stepper/index.js';
 export * from './hooks/index.js';
 export { defineConfig } from './config.js';
 export type { UIConfig } from './config.js';

package/dist/index.js

@@ -1,55 +1,55 @@
 // Components
-export * from './Icon/index.js';
-export * from './Button/index.js';
-export * from './Avatar/index.js';
-export * from './AvatarGroup/index.js';
-export * from './Alert/index.js';
-export * from './Card/index.js';
-export * from './Link/index.js';
-export * from './Separator/index.js';
-export * from './Chip/index.js';
-export * from './Progress/index.js';
-export * from './Badge/index.js';
-export * from './Kbd/index.js';
-export * from './Container/index.js';
-export * from './Timeline/index.js';
-export * from './User/index.js';
-export * from './Empty/index.js';
-export * from './Skeleton/index.js';
-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';
-export * from './Calendar/index.js';
-export * from './DropdownMenu/index.js';
-export * from './ContextMenu/index.js';
-export * from './Tabs/index.js';
-export * from './Pagination/index.js';
-export * from './FieldGroup/index.js';
-export * from './FormField/index.js';
-export * from './Form/index.js';
-export * from './Input/index.js';
-export * from './Textarea/index.js';
-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 './Table/index.js';
-export * from './Toast/index.js';
-export * from './Carousel/index.js';
-export * from './Banner/index.js';
-export * from './Stepper/index.js';
+export * from './components/Icon/index.js';
+export * from './components/Button/index.js';
+export * from './components/Avatar/index.js';
+export * from './components/AvatarGroup/index.js';
+export * from './components/Alert/index.js';
+export * from './components/Card/index.js';
+export * from './components/Link/index.js';
+export * from './components/Separator/index.js';
+export * from './components/Chip/index.js';
+export * from './components/Progress/index.js';
+export * from './components/Badge/index.js';
+export * from './components/Kbd/index.js';
+export * from './components/Container/index.js';
+export * from './components/Timeline/index.js';
+export * from './components/User/index.js';
+export * from './components/Empty/index.js';
+export * from './components/Skeleton/index.js';
+export * from './components/Drawer/index.js';
+export * from './components/Tooltip/index.js';
+export * from './components/Modal/index.js';
+export * from './components/Accordion/index.js';
+export * from './components/Collapsible/index.js';
+export * from './components/Command/index.js';
+export * from './components/Slideover/index.js';
+export * from './components/Popover/index.js';
+export * from './components/Breadcrumb/index.js';
+export * from './components/Calendar/index.js';
+export * from './components/DropdownMenu/index.js';
+export * from './components/ContextMenu/index.js';
+export * from './components/Tabs/index.js';
+export * from './components/Pagination/index.js';
+export * from './components/FieldGroup/index.js';
+export * from './components/FormField/index.js';
+export * from './components/Form/index.js';
+export * from './components/Input/index.js';
+export * from './components/Textarea/index.js';
+export * from './components/Select/index.js';
+export * from './components/SelectMenu/index.js';
+export * from './components/Switch/index.js';
+export * from './components/Checkbox/index.js';
+export * from './components/CheckboxGroup/index.js';
+export * from './components/RadioGroup/index.js';
+export * from './components/FileUpload/index.js';
+export * from './components/Slider/index.js';
+export * from './components/PinInput/index.js';
+export * from './components/ThemeModeButton/index.js';
+export * from './components/Table/index.js';
+export * from './components/Toast/index.js';
+export * from './components/Carousel/index.js';
+export * from './components/Banner/index.js';
+export * from './components/Stepper/index.js';
 // Composables
 export * from './hooks/index.js';
 // Configuration

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",
@@ -43,9 +43,9 @@
             "default": "./dist/index.js"
         },
         "./editor": {
-            "types": "./dist/Editor/index.d.ts",
-            "svelte": "./dist/Editor/index.js",
-            "default": "./dist/Editor/index.js"
+            "types": "./dist/components/Editor/index.d.ts",
+            "svelte": "./dist/components/Editor/index.js",
+            "default": "./dist/components/Editor/index.js"
         },
         "./theme.css": {
             "import": "./dist/theme.css",

package/dist/Alert/Alert.svelte

@@ -1,131 +0,0 @@
-<script lang="ts" module>
-    import type { AlertProps } from './alert.types.js'
-
-    export type Props = AlertProps
-</script>
-
-<script lang="ts">
-    import { alertVariants, alertDefaults } from './alert.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('alert', alertDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        title,
-        description,
-        icon,
-        avatar,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        orientation = config.defaultVariants.orientation,
-        open = $bindable(true),
-        close = false,
-        closeIcon,
-        actions,
-        class: className,
-        leading,
-        titleSlot,
-        descriptionSlot,
-        actionsSlot,
-        closeSlot,
-        onClose,
-        ...restProps
-    }: Props = $props()
-
-    const resolvedCloseIcon = $derived(closeIcon ?? icons.close)
-
-    const classes = $derived.by(() => {
-        const slots = alertVariants({ variant, color, orientation, title: !!title })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-            title: slots.title({ class: [config.slots.title, ui?.title] }),
-            description: slots.description({ class: [config.slots.description, ui?.description] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
-            actions: slots.actions({ class: [config.slots.actions, ui?.actions] }),
-            close: slots.close({ class: [config.slots.close, ui?.close] })
-        }
-    })
-
-    const closeButtonProps = $derived(!close ? null : close === true ? {} : close)
-
-    const isVertical = $derived(orientation === 'vertical')
-    const hasActions = $derived(!!actionsSlot || (actions && actions.length > 0))
-
-    function handleClose() {
-        open = false
-        onClose?.()
-    }
-</script>
-
-{#snippet actionsContent()}
-    {#if actionsSlot}
-        {@render actionsSlot()}
-    {:else if actions && actions.length > 0}
-        <div class={classes.actions}>
-            {#each actions as action, index (index)}
-                <Button size="xs" {...action} />
-            {/each}
-        </div>
-    {/if}
-{/snippet}
-
-{#if open}
-    <svelte:element this={as} bind:this={ref} class={classes.root} role="alert" {...restProps}>
-        {#if leading}
-            {@render leading()}
-        {:else if icon}
-            <Icon name={icon} class={classes.icon} />
-        {:else if avatar}
-            <Avatar {...avatar} class={classes.avatar} />
-        {/if}
-
-        {#if title || description || titleSlot || descriptionSlot || (isVertical && hasActions)}
-            <div class={classes.wrapper}>
-                {#if titleSlot}
-                    {@render titleSlot()}
-                {:else if title}
-                    <div class={classes.title}>{title}</div>
-                {/if}
-
-                {#if descriptionSlot}
-                    {@render descriptionSlot()}
-                {:else if description}
-                    <div class={classes.description}>{description}</div>
-                {/if}
-
-                {#if isVertical}
-                    {@render actionsContent()}
-                {/if}
-            </div>
-        {/if}
-
-        {#if !isVertical}
-            {@render actionsContent()}
-        {/if}
-
-        {#if closeSlot}
-            <div class={classes.close}>
-                {@render closeSlot()}
-            </div>
-        {:else if closeButtonProps}
-            <Button
-                {...closeButtonProps}
-                icon={closeButtonProps.icon ?? resolvedCloseIcon}
-                variant={closeButtonProps.variant ?? 'link'}
-                color={closeButtonProps.color ?? 'surface'}
-                class={classes.close}
-                onclick={handleClose}
-                aria-label={closeButtonProps['aria-label'] ?? 'Close alert'}
-            />
-        {/if}
-    </svelte:element>
-{/if}

package/dist/Avatar/Avatar.svelte

@@ -1,114 +0,0 @@
-<script lang="ts" module>
-    import type { AvatarProps, AvatarSize, AvatarRounded } from './avatar.types.js'
-
-    export type Props = AvatarProps
-</script>
-
-<script lang="ts">
-    import { Avatar } from 'bits-ui'
-    import { avatarVariants, avatarDefaults, avatarSizePx } from './avatar.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { getContext } from 'svelte'
-    import Icon from '../Icon/Icon.svelte'
-    import Chip from '../Chip/Chip.svelte'
-
-    const config = getComponentConfig('avatar', avatarDefaults)
-
-    let {
-        ref = $bindable(null),
-        src,
-        alt,
-        size,
-        rounded,
-        text,
-        icon,
-        chip,
-        loading,
-        delayMs = 0,
-        class: className,
-        ui,
-        fallback: fallbackSnippet,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const groupContext = getContext<
-        { size: AvatarSize; rounded: AvatarRounded; baseClass: string } | undefined
-    >('avatarGroup')
-
-    const resolvedSize = $derived(size ?? groupContext?.size ?? config.defaultVariants.size ?? 'md')
-    const resolvedRounded = $derived(
-        rounded ?? groupContext?.rounded ?? config.defaultVariants.rounded ?? 'full'
-    )
-    const sizePx = $derived(avatarSizePx[resolvedSize])
-
-    const initials = $derived(
-        text !== undefined
-            ? text
-            : alt
-              ? alt
-                    .split(' ')
-                    .filter(Boolean)
-                    .slice(0, 2)
-                    .map((w) => w[0])
-                    .join('')
-                    .toUpperCase()
-              : ''
-    )
-
-    const chipProps = $derived(
-        chip === true
-            ? { inset: true as const }
-            : chip
-              ? { inset: true as const, ...chip }
-              : undefined
-    )
-
-    const classes = $derived.by(() => {
-        const slots = avatarVariants({ size: resolvedSize, rounded: resolvedRounded })
-        return {
-            root: slots.root({
-                class: [config.slots.root, groupContext?.baseClass, className, ui?.root]
-            }),
-            image: slots.image({ class: [config.slots.image, ui?.image] }),
-            fallback: slots.fallback({ class: [config.slots.fallback, ui?.fallback] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] })
-        }
-    })
-</script>
-
-{#snippet avatarContent()}
-    <Avatar.Root {...restProps} bind:ref class={classes.root} {delayMs}>
-        {#if children}
-            {@render children()}
-        {:else}
-            {#if src}
-                <Avatar.Image
-                    {src}
-                    alt={alt ?? ''}
-                    class={classes.image}
-                    width={sizePx}
-                    height={sizePx}
-                    {loading}
-                />
-            {/if}
-            <Avatar.Fallback class={classes.fallback}>
-                {#if fallbackSnippet}
-                    {@render fallbackSnippet()}
-                {:else if initials}
-                    {initials}
-                {:else if icon}
-                    <Icon name={icon} class={classes.icon} />
-                {/if}
-            </Avatar.Fallback>
-        {/if}
-    </Avatar.Root>
-{/snippet}
-
-{#if chipProps}
-    <Chip {...chipProps}>
-        {@render avatarContent()}
-    </Chip>
-{:else}
-    {@render avatarContent()}
-{/if}

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -1,71 +0,0 @@
-<script lang="ts" module>
-    import type { AvatarGroupProps } from './avatar-group.types.js'
-
-    export type Props = AvatarGroupProps
-</script>
-
-<script lang="ts">
-    import { avatarGroupVariants, avatarGroupDefaults } from './avatar-group.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { setContext } from 'svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize, AvatarRounded } from '../Avatar/avatar.types.js'
-
-    const config = getComponentConfig('avatarGroup', avatarGroupDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        size = config.defaultVariants.size ?? 'md',
-        rounded = config.defaultVariants.rounded ?? 'full',
-        avatars,
-        max,
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = avatarGroupVariants({ size, rounded })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] })
-        }
-    })
-
-    setContext<{ size: AvatarSize; rounded: AvatarRounded; baseClass: string }>('avatarGroup', {
-        get size() {
-            return size
-        },
-        get rounded() {
-            return rounded
-        },
-        get baseClass() {
-            return classes.base
-        }
-    })
-
-    const visibleAvatars = $derived.by(() => {
-        if (!avatars) return []
-        const shown = max && max > 0 ? avatars.slice(0, max) : avatars
-        return [...shown].reverse()
-    })
-
-    const overflowCount = $derived(
-        avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0
-    )
-</script>
-
-<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
-    {#if avatars}
-        {#if overflowCount > 0}
-            <Avatar text={`+${overflowCount}`} />
-        {/if}
-        {#each visibleAvatars as avatar, index (index)}
-            <Avatar {...avatar} />
-        {/each}
-    {:else if children}
-        {@render children()}
-    {/if}
-</svelte:element>