sv5ui 1.6.0 → 1.7.0

package/dist/Calendar/Calendar.svelte

@@ -16,6 +16,7 @@
     import Icon from '../Icon/Icon.svelte'
     import type { DateValue } from '@internationalized/date'
     import type { Month } from 'bits-ui'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('calendar', calendarDefaults)
 
@@ -25,6 +26,8 @@
         onValueChange,
         placeholder = $bindable(),
         onPlaceholderChange,
+        id,
+        name,
         range = false,
         prevMonthIcon = 'lucide:chevron-left',
         nextMonthIcon = 'lucide:chevron-right',
@@ -42,6 +45,7 @@
         weekdayFormat = 'short',
         isDateDisabled,
         isDateUnavailable,
+        isDateHighlightable,
         fixedWeeks = true,
         numberOfMonths = 1,
         calendarLabel,
@@ -59,11 +63,31 @@
         ...restProps
     }: Props = $props()
 
+    const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const resolvedSize = $derived(size ?? formFieldContext?.size)
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
     // Only Cell and Day differ between Calendar & RangeCalendar
     const CalCell = $derived(range ? RangeCalendar.Cell : Calendar.Cell)
     const CalDay = $derived(range ? RangeCalendar.Day : Calendar.Day)
 
-    const variantSlots = $derived(calendarVariants({ color, size, variant, weekNumbers }))
+    const variantSlots = $derived(
+        calendarVariants({ color: resolvedColor, size: resolvedSize, variant, weekNumbers })
+    )
     const classes = $derived({
         root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
         header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
@@ -95,6 +119,7 @@
     }
 
     const commonProps = $derived({
+        id: resolvedId,
         placeholder,
         onPlaceholderChange: (val: DateValue) => {
             placeholder = val
@@ -114,8 +139,18 @@
         calendarLabel,
         locale,
         readonly,
-        disableDaysOutsideMonth
+        disableDaysOutsideMonth,
+        'aria-describedby': ariaDescribedBy,
+        'aria-invalid': hasError ? true : undefined,
+        'data-name': resolvedName,
+        onfocusin: () => emit.onFocus(),
+        onfocusout: () => emit.onBlur()
     })
+
+    function handleValueChange(val: unknown) {
+        ;(onValueChange as ((value: unknown) => void) | undefined)?.(val)
+        emit.onChange()
+    }
 </script>
 
 {#snippet calendarContent(months: Month<DateValue>[], weekdays: string[])}
@@ -203,7 +238,12 @@
                                 <CalCell {date} month={month.value} class={classes.cell}>
                                     <CalDay class={classes.cellTrigger}>
                                         {#snippet child({ props })}
-                                            <span {...props}>
+                                            <span
+                                                {...props}
+                                                data-marked={isDateHighlightable?.(date)
+                                                    ? ''
+                                                    : undefined}
+                                            >
                                                 {#if daySlot}
                                                     {@render daySlot({ day: date })}
                                                 {:else}
@@ -248,7 +288,7 @@
     <RangeCalendar.Root
         bind:ref
         bind:value={value as CalendarRangeProps['value']}
-        onValueChange={onValueChange as CalendarRangeProps['onValueChange']}
+        onValueChange={handleValueChange as CalendarRangeProps['onValueChange']}
         {...commonProps}
         minDays={rp.minDays}
         maxDays={rp.maxDays}
@@ -265,12 +305,14 @@
     {@const calType = (restProps as { type?: 'single' | 'multiple' }).type ?? 'single'}
     {@const calInitialFocus = (restProps as { initialFocus?: boolean }).initialFocus}
     {#if calType === 'multiple'}
+        {@const calMaxDays = (restProps as { maxDays?: number }).maxDays}
         <Calendar.Root
             bind:ref
             bind:value={value as CalendarMultipleProps['value']}
-            onValueChange={onValueChange as CalendarMultipleProps['onValueChange']}
+            onValueChange={handleValueChange as CalendarMultipleProps['onValueChange']}
             {...commonProps}
             type="multiple"
+            maxDays={calMaxDays}
             initialFocus={calInitialFocus}
             class={classes.root}
         >
@@ -282,7 +324,7 @@
         <Calendar.Root
             bind:ref
             bind:value={value as CalendarSingleProps['value']}
-            onValueChange={onValueChange as CalendarSingleProps['onValueChange']}
+            onValueChange={handleValueChange as CalendarSingleProps['onValueChange']}
             {...commonProps}
             type="single"
             initialFocus={calInitialFocus}

package/dist/Calendar/calendar.types.d.ts

@@ -31,6 +31,15 @@ type SharedCalendarRootProps = {
     weekdayFormat?: Intl.DateTimeFormatOptions['weekday'];
     isDateDisabled?: DateMatcher;
     isDateUnavailable?: DateMatcher;
+    /**
+     * Predicate that returns `true` for dates that should be visually marked
+     * (e.g. holidays, events). Marked dates remain selectable; only their
+     * appearance changes. The cell trigger gets a `data-marked` attribute
+     * which the variants render as a small dot indicator.
+     *
+     * Called for every visible cell, so keep it cheap and pure.
+     */
+    isDateHighlightable?: DateMatcher;
     /** @default true */
     fixedWeeks?: boolean;
     /** @default 1 */
@@ -48,6 +57,16 @@ type BaseCalendarProps = {
      * Bindable reference to the root DOM element.
      */
     ref?: HTMLElement | null;
+    /**
+     * The HTML `id` attribute for the root element. Used by a parent
+     * `<FormField>` so the label's `for` attribute can target the calendar.
+     */
+    id?: string;
+    /**
+     * The field name. Used by a parent `<Form>` to look up validation state
+     * for this calendar when wrapped in `<FormField>`.
+     */
+    name?: string;
     /** @default 'lucide:chevron-left' */
     prevMonthIcon?: string;
     /** @default 'lucide:chevron-right' */

package/dist/Calendar/calendar.variants.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const calendarVariants = tv({
     slots: {
-        root: '',
+        root: 'w-fit',
         header: 'flex items-center justify-between',
         body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
         heading: 'text-center font-medium truncate mx-auto',
@@ -19,6 +19,7 @@ export const calendarVariants = tv({
             'data-unavailable:line-through data-unavailable:text-on-surface-variant data-unavailable:pointer-events-none',
             'data-today:font-semibold',
             'data-[outside-month]:text-on-surface-variant',
+            'data-[marked]:after:content-[""] data-[marked]:after:absolute data-[marked]:after:bottom-0.5 data-[marked]:after:left-1/2 data-[marked]:after:-translate-x-1/2 data-[marked]:after:size-1 data-[marked]:after:rounded-full data-[marked]:after:bg-current',
             'transition'
         ],
         cellWeek: 'relative text-center text-on-surface-variant',

package/dist/Carousel/Carousel.svelte

@@ -0,0 +1,279 @@
+<script lang="ts" module>
+    import type { CarouselAutoplayOptions, CarouselProps } from './carousel.types.js'
+
+    export type Props<T = unknown> = CarouselProps<T>
+</script>
+
+<script lang="ts" generics="T = unknown">
+    import useEmblaCarousel from 'embla-carousel-svelte'
+    import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+    import Autoplay from 'embla-carousel-autoplay'
+    import Fade from 'embla-carousel-fade'
+    import ClassNames from 'embla-carousel-class-names'
+    import { untrack } from 'svelte'
+    import { carouselVariants, carouselDefaults } from './carousel.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import Button from '../Button/Button.svelte'
+
+    const config = getComponentConfig('carousel', carouselDefaults)
+
+    let {
+        ref = $bindable(null),
+        api = $bindable<EmblaCarouselType | undefined>(),
+        items,
+        index = $bindable(0),
+        onIndexChange,
+        onSettle,
+        slidesToShow = 1,
+        loop = false,
+        align = 'start',
+        orientation = 'horizontal',
+        draggable = true,
+        dragFree = false,
+        slidesToScroll = 1,
+        autoplay = false,
+        fade = false,
+        classNames = false,
+        breakpoints,
+        plugins: extraPlugins,
+        options: optionsOverride,
+        arrows = true,
+        dots = true,
+        prevIcon,
+        nextIcon,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        variant = config.defaultVariants.variant,
+        class: className,
+        ui,
+        slide: slideSnippet,
+        dot: dotSnippet,
+        prevSlot,
+        nextSlot,
+        children
+    }: Props<T> = $props()
+
+    let selectedIndex = $state(0)
+    let scrollSnaps = $state<number[]>([])
+    let canScrollPrev = $state(false)
+    let canScrollNext = $state(false)
+
+    const resolvedPrevIcon = $derived(
+        prevIcon ?? (orientation === 'vertical' ? 'lucide:chevron-up' : 'lucide:chevron-left')
+    )
+    const resolvedNextIcon = $derived(
+        nextIcon ?? (orientation === 'vertical' ? 'lucide:chevron-down' : 'lucide:chevron-right')
+    )
+
+    function buildAutoplay(opts: CarouselAutoplayOptions) {
+        return Autoplay({
+            delay: opts.delay ?? 4000,
+            stopOnInteraction: opts.stopOnInteraction ?? false,
+            stopOnMouseEnter: opts.stopOnMouseEnter ?? true,
+            stopOnFocusIn: opts.stopOnFocusIn ?? true,
+            stopOnLastSnap: opts.stopOnLastSnap ?? false,
+            playOnInit: opts.playOnInit ?? true
+        })
+    }
+
+    const plugins = $derived.by<EmblaPluginType[]>(() => {
+        const list: EmblaPluginType[] = []
+        if (autoplay) list.push(buildAutoplay(typeof autoplay === 'object' ? autoplay : {}))
+        if (fade) list.push(Fade())
+        if (classNames) list.push(ClassNames())
+        if (extraPlugins) list.push(...extraPlugins)
+        return list
+    })
+
+    const emblaOptions = $derived.by<EmblaOptionsType>(() => ({
+        loop,
+        align,
+        axis: orientation === 'vertical' ? 'y' : 'x',
+        watchDrag: draggable,
+        dragFree,
+        slidesToScroll,
+        breakpoints,
+        ...optionsOverride
+    }))
+
+    const dotIndices = $derived(scrollSnaps.map((_, i) => i))
+
+    function classListHas(cls: unknown, re: RegExp): boolean {
+        if (typeof cls === 'string') return re.test(cls)
+        if (Array.isArray(cls)) return cls.some((c) => classListHas(c, re))
+        return false
+    }
+
+    const userOverridesBasis = $derived(classListHas(ui?.slide, /\bbasis-/))
+    const containerStyle = $derived(
+        orientation === 'vertical'
+            ? 'display: flex; flex-direction: column; touch-action: pan-x;'
+            : 'display: flex; flex-direction: row; touch-action: pan-y;'
+    )
+    const slideStyle = $derived.by(() => {
+        if (userOverridesBasis) return undefined
+        const minDim = orientation === 'vertical' ? 'min-height' : 'min-width'
+        return `flex: 0 0 calc(100% / ${slidesToShow}); ${minDim}: 0;`
+    })
+
+    const variantSlots = $derived(carouselVariants({ orientation, size, color, variant }))
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+        viewport: variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] }),
+        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+        slide: variantSlots.slide({ class: [config.slots.slide, ui?.slide] }),
+        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
+        arrowPrev: variantSlots.arrowPrev({ class: [config.slots.arrowPrev, ui?.arrowPrev] }),
+        arrowNext: variantSlots.arrowNext({ class: [config.slots.arrowNext, ui?.arrowNext] }),
+        dots: variantSlots.dots({ class: [config.slots.dots, ui?.dots] }),
+        dot: variantSlots.dot({ class: [config.slots.dot, ui?.dot] })
+    })
+
+    function syncFromApi(embla: EmblaCarouselType) {
+        const newIndex = embla.selectedScrollSnap()
+        selectedIndex = newIndex
+        scrollSnaps = embla.scrollSnapList()
+        canScrollPrev = embla.canScrollPrev()
+        canScrollNext = embla.canScrollNext()
+        if (newIndex !== index) {
+            index = newIndex
+            onIndexChange?.(newIndex)
+        }
+    }
+
+    function handleEmblaInit(event: CustomEvent<EmblaCarouselType>) {
+        const embla = event.detail
+        api = embla
+        syncFromApi(embla)
+        embla.on('select', () => syncFromApi(embla))
+        embla.on('reInit', () => syncFromApi(embla))
+        if (onSettle) embla.on('settle', () => onSettle(embla))
+    }
+
+    $effect(() => {
+        if (!api) return
+        const desired = index
+        if (desired !== untrack(() => selectedIndex)) {
+            api.scrollTo(desired)
+        }
+    })
+
+    function scrollPrev() {
+        if (!api) return
+        api.scrollPrev()
+        syncFromApi(api)
+    }
+
+    function scrollNext() {
+        if (!api) return
+        api.scrollNext()
+        syncFromApi(api)
+    }
+
+    function scrollTo(i: number) {
+        if (!api) return
+        api.scrollTo(i)
+        syncFromApi(api)
+    }
+</script>
+
+{#snippet defaultPrev()}
+    <Button
+        {color}
+        {size}
+        {variant}
+        icon={resolvedPrevIcon}
+        square
+        disabled={!canScrollPrev}
+        aria-label="Previous slide"
+        class={[classes.arrow, classes.arrowPrev]}
+        onclick={scrollPrev}
+    />
+{/snippet}
+
+{#snippet defaultNext()}
+    <Button
+        {color}
+        {size}
+        {variant}
+        icon={resolvedNextIcon}
+        square
+        disabled={!canScrollNext}
+        aria-label="Next slide"
+        class={[classes.arrow, classes.arrowNext]}
+        onclick={scrollNext}
+    />
+{/snippet}
+
+{#snippet defaultDot(i: number, selected: boolean)}
+    <button
+        type="button"
+        class={classes.dot}
+        data-selected={selected ? '' : undefined}
+        aria-label={`Go to slide ${i + 1}`}
+        aria-current={selected ? 'true' : undefined}
+        onclick={() => scrollTo(i)}
+    ></button>
+{/snippet}
+
+<div
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    style:--sv-slides={slidesToShow}
+>
+    <div
+        class={classes.viewport}
+        use:useEmblaCarousel={{ options: emblaOptions, plugins }}
+        onemblaInit={handleEmblaInit}
+    >
+        <div class={classes.container} style={containerStyle}>
+            {#if items}
+                {#each items as item, i (i)}
+                    <div class={classes.slide} style={slideStyle} data-index={i}>
+                        {#if slideSnippet}
+                            {@render slideSnippet({
+                                item,
+                                index: i,
+                                selected: i === selectedIndex
+                            })}
+                        {:else}
+                            {String(item)}
+                        {/if}
+                    </div>
+                {/each}
+            {:else if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+
+    {#if arrows}
+        {#if prevSlot}
+            {@render prevSlot({ canScroll: canScrollPrev, scroll: scrollPrev })}
+        {:else}
+            {@render defaultPrev()}
+        {/if}
+        {#if nextSlot}
+            {@render nextSlot({ canScroll: canScrollNext, scroll: scrollNext })}
+        {:else}
+            {@render defaultNext()}
+        {/if}
+    {/if}
+
+    {#if dots && scrollSnaps.length > 1}
+        <div class={classes.dots} role="tablist">
+            {#each dotIndices as i (i)}
+                {#if dotSnippet}
+                    {@render dotSnippet({
+                        index: i,
+                        selected: i === selectedIndex,
+                        select: () => scrollTo(i)
+                    })}
+                {:else}
+                    {@render defaultDot(i, i === selectedIndex)}
+                {/if}
+            {/each}
+        </div>
+    {/if}
+</div>

package/dist/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { CarouselProps } from './carousel.types.js';
+export type Props<T = unknown> = CarouselProps<T>;
+declare function $$render<T = unknown>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "ref" | "api" | "index";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "api" | "index";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<T = unknown> = InstanceType<typeof Carousel<T>>;
+export default Carousel;