svelora 2.1.0

package/dist/Carousel/carousel.variants.d.ts

@@ -0,0 +1,408 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const carouselVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            viewport: string;
+            container: string;
+            slide: string;
+            dots: string;
+            arrowPrev: string;
+            arrowNext: string;
+        };
+        vertical: {
+            root: string;
+            viewport: string;
+            container: string;
+            slide: string;
+            dots: string;
+            arrowPrev: string;
+            arrowNext: string;
+        };
+    };
+    size: {
+        xs: {
+            dot: string;
+        };
+        sm: {
+            dot: string;
+        };
+        md: {
+            dot: string;
+        };
+        lg: {
+            dot: string;
+        };
+        xl: {
+            dot: string;
+        };
+    };
+    color: {
+        primary: {
+            dot: string;
+        };
+        secondary: {
+            dot: string;
+        };
+        tertiary: {
+            dot: string;
+        };
+        success: {
+            dot: string;
+        };
+        warning: {
+            dot: string;
+        };
+        error: {
+            dot: string;
+        };
+        info: {
+            dot: string;
+        };
+        surface: {
+            dot: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+        ghost: string;
+    };
+}, {
+    root: string;
+    viewport: string;
+    container: string;
+    slide: string;
+    arrow: string;
+    arrowPrev: string;
+    arrowNext: string;
+    dots: string;
+    dot: string[];
+}, undefined, {
+    orientation: {
+        horizontal: {
+            viewport: string;
+            container: string;
+            slide: string;
+            dots: string;
+            arrowPrev: string;
+            arrowNext: string;
+        };
+        vertical: {
+            root: string;
+            viewport: string;
+            container: string;
+            slide: string;
+            dots: string;
+            arrowPrev: string;
+            arrowNext: string;
+        };
+    };
+    size: {
+        xs: {
+            dot: string;
+        };
+        sm: {
+            dot: string;
+        };
+        md: {
+            dot: string;
+        };
+        lg: {
+            dot: string;
+        };
+        xl: {
+            dot: string;
+        };
+    };
+    color: {
+        primary: {
+            dot: string;
+        };
+        secondary: {
+            dot: string;
+        };
+        tertiary: {
+            dot: string;
+        };
+        success: {
+            dot: string;
+        };
+        warning: {
+            dot: string;
+        };
+        error: {
+            dot: string;
+        };
+        info: {
+            dot: string;
+        };
+        surface: {
+            dot: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+        ghost: string;
+    };
+}, {
+    root: string;
+    viewport: string;
+    container: string;
+    slide: string;
+    arrow: string;
+    arrowPrev: string;
+    arrowNext: string;
+    dots: string;
+    dot: string[];
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            viewport: string;
+            container: string;
+            slide: string;
+            dots: string;
+            arrowPrev: string;
+            arrowNext: string;
+        };
+        vertical: {
+            root: string;
+            viewport: string;
+            container: string;
+            slide: string;
+            dots: string;
+            arrowPrev: string;
+            arrowNext: string;
+        };
+    };
+    size: {
+        xs: {
+            dot: string;
+        };
+        sm: {
+            dot: string;
+        };
+        md: {
+            dot: string;
+        };
+        lg: {
+            dot: string;
+        };
+        xl: {
+            dot: string;
+        };
+    };
+    color: {
+        primary: {
+            dot: string;
+        };
+        secondary: {
+            dot: string;
+        };
+        tertiary: {
+            dot: string;
+        };
+        success: {
+            dot: string;
+        };
+        warning: {
+            dot: string;
+        };
+        error: {
+            dot: string;
+        };
+        info: {
+            dot: string;
+        };
+        surface: {
+            dot: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+        ghost: string;
+    };
+}, {
+    root: string;
+    viewport: string;
+    container: string;
+    slide: string;
+    arrow: string;
+    arrowPrev: string;
+    arrowNext: string;
+    dots: string;
+    dot: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type CarouselVariantProps = VariantProps<typeof carouselVariants>;
+export type CarouselSlots = keyof ReturnType<typeof carouselVariants>;
+export declare const carouselDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        orientation: {
+            horizontal: {
+                viewport: string;
+                container: string;
+                slide: string;
+                dots: string;
+                arrowPrev: string;
+                arrowNext: string;
+            };
+            vertical: {
+                root: string;
+                viewport: string;
+                container: string;
+                slide: string;
+                dots: string;
+                arrowPrev: string;
+                arrowNext: string;
+            };
+        };
+        size: {
+            xs: {
+                dot: string;
+            };
+            sm: {
+                dot: string;
+            };
+            md: {
+                dot: string;
+            };
+            lg: {
+                dot: string;
+            };
+            xl: {
+                dot: string;
+            };
+        };
+        color: {
+            primary: {
+                dot: string;
+            };
+            secondary: {
+                dot: string;
+            };
+            tertiary: {
+                dot: string;
+            };
+            success: {
+                dot: string;
+            };
+            warning: {
+                dot: string;
+            };
+            error: {
+                dot: string;
+            };
+            info: {
+                dot: string;
+            };
+            surface: {
+                dot: string;
+            };
+        };
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+            ghost: string;
+        };
+    }, {
+        root: string;
+        viewport: string;
+        container: string;
+        slide: string;
+        arrow: string;
+        arrowPrev: string;
+        arrowNext: string;
+        dots: string;
+        dot: string[];
+    }, {
+        orientation: {
+            horizontal: {
+                viewport: string;
+                container: string;
+                slide: string;
+                dots: string;
+                arrowPrev: string;
+                arrowNext: string;
+            };
+            vertical: {
+                root: string;
+                viewport: string;
+                container: string;
+                slide: string;
+                dots: string;
+                arrowPrev: string;
+                arrowNext: string;
+            };
+        };
+        size: {
+            xs: {
+                dot: string;
+            };
+            sm: {
+                dot: string;
+            };
+            md: {
+                dot: string;
+            };
+            lg: {
+                dot: string;
+            };
+            xl: {
+                dot: string;
+            };
+        };
+        color: {
+            primary: {
+                dot: string;
+            };
+            secondary: {
+                dot: string;
+            };
+            tertiary: {
+                dot: string;
+            };
+            success: {
+                dot: string;
+            };
+            warning: {
+                dot: string;
+            };
+            error: {
+                dot: string;
+            };
+            info: {
+                dot: string;
+            };
+            surface: {
+                dot: string;
+            };
+        };
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+            ghost: string;
+        };
+    }, {
+        root: string;
+        viewport: string;
+        container: string;
+        slide: string;
+        arrow: string;
+        arrowPrev: string;
+        arrowNext: string;
+        dots: string;
+        dot: string[];
+    }>;
+    slots: Partial<Record<CarouselSlots, string>>;
+};

