@reshape-biotech/design-system 2.4.2 → 2.5.2

package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte

@@ -0,0 +1,173 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ToggleIconButton from './ToggleIconButton.svelte';
+  import { Icon } from '../icons';
+
+  const { Story } = defineMeta({
+    component: ToggleIconButton,
+    title: 'Design System/ToggleIconButton',
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="States" asChild>
+  <div class="flex flex-col gap-4">
+    <div class="bg-neutral-dark flex gap-4 p-4">
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-sm">Normal</p>
+        <ToggleIconButton variant="primary-inverse">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-sm">Active</p>
+        <ToggleIconButton variant="primary-inverse" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Variants" asChild>
+  <div class="flex flex-col gap-4">
+    <div class="flex gap-8">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm">Primary Inverse</p>
+        <div class="flex gap-4">
+          <ToggleIconButton variant="primary-inverse">
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+          <ToggleIconButton variant="primary-inverse" isActive={true}>
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-8">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm">Secondary</p>
+        <div class="flex gap-4">
+          <ToggleIconButton variant="secondary">
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+          <ToggleIconButton variant="secondary" isActive={true}>
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex gap-8">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">XS</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="xs">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="xs" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">SM</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="sm">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="sm" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">MD</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="md">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="md" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">LG</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="lg">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="lg" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Rounded vs Square" asChild>
+  <div class="flex gap-8">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Rounded</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" rounded>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" rounded isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Square</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" rounded={false}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" rounded={false} isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Primary Inverse Example" asChild>
+  <div class="bg-neutral-dark p-8">
+    <div class="flex gap-8">
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-neutral-light text-sm">Normal</p>
+        <ToggleIconButton variant="primary-inverse">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-neutral-light text-sm">Active</p>
+        <ToggleIconButton variant="primary-inverse" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Disabled and Loading" asChild>
+  <div class="flex gap-8">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Disabled</p>
+      <ToggleIconButton disabled>
+        <Icon iconName="DownloadSimple" />
+      </ToggleIconButton>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Loading</p>
+      <ToggleIconButton loading>
+        <Icon iconName="DownloadSimple" />
+      </ToggleIconButton>
+    </div>
+  </div>
+</Story>

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

@@ -0,0 +1,19 @@
+import ToggleIconButton from './ToggleIconButton.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToggleIconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToggleIconButton = InstanceType<typeof ToggleIconButton>;
+export default ToggleIconButton;

package/dist/components/toggle-icon-button/ToggleIconButton.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Spinner } from '../spinner/';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  type Variant = 'primary-inverse' | 'secondary';
+  interface Props {
+    variant?: Variant;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    rounded?: boolean;
+    isActive?: boolean;
+  }
+
+  type ToggleIconButtonProps = Props & HTMLButtonAttributes;
+
+  let {
+    variant = 'secondary',
+    type = 'button',
+    loading = false,
+    disabled = false,
+    size = 'sm',
+    children,
+    onclick,
+    rounded = false,
+    isActive = $bindable(false),
+    ...rest
+  }: ToggleIconButtonProps = $props();
+
+  // Size class mappings
+  const sizeClasses = {
+    xs: 'h-6 w-6',
+    sm: 'h-8 w-8',
+    md: 'h-10 w-10',
+    lg: 'h-12 w-12',
+  };
+
+  // SVG size class mappings - used for styling the container that will affect child SVGs
+  const svgContainerClasses = {
+    xs: 'has-[svg]:children:h-4 has-[svg]:children:w-4',
+    sm: 'has-[svg]:children:h-4 has-[svg]:children:w-4',
+    md: 'has-[svg]:children:h-5 has-[svg]:children:w-5',
+    lg: 'has-[svg]:children:h-6 has-[svg]:children:w-6',
+  };
+
+  // Active state padding classes that scale with button size
+  const activePaddingClasses = {
+    xs: 'p-0.5',
+    sm: 'p-1',
+    md: 'p-1.5',
+    lg: 'p-2',
+  };
+
+  // Active state size classes for the inner container
+  const activeInnerSizeClasses = {
+    xs: 'h-4 w-4',
+    sm: 'h-6 w-6',
+    md: 'h-7 w-7',
+    lg: 'h-8 w-8',
+  };
+
+  // Variant class mappings
+  const variantClasses = {
+    'primary-inverse': 'bg-base-inverse text-icon-primary-inverse border border-interactive',
+    secondary: 'bg-neutral text-icon-primary hover:bg-neutral-hover',
+  };
+
+  // Active variant class mappings
+  const activeVariantClasses = {
+    'primary-inverse': 'bg-accent-inverse text-icon-primary-inverse',
+    secondary: 'bg-neutral-hover text-icon-primary',
+  };
+
+  let buttonSizeClass = $derived(sizeClasses[size]);
+  let buttonSvgContainerClass = $derived(svgContainerClasses[size]);
+  let buttonVariantClass = $derived(variantClasses[variant]);
+  let buttonActiveVariantClass = $derived(activeVariantClasses[variant]);
+  let activePaddingClass = $derived(activePaddingClasses[size]);
+  let activeInnerSizeClass = $derived(activeInnerSizeClasses[size]);
+</script>
+
+{#snippet content()}
+  {#if loading}
+    <Spinner />
+  {:else}
+    {@render children?.()}
+  {/if}
+{/snippet}
+
+<button
+  onclick={(e) => {
+    e.preventDefault();
+    if (disabled || loading) return;
+    onclick?.(e);
+  }}
+  {type}
+  {disabled}
+  {...rest}
+  class="flex cursor-pointer items-center justify-center duration-150 {buttonSizeClass} {buttonVariantClass} {buttonSvgContainerClass}"
+  class:rounded-full={rounded}
+  class:rounded-md={!rounded}
+  class:cursor-default={disabled}
+  class:disabled:bg-neutral={disabled}
+  class:disabled:text-tertiary={disabled}
+>
+  {#if isActive}
+    <div
+      class="{buttonActiveVariantClass} flex items-center justify-center {activePaddingClass} {activeInnerSizeClass}"
+      class:rounded-full={rounded}
+      class:rounded-sm={!rounded}
+    >
+      {@render content()}
+    </div>
+  {:else}
+    {@render content?.()}
+  {/if}
+</button>

package/dist/components/toggle-icon-button/ToggleIconButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Variant = 'primary-inverse' | 'secondary';
+interface Props {
+    variant?: Variant;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    rounded?: boolean;
+    isActive?: boolean;
+}
+type ToggleIconButtonProps = Props & HTMLButtonAttributes;
+declare const ToggleIconButton: import("svelte").Component<ToggleIconButtonProps, {}, "isActive">;
+type ToggleIconButton = ReturnType<typeof ToggleIconButton>;
+export default ToggleIconButton;

package/dist/components/toggle-icon-button/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleIconButton from './ToggleIconButton.svelte';
+export { ToggleIconButton };
+export default ToggleIconButton;

package/dist/components/toggle-icon-button/index.js

@@ -0,0 +1,3 @@
+import ToggleIconButton from './ToggleIconButton.svelte';
+export { ToggleIconButton };
+export default ToggleIconButton;

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -0,0 +1,100 @@
+<script module>
+  import Tooltip from './Tooltip.svelte';
+
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    component: Tooltip,
+    title: 'Design System/Tooltip',
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Base" asChild>
+  <div class="flex justify-center py-12">
+    <Tooltip forceOpen={true}>
+      {#snippet trigger()}
+        <button>Hover me</button>
+      {/snippet}
+      {#snippet content()}
+        <span>Hello World</span>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>
+
+<Story name="No Arrow" asChild>
+  <div class="flex justify-center py-12">
+    <Tooltip forceOpen={true} showArrow={false}>
+      {#snippet trigger()}
+        <button>This one has no arrow</button>
+      {/snippet}
+      {#snippet content()}
+        <span>Wow, no arrow</span>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>
+
+<Story name="Different Placements" asChild>
+  <div class="grid grid-cols-3 place-items-center gap-16 px-16 py-24">
+    <div class="col-start-2">
+      <Tooltip forceOpen={true} placement="top">
+        {#snippet trigger()}
+          <button>Top</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on top</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+
+    <div class="col-start-1">
+      <Tooltip forceOpen={true} placement="left">
+        {#snippet trigger()}
+          <button>Left</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on left</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+
+    <div class="col-start-3">
+      <Tooltip forceOpen={true} placement="right">
+        {#snippet trigger()}
+          <button>Right</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on right</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+
+    <div class="col-start-2">
+      <Tooltip forceOpen={true} placement="bottom">
+        {#snippet trigger()}
+          <button>Bottom</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on bottom</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+  </div>
+</Story>
+
+<Story name="Custom Content" asChild>
+  <div class="flex h-28 items-end justify-center py-16">
+    <Tooltip forceOpen={true}>
+      {#snippet trigger()}
+        <button>Hover me</button>
+      {/snippet}
+      {#snippet content()}
+        <div>
+          <h3>Custom Heading</h3>
+          <p>This is some custom content inside the tooltip.</p>
+        </div>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>

package/dist/components/tooltip/Tooltip.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Tooltip;
+type Tooltip = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Tooltip from './Tooltip.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/tooltip/Tooltip.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Tooltip } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { backgroundColor } from '../../tokens';
+
+  interface Props {
+    class?: string;
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    trigger?: Snippet;
+    content?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    forceOpen = false,
+    showArrow = true,
+    placement = 'top',
+    align = 'center',
+    trigger,
+    content,
+  }: Props = $props();
+
+  const sideMap = {
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+  } as const;
+
+  let side = $derived(sideMap[placement]);
+
+  const arrowColor = backgroundColor['base-inverse'];
+</script>
+
+<Tooltip.Provider>
+  <Tooltip.Root open={forceOpen} delayDuration={400}>
+    <Tooltip.Trigger>
+      {#if trigger}
+        {@render trigger()}
+      {/if}
+    </Tooltip.Trigger>
+
+    <Tooltip.Portal>
+      <Tooltip.Content
+        {side}
+        {align}
+        sideOffset={8}
+        class={`${className} z-50 max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+      >
+        {#if content}
+          {@render content()}
+        {/if}
+
+        {#if showArrow}
+          <Tooltip.Arrow style="color: {arrowColor}" />
+        {/if}
+      </Tooltip.Content>
+    </Tooltip.Portal>
+  </Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,14 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    trigger?: Snippet;
+    content?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/tooltip/TooltipTest.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Tooltip from './Tooltip.svelte';
+
+  interface Props {
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    triggerText: string;
+    contentText: string;
+  }
+
+  let {
+    forceOpen = false,
+    showArrow = true,
+    placement = 'top',
+    class: className = '',
+    triggerText,
+    contentText,
+  }: Props = $props();
+</script>
+
+<Tooltip {forceOpen} {showArrow} {placement} class={className}>
+  {#snippet trigger()}
+    <button>{triggerText}</button>
+  {/snippet}
+
+  {#snippet content()}
+    {contentText}
+  {/snippet}
+</Tooltip>

package/dist/components/tooltip/TooltipTest.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    triggerText: string;
+    contentText: string;
+}
+declare const TooltipTest: import("svelte").Component<Props, {}, "">;
+type TooltipTest = ReturnType<typeof TooltipTest>;
+export default TooltipTest;

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/fonts/index.d.ts

@@ -0,0 +1,4 @@
+export declare const fonts: {
+    MDSystemMonoRegular: string;
+    afAnotherSans: string;
+};

package/dist/fonts/index.js

@@ -0,0 +1,6 @@
+import MDSystemMonoRegular from './MDSystemMono-Regular.woff2';
+import afAnotherSans from './afAnotherSans.woff2';
+export const fonts = {
+    MDSystemMonoRegular,
+    afAnotherSans,
+};