svelora 2.1.0

package/dist/Checkbox/checkbox.variants.js

@@ -0,0 +1,209 @@
+import { tv } from 'tailwind-variants';
+export const checkboxVariants = tv({
+    slots: {
+        root: 'relative flex items-start',
+        base: [
+            'inline-flex items-center justify-center shrink-0 rounded-md border',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200',
+            'border-outline-variant',
+            'data-[state=unchecked]:bg-transparent'
+        ],
+        container: 'flex items-center',
+        indicator: 'flex items-center justify-center',
+        icon: 'shrink-0 text-surface',
+        wrapper: '',
+        label: 'block font-medium text-on-surface',
+        description: 'text-on-surface-variant'
+    },
+    variants: {
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                base: 'size-3.5 rounded',
+                container: 'h-4',
+                icon: 'size-2.5',
+                wrapper: 'text-xs'
+            },
+            sm: {
+                base: 'size-4 rounded',
+                container: 'h-4',
+                icon: 'size-3',
+                wrapper: 'text-xs'
+            },
+            md: {
+                base: 'size-4.5 rounded-md',
+                container: 'h-5',
+                icon: 'size-3.5',
+                wrapper: 'text-sm'
+            },
+            lg: {
+                base: 'size-5 rounded-md',
+                container: 'h-5',
+                icon: 'size-4',
+                wrapper: 'text-sm'
+            },
+            xl: {
+                base: 'size-5.5 rounded-md',
+                container: 'h-6',
+                icon: 'size-4.5',
+                wrapper: 'text-base'
+            }
+        },
+        variant: {
+            list: '',
+            card: {
+                root: 'border border-outline-variant rounded-lg cursor-pointer select-none'
+            }
+        },
+        indicator: {
+            start: {
+                wrapper: 'ms-2'
+            },
+            end: {
+                root: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                container: 'sr-only'
+            }
+        },
+        loading: {
+            true: {
+                icon: 'animate-spin'
+            }
+        },
+        required: {
+            true: {
+                label: "after:content-['*'] after:ms-0.5 after:text-error"
+            }
+        },
+        disabled: {
+            true: {
+                root: 'opacity-75',
+                base: 'cursor-not-allowed',
+                label: 'cursor-not-allowed',
+                description: 'cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== COLOR (checked bg + border + focus ring) ==========
+        {
+            color: 'primary',
+            class: {
+                base: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary focus-visible:outline-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            class: {
+                base: 'data-[state=checked]:bg-secondary data-[state=checked]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:border-secondary focus-visible:outline-secondary'
+            }
+        },
+        {
+            color: 'tertiary',
+            class: {
+                base: 'data-[state=checked]:bg-tertiary data-[state=checked]:border-tertiary data-[state=indeterminate]:bg-tertiary data-[state=indeterminate]:border-tertiary focus-visible:outline-tertiary'
+            }
+        },
+        {
+            color: 'success',
+            class: {
+                base: 'data-[state=checked]:bg-success data-[state=checked]:border-success data-[state=indeterminate]:bg-success data-[state=indeterminate]:border-success focus-visible:outline-success'
+            }
+        },
+        {
+            color: 'warning',
+            class: {
+                base: 'data-[state=checked]:bg-warning data-[state=checked]:border-warning data-[state=indeterminate]:bg-warning data-[state=indeterminate]:border-warning focus-visible:outline-warning'
+            }
+        },
+        {
+            color: 'error',
+            class: {
+                base: 'data-[state=checked]:bg-error data-[state=checked]:border-error data-[state=indeterminate]:bg-error data-[state=indeterminate]:border-error focus-visible:outline-error'
+            }
+        },
+        {
+            color: 'info',
+            class: {
+                base: 'data-[state=checked]:bg-info data-[state=checked]:border-info data-[state=indeterminate]:bg-info data-[state=indeterminate]:border-info focus-visible:outline-info'
+            }
+        },
+        {
+            color: 'surface',
+            class: {
+                base: 'data-[state=checked]:bg-on-surface data-[state=checked]:border-on-surface data-[state=indeterminate]:bg-on-surface data-[state=indeterminate]:border-on-surface focus-visible:outline-outline'
+            }
+        },
+        // ========== CARD × SIZE (padding) ==========
+        { variant: 'card', size: 'xs', class: { root: 'p-2' } },
+        { variant: 'card', size: 'sm', class: { root: 'p-2.5' } },
+        { variant: 'card', size: 'md', class: { root: 'p-3' } },
+        { variant: 'card', size: 'lg', class: { root: 'p-3.5' } },
+        { variant: 'card', size: 'xl', class: { root: 'p-4' } },
+        // ========== CARD × COLOR (checked border) ==========
+        {
+            variant: 'card',
+            color: 'primary',
+            class: { root: 'has-[[data-state=checked]]:border-primary' }
+        },
+        {
+            variant: 'card',
+            color: 'secondary',
+            class: { root: 'has-[[data-state=checked]]:border-secondary' }
+        },
+        {
+            variant: 'card',
+            color: 'tertiary',
+            class: { root: 'has-[[data-state=checked]]:border-tertiary' }
+        },
+        {
+            variant: 'card',
+            color: 'success',
+            class: { root: 'has-[[data-state=checked]]:border-success' }
+        },
+        {
+            variant: 'card',
+            color: 'warning',
+            class: { root: 'has-[[data-state=checked]]:border-warning' }
+        },
+        {
+            variant: 'card',
+            color: 'error',
+            class: { root: 'has-[[data-state=checked]]:border-error' }
+        },
+        {
+            variant: 'card',
+            color: 'info',
+            class: { root: 'has-[[data-state=checked]]:border-info' }
+        },
+        {
+            variant: 'card',
+            color: 'surface',
+            class: { root: 'has-[[data-state=checked]]:border-on-surface' }
+        },
+        // ========== CARD × DISABLED ==========
+        { variant: 'card', disabled: true, class: { root: 'cursor-not-allowed' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        size: 'md',
+        variant: 'list',
+        indicator: 'start'
+    }
+});
+export const checkboxDefaults = {
+    defaultVariants: checkboxVariants.defaultVariants,
+    slots: {}
+};

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export type { CheckboxProps } from './checkbox.types.js';

package/dist/Checkbox/index.js

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

package/dist/CheckboxGroup/CheckboxGroup.svelte

@@ -0,0 +1,219 @@
+<script lang="ts" module>
+    import type { CheckboxGroupProps } from './checkbox-group.types.js'
+
+    export type Props = CheckboxGroupProps
+</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 type { CheckboxGroupItem } from './checkbox-group.types.js'
+    import { checkboxGroupDefaults, checkboxGroupVariants } from './checkbox-group.variants.js'
+
+    const config = getComponentConfig('checkboxGroup', checkboxGroupDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        value = $bindable([]),
+        onValueChange,
+        items = [],
+        ui,
+        id,
+        name,
+        color = config.defaultVariants.color,
+        size,
+        variant = config.defaultVariants.variant,
+        indicator = config.defaultVariants.indicator,
+        orientation = config.defaultVariants.orientation,
+        disabled = false,
+        required = false,
+        loading = false,
+        loadingIcon = icons.loading,
+        icon = icons.check,
+        legend,
+        legendSlot,
+        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 slots = $derived(
+        checkboxGroupVariants({
+            color: resolvedColor,
+            size: resolvedSize,
+            variant,
+            indicator,
+            orientation,
+            loading,
+            required,
+            disabled: isDisabled ? true : undefined
+        })
+    )
+
+    const layoutClasses = $derived.by(() => ({
+        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+        fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
+        legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
+        item: slots.item({ class: [config.slots.item, ui?.item] }),
+        container: slots.container({ class: [config.slots.container, ui?.container] }),
+        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
+    }))
+
+    const elementClasses = $derived.by(() => ({
+        base: slots.base({ class: [config.slots.base, ui?.base] }),
+        indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+        icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+        label: slots.label({ class: [config.slots.label, ui?.label] }),
+        description: slots.description({ class: [config.slots.description, ui?.description] })
+    }))
+
+    function toggleItem(itemValue: string, checked: boolean) {
+        if (checked) {
+            value = [...value, itemValue]
+        } else {
+            value = value.filter((v) => v !== itemValue)
+        }
+        emit.onChange()
+        onValueChange?.(value)
+    }
+
+    function handleCardItemClick(e: MouseEvent, btnId: string, itemDisabled: boolean) {
+        if (itemDisabled) return
+        if ((e.target as Element).closest('button')) return
+        document.getElementById(btnId)?.click()
+    }
+</script>
+
+{#snippet itemContent(checkboxItem: CheckboxGroupItem)}
+    {@const itemId = `${resolvedId}-${checkboxItem.value}`}
+    {@const itemDisabled = isDisabled || !!checkboxItem.disabled}
+    <div class={layoutClasses.container}>
+        <Checkbox.Root
+            checked={value.includes(checkboxItem.value)}
+            onCheckedChange={(checked) => toggleItem(checkboxItem.value, checked)}
+            id={itemId}
+            name={resolvedName}
+            value={checkboxItem.value}
+            disabled={itemDisabled}
+            class={elementClasses.base}
+        >
+            {#snippet children({ checked: isChecked })}
+                {#if isChecked || loading}
+                    <span class={elementClasses.indicator}>
+                        <Icon name={loading ? loadingIcon : icon} class={elementClasses.icon} />
+                    </span>
+                {/if}
+            {/snippet}
+        </Checkbox.Root>
+    </div>
+
+    {#if checkboxItem.label || checkboxItem.description || labelSlot || descriptionSlot}
+        <div class={layoutClasses.wrapper}>
+            {#if labelSlot}
+                {@render labelSlot({ item: checkboxItem })}
+            {:else if checkboxItem.label}
+                {#if variant === 'card'}
+                    <span
+                        class={[elementClasses.label, itemDisabled && 'cursor-not-allowed']
+                            .filter(Boolean)
+                            .join(' ')}>{checkboxItem.label}</span
+                    >
+                {:else}
+                    <Label.Root
+                        for={itemId}
+                        class={[elementClasses.label, itemDisabled && 'cursor-not-allowed']
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
+                        {checkboxItem.label}
+                    </Label.Root>
+                {/if}
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot({ item: checkboxItem })}
+            {:else if checkboxItem.description}
+                <p
+                    class={[elementClasses.description, itemDisabled && 'cursor-not-allowed']
+                        .filter(Boolean)
+                        .join(' ')}
+                >
+                    {checkboxItem.description}
+                </p>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+<div {...restProps} bind:this={ref} class={layoutClasses.root}>
+    <fieldset
+        class={layoutClasses.fieldset}
+        aria-describedby={ariaDescribedBy}
+        onfocusin={() => emit.onFocus()}
+        onfocusout={(e) => {
+            // Only emit blur when focus leaves the fieldset entirely, not when
+            // moving between checkboxes within the group.
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                emit.onBlur()
+            }
+        }}
+    >
+        {#if legend || legendSlot}
+            {#if legendSlot}
+                {@render legendSlot({ legend })}
+            {:else}
+                <legend class={layoutClasses.legend}>{legend}</legend>
+            {/if}
+        {/if}
+
+        {#each items as checkboxItem (checkboxItem.value)}
+            {#if variant === 'card'}
+                <div
+                    role="none"
+                    class={layoutClasses.item}
+                    class:opacity-75={checkboxItem.disabled && !isDisabled}
+                    onclick={(e) =>
+                        handleCardItemClick(
+                            e,
+                            `${resolvedId}-${checkboxItem.value}`,
+                            isDisabled || !!checkboxItem.disabled
+                        )}
+                >
+                    {@render itemContent(checkboxItem)}
+                </div>
+            {:else}
+                <div
+                    class={layoutClasses.item}
+                    class:opacity-75={checkboxItem.disabled && !isDisabled}
+                >
+                    {@render itemContent(checkboxItem)}
+                </div>
+            {/if}
+        {/each}
+    </fieldset>
+</div>

package/dist/CheckboxGroup/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CheckboxGroupProps } from './checkbox-group.types.js';
+export type Props = CheckboxGroupProps;
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value" | "ref">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/CheckboxGroup/checkbox-group.types.d.ts

@@ -0,0 +1,130 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CheckboxGroupSlots, CheckboxGroupVariantProps } from './checkbox-group.variants.js';
+export type CheckboxGroupItem = {
+    /**
+     * The unique value for this checkbox item.
+     */
+    value: string;
+    /**
+     * Label text displayed next to the checkbox.
+     */
+    label?: string;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * Whether this individual checkbox item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type CheckboxGroupProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The list of selected values. Supports two-way binding with `bind:value`.
+     * @default []
+     */
+    value?: string[];
+    /**
+     * Callback when the selected values change.
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * The list of checkbox items to render.
+     */
+    items?: CheckboxGroupItem[];
+    /**
+     * Sets the color scheme for the checkboxes.
+     * @default 'primary'
+     */
+    color?: NonNullable<CheckboxGroupVariantProps['color']>;
+    /**
+     * Controls the dimensions of the checkbox group.
+     * @default 'md'
+     */
+    size?: NonNullable<CheckboxGroupVariantProps['size']>;
+    /**
+     * Controls the visual style of each checkbox item.
+     * @default 'list'
+     */
+    variant?: NonNullable<CheckboxGroupVariantProps['variant']>;
+    /**
+     * Controls the position of the checkbox indicator.
+     * @default 'start'
+     */
+    indicator?: NonNullable<CheckboxGroupVariantProps['indicator']>;
+    /**
+     * Controls the layout direction of the items.
+     * @default 'vertical'
+     */
+    orientation?: NonNullable<CheckboxGroupVariantProps['orientation']>;
+    /**
+     * The name attribute for the checkbox inputs (used in form submission).
+     */
+    name?: string;
+    /**
+     * Whether the checkbox group is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox group is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Renders a loading spinner and disables interaction.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon displayed as the loading indicator.
+     * @default Uses `icons.loading` from app config
+     */
+    loadingIcon?: string;
+    /**
+     * Icon displayed when a checkbox is checked.
+     * @default Uses `icons.check` from app config
+     */
+    icon?: string;
+    /**
+     * Legend text displayed above the checkbox group.
+     */
+    legend?: string;
+    /**
+     * The HTML id attribute for the checkbox group.
+     */
+    id?: string;
+    /**
+     * Custom snippet for the legend.
+     */
+    legendSlot?: Snippet<[{
+        legend?: string;
+    }]>;
+    /**
+     * Custom snippet for each item's label.
+     */
+    labelSlot?: Snippet<[{
+        item: CheckboxGroupItem;
+    }]>;
+    /**
+     * Custom snippet for each item's description.
+     */
+    descriptionSlot?: Snippet<[{
+        item: CheckboxGroupItem;
+    }]>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific checkbox group slots.
+     */
+    ui?: Partial<Record<CheckboxGroupSlots, ClassNameValue>>;
+};

package/dist/CheckboxGroup/checkbox-group.types.js

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