@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/primitives/Button/Button.svelte

@@ -1,278 +1,278 @@
-<script lang="ts">
-  /**
-   * Button Component - Flowbite Native (Pure Tailwind)
-   * Migrated to Svelte 5 runes
-   *
-   * Variants (Flowbite naming):
-   *   - default: Primary blue button
-   *   - alternative: Gray outline button
-   *   - outline: Blue outline button
-   *   - red: Destructive solid button
-   *   - red-outline: Destructive outline button
-   *   - ghost: Text-only button
-   *   - ghost-red: Destructive text button
-   *   - icon: Icon-only button
-   *   - toggle: Toggle/pill button
-   *   - avatar: Avatar/image trigger button (no padding, opacity hover)
-   *   - menu-item: Dropdown/sheet menu item (full width, left-aligned)
-   *   - menu-item-danger: Destructive menu item (red text)
-   *   - card: Selectable card button (bordered, for list selections)
-   *   - sidebar-toggle: Compact pill for sidebar expand/collapse
-   *   - chart-row: Leaderboard/chart list row with progress bar
-   *   - landing: Primary hero CTA (blue, shadow, rounded-xl)
-   *   - landing-secondary: Secondary hero CTA (outline, shadow, rounded-xl)
-   *
-   * Sizes (Flowbite native): xs, sm, md, lg, xl, landing
-   *
-   * Haptic Feedback:
-   *   - Automatic haptic on success state transition
-   *   - Optional haptic on click via `haptic` prop
-   *   - Variant-aware feedback intensity
-   */
-  import { CheckOutline } from '../Icons';
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import {
-    buttonSizes,
-    buttonIconSizes,
-  } from '../../tokens/sizing.js';
-  import { triggerHaptic, getHapticForButtonVariant } from '../../utils/haptic.js';
-
-  interface Props {
-    variant?: string;
-    size?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    success?: boolean;
-    successText?: string;
-    active?: boolean;
-    href?: string | null;
-    type?: 'button' | 'submit' | 'reset';
-    /** Enable haptic feedback on click. When true, uses variant-aware haptic style. */
-    haptic?: boolean;
-    children?: Snippet;
-    trailing?: Snippet;
-    class?: string;
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    variant = "default",
-    size = "md",
-    disabled = false,
-    loading = false,
-    success = false,
-    successText = "",
-    active = false,
-    href = null,
-    type = "button",
-    haptic = false,
-    children,
-    trailing,
-    class: className = "",
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  // Track previous success state to detect transitions
-  let prevSuccess = $state(false);
-
-  // Trigger haptic on success state transition (QOL Bible)
-  $effect(() => {
-    if (success && !prevSuccess) {
-      triggerHaptic('success');
-    }
-    prevSuccess = success;
-  });
-
-  // Legacy variant name mapping
-  const variantMap: Record<string, string> = {
-    "blue-solid": "default",
-    "gray-outline": "alternative",
-    "blue-outline": "outline",
-    "red-solid": "red",
-    "red-text": "ghost-red",
-    "gray-text": "ghost",
-  };
-
-  // Resolve legacy names
-  let resolvedVariant = $derived(variantMap[variant] || variant);
-  let effectiveDisabled = $derived(disabled || loading || success);
-
-  // Size classes imported from centralized tokens
-
-  // Variant classes with all states in Tailwind (no focus rings - design decision)
-  // NOTE: menu-item, avatar, nav, card, search-result, landing, sidebar-toggle, calendar-day, chart-row
-  // have been extracted to dedicated components: MenuItem, AvatarButton, NavItem, CardAction,
-  // SearchResultItem, LandingButton, SidebarToggle. Use those components instead.
-  const variantClasses: Record<string, string> = {
-    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
-    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
-    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
-    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
-    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-    "green-outline": "text-green-700 bg-transparent border border-green-700 hover:text-white hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
-    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
-    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
-    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
-    icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
-    toggle: "text-gray-900 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600",
-    success: "text-white bg-green-600 border border-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
-  };
-
-  // Active state classes for ghost and toggle
-  // NOTE: menu-item and nav active states are now handled by MenuItem and NavItem components
-  const activeClasses: Record<string, string> = {
-    ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
-    toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:text-white dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700",
-  };
-
-  // Disabled classes
-  const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
-  // Disabled classes for transparent variants (link, ghost) - no background
-  const disabledTransparentClasses = "text-gray-400 cursor-not-allowed dark:text-gray-500";
-
-let sizeClass = $derived((() => {
-    if (resolvedVariant === "icon") return buttonIconSizes[size as keyof typeof buttonIconSizes] || buttonIconSizes.sm;
-    if (resolvedVariant === "link") return "text-sm";
-    return buttonSizes[size as keyof typeof buttonSizes] || buttonSizes.md;
-  })());
-
-  // Variants that should stay transparent when disabled
-  const transparentVariants = ["link", "ghost", "ghost-red", "icon"];
-
-  let variantClass = $derived((() => {
-    if (success) return variantClasses.success;
-    if (disabled && !loading && !success) {
-      return transparentVariants.includes(resolvedVariant)
-        ? disabledTransparentClasses
-        : disabledClasses;
-    }
-    if (active && activeClasses[resolvedVariant]) {
-      // When active, use ONLY active classes (they include all necessary styling)
-      return activeClasses[resolvedVariant];
-    }
-    return variantClasses[resolvedVariant] || variantClasses.default;
-  })());
-
-  // Button is always centered - left-aligned variants have been extracted to dedicated components
-  let isLeftAligned = $derived(false);
-
-  // Use justify-between when there's trailing content (e.g., chevrons in nav items)
-  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
-
-  // Standard buttons use rounded-lg - landing variants have been extracted to LandingButton
-  let roundedClass = $derived("rounded-lg");
-
-  // Click handler with optional haptic feedback
-  function handleClick(e: MouseEvent) {
-    if (haptic && !effectiveDisabled) {
-      const hapticStyle = getHapticForButtonVariant(resolvedVariant);
-      if (hapticStyle) {
-        triggerHaptic(hapticStyle);
-      }
-    }
-    onclick?.(e);
-  }
-
-  let buttonClasses = $derived(twMerge(
-    "relative",
-    isLeftAligned
-      ? (hasTrailing ? "flex items-center justify-between" : "flex items-center justify-start")
-      : "inline-flex items-center justify-center",
-    roundedClass,
-    "font-medium leading-none",
-    "focus:outline-hidden",
-    // Apple-style micro-interactions (only when not disabled)
-    "transition-all duration-150 ease-out",
-    effectiveDisabled ? "" : "active:scale-[0.97] active:opacity-90",
-    "select-none",
-    sizeClass,
-    variantClass,
-    effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
-    className
-  ));
-</script>
-
-{#if href}
-  <a
-    {href}
-    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
-    onclick={handleClick}
-    {...restProps}
-  >
-    {#if loading}
-      <span class="shimmer-overlay"></span>
-    {/if}
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-  </a>
-{:else}
-  <button
-    {type}
-    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
-    disabled={effectiveDisabled}
-    onclick={handleClick}
-    {...restProps}
-  >
-    {#if loading}
-      <span class="shimmer-overlay"></span>
-    {/if}
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-    {#if success}
-      <span class="absolute inset-0 flex items-center justify-center gap-2">
-        <CheckOutline class="w-5 h-5" />
-        {#if successText}<span class="font-medium">{successText}</span>{/if}
-      </span>
-    {/if}
-  </button>
-{/if}
-
-<style>
-  .loading-pulse {
-    animation: pulse-bg 2s ease-in-out infinite;
-  }
-
-  @keyframes pulse-bg {
-    0%, 100% { filter: brightness(1); }
-    50% { filter: brightness(1.15); }
-  }
-
-  .shimmer-overlay {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    border-radius: inherit;
-  }
-
-  .shimmer-overlay::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.2) 50%,
-      transparent 100%
-    );
-    animation: shimmer 1s ease-in-out infinite;
-  }
-
-  @keyframes shimmer {
-    0% {
-      left: -100%;
-    }
-    100% {
-      left: 100%;
-    }
-  }
-</style>
+<script lang="ts">
+  /**
+   * Button Component - Flowbite Native (Pure Tailwind)
+   * Migrated to Svelte 5 runes
+   *
+   * Variants (Flowbite naming):
+   *   - default: Primary blue button
+   *   - alternative: Gray outline button
+   *   - outline: Blue outline button
+   *   - red: Destructive solid button
+   *   - red-outline: Destructive outline button
+   *   - ghost: Text-only button
+   *   - ghost-red: Destructive text button
+   *   - icon: Icon-only button
+   *   - toggle: Toggle/pill button
+   *   - avatar: Avatar/image trigger button (no padding, opacity hover)
+   *   - menu-item: Dropdown/sheet menu item (full width, left-aligned)
+   *   - menu-item-danger: Destructive menu item (red text)
+   *   - card: Selectable card button (bordered, for list selections)
+   *   - sidebar-toggle: Compact pill for sidebar expand/collapse
+   *   - chart-row: Leaderboard/chart list row with progress bar
+   *   - landing: Primary hero CTA (blue, shadow, rounded-xl)
+   *   - landing-secondary: Secondary hero CTA (outline, shadow, rounded-xl)
+   *
+   * Sizes (Flowbite native): xs, sm, md, lg, xl, landing
+   *
+   * Haptic Feedback:
+   *   - Automatic haptic on success state transition
+   *   - Optional haptic on click via `haptic` prop
+   *   - Variant-aware feedback intensity
+   */
+  import { CheckOutline } from '../Icons';
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import {
+    buttonSizes,
+    buttonIconSizes,
+  } from '../../tokens/sizing.js';
+  import { triggerHaptic, getHapticForButtonVariant } from '../../utils/haptic.js';
+
+  interface Props {
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    success?: boolean;
+    successText?: string;
+    active?: boolean;
+    href?: string | null;
+    type?: 'button' | 'submit' | 'reset';
+    /** Enable haptic feedback on click. When true, uses variant-aware haptic style. */
+    haptic?: boolean;
+    children?: Snippet;
+    trailing?: Snippet;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = "default",
+    size = "md",
+    disabled = false,
+    loading = false,
+    success = false,
+    successText = "",
+    active = false,
+    href = null,
+    type = "button",
+    haptic = false,
+    children,
+    trailing,
+    class: className = "",
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  // Track previous success state to detect transitions
+  let prevSuccess = $state(false);
+
+  // Trigger haptic on success state transition (QOL Bible)
+  $effect(() => {
+    if (success && !prevSuccess) {
+      triggerHaptic('success');
+    }
+    prevSuccess = success;
+  });
+
+  // Legacy variant name mapping
+  const variantMap: Record<string, string> = {
+    "blue-solid": "default",
+    "gray-outline": "alternative",
+    "blue-outline": "outline",
+    "red-solid": "red",
+    "red-text": "ghost-red",
+    "gray-text": "ghost",
+  };
+
+  // Resolve legacy names
+  let resolvedVariant = $derived(variantMap[variant] || variant);
+  let effectiveDisabled = $derived(disabled || loading || success);
+
+  // Size classes imported from centralized tokens
+
+  // Variant classes with all states in Tailwind (no focus rings - design decision)
+  // NOTE: menu-item, avatar, nav, card, search-result, landing, sidebar-toggle, calendar-day, chart-row
+  // have been extracted to dedicated components: MenuItem, AvatarButton, NavItem, CardAction,
+  // SearchResultItem, LandingButton, SidebarToggle. Use those components instead.
+  const variantClasses: Record<string, string> = {
+    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
+    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
+    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
+    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+    "green-outline": "text-green-700 bg-transparent border border-green-700 hover:text-white hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
+    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
+    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
+    icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
+    toggle: "text-gray-900 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600",
+    success: "text-white bg-green-600 border border-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
+  };
+
+  // Active state classes for ghost and toggle
+  // NOTE: menu-item and nav active states are now handled by MenuItem and NavItem components
+  const activeClasses: Record<string, string> = {
+    ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
+    toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:text-white dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700",
+  };
+
+  // Disabled classes
+  const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
+  // Disabled classes for transparent variants (link, ghost) - no background
+  const disabledTransparentClasses = "text-gray-400 cursor-not-allowed dark:text-gray-500";
+
+let sizeClass = $derived((() => {
+    if (resolvedVariant === "icon") return buttonIconSizes[size as keyof typeof buttonIconSizes] || buttonIconSizes.sm;
+    if (resolvedVariant === "link") return "text-sm";
+    return buttonSizes[size as keyof typeof buttonSizes] || buttonSizes.md;
+  })());
+
+  // Variants that should stay transparent when disabled
+  const transparentVariants = ["link", "ghost", "ghost-red", "icon"];
+
+  let variantClass = $derived((() => {
+    if (success) return variantClasses.success;
+    if (disabled && !loading && !success) {
+      return transparentVariants.includes(resolvedVariant)
+        ? disabledTransparentClasses
+        : disabledClasses;
+    }
+    if (active && activeClasses[resolvedVariant]) {
+      // When active, use ONLY active classes (they include all necessary styling)
+      return activeClasses[resolvedVariant];
+    }
+    return variantClasses[resolvedVariant] || variantClasses.default;
+  })());
+
+  // Button is always centered - left-aligned variants have been extracted to dedicated components
+  let isLeftAligned = $derived(false);
+
+  // Use justify-between when there's trailing content (e.g., chevrons in nav items)
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+
+  // Standard buttons use rounded-lg - landing variants have been extracted to LandingButton
+  let roundedClass = $derived("rounded-lg");
+
+  // Click handler with optional haptic feedback
+  function handleClick(e: MouseEvent) {
+    if (haptic && !effectiveDisabled) {
+      const hapticStyle = getHapticForButtonVariant(resolvedVariant);
+      if (hapticStyle) {
+        triggerHaptic(hapticStyle);
+      }
+    }
+    onclick?.(e);
+  }
+
+  let buttonClasses = $derived(twMerge(
+    "relative",
+    isLeftAligned
+      ? (hasTrailing ? "flex items-center justify-between" : "flex items-center justify-start")
+      : "inline-flex items-center justify-center",
+    roundedClass,
+    "font-medium leading-none",
+    "focus:outline-hidden",
+    // Apple-style micro-interactions (only when not disabled)
+    "transition-all duration-150 ease-out",
+    effectiveDisabled ? "" : "active:scale-[0.97] active:opacity-90",
+    "select-none",
+    sizeClass,
+    variantClass,
+    effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+  </a>
+{:else}
+  <button
+    {type}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
+    disabled={effectiveDisabled}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+    {#if success}
+      <span class="absolute inset-0 flex items-center justify-center gap-2">
+        <CheckOutline class="w-5 h-5" />
+        {#if successText}<span class="font-medium">{successText}</span>{/if}
+      </span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .loading-pulse {
+    animation: pulse-bg 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-bg {
+    0%, 100% { filter: brightness(1); }
+    50% { filter: brightness(1.15); }
+  }
+
+  .shimmer-overlay {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .shimmer-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.2) 50%,
+      transparent 100%
+    );
+    animation: shimmer 1s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+</style>

package/dist/primitives/Button/ButtonGroup.svelte

@@ -1,50 +1,50 @@
-<script lang="ts">
-  /**
-   * ButtonGroup - Groups related buttons together with connected styling
-   *
-   * Usage:
-   * <ButtonGroup>
-   *   <Button variant="toggle" active={selected === 'a'}>Option A</Button>
-   *   <Button variant="toggle" active={selected === 'b'}>Option B</Button>
-   * </ButtonGroup>
-   */
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Additional CSS classes */
-    class?: string;
-    /** Children buttons to group */
-    children?: Snippet;
-  }
-
-  let { class: className = '', children }: Props = $props();
-</script>
-
-<div
-  class="inline-flex rounded-lg shadow {className}"
-  role="group"
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style>
-  div :global(button:not(:first-child):not(:last-child)) {
-    border-radius: 0;
-  }
-
-  div :global(button:first-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  div :global(button:last-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  div :global(button:not(:first-child)) {
-    margin-left: -1px;
-  }
-</style>
+<script lang="ts">
+  /**
+   * ButtonGroup - Groups related buttons together with connected styling
+   *
+   * Usage:
+   * <ButtonGroup>
+   *   <Button variant="toggle" active={selected === 'a'}>Option A</Button>
+   *   <Button variant="toggle" active={selected === 'b'}>Option B</Button>
+   * </ButtonGroup>
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Additional CSS classes */
+    class?: string;
+    /** Children buttons to group */
+    children?: Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<div
+  class="inline-flex rounded-lg shadow {className}"
+  role="group"
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  div :global(button:not(:first-child):not(:last-child)) {
+    border-radius: 0;
+  }
+
+  div :global(button:first-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  div :global(button:last-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  div :global(button:not(:first-child)) {
+    margin-left: -1px;
+  }
+</style>