@reshape-biotech/design-system 2.7.50 → 2.7.52

package/dist/components/button/Button.stories.svelte

@@ -27,23 +27,19 @@
 </script>
 
 <Story name="Variants" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each variants as variant}
       {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
-        <div class="bg-base-inverse p-4 text-primary-inverse">
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant}>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit">Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded>Button</Button>
         </div>
       {:else}
-        <div>
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant}>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit">Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded>Button</Button>
         </div>
       {/if}
     {/each}
@@ -51,46 +47,52 @@
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each sizes as size}
-      <div>
-        <p>{size}</p>
-        <Button variant="primary" size={size as ButtonSize}>Button</Button>
+      <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+        <p class="text-secondary">{size}</p>
+        <Button variant="primary" size={size as ButtonSize} class="w-fit">Button</Button>
+        <Button variant="primary" size={size as ButtonSize} class="w-fit" rounded>Button</Button>
       </div>
     {/each}
   </div>
 </Story>
 
 <Story name="Disabled" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each variants as variant}
       {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
-        <div class="bg-base-inverse p-4 text-primary-inverse">
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant} disabled>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" disabled>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded disabled>Button</Button>
         </div>
       {:else}
-        <div>
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant} disabled>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" disabled>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded disabled>Button</Button>
         </div>
       {/if}
     {/each}
   </div>
 </Story>
 <Story name="Loading" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each variants as variant}
-      <div>
-        <p>{variant}</p>
-        <Button variant={variant as ButtonVariant} loading>Button</Button>
-      </div>
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" loading>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded loading>Button</Button>
+        </div>
+      {:else}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" loading>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded loading>Button</Button>
+        </div>
+      {/if}
     {/each}
   </div>
 </Story>

package/dist/components/button/Button.svelte

@@ -22,7 +22,7 @@
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
     disabled?: boolean;
-    accessibilityLabel?: string;
+    accessibilityLabel?: string | undefined;
     size?: ButtonSize;
     id?: string | undefined;
     tabindex?: number | undefined;
