sv5ui 0.0.1

package/dist/Badge/badge.variants.d.ts

@@ -0,0 +1,303 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        sm: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        xl: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+    };
+    square: {
+        true: string;
+    };
+}, {
+    base: string;
+    label: string;
+    leadingIcon: string;
+    leadingAvatar: string;
+    leadingAvatarSize: string;
+    trailingIcon: string;
+}, undefined, {
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        sm: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        xl: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+    };
+    square: {
+        true: string;
+    };
+}, {
+    base: string;
+    label: string;
+    leadingIcon: string;
+    leadingAvatar: string;
+    leadingAvatarSize: string;
+    trailingIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        sm: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+        xl: {
+            base: string;
+            leadingIcon: string;
+            leadingAvatarSize: string;
+            trailingIcon: string;
+        };
+    };
+    square: {
+        true: string;
+    };
+}, {
+    base: string;
+    label: string;
+    leadingIcon: string;
+    leadingAvatar: string;
+    leadingAvatarSize: string;
+    trailingIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+export type BadgeSlots = keyof ReturnType<typeof badgeVariants>;
+export declare const badgeDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            sm: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            md: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            lg: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            xl: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+        };
+        square: {
+            true: string;
+        };
+    }, {
+        base: string;
+        label: string;
+        leadingIcon: string;
+        leadingAvatar: string;
+        leadingAvatarSize: string;
+        trailingIcon: string;
+    }, {
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            sm: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            md: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            lg: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+            xl: {
+                base: string;
+                leadingIcon: string;
+                leadingAvatarSize: string;
+                trailingIcon: string;
+            };
+        };
+        square: {
+            true: string;
+        };
+    }, {
+        base: string;
+        label: string;
+        leadingIcon: string;
+        leadingAvatar: string;
+        leadingAvatarSize: string;
+        trailingIcon: string;
+    }>;
+    slots: Partial<Record<BadgeSlots, string>>;
+};

package/dist/Badge/badge.variants.js

