sv5ui 2.1.0 → 2.3.0

package/dist/{Calendar → components/Calendar}/Calendar.svelte

@@ -1,169 +1,143 @@
-<script lang="ts" module>
-    import type {
-        CalendarProps,
-        CalendarRangeProps,
-        CalendarSingleProps,
-        CalendarMultipleProps
-    } from './calendar.types.js'
-
-    export type Props = CalendarProps
-</script>
-
-<script lang="ts">
-    import { Calendar, RangeCalendar } from 'bits-ui'
-    import { calendarVariants, calendarDefaults } from './calendar.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { type DateValue, today, getLocalTimeZone } from '@internationalized/date'
-    import type { Month } from 'bits-ui'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('calendar', calendarDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        onValueChange,
-        placeholder = $bindable(),
-        onPlaceholderChange,
-        id,
-        name,
-        range = false,
-        prevMonthIcon = 'lucide:chevron-left',
-        nextMonthIcon = 'lucide:chevron-right',
-        prevYearIcon = 'lucide:chevrons-left',
-        nextYearIcon = 'lucide:chevrons-right',
-        monthControls = true,
-        yearControls = true,
-        weekNumbers = false,
-        preventDeselect = false,
-        minValue,
-        maxValue,
-        disabled = false,
-        pagedNavigation = false,
-        weekStartsOn = 0,
-        weekdayFormat = 'short',
-        isDateDisabled,
-        isDateUnavailable,
-        isDateHighlightable,
-        fixedWeeks = true,
-        numberOfMonths = 1,
-        calendarLabel,
-        locale = 'en',
-        readonly = false,
-        disableDaysOutsideMonth = false,
-        color = config.defaultVariants.color ?? 'primary',
-        size = config.defaultVariants.size ?? 'md',
-        variant = config.defaultVariants.variant ?? 'solid',
-        ui,
-        class: className,
-        heading: headingSlot,
-        day: daySlot,
-        weekDay: weekDaySlot,
-        ...restProps
-    }: Props = $props()
-
-    function firstDateOf(val: unknown): DateValue | undefined {
-        if (!val) return undefined
-        if (Array.isArray(val)) return val[0] as DateValue | undefined
-        if (typeof val === 'object' && 'start' in val) {
-            return (val as { start?: DateValue }).start
-        }
-        return val as DateValue
-    }
-
-    if (placeholder === undefined) {
-        placeholder = firstDateOf(value) ?? today(getLocalTimeZone())
-    }
-
-    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: 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] }),
-        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
-        heading: variantSlots.heading({ class: [config.slots.heading, ui?.heading] }),
-        navButton: variantSlots.navButton({ class: [config.slots.navButton, ui?.navButton] }),
-        navButtonIcon: variantSlots.navButtonIcon({
-            class: [config.slots.navButtonIcon, ui?.navButtonIcon]
-        }),
-        grid: variantSlots.grid({ class: [config.slots.grid, ui?.grid] }),
-        gridWeekDaysRow: variantSlots.gridWeekDaysRow({
-            class: [config.slots.gridWeekDaysRow, ui?.gridWeekDaysRow]
-        }),
-        gridBody: variantSlots.gridBody({ class: [config.slots.gridBody, ui?.gridBody] }),
-        gridRow: variantSlots.gridRow({ class: [config.slots.gridRow, ui?.gridRow] }),
-        headCell: variantSlots.headCell({ class: [config.slots.headCell, ui?.headCell] }),
-        headCellWeek: variantSlots.headCellWeek({
-            class: [config.slots.headCellWeek, ui?.headCellWeek]
-        }),
-        cell: variantSlots.cell({ class: [config.slots.cell, ui?.cell] }),
-        cellTrigger: variantSlots.cellTrigger({
-            class: [config.slots.cellTrigger, ui?.cellTrigger]
-        }),
-        cellWeek: variantSlots.cellWeek({ class: [config.slots.cellWeek, ui?.cellWeek] })
-    })
-
-    function paginateYear(date: DateValue, sign: -1 | 1): DateValue {
-        return sign === -1 ? date.subtract({ years: 1 }) : date.add({ years: 1 })
-    }
-
-    const commonProps = $derived({
-        id: resolvedId,
-        placeholder,
-        onPlaceholderChange: (val: DateValue) => {
-            placeholder = val
-            onPlaceholderChange?.(val)
-        },
-        preventDeselect,
-        minValue,
-        maxValue,
-        disabled,
-        pagedNavigation,
-        weekStartsOn,
-        weekdayFormat,
-        isDateDisabled,
-        isDateUnavailable,
-        fixedWeeks,
-        numberOfMonths,
-        calendarLabel,
-        locale,
-        readonly,
-        disableDaysOutsideMonth,
-        'aria-describedby': ariaDescribedBy,
-        'aria-invalid': hasError ? true : undefined,
-        'data-name': resolvedName,
-        onfocusin: () => emit.onFocus(),
-        onfocusout: () => emit.onBlur()
-    })
+<script lang="ts" module></script>
 