@@ -34,11 +34,12 @@
 
   let {
     class: className = '',
-    onClick = () => {},
+    onClick,
+    onclick: onclickProp,
     type = 'button',
     loading = false,
     disabled = false,
-    accessibilityLabel = '',
+    accessibilityLabel = undefined,
     size = 'md',
     id = undefined,
     tabindex = undefined,
@@ -57,7 +58,8 @@
   aria-label={accessibilityLabel}
   onclick={(e) => {
     if (!loading && !disabled) {
-      onClick(e);
+      onClick?.(e);
+      onclickProp?.(e);
     } else {
       e.preventDefault();
     }
@@ -70,7 +72,6 @@
   class={twMerge('button', variantClass, sizeClass, className)}
   data-testid={dataTestId}
   class:rounded
-  class:disabled
   {...rest}
 >
   {#if loading}
@@ -83,7 +84,7 @@
 <style>
   @reference "../../app.css";
   .button {
-    @apply inline-flex items-center justify-center gap-2 truncate text-nowrap rounded-lg border border-transparent text-sm font-medium transition-colors disabled:cursor-not-allowed;
+    @apply inline-flex items-center justify-center gap-2 truncate text-nowrap rounded-lg border border-transparent text-sm font-medium transition-colors hover:cursor-pointer disabled:cursor-not-allowed;
   }
 
   .rounded {
@@ -92,23 +93,27 @@
 
   /* Size variants */
   .btn-size-xs {
-    @apply h-7 rounded-md px-2;
+    @apply h-7 rounded-md px-2 text-label;
   }
   .btn-size-sm {
     @apply h-8 px-3;
   }
   .btn-size-md {
-    @apply h-10 px-4;
+    @apply h-9 px-4;
   }
   .btn-size-lg {
-    @apply h-12 rounded-xl px-5 xl:text-base;
+    @apply h-10 px-5;
+  }
+
+    /* Gradient sheen */
+  .btn-primary, .btn-danger {
+    @apply bg-origin-border bg-gradient-to-b from-white/5 to-transparent to-75%  disabled:bg-none;
   }
 
   /* Button variants */
   .btn-primary {
-    @apply border-input bg-accent-inverse text-primary-inverse shadow-input hover:bg-accent-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+    @apply border-input bg-accent-inverse text-primary-inverse shadow-button hover:bg-accent-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
   }
-
   .btn-secondary {
     @apply bg-neutral text-primary hover:bg-neutral-hover active:bg-neutral disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
   }
@@ -116,10 +121,10 @@
     @apply bg-transparent text-inherit hover:bg-neutral disabled:bg-transparent disabled:text-tertiary disabled:hover:bg-transparent;
   }
   .btn-danger {
-    @apply border-input bg-danger-inverse text-primary-inverse shadow-input hover:bg-danger-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+    @apply border-input bg-danger-inverse text-primary-inverse shadow-button hover:bg-danger-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
   }
   .btn-outline {
-    @apply border-input bg-surface text-primary shadow-input hover:border-input hover:bg-neutral hover:text-primary disabled:border-static disabled:bg-surface disabled:text-tertiary disabled:shadow-none disabled:hover:bg-surface disabled:hover:border-static;
+    @apply border-input bg-surface text-primary shadow-button hover:bg-surface-secondary hover:text-primary disabled:border-static disabled:bg-transparent disabled:text-tertiary disabled:shadow-none;
   }
   .btn-secondary-inverse {
     @apply bg-neutral-inverse text-primary-inverse hover:bg-neutral-inverse-hover active:bg-neutral-inverse disabled:border-transparent disabled:bg-neutral-inverse disabled:text-tertiary disabled:hover:bg-neutral-inverse;

package/dist/components/button/Button.svelte.d.ts

@@ -8,7 +8,7 @@ interface Props extends HTMLButtonAttributes {
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
     disabled?: boolean;
-    accessibilityLabel?: string;
+    accessibilityLabel?: string | undefined;
     size?: ButtonSize;
     id?: string | undefined;
     tabindex?: number | undefined;

package/dist/components/icon-button/IconButton.stories.svelte

@@ -1,50 +1,94 @@
 <script module lang="ts">
   import Plus from 'phosphor-svelte/lib/Plus';
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import IconButton from '../icon-button/IconButton.svelte';
+  import IconButton, { type IconButtonVariant, type IconButtonSize } from './IconButton.svelte';
 
   const { Story } = defineMeta({
     component: IconButton,
     title: 'Components/IconButton',
     tags: ['autodocs'],
   });
+
+  const variants: IconButtonVariant[] = [
+    'primary',
+    'secondary',
+    'danger',
+    'transparent',
+    'outline',
+    'secondary-inverse',
+    'transparent-inverse',
+  ];
+  const sizes: IconButtonSize[] = ['xs', 'sm', 'md', 'lg'];
 </script>
 
-<Story name="Base" asChild>
-  <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="primary"><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="secondary"><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="danger"><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="transparent"><Plus /></IconButton>
+<Story name="Variants" asChild>
+  <div class="flex flex-col">
+    {#each variants as variant}
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <IconButton {variant} rounded={false} accessibilityLabel={variant}><Plus /></IconButton>
+          <IconButton {variant} rounded accessibilityLabel={variant}><Plus /></IconButton>
+        </div>
+      {:else}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <IconButton {variant} rounded={false} accessibilityLabel={variant}><Plus /></IconButton>
+          <IconButton {variant} rounded accessibilityLabel={variant}><Plus /></IconButton>
+        </div>
+      {/if}
+    {/each}
   </div>
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="secondary" size="xs"><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="secondary" size="sm"><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="secondary" size="md"><Plus /></IconButton>
-  </div>
-</Story>
-<Story name="Not rounded base" asChild>
-  <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="primary" rounded={false}><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="secondary" rounded={false}><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="danger" rounded={false}><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="transparent" rounded={false}><Plus /></IconButton>
+  <div class="flex flex-col">
+    {#each sizes as size}
+      <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+        <p class="text-secondary">{size}</p>
+        <IconButton variant="primary" {size} rounded={false} accessibilityLabel={size}><Plus /></IconButton>
+        <IconButton variant="primary" {size} rounded accessibilityLabel={size}><Plus /></IconButton>
+      </div>
+    {/each}
   </div>
 </Story>
 
-<Story name="Not rounded sizes" asChild>
-  <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="secondary" size="xs" rounded={false}><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="secondary" size="sm" rounded={false}><Plus /></IconButton>
-    <IconButton aria-label="Add" variant="secondary" size="md" rounded={false}><Plus /></IconButton>
-  </div>
-</Story>
 <Story name="Disabled" asChild>
-  <IconButton aria-label="Add" disabled><Plus /></IconButton>
+  <div class="flex flex-col">
+    {#each variants as variant}
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <IconButton {variant} rounded={false} disabled accessibilityLabel={variant}><Plus /></IconButton>
+          <IconButton {variant} rounded disabled accessibilityLabel={variant}><Plus /></IconButton>
+        </div>
+      {:else}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <IconButton {variant} rounded={false} disabled accessibilityLabel={variant}><Plus /></IconButton>
+          <IconButton {variant} rounded disabled accessibilityLabel={variant}><Plus /></IconButton>
+        </div>
+      {/if}
+    {/each}
+  </div>
 </Story>
+
 <Story name="Loading" asChild>
-  <IconButton aria-label="Add" loading><Plus /></IconButton>
+  <div class="flex flex-col">
+    {#each variants as variant}
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <IconButton {variant} rounded={false} loading accessibilityLabel={variant}><Plus /></IconButton>
+          <IconButton {variant} rounded loading accessibilityLabel={variant}><Plus /></IconButton>
+        </div>
+      {:else}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <IconButton {variant} rounded={false} loading accessibilityLabel={variant}><Plus /></IconButton>
+          <IconButton {variant} rounded loading accessibilityLabel={variant}><Plus /></IconButton>
+        </div>
+      {/if}
+    {/each}
+  </div>
 </Story>

package/dist/components/icon-button/IconButton.stories.svelte.d.ts

@@ -1,4 +1,4 @@
-import IconButton from '../icon-button/IconButton.svelte';
+import IconButton from './IconButton.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/icon-button/IconButton.svelte

@@ -1,142 +1,138 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { Spinner } from '../spinner/';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
-
-  type Variant =
+<script lang="ts" module>
+  export type IconButtonVariant =
     | 'primary'
     | 'secondary'
     | 'transparent'
     | 'outline'
-    | 'accent'
     | 'danger'
     | 'secondary-inverse'
     | 'transparent-inverse';
+  export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import Spinner from '../spinner/Spinner.svelte';
+  import { IconContext } from 'phosphor-svelte';
+  import type { Snippet } from 'svelte';
 
-  // Combine custom props with standard HTML button attributes,
-  // omitting ones we handle explicitly (like 'class', 'onclick')
   interface Props extends HTMLButtonAttributes {
-    variant?: Variant;
+    class?: string;
+    onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    accessibilityLabel?: string | undefined;
+    size?: IconButtonSize;
+    tabindex?: number | undefined;
+    variant?: IconButtonVariant;
     children?: Snippet;
     rounded?: boolean;
   }
 
-  // Destructure only the component's specific props
+  const sizeClasses: Record<IconButtonSize, string> = {
+    xs: 'size-xs size-7 rounded-md',
+    sm: 'size-sm size-8',
+    md: 'size-md size-9',
+    lg: 'size-lg size-10',
+  };
+
   let {
-    variant = 'transparent',
+    class: className = '',
+    onClick,
+    onclick: onclickProp,
     type = 'button',
     loading = false,
     disabled = false,
+    accessibilityLabel = undefined,
     size = 'sm',
+    tabindex = undefined,
+    variant = 'transparent',
     children,
-    onclick,
-    tabindex,
     rounded = true,
-    class: className,
     ...rest
   }: Props = $props();
 
-  let sizeClass = $derived(`size-${size}`);
   let variantClass = $derived(`color-${variant}`);
+  let sizeClass = $derived(sizeClasses[size]);
 </script>
 
-{#if disabled || loading}
-  <button
-    onclick={(e) => {
+<button
+  aria-label={accessibilityLabel}
+  onclick={(e) => {
+    if (!loading && !disabled) {
+      onClick?.(e);
+      onclickProp?.(e);
+    } else {
       e.preventDefault();
-    }}
-    {type}
-    {disabled}
-    class={twMerge(sizeClass, variantClass, 'disabled', className)}
-    class:rounded
-    {...rest}
-  >
+    }
+  }}
+  {type}
+  {disabled}
+  {tabindex}
+  class:cursor-wait={loading}
+  class={twMerge('icon-button', variantClass, sizeClass, className)}
+  class:rounded
+  {...rest}
+>
+  <IconContext values={{ weight: 'bold' }}>
     {#if loading}
       <Spinner />
     {:else}
       {@render children?.()}
     {/if}
-  </button>
-{:else}
-  <button
-    {onclick}
-    {type}
-    {disabled}
-    {tabindex}
-    class={twMerge(sizeClass, variantClass, className)}
-    class:rounded
-    {...rest}
-  >
-    {@render children?.()}
-  </button>
-{/if}
+  </IconContext>
+</button>
 
 <style>
   @reference "../../app.css";
-  button {
-    @apply flex shrink-0 cursor-pointer items-center justify-center rounded-lg duration-150;
+
+  .icon-button {
+    @apply flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent transition-colors hover:cursor-pointer disabled:cursor-not-allowed;
   }
   .rounded {
     @apply rounded-full!;
   }
-  .disabled {
-    @apply cursor-not-allowed disabled:bg-neutral disabled:text-tertiary;
-  }
 
-  .size-xs {
-    @apply size-6 rounded-md;
-    :global(svg) {
-      @apply size-4;
-    }
-  }
-  .size-sm {
-    @apply size-8;
-    :global(svg) {
-      @apply size-4;
-    }
-  }
-  .size-md {
-    @apply size-10;
-    :global(svg) {
-      @apply size-4;
-    }
-  }
+  /* Icon sizes per button size */
+  .size-xs :global(svg) { @apply size-4; }
+  .size-sm :global(svg) { @apply size-4; }
+  .size-md :global(svg) { @apply size-4; }
+  .size-lg :global(svg) { @apply size-5; }
 
-  .size-lg {
-    @apply size-12;
-    :global(svg) {
-      @apply size-5;
-    }
-  }
-
-  .color-outline {
-    @apply border border-input bg-surface shadow-input hover:bg-neutral;
+  /* Gradient sheen on colored fills */
+  .color-primary, .color-danger {
+    @apply bg-origin-border bg-gradient-to-b from-white/8 to-transparent to-75% disabled:bg-none;
   }
 
+  /* Variant styles */
   .color-primary {
-    @apply bg-accent-inverse text-icon-primary-inverse hover:bg-accent-inverse-hover;
+    @apply border-input bg-accent-inverse text-icon-primary-inverse shadow-button hover:bg-accent-inverse-hover
+           disabled:border-transparent disabled:bg-neutral disabled:text-icon-tertiary disabled:shadow-none disabled:hover:bg-neutral;
   }
   .color-secondary {
-    @apply bg-neutral text-icon-primary hover:bg-neutral-hover;
-  }
-  .color-accent {
-    @apply bg-accent text-icon-primary-inverse hover:bg-accent-hover;
+    @apply bg-neutral text-icon-primary hover:bg-neutral-hover
+           disabled:border-transparent disabled:bg-neutral disabled:text-icon-tertiary disabled:hover:bg-neutral;
   }
   .color-transparent {
-    @apply bg-transparent text-icon-secondary hover:bg-neutral hover:text-icon-primary;
+    @apply bg-transparent text-icon-secondary hover:bg-neutral hover:text-icon-primary
+           disabled:bg-transparent disabled:text-icon-tertiary disabled:hover:bg-transparent;
+  }
+  .color-outline {
+    @apply border-input bg-surface shadow-button text-icon-secondary hover:bg-neutral
+           disabled:border-static disabled:bg-transparent disabled:text-icon-tertiary disabled:shadow-none;
   }
   .color-danger {
-    @apply bg-danger-inverse text-icon-primary-inverse hover:bg-danger-inverse-hover;
+    @apply border-input bg-danger-inverse text-icon-primary-inverse shadow-button hover:bg-danger-inverse-hover
+           disabled:border-transparent disabled:bg-neutral disabled:text-icon-tertiary disabled:shadow-none disabled:hover:bg-neutral;
   }
   .color-secondary-inverse {
-    @apply bg-neutral-inverse text-icon-primary-inverse hover:bg-neutral-inverse-hover;
+    @apply bg-neutral-inverse text-icon-primary-inverse hover:bg-neutral-inverse-hover
+           disabled:border-transparent disabled:bg-neutral-inverse disabled:text-icon-tertiary-inverse disabled:hover:bg-neutral-inverse;
   }
-
   .color-transparent-inverse {
-    @apply bg-transparent text-icon-primary-inverse hover:bg-neutral-inverse-hover disabled:hover:bg-transparent;
+    @apply bg-transparent text-icon-secondary-inverse hover:bg-neutral-inverse
+           disabled:bg-transparent disabled:text-icon-tertiary-inverse disabled:hover:bg-transparent;
   }
 </style>

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,11 +1,17 @@
-import type { Snippet } from 'svelte';
+export type IconButtonVariant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'accent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+import type { Snippet } from 'svelte';
 interface Props extends HTMLButtonAttributes {
-    variant?: Variant;
+    class?: string;
+    onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    accessibilityLabel?: string | undefined;
+    size?: IconButtonSize;
+    tabindex?: number | undefined;
+    variant?: IconButtonVariant;
     children?: Snippet;
     rounded?: boolean;
 }