@@ -0,0 +1,245 @@
+import { tv } from 'tailwind-variants';
+export const badgeVariants = tv({
+    slots: {
+        base: 'font-medium inline-flex items-center',
+        label: 'truncate',
+        leadingIcon: 'shrink-0',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailingIcon: 'shrink-0'
+    },
+    variants: {
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: ''
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
+                leadingIcon: 'size-3',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-3'
+            },
+            sm: {
+                base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
+                leadingIcon: 'size-3',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-3'
+            },
+            md: {
+                base: 'text-xs px-2 py-1 gap-1 rounded-md',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4'
+            },
+            lg: {
+                base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5'
+            },
+            xl: {
+                base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
+                leadingIcon: 'size-6',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-6'
+            }
+        },
+        square: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        // ========== SOLID VARIANTS ==========
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: { base: 'bg-primary text-on-primary' }
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: { base: 'bg-secondary text-on-secondary' }
+        },
+        {
+            variant: 'solid',
+            color: 'tertiary',
+            class: { base: 'bg-tertiary text-on-tertiary' }
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: { base: 'bg-success text-on-success' }
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: { base: 'bg-warning text-on-warning' }
+        },
+        {
+            variant: 'solid',
+            color: 'error',
+            class: { base: 'bg-error text-on-error' }
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: { base: 'bg-info text-on-info' }
+        },
+        {
+            variant: 'solid',
+            color: 'surface',
+            class: { base: 'bg-inverse-surface text-inverse-on-surface' }
+        },
+        // ========== OUTLINE VARIANTS ==========
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: { base: 'text-primary ring ring-inset ring-primary/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: { base: 'text-secondary ring ring-inset ring-secondary/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: { base: 'text-tertiary ring ring-inset ring-tertiary/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: { base: 'text-success ring ring-inset ring-success/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: { base: 'text-warning ring ring-inset ring-warning/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: { base: 'text-error ring ring-inset ring-error/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: { base: 'text-info ring ring-inset ring-info/50' }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: { base: 'text-on-surface-variant ring ring-inset ring-outline-variant' }
+        },
+        // ========== SOFT VARIANTS ==========
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: { base: 'bg-primary-container text-on-primary-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: { base: 'bg-secondary-container text-on-secondary-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'tertiary',
+            class: { base: 'bg-tertiary-container text-on-tertiary-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: { base: 'bg-success-container text-on-success-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: { base: 'bg-warning-container text-on-warning-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'error',
+            class: { base: 'bg-error-container text-on-error-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: { base: 'bg-info-container text-on-info-container' }
+        },
+        {
+            variant: 'soft',
+            color: 'surface',
+            class: { base: 'bg-surface-container-highest text-on-surface' }
+        },
+        // ========== SUBTLE VARIANTS ==========
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: { base: 'bg-primary-container text-on-primary-container ring ring-inset ring-primary/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: { base: 'bg-secondary-container text-on-secondary-container ring ring-inset ring-secondary/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: { base: 'bg-tertiary-container text-on-tertiary-container ring ring-inset ring-tertiary/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: { base: 'bg-success-container text-on-success-container ring ring-inset ring-success/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: { base: 'bg-warning-container text-on-warning-container ring ring-inset ring-warning/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: { base: 'bg-error-container text-on-error-container ring ring-inset ring-error/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: { base: 'bg-info-container text-on-info-container ring ring-inset ring-info/25' }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: { base: 'bg-surface-container-highest text-on-surface ring ring-inset ring-outline-variant' }
+        },
+        // ========== SQUARE SIZE ADJUSTMENTS ==========
+        { square: true, size: 'xs', class: { base: 'p-0.5' } },
+        { square: true, size: 'sm', class: { base: 'p-1' } },
+        { square: true, size: 'md', class: { base: 'p-1' } },
+        { square: true, size: 'lg', class: { base: 'p-1' } },
+        { square: true, size: 'xl', class: { base: 'p-1' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'md'
+    }
+});
+export const badgeDefaults = {
+    defaultVariants: badgeVariants.defaultVariants,
+    slots: {}
+};

package/dist/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export type { BadgeProps } from './badge.types.js';

package/dist/Badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.svelte';

package/dist/Button/Button.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+    import type { ButtonProps } from './button.types.js'
+
+    export type Props = ButtonProps
+</script>
+
+<script lang="ts">
+    import { Button } from 'bits-ui'
+    import { buttonVariants, buttonDefaults } from './button.variants.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+
+    const config = getComponentConfig('button', buttonDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        ui,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        size = config.defaultVariants.size,
+        label,
+        loading = false,
+        loadingIcon = icons.loading,
+        disabled = false,
+        block = false,
+        square = false,
+        truncate = false,
+        icon,
+        leadingIcon,
+        trailingIcon,
+        trailing = false,
+        avatar,
+        leadingSlot,
+        trailingSlot,
+        children,
+        class: className,
+        ...restProps
+    }: Props = $props()
+
+    const isIconOnly = $derived(square || (!label && !children))
+    const isLeading = $derived((!!icon && !trailing) || (loading && !trailing) || !!leadingIcon)
+    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
+
+    const leadingIconName = $derived(
+        loading && isLeading ? loadingIcon : (leadingIcon || (isLeading && !trailing ? icon : undefined))
+    )
+    const trailingIconName = $derived(
+        loading && isTrailing ? loadingIcon : (trailingIcon || (trailing ? icon : undefined))
+    )
+
+    const classes = $derived.by(() => {
+        const slots = buttonVariants({
+            variant,
+            color,
+            size,
+            block,
+            square: isIconOnly,
+            loading,
+            leading: isLeading,
+            trailing: isTrailing
+        })
+        return {
+            base: slots.base({ class: [config.slots.base, className, ui?.base] }),
+            label: slots.label({ class: [config.slots.label, ui?.label] }),
+            leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+            trailingIcon: slots.trailingIcon({ class: [config.slots.trailingIcon, ui?.trailingIcon] }),
+            leadingAvatar: slots.leadingAvatar({ class: [config.slots.leadingAvatar, ui?.leadingAvatar] }),
+            leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize
+        }
+    })
+</script>
+
+<Button.Root
+    bind:ref
+    class={classes.base}
+    disabled={disabled || loading}
+    {...restProps}
+>
+    {#if leadingSlot}
+        {@render leadingSlot()}
+    {:else if isLeading && leadingIconName}
+        <Icon name={leadingIconName} class={classes.leadingIcon} />
+    {:else if avatar}
+        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+    {/if}
+
+    {#if !isIconOnly}
+        {#if label}
+            <span class={classes.label}>{label}</span>
+        {:else if children}
+            <span class={classes.label}>{@render children()}</span>
+        {/if}
+    {/if}
+
+    {#if trailingSlot}
+        {@render trailingSlot()}
+    {:else if isTrailing && trailingIconName}
+        <Icon name={trailingIconName} class={classes.trailingIcon} />
+    {/if}
+</Button.Root>

package/dist/Button/Button.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonProps } from './button.types.js';
+export type Props = ButtonProps;
+import { Button } from 'bits-ui';
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;