@reshape-biotech/design-system 0.0.45 → 0.0.48

package/dist/components/collapsible/Collapsible.stories.svelte.d.ts

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

package/dist/components/collapsible/components/collapsible-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Collapsible, type WithoutChildrenOrChild } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import type { CollapsibleContentProps } from '../types';
+
+	let {
+		ref = $bindable(null),
+		duration = 200,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CollapsibleContentProps> & {
+		duration?: number;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<Collapsible.Content forceMount bind:ref {...restProps}>
+	{#snippet child({ props, open })}
+		{#if open}
+			<div {...props} transition:slide={{ duration }}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</Collapsible.Content>

package/dist/components/collapsible/components/collapsible-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type WithoutChildrenOrChild } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { CollapsibleContentProps } from '../types';
+type $$ComponentProps = WithoutChildrenOrChild<CollapsibleContentProps> & {
+    duration?: number;
+    children?: Snippet;
+};
+declare const CollapsibleContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import { CaretDown } from 'phosphor-svelte';
+	import type { CollapsibleTriggerProps } from '../types';
+
+	let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
+</script>
+
+<Collapsible.Trigger {...props} class="transition-all {props.class}">
+	<div class="container">
+		{@render children()}
+		{#if withIcon}
+			<CaretDown class="icon" />
+		{/if}
+	</div>
+</Collapsible.Trigger>
+
+<style>
+	:global([data-state='open']) :global(.icon) {
+
+    --tw-rotate: 180deg;
+
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+	.container {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    gap: 0.5rem
+}
+</style>

package/dist/components/collapsible/components/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleTriggerProps } from '../types';
+declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

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

@@ -0,0 +1,5 @@
+import { Collapsible } from 'bits-ui';
+export declare const Root: import("svelte").Component<Collapsible.RootProps, {}, "open" | "ref">;
+export { default as Trigger } from './components/collapsible-trigger.svelte';
+export { default as Content } from './components/collapsible-content.svelte';
+export type { CollapsibleTriggerProps, CollapsibleContentProps } from './types';

package/dist/components/collapsible/index.js

@@ -0,0 +1,4 @@
+import { Collapsible } from 'bits-ui';
+export const Root = Collapsible.Root;
+export { default as Trigger } from './components/collapsible-trigger.svelte';
+export { default as Content } from './components/collapsible-content.svelte';

package/dist/components/collapsible/types.d.ts

@@ -0,0 +1,9 @@
+import { type CollapsibleContentProps as BitsCollapsibleContentProps, type CollapsibleTriggerProps as BitsCollapsibleTriggerProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type CollapsibleTriggerProps = {
+    children: Snippet;
+    withIcon?: boolean;
+} & BitsCollapsibleTriggerProps;
+export type CollapsibleContentProps = {
+    children: Snippet;
+} & BitsCollapsibleContentProps;

package/dist/components/collapsible/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

package/dist/components/combobox/Combobox.stories.svelte

@@ -0,0 +1,119 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Combobox from './index';
+	import { Plus } from 'phosphor-svelte';
+	import IconButton from '../icon-button/IconButton.svelte';
+	import Divider from '../divider/Divider.svelte';
+	import Tag from '../tag/Tag.svelte';
+
+	const { Story } = defineMeta({
+		component: Combobox.Root,
+		title: 'Design System/Combobox',
+		tags: ['autodocs']
+	});
+
+	const fruits = [
+		{ value: 'mango', label: 'Mango' },
+		{ value: 'watermelon', label: 'Watermelon' },
+		{ value: 'apple', label: 'Apple' },
+		{ value: 'pineapple', label: 'Pineapple' },
+		{ value: 'orange', label: 'Orange' },
+		{ value: 'grape', label: 'Grape' },
+		{ value: 'strawberry', label: 'Strawberry' },
+		{ value: 'banana', label: 'Banana' },
+		{ value: 'kiwi', label: 'Kiwi' },
+		{ value: 'peach', label: 'Peach' },
+		{ value: 'cherry', label: 'Cherry' },
+		{ value: 'blueberry', label: 'Blueberry' },
+		{ value: 'raspberry', label: 'Raspberry' },
+		{ value: 'blackberry', label: 'Blackberry' },
+		{ value: 'plum', label: 'Plum' },
+		{ value: 'apricot', label: 'Apricot' },
+		{ value: 'pear', label: 'Pear' },
+		{ value: 'grapefruit', label: 'Grapefruit' }
+	];
+
+	let searchValue = $state('');
+
+	let selected = $state<string[]>([]);
+
+	const filteredFruits = $derived(
+		searchValue === ''
+			? fruits
+			: fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
+	);
+	const exactMatch = $derived(
+		filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
+	);
+	let customAnchor = $state<HTMLElement>(null!);
+</script>
+
+<Story name="Base">
+	<Combobox.Root
+		onOpenChange={(o) => {
+			if (!o) searchValue = '';
+		}}
+		type="multiple"
+		name="favoriteFruit"
+		items={filteredFruits}
+		bind:value={selected}
+	>
+		<div class="flex gap-2">
+			{#each selected as fruit}
+				<Tag>
+					{fruit}
+				</Tag>
+			{/each}
+		</div>
+		<Combobox.Trigger>
+			<div bind:this={customAnchor}>
+				<IconButton rounded={false}>
+					<Plus size={16} />
+				</IconButton>
+			</div>
+		</Combobox.Trigger>
+		<Combobox.Content {customAnchor} class="flex flex-col justify-between">
+			<div>
+				<Combobox.Input
+					placeholder="Search a fruit"
+					oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+					autofocus
+				/>
+				<Divider />
+			</div>
+			<div class="flex flex-grow flex-col">
+				{#if filteredFruits.length > 0}
+					<Combobox.Group>
+						<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+						{#each filteredFruits as fruit (fruit.value)}
+							<Combobox.Item value={fruit.value} label={fruit.label}>
+								{#snippet children({ selected })}
+									{fruit.label}
+									{#if selected}
+										<Combobox.Indicator />
+									{/if}
+								{/snippet}
+							</Combobox.Item>
+						{:else}
+							<span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+						{/each}
+					</Combobox.Group>
+				{/if}
+			</div>
+			{#if !exactMatch && searchValue !== ''}
+				<Divider />
+
+				<Combobox.Add
+					class=""
+					onclick={() => {
+						selected.push(searchValue);
+						fruits.push({ value: searchValue, label: searchValue });
+						searchValue = '';
+					}}
+				>
+					<p>Add new fruit</p>
+				</Combobox.Add>
+			{/if}
+		</Combobox.Content>
+	</Combobox.Root>
+</Story>

package/dist/components/combobox/Combobox.stories.svelte.d.ts

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

package/dist/components/combobox/components/combobox-add.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Plus } from 'phosphor-svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = { children: Snippet } & HTMLButtonAttributes;
+
+	let { children, ...props }: Props = $props();
+</script>
+
+<button {...props}>
+	<Plus />
+	{@render children()}
+</button>
+
+<style>
+	button {
+    display: flex;
+    height: 2.5rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+</style>

package/dist/components/combobox/components/combobox-add.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = {
+    children: Snippet;
+} & HTMLButtonAttributes;
+declare const ComboboxAdd: import("svelte").Component<Props, {}, "">;
+type ComboboxAdd = ReturnType<typeof ComboboxAdd>;
+export default ComboboxAdd;

package/dist/components/combobox/components/combobox-content.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { Combobox } from 'bits-ui';
+	import type { ComboboxContentProps } from '../types';
+	import { CaretDown, CaretUp } from 'phosphor-svelte';
+
+	let {
+		children,
+		class: className,
+		showScroll = true,
+		portalled = true,
+		...props
+	}: ComboboxContentProps = $props();
+</script>
+
+{#snippet content()}
+	<Combobox.Content {...props} class={className}>
+		{#if showScroll}
+			<Combobox.ScrollUpButton class="flex justify-center">
+				<CaretUp />
+			</Combobox.ScrollUpButton>
+			<Combobox.Viewport class="p-1">
+				{@render children()}
+			</Combobox.Viewport>
+			<Combobox.ScrollDownButton class="flex justify-center">
+				<CaretDown />
+			</Combobox.ScrollDownButton>
+		{:else}
+			{@render children()}
+		{/if}
+	</Combobox.Content>
+{/snippet}
+
+{#if portalled}
+	<Combobox.Portal>
+		{@render content()}
+	</Combobox.Portal>
+{:else}
+	{@render content()}
+{/if}
+
+<style>
+	:global([data-combobox-content]) {
+
+    width: 100%;
+
+    border-radius: 0.75rem;
+
+    border-width: 1px;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+	:global([data-combobox-input]) {
+
+    width: 100%;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+	:global([data-combobox-item]) {
+
+    display: flex;
+
+    height: 2.5rem;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    border-radius: 0.375rem;
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem
+}
+	:global([data-combobox-item][data-highlighted]) {
+
+    background-color: #12192a0d
+}
+
+	:global([data-combobox-group-label]) {
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+</style>

package/dist/components/combobox/components/combobox-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxContentProps } from '../types';
+declare const ComboboxContent: import("svelte").Component<ComboboxContentProps, {}, "">;
+type ComboboxContent = ReturnType<typeof ComboboxContent>;
+export default ComboboxContent;

package/dist/components/combobox/components/combobox-indicator.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Check } from 'phosphor-svelte';
+</script>
+
+<Check size={16} />

package/dist/components/combobox/components/combobox-indicator.svelte.d.ts

@@ -0,0 +1,18 @@
+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 ComboboxIndicator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ComboboxIndicator = InstanceType<typeof ComboboxIndicator>;
+export default ComboboxIndicator;

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

@@ -0,0 +1,14 @@
+import { Combobox } from 'bits-ui';
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
+export declare const Item: import("svelte").Component<Combobox.ItemProps, {}, "ref">;
+export declare const Group: import("svelte").Component<Combobox.GroupProps, {}, "ref">;
+export declare const GroupHeading: import("svelte").Component<Combobox.GroupHeadingProps, {}, "ref">;
+export declare const Separator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+export declare const Trigger: import("svelte").Component<Combobox.TriggerProps, {}, "ref">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export declare const Input: import("svelte").Component<Combobox.InputProps, {}, "ref">;
+export declare const Arrow: import("svelte").Component<import("bits-ui/dist/bits/utilities/arrow").ArrowProps, {}, "">;
+export { default as Add } from './components/combobox-add.svelte';
+export { default as Content } from './components/combobox-content.svelte';
+export { default as Indicator } from './components/combobox-indicator.svelte';
+export * from './types';

package/dist/components/combobox/index.js

@@ -0,0 +1,15 @@
+import { Combobox } from 'bits-ui';
+// Non-modified components
+export const Root = Combobox.Root;
+export const Item = Combobox.Item;
+export const Group = Combobox.Group;
+export const GroupHeading = Combobox.GroupHeading;
+export const Separator = Combobox.Separator;
+export const Trigger = Combobox.Trigger;
+export const Portal = Combobox.Portal;
+export const Input = Combobox.Input;
+export const Arrow = Combobox.Arrow;
+export { default as Add } from './components/combobox-add.svelte';
+export { default as Content } from './components/combobox-content.svelte';
+export { default as Indicator } from './components/combobox-indicator.svelte';
+export * from './types';

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,20 @@
+import { type ComboboxContentProps as BitsComboboxContentProps, type ComboboxRootProps as BitsComboboxRootProps, type ComboboxItemProps as BitsComboboxItemProps, type ComboboxInputProps as BitsComboboxInputProps, type ComboboxTriggerProps as BitsComboboxTriggerProps, type ComboboxArrowProps as BitsComboboxArrowProps, type ComboboxContentStaticProps as BitsComboboxContentStaticProps, type ComboboxGroupHeadingProps as BitsComboboxGroupHeadingProps, type SelectItemSnippetProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type ComboboxRootProps = BitsComboboxRootProps;
+export type ComboboxContentProps = {
+    children: Snippet;
+    showScroll?: boolean;
+    portalled?: boolean;
+} & BitsComboboxContentProps;
+export type ComboboxTriggerProps = {
+    children: Snippet;
+} & BitsComboboxTriggerProps;
+export type ComboboxItemProps = {
+    children?: Snippet<[SelectItemSnippetProps]>;
+} & BitsComboboxItemProps;
+export type ComboboxGroupHeadingProps = {
+    children: Snippet;
+} & BitsComboboxGroupHeadingProps;
+export type ComboboxInputProps = BitsComboboxInputProps;
+export type ComboboxContentStatic = BitsComboboxContentStaticProps;
+export type ComboboxArrowProps = BitsComboboxArrowProps;

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';