@reshape-biotech/design-system 2.4.1 → 2.4.2

package/dist/components/input/Input.svelte

@@ -1,228 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { IconButton } from '../icon-button';
-  import { Icon } from '../icons';
-  import type { HTMLInputAttributes } from 'svelte/elements';
-
-  interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
-    label?: string | null;
-    id?: string | undefined;
-    variant?: 'default' | 'transparent' | 'borderless';
-    validator?: (a: string | number) => boolean;
-    prefix?: Snippet<[any]>;
-    suffix?: Snippet;
-    error?: Snippet;
-    input?: HTMLInputElement;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    clearable?: boolean;
-    onclear?: () => void;
-    class?: string;
-    oninput?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
-  }
-
-  let {
-    label = null,
-    variant = 'default',
-    value = $bindable(),
-    type = 'text',
-    validator = (_) => {
-      return true;
-    },
-    prefix,
-    suffix,
-    error,
-    input = $bindable(),
-    size = 'md',
-    clearable = false,
-    onclear = () => {},
-    class: className,
-    oninput,
-    onblur,
-    ...rest
-  }: InputProps = $props();
-
-  export function focus() {
-    input?.focus();
-  }
-
-  let valid = $state(true);
-
-  const inputId = crypto.randomUUID();
-  const id = $derived(rest.id ?? inputId);
-  function handleInput(event: Event) {
-    if (rest.readonly) return;
-    const target = event.target as HTMLInputElement;
-    value = target.value;
-    oninput?.(event);
-  }
-
-  function handleBlur(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
-    valid = validator(value);
-    onblur?.(event);
-  }
-</script>
-
-<div class="w-full">
-  {#if label}
-    <label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">
-      {label}
-      {#if rest.required}
-        <span class="ml-0.5 text-danger">*</span>
-      {/if}
-    </label>
-  {/if}
-
-  <div
-    class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
-    class:border-transparent={variant === 'transparent'}
-    class:shadow-input={!(variant === 'transparent')}
-    class:!border-error={!valid}
-    class:borderless={variant === 'borderless'}
-  >
-    <div class="whitespace-nowrap text-secondary">
-      {@render prefix?.({ valid })}
-    </div>
-    <input
-      {id}
-      class="inline leading-none"
-      class:has-text={value}
-      class:has-placeholder={rest.placeholder}
-      aria-label={label}
-      {type}
-      oninput={handleInput}
-      onblur={handleBlur}
-      bind:this={input}
-      bind:value
-      {...rest}
-    />
-    <div class="whitespace-nowrap text-secondary">
-      {@render suffix?.()}
-    </div>
-
-    {#if clearable && value}
-      <IconButton
-        variant="transparent"
-        rounded={false}
-        size="xs"
-        onclick={() => {
-          value = '';
-          input?.focus();
-          onclear();
-        }}
-      >
-        <Icon iconName="X" />
-      </IconButton>
-    {/if}
-  </div>
-
-  {@render error?.()}
-</div>
-
-<style>
-  input {
-
-    width: 100%;
-
-    resize: none;
-
-    padding: 0.25rem;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-  div:not(:focus-within):hover {
-
-    border-color: #5750ee40
-}
-
-  div:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
-
-  .borderless {
-
-    border-style: none;
-
-    --tw-shadow: 0 0 #0000;
-
-    --tw-shadow-colored: 0 0 #0000;
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-  .borderless input {
-
-    border-style: none;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px;
-
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
-}
-
-  .size-xs {
-
-    height: 1.5rem;
-
-    padding: 0.25rem;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem
-}
-
-  .size-sm {
-
-    height: 2rem;
-
-    padding: 0.25rem
-}
-
-  .size-md {
-
-    height: 2.5rem;
-
-    padding: 0.5rem
-}
-
-  .size-lg {
-
-    height: 3rem;
-
-    padding-left: 0.5rem;
-
-    padding-right: 0.5rem;
-
-    padding-top: 0.75rem;
-
-    padding-bottom: 0.75rem;
-
-    font-size: 1rem;
-
-    line-height: 1.5rem
-}
-
-  .size-dynamic {
-
-    height: auto;
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
-}
-</style>

package/dist/components/input/Input.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
-    label?: string | null;
-    id?: string | undefined;
-    variant?: 'default' | 'transparent' | 'borderless';
-    validator?: (a: string | number) => boolean;
-    prefix?: Snippet<[any]>;
-    suffix?: Snippet;
-    error?: Snippet;
-    input?: HTMLInputElement;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    clearable?: boolean;
-    onclear?: () => void;
-    class?: string;
-    oninput?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
-}
-declare const Input: import("svelte").Component<InputProps, {
-    focus: () => void;
-}, "value" | "input">;
-type Input = ReturnType<typeof Input>;
-export default Input;

package/dist/components/input/Input.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/input/Input.test.js

@@ -1,35 +0,0 @@
-import { render } from '@testing-library/svelte';
-import { describe, it, expect } from 'vitest';
-import Input from './Input.svelte';
-describe('Input', () => {
-    it('should render input with text type when no type is provided', () => {
-        const { getByRole } = render(Input, {
-            props: {
-                value: 'foo',
-            },
-        });
-        const input = getByRole('textbox');
-        expect(input.type).toBe('text');
-    });
-    it('should render label when provided', () => {
-        const { getByLabelText } = render(Input, {
-            props: {
-                value: 'foo',
-                label: 'bar',
-            },
-        });
-        const input = getByLabelText('bar');
-        expect(input.value).toBe('foo');
-    });
-    it('should include placeholder when provided, and contain placeholder class', () => {
-        const { getByRole } = render(Input, {
-            props: {
-                placeholder: 'foo',
-                value: 'foo',
-            },
-        });
-        const input = getByRole('textbox');
-        expect(input.placeholder).toBe('foo');
-        expect(input.classList).toContain('has-placeholder');
-    });
-});

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

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

package/dist/components/input/index.js

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

package/dist/components/label/Label.stories.svelte

@@ -1,28 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Label from './Label.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Label',
-    component: Label,
-    argTypes: {
-      text: { control: 'text' },
-      forId: { control: 'text' },
-      required: { control: 'boolean' },
-      class: { control: 'text' },
-    },
-  });
-</script>
-
-<Story name="Default" args={{ text: 'Email Address', forId: 'email' }} />
-
-<Story name="Required" args={{ text: 'Password', forId: 'password', required: true }} />
-
-<Story
-  name="With Custom Class"
-  args={{
-    text: 'Custom Styled Label',
-    forId: 'custom',
-    class: 'text-lg text-primary font-bold',
-  }}
-/>

package/dist/components/label/Label.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Label from './Label.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 Label: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Label = InstanceType<typeof Label>;
-export default Label;

package/dist/components/label/Label.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  interface Props {
-    forId: string;
-    text: string;
-    required?: boolean;
-    class?: string;
-  }
-
-  const { forId, text, required = false, class: className }: Props = $props();
-</script>
-
-<label for={forId} class="block text-sm text-secondary {className ?? ''}">
-  {text}
-  {#if required}
-    <span class="ml-0.5 text-danger">*</span>
-  {/if}
-</label>

package/dist/components/label/Label.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    forId: string;
-    text: string;
-    required?: boolean;
-    class?: string;
-}
-declare const Label: import("svelte").Component<Props, {}, "">;
-type Label = ReturnType<typeof Label>;
-export default Label;

package/dist/components/label/Label.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/label/Label.test.js

@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import Label from './Label.svelte';
-import { describe, it, expect } from 'vitest';
-describe('Label component', () => {
-    it('renders the label text', () => {
-        const labelText = 'Test Label';
-        render(Label, { props: { text: labelText, forId: 'testId' } });
-        expect(screen.getByText(labelText)).toBeInTheDocument();
-    });
-    it('renders the required indicator when required is true', () => {
-        render(Label, { props: { text: 'Required Label', forId: 'reqId', required: true } });
-        expect(screen.getByText('*')).toBeInTheDocument();
-        expect(screen.getByText('*')).toHaveClass('ml-0.5 text-danger');
-    });
-    it('does not render the required indicator when required is false or not provided', () => {
-        render(Label, { props: { text: 'Optional Label', forId: 'optId' } });
-        expect(screen.queryByText('*')).not.toBeInTheDocument();
-    });
-    it('applies the forId to the for attribute', () => {
-        const testId = 'my-input';
-        render(Label, { props: { text: 'Label for Input', forId: testId } });
-        expect(screen.getByText('Label for Input').closest('label')).toHaveAttribute('for', testId);
-    });
-    it('applies custom classes', () => {
-        const customClass = 'my-custom-class';
-        render(Label, { props: { text: 'Custom Class Label', forId: 'customId', class: customClass } });
-        expect(screen.getByText('Custom Class Label').closest('label')).toHaveClass(customClass);
-    });
-});

package/dist/components/list/List.stories.svelte

@@ -1,97 +0,0 @@
-<script module lang="ts">
-  import List from './List.svelte';
-  import Tag from '../tag/Tag.svelte';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Icon } from '../icons';
-
-  const { Story } = defineMeta({
-    component: List,
-    title: 'Design System/List',
-    tags: ['autodocs'],
-  });
-
-  const items: { name: string; licenses: string; repository: string }[] = [
-    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-  ];
-</script>
-
-<Story name="Default" args={{}} asChild>
-  <List {items}>
-    {#snippet item(item)}
-      <div class="flex min-h-2 flex-row gap-2">
-        <div class="flex flex-row justify-start gap-2">
-          <div class="max-w-56 truncate font-bold">
-            {item.name}
-          </div>
-          {#if item.licenses}
-            <Tag>
-              {item.licenses}
-            </Tag>
-          {/if}
-        </div>
-        <div class="flex grow flex-row justify-end gap-3">
-          {#if item.repository}
-            <div class="flex flex-row items-center gap-1">
-              <a
-                href={item.repository}
-                class="text-secondary"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Repository
-              </a>
-              <Icon iconName="ArrowUpRight" />
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/snippet}
-  </List>
-</Story>
-
-<Story name="Compact" args={{ variant: 'compact' }} asChild>
-  <List {items} variant="compact">
-    {#snippet item(item)}
-      <div class="flex min-h-2 flex-row gap-2">
-        <div class="flex flex-row justify-start gap-2">
-          <div class="max-w-56 truncate font-bold">
-            {item.name}
-          </div>
-          {#if item.licenses}
-            <Tag>
-              {item.licenses}
-            </Tag>
-          {/if}
-        </div>
-        <div class="flex grow flex-row justify-end gap-3">
-          {#if item.repository}
-            <div class="flex flex-row items-center gap-1">
-              <a
-                href={item.repository}
-                class="text-gray-700"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Repository
-              </a>
-              <Icon iconName="ArrowUpRight" />
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/snippet}
-  </List>
-</Story>
-
-<Story name="Loading" asChild>
-  <List variant="compact" items={[{}, {}, {}]}>
-    {#snippet item({})}
-      <div class="flex h-8 w-full items-center">
-        <div class="skeleton h-6 w-full bg-neutral"></div>
-      </div>
-    {/snippet}
-  </List>
-</Story>

package/dist/components/list/List.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import List from './List.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 List: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type List = InstanceType<typeof List>;
-export default List;

package/dist/components/list/List.svelte

@@ -1,69 +0,0 @@
-<script lang="ts" generics="T">
-  import type { Overflow } from '../../tailwind';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    items: T[];
-    item: Snippet<[T]>;
-    overflow?: Overflow;
-    variant?: 'compact' | 'default';
-  };
-  let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
-</script>
-
-<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
-  {#each items as currentItem, i}
-    <div class="item">
-      {@render item(currentItem)}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .listStyles {
-
-    display: flex;
-
-    height: 100%;
-
-    flex-direction: column;
-
-    align-items: flex-start;
-
-    align-self: stretch;
-
-    border-radius: 0.25rem
-}
-
-    .listStyles.default {
-
-    gap: 1rem
-}
-
-    .listStyles.compact {
-
-    gap: 0px;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding-left: 1rem;
-
-    padding-right: 1rem
-}
-
-    .listStyles.compact :global(> .item:not(:last-child)) {
-
-    border-bottom-width: 1px;
-
-    border-style: solid;
-
-    border-color: #12192a14
-}
-
-    .listStyles :global(.item) {
-
-    align-self: stretch
-}
-</style>

package/dist/components/list/List.svelte.d.ts

@@ -1,24 +0,0 @@
-import type { Overflow } from '../../tailwind';
-import type { Snippet } from 'svelte';
-declare class __sveltets_Render<T> {
-    props(): {
-        items: T[];
-        item: Snippet<[T]>;
-        overflow?: Overflow;
-        variant?: "compact" | "default";
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const List: $$IsomorphicComponent;
-type List<T> = InstanceType<typeof List<T>>;
-export default List;

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

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

package/dist/components/list/index.js

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

package/dist/components/logo/Logo.stories.svelte

@@ -1,21 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Logo from './Logo.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    title: 'Design System/Logo',
-    component: Logo,
-    tags: ['autodocs'],
-  });
-</script>
-
-<Story name="Base" asChild>
-  <div class="flex flex-col gap-4">
-    <Logo size="xs" />
-    <Logo size="sm" />
-    <Logo size="md" />
-    <Logo size="lg" />
-    <Logo size="xl" />
-  </div>
-</Story>

package/dist/components/logo/Logo.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Logo;
-type Logo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Logo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Logo from './Logo.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;
-}