package/dist/Carousel/carousel.variants.js

@@ -0,0 +1,88 @@
+import { tv } from 'tailwind-variants';
+export const carouselVariants = tv({
+    slots: {
+        root: 'relative',
+        viewport: 'overflow-hidden',
+        container: 'flex',
+        slide: 'shrink-0 grow-0 basis-[calc(100%/var(--sv-slides))]',
+        arrow: 'absolute z-10 shadow-md',
+        arrowPrev: '',
+        arrowNext: '',
+        dots: 'flex items-center justify-center gap-2',
+        dot: [
+            'rounded-full bg-on-surface/30 transition-all',
+            'hover:bg-on-surface/50',
+            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+            'data-[selected]:bg-primary'
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                viewport: 'w-full',
+                container: 'flex-row touch-pan-y',
+                slide: 'min-w-0 h-auto',
+                dots: 'flex-row mt-4',
+                arrowPrev: 'left-2 top-1/2 -translate-y-1/2',
+                arrowNext: 'right-2 top-1/2 -translate-y-1/2'
+            },
+            vertical: {
+                root: 'h-full',
+                viewport: 'h-full w-full',
+                container: 'flex-col h-full touch-pan-x',
+                slide: 'min-h-0 w-auto',
+                dots: 'flex-col absolute right-2 top-1/2 -translate-y-1/2',
+                arrowPrev: 'top-2 left-1/2 -translate-x-1/2',
+                arrowNext: 'bottom-2 left-1/2 -translate-x-1/2'
+            }
+        },
+        size: {
+            xs: { dot: 'size-1.5' },
+            sm: { dot: 'size-2' },
+            md: { dot: 'size-2.5' },
+            lg: { dot: 'size-3' },
+            xl: { dot: 'size-3.5' }
+        },
+        color: {
+            primary: { dot: 'data-[selected]:bg-primary focus-visible:outline-primary' },
+            secondary: { dot: 'data-[selected]:bg-secondary focus-visible:outline-secondary' },
+            tertiary: { dot: 'data-[selected]:bg-tertiary focus-visible:outline-tertiary' },
+            success: { dot: 'data-[selected]:bg-success focus-visible:outline-success' },
+            warning: { dot: 'data-[selected]:bg-warning focus-visible:outline-warning' },
+            error: { dot: 'data-[selected]:bg-error focus-visible:outline-error' },
+            info: { dot: 'data-[selected]:bg-info focus-visible:outline-info' },
+            surface: {
+                dot: 'data-[selected]:bg-on-surface focus-visible:outline-on-surface'
+            }
+        },
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: '',
+            ghost: ''
+        }
+    },
+    compoundVariants: [
+        { orientation: 'horizontal', size: 'xs', class: { dot: 'data-[selected]:w-4' } },
+        { orientation: 'horizontal', size: 'sm', class: { dot: 'data-[selected]:w-5' } },
+        { orientation: 'horizontal', size: 'md', class: { dot: 'data-[selected]:w-6' } },
+        { orientation: 'horizontal', size: 'lg', class: { dot: 'data-[selected]:w-7' } },
+        { orientation: 'horizontal', size: 'xl', class: { dot: 'data-[selected]:w-8' } },
+        { orientation: 'vertical', size: 'xs', class: { dot: 'data-[selected]:h-4' } },
+        { orientation: 'vertical', size: 'sm', class: { dot: 'data-[selected]:h-5' } },
+        { orientation: 'vertical', size: 'md', class: { dot: 'data-[selected]:h-6' } },
+        { orientation: 'vertical', size: 'lg', class: { dot: 'data-[selected]:h-7' } },
+        { orientation: 'vertical', size: 'xl', class: { dot: 'data-[selected]:h-8' } }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        color: 'primary',
+        variant: 'soft'
+    }
+});
+export const carouselDefaults = {
+    defaultVariants: carouselVariants.defaultVariants,
+    slots: {}
+};