-    function handleValueChange(val: unknown) {
-        ;(onValueChange as ((value: unknown) => void) | undefined)?.(val)
-        emit.onChange()
-    }
+<script lang="ts">import { Calendar, RangeCalendar } from "bits-ui";
+import { calendarVariants, calendarDefaults } from "./calendar.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { today, getLocalTimeZone } from "@internationalized/date";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("calendar", calendarDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  onValueChange,
+  placeholder = $bindable(),
+  onPlaceholderChange,
+  id,
+  name,
+  range = false,
+  prevMonthIcon = "lucide:chevron-left",
+  nextMonthIcon = "lucide:chevron-right",
+  prevYearIcon = "lucide:chevrons-left",
+  nextYearIcon = "lucide:chevrons-right",
+  monthControls = true,
+  yearControls = true,
+  weekNumbers = false,
+  preventDeselect = false,
+  minValue,
+  maxValue,
+  disabled = false,
+  pagedNavigation = false,
+  weekStartsOn = 0,
+  weekdayFormat = "short",
+  isDateDisabled,
+  isDateUnavailable,
+  isDateHighlightable,
+  fixedWeeks = true,
+  numberOfMonths = 1,
+  calendarLabel,
+  locale = "en",
+  readonly = false,
+  disableDaysOutsideMonth = false,
+  color = config.defaultVariants.color ?? "primary",
+  size = config.defaultVariants.size ?? "md",
+  variant = config.defaultVariants.variant ?? "solid",
+  ui,
+  class: className,
+  heading: headingSlot,
+  day: daySlot,
+  weekDay: weekDaySlot,
+  ...restProps
+} = $props();
+function firstDateOf(val) {
+  if (!val) return void 0;
+  if (Array.isArray(val)) return val[0];
+  if (typeof val === "object" && "start" in val) {
+    return val.start;
+  }
+  return val;
+}
+if (placeholder === void 0) {
+  placeholder = firstDateOf(value) ?? today(getLocalTimeZone());
+}
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && 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 ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const CalCell = $derived(range ? RangeCalendar.Cell : Calendar.Cell);
+const CalDay = $derived(range ? RangeCalendar.Day : Calendar.Day);
+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] }),
+  body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+  heading: variantSlots.heading({ class: [config.slots.heading, ui?.heading] }),
+  navButton: variantSlots.navButton({ class: [config.slots.navButton, ui?.navButton] }),
+  navButtonIcon: variantSlots.navButtonIcon({
+    class: [config.slots.navButtonIcon, ui?.navButtonIcon]
+  }),
+  grid: variantSlots.grid({ class: [config.slots.grid, ui?.grid] }),
+  gridWeekDaysRow: variantSlots.gridWeekDaysRow({
+    class: [config.slots.gridWeekDaysRow, ui?.gridWeekDaysRow]
+  }),
+  gridBody: variantSlots.gridBody({ class: [config.slots.gridBody, ui?.gridBody] }),
+  gridRow: variantSlots.gridRow({ class: [config.slots.gridRow, ui?.gridRow] }),
+  headCell: variantSlots.headCell({ class: [config.slots.headCell, ui?.headCell] }),
+  headCellWeek: variantSlots.headCellWeek({
+    class: [config.slots.headCellWeek, ui?.headCellWeek]
+  }),
+  cell: variantSlots.cell({ class: [config.slots.cell, ui?.cell] }),
+  cellTrigger: variantSlots.cellTrigger({
+    class: [config.slots.cellTrigger, ui?.cellTrigger]
+  }),
+  cellWeek: variantSlots.cellWeek({ class: [config.slots.cellWeek, ui?.cellWeek] })
+});
+function paginateYear(date, sign) {
+  return sign === -1 ? date.subtract({ years: 1 }) : date.add({ years: 1 });
+}
+const commonProps = $derived({
+  id: resolvedId,
+  placeholder,
+  onPlaceholderChange: (val) => {
+    placeholder = val;
+    onPlaceholderChange?.(val);
+  },
+  preventDeselect,
+  minValue,
+  maxValue,
+  disabled,
+  pagedNavigation,
+  weekStartsOn,
+  weekdayFormat,
+  isDateDisabled,
+  isDateUnavailable,
+  fixedWeeks,
+  numberOfMonths,
+  calendarLabel,
+  locale,
+  readonly,
+  disableDaysOutsideMonth,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": hasError ? true : void 0,
+  "data-name": resolvedName,
+  onfocusin: () => emit.onFocus(),
+  onfocusout: () => emit.onBlur()
+});
+function handleValueChange(val) {
+  ;
+  onValueChange?.(val);
+  emit.onChange();
+}
 </script>
 
 {#snippet calendarContent(months: Month<DateValue>[], weekdays: string[])}

package/dist/components/Card/Card.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { cardVariants, cardDefaults } from "./card.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("card", cardDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  variant = config.defaultVariants.variant,
+  class: className,
+  header,
+  children,
+  footer,
+  ...restProps
+} = $props();
+const classes = $derived.by(() => {
+  const slots = cardVariants({ variant });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    header: slots.header({ class: [config.slots.header, ui?.header] }),
+    body: slots.body({ class: [config.slots.body, ui?.body] }),
+    footer: slots.footer({ class: [config.slots.footer, ui?.footer] })
+  };
+});
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if header}
+        <div class={classes.header}>
+            {@render header()}
+        </div>
+    {/if}
+
+    {#if children}
+        <div class={classes.body}>
+            {@render children()}
+        </div>
+    {/if}
+
+    {#if footer}
+        <div class={classes.footer}>
+            {@render footer()}
+        </div>
+    {/if}
+</svelte:element>

package/dist/components/Carousel/Carousel.svelte

@@ -0,0 +1,254 @@
+<script lang="ts" module></script>
+
+<script lang="ts" generics="T = unknown">import useEmblaCarousel from "embla-carousel-svelte";
+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(),
+  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();
+let selectedIndex = $state(0);
+let scrollSnaps = $state([]);
+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) {
+  return Autoplay({
+    delay: opts.delay ?? 4e3,
+    stopOnInteraction: opts.stopOnInteraction ?? false,
+    stopOnMouseEnter: opts.stopOnMouseEnter ?? true,
+    stopOnFocusIn: opts.stopOnFocusIn ?? true,
+    stopOnLastSnap: opts.stopOnLastSnap ?? false,
+    playOnInit: opts.playOnInit ?? true
+  });
+}
+const plugins = $derived.by(() => {
+  const list = [];
+  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(() => ({
+  loop,
+  align,
+  axis: orientation === "vertical" ? "y" : "x",
+  watchDrag: draggable,
+  dragFree,
+  slidesToScroll,
+  breakpoints,
+  ...optionsOverride
+}));
+const dotIndices = $derived(scrollSnaps.map((_, i) => i));
+function classListHas(cls, re) {
+  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 void 0;
+  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) {
+  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) {
+  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) {
+  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>