@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import * as Select from '../index';
+  import { Icon, type IconName } from '../../icons';
+  import IconButton from '../../icon-button/IconButton.svelte';
+
+  type ItemType = {
+    value: string;
+    label: string;
+    iconName?: IconName | string;
+  };
+
+  interface Props {
+    selectedValues: string[];
+    items: ItemType[];
+    onRemoveItem: (itemValue: string) => void;
+    placeholder?: string;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    selectedValues,
+    items,
+    onRemoveItem,
+    placeholder = 'Select items...',
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Select.Trigger
+  class={'bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border border-input px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50' +
+    (className || '')}
+  {...restProps}
+>
+  {#if selectedValues.length === 0}
+    <span class="flex-grow px-2 text-tertiary">{placeholder}</span>
+  {:else}
+    <div class="flex flex-grow flex-wrap items-center gap-1">
+      {#each selectedValues as selectedVal (selectedVal)}
+        {@const item = items.find((i) => i.value === selectedVal)}
+        {#if item}
+          <div
+            class="flex w-fit items-center gap-1 rounded-sm bg-neutral px-1 py-0.5 text-sm"
+            aria-label={`Selected item ${item.label}`}
+          >
+            {#if item.iconName}
+              <Icon iconName={item.iconName as IconName} />
+            {/if}
+            <span>{item.label}</span>
+            <IconButton
+              type="button"
+              aria-label={`Remove ${item.label}`}
+              onclick={() => onRemoveItem(item.value)}
+              size="xs"
+              variant="transparent"
+              class="text-primary focus:outline-none"
+            >
+              <Icon iconName="X" />
+            </IconButton>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</Select.Trigger>

package/dist/components/select/components/SelectContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { ContentProps } from '../types';
+
+  import type { Snippet } from 'svelte';
+  import Icon from '../../icons/Icon.svelte';
+
+  interface Props extends ContentProps {
+    children: Snippet;
+    class?: string;
+    sideOffset?: number;
+  }
+
+  let { class: className = '', sideOffset = 4, children, ...restProps }: Props = $props();
+
+  const baseClasses = `
+		w-[var(--bits-select-anchor-width)] relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-surface text-surface-foreground shadow-md
+    `;
+</script>
+
+<SelectPrimitive.Portal>
+  <SelectPrimitive.Content {...restProps} {sideOffset} class={baseClasses + ' ' + className}>
+    <SelectPrimitive.ScrollUpButton class="flex justify-center">
+      <Icon iconName="CaretUp" />
+    </SelectPrimitive.ScrollUpButton>
+    <SelectPrimitive.Viewport class="p-1 ">
+      {@render children()}
+    </SelectPrimitive.Viewport>
+    <SelectPrimitive.ScrollDownButton class="flex justify-center">
+      <Icon iconName="CaretDown" />
+    </SelectPrimitive.ScrollDownButton>
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/dist/components/select/components/SelectGroupHeading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { GroupHeadingProps } from '../types';
+
+  import type { Snippet } from 'svelte';
+
+  interface Props extends GroupHeadingProps {
+    children: Snippet;
+    class?: string;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+
+  const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
+</script>
+
+<SelectPrimitive.GroupHeading {...restProps} class="{baseClasses} {className}">
+  {@render children()}
+</SelectPrimitive.GroupHeading>

package/dist/components/select/components/SelectItem.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { ItemProps, ItemSlotProps } from '../types';
+
+  import type { Snippet } from 'svelte';
+  import Icon from '../../icons/Icon.svelte';
+
+  interface Props extends ItemProps {
+    children?: Snippet<[ItemSlotProps]>;
+    class?: string;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+
+  const baseClasses = `
+        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none 
+        focus:bg-neutral focus:text-accent-foreground 
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+        data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground
+    `;
+</script>
+
+<SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
+  {#snippet children(params: ItemSlotProps)}
+    {#if children}
+      {@render children(params)}
+    {:else}
+      <span>
+        {restProps.label ??
+          (typeof restProps.value === 'string' || typeof restProps.value === 'number'
+            ? restProps.value
+            : 'Item')}</span
+      >
+    {/if}
+    {#if params.selected}
+      <Icon iconName="Check" color="accent" />
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>

package/dist/components/select/components/SelectTrigger.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { TriggerProps, IconSnippet } from '../types';
+
+  import type { Snippet } from 'svelte';
+  import { Icon } from '../../icons';
+
+  interface Props extends TriggerProps {
+    TriggerIcon?: IconSnippet;
+    children?: Snippet;
+    class?: string;
+    placeholder?: string;
+    displayValue?: string;
+  }
+
+  let {
+    class: className = '',
+    TriggerIcon = undefined,
+    children,
+    placeholder = 'Select an option',
+    displayValue = undefined,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses =
+    'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors shadow-input';
+</script>
+
+<SelectPrimitive.Trigger
+  {...restProps}
+  class={baseClasses + ' ' + className}
+  aria-label={placeholder}
+>
+  <div class="flex-1 truncate text-left">
+    {#if children}
+      {@render children()}
+    {:else if displayValue !== undefined}
+      {displayValue}
+    {:else}
+      <span class="text-tertiary">{placeholder}</span>
+    {/if}
+  </div>
+  {#if TriggerIcon}
+    {@render TriggerIcon()}
+  {:else}
+    <Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
+  {/if}
+</SelectPrimitive.Trigger>

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

@@ -1,7 +1,10 @@
-export type SelectItemProps = {
-    value: string;
-    label: string;
-    description?: string;
-    group?: string;
-};
-export { default as Select } from './Select.svelte';
+import Content from './components/SelectContent.svelte';
+import Item from './components/SelectItem.svelte';
+import GroupHeading from './components/SelectGroupHeading.svelte';
+import Trigger from './components/SelectTrigger.svelte';
+import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
+import Group from './components/Group.svelte';
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
+export * from './types';

package/dist/components/select/index.js

@@ -1 +1,12 @@
-export { default as Select } from './Select.svelte';
+import { Select as SelectPrimitive } from 'bits-ui';
+// Custom Svelte components
+import Content from './components/SelectContent.svelte';
+import Item from './components/SelectItem.svelte';
+import GroupHeading from './components/SelectGroupHeading.svelte';
+import Trigger from './components/SelectTrigger.svelte';
+import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
+import Group from './components/Group.svelte';
+export const Root = SelectPrimitive.Root;
+export const Portal = SelectPrimitive.Portal;
+export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
+export * from './types';

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -1,92 +1,107 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
-	import { getFormContext, inputAttributes } from '@sjsf/form';
-	import Input from '../input/Input.svelte';
-	import type { FocusEventHandler } from 'svelte/elements';
-
-	type Props = ComponentProps['numberWidget'];
-
-	let { value = $bindable(), config, handlers, errors }: Props = $props();
-
-	const ctx = getFormContext();
-
-	const derivedAttrs = $derived(
-		inputAttributes(ctx, config, 'number', handlers, {
-			type: 'number'
-		})
-	);
-	const placeholder = $derived(
-		config?.uiSchema?.['ui:placeholder'] ||
-			config?.schema?.description ||
-			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
-				? String(config.schema.examples[0]) // Ensure the example is also a string
-				: '') ||
-			''
-	);
-
-	const readonly = $derived(config?.schema?.readOnly ?? false);
-	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
-
-	const onBlurHandler = $derived(
-		derivedAttrs.onblur
-			? (event: FocusEvent) =>
-					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-
-	const onChangeHandler = $derived(
-		derivedAttrs.onchange
-			? (event: Event) =>
-					(derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-
-	const onInputHandler = $derived(
-		derivedAttrs.oninput
-			? (event: Event) =>
-					(derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-
-	const getStringValue = () => {
-		if (value === undefined || value === null || isNaN(value)) {
-			return '';
-		}
-		return String(value);
-	};
-
-	const setNumericValue = (newValueFromInput: unknown) => {
-		const stringifiedInput =
-			newValueFromInput === null || newValueFromInput === undefined
-				? ''
-				: String(newValueFromInput);
-
-		if (stringifiedInput.trim() === '') {
-			value = undefined;
-		} else {
-			const num = parseFloat(stringifiedInput);
-			value = isNaN(num) ? undefined : num;
-		}
-	};
+  import type { ComponentProps } from '@sjsf/form';
+  import { getFormContext, inputAttributes } from '@sjsf/form';
+  import Input from '../input/Input.svelte';
+  import type { FocusEventHandler } from 'svelte/elements';
+
+  type Props = ComponentProps['numberWidget'];
+
+  let { value = $bindable(), config, handlers, errors }: Props = $props();
+
+  const ctx = getFormContext();
+
+  const derivedAttrs = $derived(
+    inputAttributes(ctx, config, 'number', handlers, {
+      type: 'number',
+    })
+  );
+  const placeholder = $derived(
+    config?.uiSchema?.['ui:placeholder'] ||
+      config?.schema?.description ||
+      (Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+        ? String(config.schema.examples[0]) // Ensure the example is also a string
+        : '') ||
+      ''
+  );
+
+  const readonly = $derived(config?.schema?.readOnly ?? false);
+  const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+
+  const onBlurHandler = $derived(
+    derivedAttrs.onblur
+      ? (event: FocusEvent) =>
+          (derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+
+  const onChangeHandler = $derived(
+    derivedAttrs.onchange
+      ? (event: Event) =>
+          (derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+
+  const onInputHandler = $derived(
+    derivedAttrs.oninput
+      ? (event: Event) =>
+          (derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+
+  let displayValue = $state('');
+
+  const getStringValue = () => {
+    if (displayValue !== '') {
+      return displayValue;
+    }
+
+    if (value === undefined || value === null || isNaN(value)) {
+      return '';
+    }
+    return String(value);
+  };
+
+  const setNumericValue = (newValueFromInput: unknown) => {
+    const stringifiedInput =
+      newValueFromInput === null || newValueFromInput === undefined
+        ? ''
+        : String(newValueFromInput);
+
+    const validNumberPattern = /^-?\d*\.?\d*$/;
+    if (stringifiedInput !== '' && !validNumberPattern.test(stringifiedInput)) {
+      return;
+    }
+
+    displayValue = stringifiedInput;
+
+    if (stringifiedInput.trim() === '') {
+      value = undefined;
+    } else {
+      const num = parseFloat(stringifiedInput);
+      value = isNaN(num) ? undefined : num;
+    }
+  };
 </script>
 
 <Input
-	bind:value={() => getStringValue(), (v) => setNumericValue(v)}
-	placeholder={String(placeholder)}
-	type={'number'}
-	{readonly}
-	id={String(derivedAttrs.id)}
-	name={String(derivedAttrs.name)}
-	disabled={derivedAttrs.disabled}
-	required={derivedAttrs.required}
-	step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
-	min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
-	max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
-	aria-invalid={errors && errors.length > 0 ? true : undefined}
-	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
-	class={String(currentClass)}
-	autocomplete="off"
-	oninput={onInputHandler}
-	onchange={onChangeHandler}
-	onblur={onBlurHandler}
+  bind:value={() => getStringValue(), (v) => setNumericValue(v)}
+  placeholder={String(placeholder)}
+  type={'text'}
+  inputmode={'decimal'}
+  pattern={config?.schema?.type === 'integer' ? '-?\\d*' : '-?\\d*\\.?\\d*'}
+  {readonly}
+  id={String(derivedAttrs.id)}
+  name={String(derivedAttrs.name)}
+  disabled={derivedAttrs.disabled}
+  required={derivedAttrs.required}
+  step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
+  min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
+  max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
+  aria-invalid={errors && errors.length > 0 ? true : undefined}
+  aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+  class={String(currentClass)}
+  autocomplete="off"
+  oninput={onInputHandler}
+  onchange={onChangeHandler}
+  onblur={onBlurHandler}
 />

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const SjsfNumberInputWrapper: import("svelte").Component<any, {}, "value">;
+declare const SjsfNumberInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
 type SjsfNumberInputWrapper = ReturnType<typeof SjsfNumberInputWrapper>;
 export default SjsfNumberInputWrapper;

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte

@@ -1,65 +1,65 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
-	import { getFormContext, inputAttributes } from '@sjsf/form';
-	import Input from '../input/Input.svelte';
-	import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
+  import type { ComponentProps } from '@sjsf/form';
+  import { getFormContext, inputAttributes } from '@sjsf/form';
+  import Input from '../input/Input.svelte';
+  import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
 
-	type Props = ComponentProps['textWidget'];
+  type Props = ComponentProps['textWidget'];
 
-	let { value = $bindable(), config, handlers, errors }: Props = $props();
+  let { value = $bindable(), config, handlers, errors }: Props = $props();
 
-	const ctx = getFormContext();
+  const ctx = getFormContext();
 
-	const derivedAttrs = $derived(
-		inputAttributes(ctx, config, 'text', handlers, {
-			type: 'text'
-		})
-	);
+  const derivedAttrs = $derived(
+    inputAttributes(ctx, config, 'text', handlers, {
+      type: 'text',
+    })
+  );
 
-	const placeholder = $derived(
-		config?.uiSchema?.['ui:placeholder'] ||
-			config?.schema?.description ||
-			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
-				? String(config.schema.examples[0])
-				: '') ||
-			''
-	);
+  const placeholder = $derived(
+    config?.uiSchema?.['ui:placeholder'] ||
+      config?.schema?.description ||
+      (Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+        ? String(config.schema.examples[0])
+        : '') ||
+      ''
+  );
 
-	const readonly = $derived(config?.schema?.readOnly ?? false);
-	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+  const readonly = $derived(config?.schema?.readOnly ?? false);
+  const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
 
-	const onInput = $derived(
-		derivedAttrs.oninput
-			? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-	const onChange = $derived(
-		derivedAttrs.onchange
-			? (event: Event) =>
-					(derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
-	const onBlur = $derived(
-		derivedAttrs.onblur
-			? (event: FocusEvent) =>
-					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
-			: undefined
-	);
+  const onInput = $derived(
+    derivedAttrs.oninput
+      ? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+  const onChange = $derived(
+    derivedAttrs.onchange
+      ? (event: Event) =>
+          (derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
+  const onBlur = $derived(
+    derivedAttrs.onblur
+      ? (event: FocusEvent) =>
+          (derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+      : undefined
+  );
 </script>
 
 <Input
-	bind:value
-	placeholder={String(placeholder)}
-	type="text"
-	{readonly}
-	id={String(derivedAttrs.id)}
-	name={String(derivedAttrs.name)}
-	disabled={derivedAttrs.disabled}
-	required={derivedAttrs.required}
-	oninput={onInput}
-	onchange={onChange}
-	onblur={onBlur}
-	aria-invalid={errors && errors.length > 0 ? true : undefined}
-	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
-	class={String(currentClass)}
+  bind:value
+  placeholder={String(placeholder)}
+  type="text"
+  {readonly}
+  id={String(derivedAttrs.id)}
+  name={String(derivedAttrs.name)}
+  disabled={derivedAttrs.disabled}
+  required={derivedAttrs.required}
+  oninput={onInput}
+  onchange={onChange}
+  onblur={onBlur}
+  aria-invalid={errors && errors.length > 0 ? true : undefined}
+  aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+  class={String(currentClass)}
 />

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const SjsfTextInputWrapper: import("svelte").Component<any, {}, "value">;
+declare const SjsfTextInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
 type SjsfTextInputWrapper = ReturnType<typeof SjsfTextInputWrapper>;
 export default SjsfTextInputWrapper;

package/dist/components/sjsf-wrappers/sjsfCustomTheme.js

@@ -4,5 +4,5 @@ import SjsfNumberInputWrapper from './SjsfNumberInputWrapper.svelte';
 import SjsfTextInputWrapper from './SjsfTextInputWrapper.svelte';
 export const sjsfCustomTheme = overrideByRecord(BasicTheme, {
     numberWidget: SjsfNumberInputWrapper,
-    textWidget: SjsfTextInputWrapper
+    textWidget: SjsfTextInputWrapper,
 });

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte

@@ -1,45 +1,45 @@
 <script module>
-	import SkeletonLoader from './SkeletonLoader.svelte';
-	import StatcardSkeleton from './StatcardSkeleton.svelte';
+  import SkeletonLoader from './SkeletonLoader.svelte';
+  import StatcardSkeleton from './StatcardSkeleton.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: SkeletonLoader,
-		title: 'Design System/SkeletonLoader'
-	});
+  const { Story } = defineMeta({
+    component: SkeletonLoader,
+    title: 'Design System/SkeletonLoader',
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<SkeletonLoader class="h-[50px] w-[200px]">
-		{#snippet children({ Skeleton })}
-			<Skeleton class="h-full w-full" />
-		{/snippet}
-	</SkeletonLoader>
+  <SkeletonLoader class="h-[50px] w-[200px]">
+    {#snippet children({ Skeleton })}
+      <Skeleton class="h-full w-full" />
+    {/snippet}
+  </SkeletonLoader>
 </Story>
 
 <Story name="ImagePlaceholder" asChild>
-	<SkeletonLoader class="h-[100px] w-[500px]">
-		{#snippet children({ Skeleton, SkeletonImage })}
-			<div class="flex h-full gap-2">
-				<Skeleton class="flex h-full w-[160px] items-center justify-center">
-					<SkeletonImage />
-				</Skeleton>
-				<div class="flex flex-1 flex-col gap-2">
-					<Skeleton class="flex h-[20px] w-full" />
-					<Skeleton class="flex h-[20px] w-full" />
-					<Skeleton class="flex h-[20px] w-full" />
-					<Skeleton class="flex h-[20px] w-full" />
-				</div>
-			</div>
-		{/snippet}
-	</SkeletonLoader>
+  <SkeletonLoader class="h-[100px] w-[500px]">
+    {#snippet children({ Skeleton, SkeletonImage })}
+      <div class="flex h-full gap-2">
+        <Skeleton class="flex h-full w-[160px] items-center justify-center">
+          <SkeletonImage />
+        </Skeleton>
+        <div class="flex flex-1 flex-col gap-2">
+          <Skeleton class="flex h-[20px] w-full" />
+          <Skeleton class="flex h-[20px] w-full" />
+          <Skeleton class="flex h-[20px] w-full" />
+          <Skeleton class="flex h-[20px] w-full" />
+        </div>
+      </div>
+    {/snippet}
+  </SkeletonLoader>
 </Story>
 
 <Story name="StatCard" asChild>
-	<div class="flex w-[900px] gap-4">
-		<StatcardSkeleton />
-		<StatcardSkeleton />
-		<StatcardSkeleton />
-	</div>
+  <div class="flex w-[900px] gap-4">
+    <StatcardSkeleton />
+    <StatcardSkeleton />
+    <StatcardSkeleton />
+  </div>
 </Story>