package/dist/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel.svelte';
+export type { CarouselApi, CarouselArrowSlotProps, CarouselAutoplayOptions, CarouselDotSlotProps, CarouselProps, CarouselSlideSlotProps } from './carousel.types.js';

package/dist/Carousel/index.js

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

package/dist/Checkbox/Checkbox.svelte

@@ -0,0 +1,161 @@
+<script lang="ts" module>
+    import type { CheckboxProps } from './checkbox.types.js'
+
+    export type Props = CheckboxProps
+</script>
+
+<script lang="ts">
+    import { Checkbox, Label, useId } from 'bits-ui'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { checkboxDefaults, checkboxVariants } from './checkbox.variants.js'
+
+    const config = getComponentConfig('checkbox', checkboxDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        checked = $bindable(false),
+        onCheckedChange,
+        indeterminate = $bindable(false),
+        onIndeterminateChange,
+        ui,
+        id,
+        name,
+        value,
+        color = config.defaultVariants.color,
+        size,
+        variant = config.defaultVariants.variant,
+        indicator = config.defaultVariants.indicator,
+        disabled = false,
+        required = false,
+        loading = false,
+        loadingIcon = icons.loading,
+        icon = icons.check,
+        indeterminateIcon = 'lucide:minus',
+        label,
+        description,
+        labelSlot,
+        descriptionSlot,
+        class: className,
+        ...restProps
+    }: Props = $props()
+
+    const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const autoId = useId()
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const isDisabled = $derived(disabled || loading)
+
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
+    const resolvedIcon = $derived(loading ? loadingIcon : indeterminate ? indeterminateIcon : icon)
+
+    let containerRef: HTMLElement | null = null
+
+    function handleCardClick(e: MouseEvent) {
+        if (isDisabled) return
+        // Don't re-click when the event originated from the checkbox button itself
+        if ((e.target as Element).closest('button')) return
+        containerRef?.querySelector('button')?.click()
+    }
+
+    const classes = $derived.by(() => {
+        const slots = checkboxVariants({
+            color: resolvedColor,
+            size: resolvedSize,
+            variant,
+            indicator,
+            loading,
+            required,
+            disabled: isDisabled ? true : undefined
+        })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            base: slots.base({ class: [config.slots.base, ui?.base] }),
+            container: slots.container({ class: [config.slots.container, ui?.container] }),
+            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+            label: slots.label({ class: [config.slots.label, ui?.label] }),
+            description: slots.description({
+                class: [config.slots.description, ui?.description]
+            })
+        }
+    })
+</script>
+
+<div
+    {...restProps}
+    bind:this={ref}
+    class={classes.root}
+    onclick={variant === 'card' ? handleCardClick : undefined}
+>
+    <div bind:this={containerRef} class={classes.container}>
+        <Checkbox.Root
+            bind:checked
+            onCheckedChange={(val) => {
+                emit.onChange()
+                onCheckedChange?.(val)
+            }}
+            bind:indeterminate
+            {onIndeterminateChange}
+            onblur={() => emit.onBlur()}
+            onfocus={() => emit.onFocus()}
+            id={resolvedId}
+            name={resolvedName}
+            {value}
+            disabled={isDisabled}
+            {required}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={hasError ? true : undefined}
+            class={classes.base}
+        >
+            {#snippet children({ checked: isChecked, indeterminate: isIndeterminate })}
+                {#if isChecked || isIndeterminate || loading}
+                    <span class={classes.indicator}>
+                        {#if resolvedIcon}
+                            <Icon name={resolvedIcon} class={classes.icon} />
+                        {/if}
+                    </span>
+                {/if}
+            {/snippet}
+        </Checkbox.Root>
+    </div>
+
+    {#if label || description || labelSlot || descriptionSlot}
+        <div class={classes.wrapper}>
+            {#if labelSlot}
+                {@render labelSlot({ label })}
+            {:else if label}
+                {#if variant === 'card'}
+                    <span class={classes.label}>{label}</span>
+                {:else}
+                    <Label.Root for={resolvedId} class={classes.label}>
+                        {label}
+                    </Label.Root>
+                {/if}
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot({ description })}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/Checkbox/Checkbox.svelte.d.ts

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