sv5ui 2.1.0 → 2.2.0

package/dist/components/AvatarGroup/AvatarGroup.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { avatarGroupVariants, avatarGroupDefaults } from "./avatar-group.variants.js";
+import { getComponentConfig } from "../../config.js";
+import { setContext } from "svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+const config = getComponentConfig("avatarGroup", avatarGroupDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  size = config.defaultVariants.size ?? "md",
+  rounded = config.defaultVariants.rounded ?? "full",
+  avatars,
+  max,
+  class: className,
+  children,
+  ...restProps
+} = $props();
+const classes = $derived.by(() => {
+  const slots = avatarGroupVariants({ size, rounded });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    base: slots.base({ class: [config.slots.base, ui?.base] })
+  };
+});
+setContext("avatarGroup", {
+  get size() {
+    return size;
+  },
+  get rounded() {
+    return rounded;
+  },
+  get baseClass() {
+    return classes.base;
+  }
+});
+const visibleAvatars = $derived.by(() => {
+  if (!avatars) return [];
+  const shown = max && max > 0 ? avatars.slice(0, max) : avatars;
+  return [...shown].reverse();
+});
+const overflowCount = $derived(
+  avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0
+);
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if avatars}
+        {#if overflowCount > 0}
+            <Avatar text={`+${overflowCount}`} />
+        {/if}
+        {#each visibleAvatars as avatar, index (index)}
+            <Avatar {...avatar} />
+        {/each}
+    {:else if children}
+        {@render children()}
+    {/if}
+</svelte:element>

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { badgeVariants, badgeDefaults } from "./badge.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+const config = getComponentConfig("badge", badgeDefaults);
+let {
+  ref = $bindable(null),
+  as = "span",
+  ui,
+  label,
+  color = config.defaultVariants.color,
+  variant = config.defaultVariants.variant,
+  size = config.defaultVariants.size,
+  square = false,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  avatar,
+  class: className,
+  leading,
+  children,
+  trailing,
+  ...restProps
+} = $props();
+const isIconOnly = $derived(!!icon || square && label === void 0 && !children);
+const classes = $derived.by(() => {
+  const slots = badgeVariants({ variant, color, size, square: isIconOnly || square });
+  return {
+    base: slots.base({ class: [config.slots.base, className, ui?.base] }),
+    label: slots.label({ class: [config.slots.label, ui?.label] }),
+    leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+    trailingIcon: slots.trailingIcon({
+      class: [config.slots.trailingIcon, ui?.trailingIcon]
+    }),
+    leadingAvatar: slots.leadingAvatar({
+      class: [config.slots.leadingAvatar, ui?.leadingAvatar]
+    }),
+    leadingAvatarSize: slots.leadingAvatarSize()
+  };
+});
+</script>
+
+<svelte:element this={as} bind:this={ref} class={classes.base} {...restProps}>
+    {#if leading}
+        {@render leading()}
+    {:else if avatar}
+        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+    {:else if leadingIcon}
+        <Icon name={leadingIcon} class={classes.leadingIcon} />
+    {/if}
+
+    {#if icon}
+        <Icon name={icon} class={classes.leadingIcon} />
+    {:else if !isIconOnly}
+        {#if label !== undefined}
+            <span class={classes.label}>{label}</span>
+        {:else if children}
+            <span class={classes.label}>{@render children()}</span>
+        {/if}
+    {/if}
+
+    {#if trailing}
+        {@render trailing()}
+    {:else if trailingIcon}
+        <Icon name={trailingIcon} class={classes.trailingIcon} />
+    {/if}
+</svelte:element>

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

@@ -1,90 +1,76 @@
-<script lang="ts" module>
-    import type { BannerProps } from './banner.types.js'
-
-    export type Props = BannerProps
-</script>
-
-<script lang="ts">
-    import { useId } from 'bits-ui'
-    import { bannerVariants, bannerDefaults } from './banner.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('banner', bannerDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        id,
-        title,
-        icon,
-        color = config.defaultVariants.color,
-        to,
-        target,
-        close = false,
-        closeIcon,
-        actions,
-        open = $bindable(true),
-        onClose,
-        class: className,
-        ui,
-        leading,
-        titleSlot,
-        actionsSlot,
-        closeSlot,
-        ...restProps
-    }: Props = $props()
-
-    const fallbackId = useId('banner-')
-    const effectiveId = $derived(id ?? fallbackId)
-
-    let dismissed = $state(false)
-
-    function storageKey(rawId: string) {
-        return `sv5ui-banner-${rawId.replace(/[^\w-]/g, '-')}`
-    }
-
-    $effect(() => {
-        void open
-        if (!id || typeof window === 'undefined') {
-            dismissed = false
-            return
-        }
-        dismissed = localStorage.getItem(storageKey(id)) === '1'
-    })
-
-    const visible = $derived(open && !dismissed)
-    const isClickable = $derived(!!to)
-    const resolvedCloseIcon = $derived(closeIcon ?? icons.close)
-    const closeButtonProps = $derived(!close ? null : close === true ? {} : close)
-
-    const classes = $derived.by(() => {
-        const slots = bannerVariants({ color, to: isClickable })
-        const c = config.slots
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [c.root, className, u.root] }),
-            container: slots.container({ class: [c.container, u.container] }),
-            left: slots.left({ class: [c.left, u.left] }),
-            center: slots.center({ class: [c.center, u.center] }),
-            right: slots.right({ class: [c.right, u.right] }),
-            icon: slots.icon({ class: [c.icon, u.icon] }),
-            title: slots.title({ class: [c.title, u.title] }),
-            actions: slots.actions({ class: [c.actions, u.actions] }),
-            close: slots.close({ class: [c.close, u.close] })
-        }
-    })
-
-    function handleClose(event?: Event) {
-        event?.stopPropagation()
-        if (id && typeof window !== 'undefined') {
-            localStorage.setItem(storageKey(id), '1')
-        }
-        open = false
-        onClose?.()
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { useId } from "bits-ui";
+import { bannerVariants, bannerDefaults } from "./banner.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("banner", bannerDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  id,
+  title,
+  icon,
+  color = config.defaultVariants.color,
+  to,
+  target,
+  close = false,
+  closeIcon,
+  actions,
+  open = $bindable(true),
+  onClose,
+  class: className,
+  ui,
+  leading,
+  titleSlot,
+  actionsSlot,
+  closeSlot,
+  ...restProps
+} = $props();
+const fallbackId = useId("banner-");
+const effectiveId = $derived(id ?? fallbackId);
+let dismissed = $state(false);
+function storageKey(rawId) {
+  return `sv5ui-banner-${rawId.replace(/[^\w-]/g, "-")}`;
+}
+$effect(() => {
+  void open;
+  if (!id || typeof window === "undefined") {
+    dismissed = false;
+    return;
+  }
+  dismissed = localStorage.getItem(storageKey(id)) === "1";
+});
+const visible = $derived(open && !dismissed);
+const isClickable = $derived(!!to);
+const resolvedCloseIcon = $derived(closeIcon ?? icons.close);
+const closeButtonProps = $derived(!close ? null : close === true ? {} : close);
+const classes = $derived.by(() => {
+  const slots = bannerVariants({ color, to: isClickable });
+  const c = config.slots;
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [c.root, className, u.root] }),
+    container: slots.container({ class: [c.container, u.container] }),
+    left: slots.left({ class: [c.left, u.left] }),
+    center: slots.center({ class: [c.center, u.center] }),
+    right: slots.right({ class: [c.right, u.right] }),
+    icon: slots.icon({ class: [c.icon, u.icon] }),
+    title: slots.title({ class: [c.title, u.title] }),
+    actions: slots.actions({ class: [c.actions, u.actions] }),
+    close: slots.close({ class: [c.close, u.close] })
+  };
+});
+function handleClose(event) {
+  event?.stopPropagation();
+  if (id && typeof window !== "undefined") {
+    localStorage.setItem(storageKey(id), "1");
+  }
+  open = false;
+  onClose?.();
+}
 </script>
 
 {#if visible}

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { breadcrumbVariants, breadcrumbDefaults } from "./breadcrumb.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Link from "../Link/Link.svelte";
+const config = getComponentConfig("breadcrumb", breadcrumbDefaults);
+let {
+  ref = $bindable(null),
+  as = "nav",
+  items,
+  separatorIcon = "lucide:chevron-right",
+  class: className,
+  ui,
+  item: itemSnippet,
+  separator: separatorSnippet,
+  ...restProps
+} = $props();
+const variantSlots = $derived(breadcrumbVariants(config.defaultVariants));
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+  list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+  separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+  separatorIcon: variantSlots.separatorIcon({
+    class: [config.slots.separatorIcon, ui?.separatorIcon]
+  })
+});
+function getLinkClasses(active, disabled, to, itemClass) {
+  const slots = breadcrumbVariants({ ...config.defaultVariants, active, disabled, to });
+  return {
+    item: slots.item({ class: [config.slots.item, ui?.item] }),
+    link: slots.link({ class: [config.slots.link, itemClass, ui?.link] }),
+    linkLeadingIcon: slots.linkLeadingIcon({
+      class: [config.slots.linkLeadingIcon, ui?.linkLeadingIcon]
+    }),
+    linkLabel: slots.linkLabel({ class: [config.slots.linkLabel, ui?.linkLabel] })
+  };
+}
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    aria-label={as === 'nav' ? 'Breadcrumb' : undefined}
+    class={classes.root}
+    {...restProps}
+>
+    <ol class={classes.list}>
+        {#each items as item, index (item.label ?? index)}
+            {@const active = index === items.length - 1}
+            {@const disabled = item.disabled ?? false}
+            {@const itemClasses = getLinkClasses(active, disabled, !!item.href, item.class)}
+
+            <li class={itemClasses.item}>
+                {#if itemSnippet}
+                    {@render itemSnippet({ item, index, active })}
+                {:else if active || !item.href}
+                    <span class={itemClasses.link} aria-current={active ? 'page' : undefined}>
+                        {#if item.icon}
+                            <Icon name={item.icon} class={itemClasses.linkLeadingIcon} />
+                        {/if}
+                        <span class={itemClasses.linkLabel}>{item.label}</span>
+                    </span>
+                {:else}
+                    <Link href={item.href} raw {disabled} class={itemClasses.link}>
+                        {#if item.icon}
+                            <Icon name={item.icon} class={itemClasses.linkLeadingIcon} />
+                        {/if}
+                        <span class={itemClasses.linkLabel}>{item.label}</span>
+                    </Link>
+                {/if}
+            </li>
+
+            {#if index < items.length - 1}
+                <li role="presentation" aria-hidden="true" class={classes.separator}>
+                    {#if separatorSnippet}
+                        {@render separatorSnippet()}
+                    {:else}
+                        <Icon name={separatorIcon} class={classes.separatorIcon} />
+                    {/if}
+                </li>
+            {/if}
+        {/each}
+    </ol>
+</svelte:element>

package/dist/components/Button/Button.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { buttonVariants, buttonDefaults } from "./button.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { getContext } from "svelte";
+import { fieldGroupVariant } from "../FieldGroup/field-group.variants.js";
+import Icon from "../Icon/Icon.svelte";
+import Avatar from "../Avatar/Avatar.svelte";
+import Link from "../Link/Link.svelte";
+const config = getComponentConfig("button", buttonDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  ui,
+  color = config.defaultVariants.color,
+  variant = config.defaultVariants.variant,
+  size,
+  label,
+  loading = false,
+  loadingAuto = false,
+  loadingIcon = icons.loading,
+  disabled = false,
+  block = false,
+  square = false,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  trailing = false,
+  avatar,
+  href,
+  type,
+  external,
+  active,
+  exact = false,
+  activeColor,
+  activeVariant,
+  activeClass,
+  inactiveClass,
+  leadingSlot,
+  trailingSlot,
+  children,
+  class: className,
+  onclick,
+  ...restProps
+} = $props();
+const fieldGroupContext = getContext("fieldGroup");
+const resolvedSize = $derived(size ?? fieldGroupContext?.size ?? config.defaultVariants.size);
+const fieldGroupClass = $derived(
+  fieldGroupContext ? fieldGroupVariant.fieldGroup[fieldGroupContext.orientation ?? "horizontal"] : void 0
+);
+let autoLoading = $state(false);
+let pendingPromise = null;
+const isLoading = $derived(loading || autoLoading);
+const isIconOnly = $derived(square || !label && !children);
+const isLeading = $derived(!!icon && !trailing || isLoading && !trailing || !!leadingIcon);
+const isTrailing = $derived(!!icon && trailing || isLoading && trailing || !!trailingIcon);
+const spinLeading = $derived(isLoading && !trailing);
+const spinTrailing = $derived(isLoading && trailing);
+const leadingIconName = $derived(
+  spinLeading ? loadingIcon : leadingIcon || (!trailing ? icon : void 0)
+);
+const trailingIconName = $derived(
+  spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : void 0)
+);
+const resolvedColor = $derived(active && activeColor ? activeColor : color);
+const resolvedVariant = $derived(active && activeVariant ? activeVariant : variant);
+const classes = $derived.by(() => {
+  const slots = buttonVariants({
+    variant: resolvedVariant,
+    color: resolvedColor,
+    size: resolvedSize,
+    block,
+    square: isIconOnly,
+    loading: isLoading,
+    leading: spinLeading,
+    trailing: spinTrailing
+  });
+  return {
+    base: slots.base({ class: [config.slots.base, fieldGroupClass, className, ui?.base] }),
+    label: slots.label({ class: [config.slots.label, ui?.label] }),
+    leadingIcon: slots.leadingIcon({ class: [config.slots.leadingIcon, ui?.leadingIcon] }),
+    trailingIcon: slots.trailingIcon({
+      class: [config.slots.trailingIcon, ui?.trailingIcon]
+    }),
+    leadingAvatar: slots.leadingAvatar({
+      class: [config.slots.leadingAvatar, ui?.leadingAvatar]
+    }),
+    leadingAvatarSize: slots.leadingAvatarSize()
+  };
+});
+function handleClick(e) {
+  if (disabled || isLoading) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+  if (typeof onclick === "function") {
+    const result = onclick(e);
+    if (loadingAuto && result instanceof Promise) {
+      autoLoading = true;
+      pendingPromise = result;
+      result.then(
+        () => {
+          if (pendingPromise === result) autoLoading = false;
+        },
+        () => {
+          if (pendingPromise === result) autoLoading = false;
+        }
+      );
+    }
+  }
+}
+</script>
+
+<Link
+    {...restProps}
+    bind:ref
+    {href}
+    {type}
+    {external}
+    {active}
+    {exact}
+    {activeClass}
+    {inactiveClass}
+    raw
+    disabled={disabled || isLoading}
+    class={classes.base}
+    onclick={handleClick}
+>
+    {#if leadingSlot}
+        {@render leadingSlot()}
+    {:else if isLeading && leadingIconName}
+        <Icon name={leadingIconName} class={classes.leadingIcon} />
+    {:else if avatar}
+        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+    {/if}
+
+    {#if label}
+        <span class={classes.label}>{label}</span>
+    {:else if children}
+        <span class={classes.label}>{@render children()}</span>
+    {/if}
+
+    {#if trailingSlot}
+        {@render trailingSlot()}
+    {:else if isTrailing && trailingIconName}
+        <Icon name={trailingIconName} class={classes.trailingIcon} />
+    {/if}
+</Link>