sv5ui 2.1.0 → 2.3.0

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Tabs } from "bits-ui";
+import { tick, untrack } from "svelte";
+import { tabsVariants, tabsDefaults } from "./tabs.variants.js";
+import { getComponentConfig } from "../../config.js";
+import { useResizeObserver } from "../../hooks/useResizeObserver/index.js";
+import Icon from "../Icon/Icon.svelte";
+const config = getComponentConfig("tabs", tabsDefaults);
+let {
+  ref = $bindable(null),
+  items = [],
+  value = $bindable(),
+  defaultValue,
+  onValueChange,
+  variant = config.defaultVariants.variant ?? "pill",
+  color = config.defaultVariants.color ?? "primary",
+  size = config.defaultVariants.size ?? "md",
+  orientation = config.defaultVariants.orientation ?? "horizontal",
+  activationMode = "automatic",
+  disabled = false,
+  loop = true,
+  content: showContent = true,
+  ui,
+  class: className,
+  leading,
+  label: labelSlot,
+  trailing,
+  body: bodySlot,
+  ...restProps
+} = $props();
+if (value === void 0) {
+  value = untrack(
+    () => defaultValue ?? (items.length > 0 ? items[0].value ?? "0" : void 0)
+  );
+}
+let listEl = $state(null);
+let indicatorStyle = $state("");
+const variantSlots = $derived(tabsVariants({ variant, color, size, orientation }));
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+  list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+  indicator: variantSlots.indicator({
+    class: [config.slots.indicator, ui?.indicator]
+  }),
+  trigger: variantSlots.trigger({ class: [config.slots.trigger, ui?.trigger] }),
+  leadingIcon: variantSlots.leadingIcon({
+    class: [config.slots.leadingIcon, ui?.leadingIcon]
+  }),
+  label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] })
+});
+let rafId = 0;
+function getItemValue(item, index) {
+  return item.value ?? String(index);
+}
+function getTriggerClass(item) {
+  if (!item.ui?.trigger && !item.class) return classes.trigger;
+  return variantSlots.trigger({
+    class: [config.slots.trigger, ui?.trigger, item.ui?.trigger, item.class]
+  });
+}
+function getIconClass(item) {
+  if (!item.ui?.leadingIcon) return classes.leadingIcon;
+  return variantSlots.leadingIcon({
+    class: [config.slots.leadingIcon, ui?.leadingIcon, item.ui?.leadingIcon]
+  });
+}
+function getLabelClass(item) {
+  if (!item.ui?.label) return classes.label;
+  return variantSlots.label({
+    class: [config.slots.label, ui?.label, item.ui?.label]
+  });
+}
+function updateIndicator() {
+  if (!listEl) return;
+  const activeTrigger = listEl.querySelector('[data-state="active"]');
+  if (!activeTrigger) {
+    indicatorStyle = "opacity: 0;";
+    return;
+  }
+  if (orientation === "horizontal") {
+    indicatorStyle = `left: ${activeTrigger.offsetLeft}px; width: ${activeTrigger.offsetWidth}px;`;
+  } else {
+    indicatorStyle = `top: ${activeTrigger.offsetTop}px; height: ${activeTrigger.offsetHeight}px;`;
+  }
+}
+function scheduleIndicatorUpdate() {
+  cancelAnimationFrame(rafId);
+  rafId = requestAnimationFrame(updateIndicator);
+}
+$effect(() => {
+  void value;
+  void orientation;
+  void items;
+  tick().then(updateIndicator);
+});
+useResizeObserver(() => listEl, scheduleIndicatorUpdate);
+$effect(() => () => cancelAnimationFrame(rafId));
+</script>
+
+<Tabs.Root
+    {...restProps}
+    bind:ref
+    bind:value
+    {onValueChange}
+    {orientation}
+    {activationMode}
+    {disabled}
+    {loop}
+    class={classes.root}
+>
+    <Tabs.List bind:ref={listEl} class={classes.list}>
+        <div class={classes.indicator} style={indicatorStyle} aria-hidden="true"></div>
+
+        {#each items as item, index (item.value ?? index)}
+            {@const itemValue = getItemValue(item, index)}
+            {@const active = value === itemValue}
+            <Tabs.Trigger value={itemValue} disabled={item.disabled} class={getTriggerClass(item)}>
+                {#if leading}
+                    {@render leading({ item, index, active })}
+                {:else if item.icon}
+                    <Icon name={item.icon} class={getIconClass(item)} />
+                {/if}
+
+                {#if item.label || labelSlot}
+                    <span class={getLabelClass(item)}>
+                        {#if labelSlot}
+                            {@render labelSlot({ item, index, active })}
+                        {:else}
+                            {item.label}
+                        {/if}
+                    </span>
+                {/if}
+
+                {#if trailing}
+                    {@render trailing({ item, index, active })}
+                {/if}
+            </Tabs.Trigger>
+        {/each}
+    </Tabs.List>
+
+    {#if showContent}
+        {#each items as item, index (item.value ?? index)}
+            {@const itemValue = getItemValue(item, index)}
+            {@const active = value === itemValue}
+            <Tabs.Content value={itemValue} class={classes.content}>
+                {#if bodySlot}
+                    {@render bodySlot({ item, index, active })}
+                {:else if item.content}
+                    {item.content}
+                {/if}
+            </Tabs.Content>
+        {/each}
+    {/if}
+</Tabs.Root>

package/dist/components/Textarea/Textarea.svelte

@@ -0,0 +1,174 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { textareaVariants, textareaDefaults } from "./textarea.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { getContext } from "svelte";
+import {
+  fieldGroupVariantWithRoot
+} from "../FieldGroup/field-group.variants.js";
+import Icon from "../Icon/Icon.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("textarea", textareaDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  ui,
+  id,
+  name,
+  color = config.defaultVariants.color,
+  variant = config.defaultVariants.variant,
+  size,
+  highlight,
+  loading = false,
+  loadingIcon = icons.loading,
+  disabled = false,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  trailing = false,
+  leadingSlot,
+  trailingSlot,
+  autoresize = false,
+  rows = 3,
+  maxrows = 0,
+  class: className,
+  onblur,
+  oninput,
+  onchange,
+  onfocus,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+function handleBlur(event) {
+  emit.onBlur();
+  onblur?.(event);
+}
+function handleInput(event) {
+  emit.onInput();
+  oninput?.(event);
+}
+function handleChange(event) {
+  emit.onChange();
+  onchange?.(event);
+}
+function handleFocus(event) {
+  emit.onFocus();
+  onfocus?.(event);
+}
+const fieldGroupContext = getContext("fieldGroup");
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedSize = $derived(
+  size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
+);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(highlight ?? hasError);
+const fieldGroupClass = $derived(
+  fieldGroupContext ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : void 0
+);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+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 : void 0)
+);
+const trailingIconName = $derived(
+  loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : void 0)
+);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const variantSlots = $derived(
+  textareaVariants({
+    variant,
+    color: resolvedColor,
+    size: resolvedSize,
+    leading: isLeading,
+    trailing: isTrailing,
+    loading,
+    highlight: resolvedHighlight,
+    autoresize
+  })
+);
+const classes = $derived({
+  root: variantSlots.root({
+    class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
+  }),
+  base: variantSlots.base({
+    class: [config.slots.base, fieldGroupClass?.base, ui?.base]
+  }),
+  leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
+  leadingIcon: variantSlots.leadingIcon({
+    class: [config.slots.leadingIcon, ui?.leadingIcon]
+  }),
+  trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+  trailingIcon: variantSlots.trailingIcon({
+    class: [config.slots.trailingIcon, ui?.trailingIcon]
+  })
+});
+let cachedMaxHeight = $state(0);
+$effect(() => {
+  if (!autoresize || !ref || maxrows <= 0) {
+    cachedMaxHeight = 0;
+    return;
+  }
+  const style = window.getComputedStyle(ref);
+  cachedMaxHeight = parseFloat(style.lineHeight) * maxrows + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+});
+$effect(() => {
+  if (!autoresize || !ref) return;
+  void value;
+  ref.style.height = "auto";
+  const scrollHeight = ref.scrollHeight;
+  if (cachedMaxHeight > 0 && scrollHeight > cachedMaxHeight) {
+    ref.style.height = `${cachedMaxHeight}px`;
+    ref.style.overflowY = "auto";
+  } else {
+    ref.style.height = `${scrollHeight}px`;
+    ref.style.overflowY = "hidden";
+  }
+});
+</script>
+
+<div class={classes.root}>
+    {#if leadingSlot}
+        <span class={classes.leading}>
+            {@render leadingSlot()}
+        </span>
+    {:else if isLeading && leadingIconName}
+        <span class={classes.leading}>
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        </span>
+    {/if}
+
+    <textarea
+        {...restProps}
+        bind:this={ref}
+        bind:value
+        {rows}
+        id={resolvedId}
+        name={resolvedName}
+        disabled={disabled || loading}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={resolvedHighlight ? true : undefined}
+        class={classes.base}
+        onblur={handleBlur}
+        oninput={handleInput}
+        onchange={handleChange}
+        onfocus={handleFocus}
+    ></textarea>
+
+    {#if trailingSlot}
+        <span class={classes.trailing}>
+            {@render trailingSlot()}
+        </span>
+    {:else if isTrailing && trailingIconName}
+        <span class={classes.trailing}>
+            <Icon name={trailingIconName} class={classes.trailingIcon} />
+        </span>
+    {/if}
+</div>

package/dist/components/ThemeModeButton/ThemeModeButton.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { toggleMode, mode } from "mode-watcher";
+import {
+  themeModeButtonVariants,
+  themeModeButtonDefaults
+} from "./theme-mode-button.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("themeModeButton", themeModeButtonDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ui,
+  color = config.defaultVariants.color ?? "surface",
+  variant = config.defaultVariants.variant ?? "ghost",
+  size,
+  lightIcon = icons.light,
+  darkIcon = icons.dark,
+  loading = false,
+  disabled = false,
+  square = true,
+  block = false,
+  children,
+  class: className,
+  ...restProps
+} = $props();
+const isDark = $derived(mode.current === "dark");
+const slots = themeModeButtonVariants();
+const baseClass = $derived(slots.base({ class: [config.slots.base, className, ui?.base] }));
+const iconName = $derived(isDark ? lightIcon : darkIcon);
+</script>
+
+{#if children}
+    <Button
+        {color}
+        {variant}
+        {size}
+        {loading}
+        {disabled}
+        {square}
+        {block}
+        class={baseClass}
+        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+        onclick={toggleMode}
+        {...restProps}
+    >
+        {@render children({ isDark })}
+    </Button>
+{:else}
+    <Button
+        {color}
+        {variant}
+        {size}
+        {loading}
+        {disabled}
+        {square}
+        {block}
+        icon={iconName}
+        class={baseClass}
+        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+        onclick={toggleMode}
+        {...restProps}
+    />
+{/if}

package/dist/components/ThemeModeButton/theme-mode-button.types.js

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

package/dist/components/Timeline/Timeline.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { timelineVariants, timelineDefaults } from "./timeline.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Avatar from "../Avatar/Avatar.svelte";
+import Icon from "../Icon/Icon.svelte";
+const config = getComponentConfig("timeline", timelineDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  items = [],
+  size = config.defaultVariants.size,
+  color = config.defaultVariants.color,
+  orientation = config.defaultVariants.orientation,
+  reverse = config.defaultVariants.reverse,
+  value,
+  class: className,
+  ui,
+  indicator,
+  dateSlot,
+  titleSlot,
+  descriptionSlot,
+  content,
+  ...restProps
+} = $props();
+const classes = $derived.by(() => {
+  const slots = timelineVariants({ orientation, color, size, reverse });
+  const c = config.slots;
+  const _item = slots.item({ class: [c.item, ui?.item] });
+  const _container = slots.container({ class: [c.container, ui?.container] });
+  const _indicator = slots.indicator({ class: [c.indicator, ui?.indicator] });
+  const _separator = slots.separator({ class: [c.separator, ui?.separator] });
+  const _wrapper = slots.wrapper({ class: [c.wrapper, ui?.wrapper] });
+  const _date = slots.date({ class: [c.date, ui?.date] });
+  const _title = slots.title({ class: [c.title, ui?.title] });
+  const _description = slots.description({ class: [c.description, ui?.description] });
+  return {
+    root: slots.root({ class: [c.root, className, ui?.root] }),
+    item: (itemClass, itemUi) => itemClass || itemUi ? slots.item({ class: [c.item, ui?.item, itemUi?.item, itemClass] }) : _item,
+    container: (itemUi) => itemUi ? slots.container({ class: [c.container, ui?.container, itemUi.container] }) : _container,
+    indicator: (itemUi) => itemUi ? slots.indicator({ class: [c.indicator, ui?.indicator, itemUi.indicator] }) : _indicator,
+    separator: (itemUi) => itemUi ? slots.separator({ class: [c.separator, ui?.separator, itemUi.separator] }) : _separator,
+    wrapper: (itemUi) => itemUi ? slots.wrapper({ class: [c.wrapper, ui?.wrapper, itemUi.wrapper] }) : _wrapper,
+    date: (itemUi) => itemUi?.date ? slots.date({ class: [c.date, ui?.date, itemUi.date] }) : _date,
+    title: (itemUi) => itemUi?.title ? slots.title({ class: [c.title, ui?.title, itemUi.title] }) : _title,
+    description: (itemUi) => itemUi?.description ? slots.description({
+      class: [c.description, ui?.description, itemUi.description]
+    }) : _description
+  };
+});
+const activeIndex = $derived(
+  value !== void 0 ? items.findIndex((item) => item.value === value) : -1
+);
+function getState(index) {
+  if (activeIndex === -1) return "pending";
+  if (index === activeIndex) return "active";
+  return index < activeIndex ? "completed" : "pending";
+}
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    {#each items as item, index (item.value ?? index)}
+        {@const state = getState(index)}
+        <div class={classes.item(item.class, item.ui)} data-state={state}>
+            <div class={classes.container(item.ui)}>
+                {#if indicator}
+                    {@render indicator({ item, index, state })}
+                {:else}
+                    <div class={classes.indicator(item.ui)}>
+                        {#if item.avatar}
+                            <Avatar {...item.avatar} {size} />
+                        {:else if item.icon}
+                            <Icon name={item.icon} />
+                        {/if}
+                    </div>
+                {/if}
+
+                {#if reverse ? index > 0 : index < items.length - 1}
+                    <div class={classes.separator(item.ui)}></div>
+                {/if}
+            </div>
+
+            <div class={classes.wrapper(item.ui)}>
+                {#if dateSlot}
+                    {@render dateSlot({ item, index, state })}
+                {:else if item.date}
+                    <div class={classes.date(item.ui)}>{item.date}</div>
+                {/if}
+
+                {#if titleSlot}
+                    {@render titleSlot({ item, index, state })}
+                {:else if item.title}
+                    <div class={classes.title(item.ui)}>{item.title}</div>
+                {/if}
+
+                {#if descriptionSlot}
+                    {@render descriptionSlot({ item, index, state })}
+                {:else if item.description}
+                    <div class={classes.description(item.ui)}>{item.description}</div>
+                {/if}
+
+                {#if content}
+                    {@render content({ item, index, state })}
+                {/if}
+            </div>
+        </div>
+    {/each}
+</svelte:element>

package/dist/components/Timeline/timeline.types.js

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

package/dist/{Toast → components/Toast}/Toaster.svelte

@@ -1,29 +1,21 @@
-<script lang="ts" module>
-    import type { ToasterProps } from './toast.types.js'
-
-    export type Props = ToasterProps
-</script>
-
-<script lang="ts">
-    import { Toaster as SonnerToaster } from 'svelte-sonner'
-    import { toastDefaults } from './toast.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('toast', toastDefaults)
-
-    let {
-        variant = config.defaultVariants.variant,
-        position = 'bottom-right',
-        visibleToasts = 3,
-        duration = 5000,
-        closeButton = true,
-        expand = false,
-        gap = 14,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const toasterClass = $derived([`sv5ui-toast-${variant}`, className].filter(Boolean).join(' '))
+<script lang="ts" module></script>
+
+<script lang="ts">import { Toaster as SonnerToaster } from "svelte-sonner";
+import { toastDefaults } from "./toast.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("toast", toastDefaults);
+let {
+  variant = config.defaultVariants.variant,
+  position = "bottom-right",
+  visibleToasts = 3,
+  duration = 5e3,
+  closeButton = true,
+  expand = false,
+  gap = 14,
+  class: className,
+  ...restProps
+} = $props();
+const toasterClass = $derived([`sv5ui-toast-${variant}`, className].filter(Boolean).join(" "));
 </script>
 
 <SonnerToaster

package/dist/components/Toast/toast.types.js

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