@reshape-biotech/design-system 0.0.47 → 0.0.48

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';

package/dist/components/datepicker/DatePicker.svelte

@@ -0,0 +1,344 @@
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { DateTime, type MonthNumbers } from 'luxon';
+	import { CaretLeft, CaretRight } from 'phosphor-svelte';
+	import IconButton from '../icon-button/IconButton.svelte';
+
+	interface Props {
+		selectedDate: DateTime | undefined;
+		onClick?: any;
+	}
+
+	let { selectedDate = $bindable(), onClick = (date: DateTime) => {} }: Props = $props();
+
+	const arrDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+	let today = DateTime.local();
+	const currentDay = today.day;
+	const currentMonth = today.month;
+	const currentYear = today.year;
+	let shownMonth = $state(today.month);
+	let shownYear = $state(today.year);
+	let selectedDay: number | undefined = $state();
+	let selectedMonth: number | undefined = $state();
+	let selectedYear: number | undefined = $state();
+	let rows = $state(initRows());
+
+	run(() => {
+		if (selectedDate) {
+			selectedDay = selectedDate.day;
+			selectedMonth = selectedDate.month;
+			selectedYear = selectedDate.year;
+		}
+	});
+
+	affectedRows();
+
+	function initRows() {
+		return [
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0]
+		];
+	}
+
+	function affectedRows() {
+		rows = initRows();
+		const firstDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).weekday - 1; // 0-based index
+		const lastDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).daysInMonth;
+
+		if (lastDayOfCurrentMonth === undefined) {
+			// Handle invalid date
+			return;
+		}
+
+		let iRow = 0;
+		let iCol = firstDayOfCurrentMonth; // Start at the correct weekday
+		let cpt = 1; // Start from day 1
+
+		for (iRow = 0; iRow < 6; iRow++) {
+			while (iCol < 7 && cpt <= lastDayOfCurrentMonth) {
+				rows[iRow][iCol] = cpt++;
+				iCol++;
+			}
+			iCol = 0; // Reset for the next row
+		}
+	}
+
+	function previousMonth() {
+		let dt = DateTime.local(shownYear, shownMonth).minus({ months: 1 });
+		shownMonth = dt.month as MonthNumbers;
+		shownYear = dt.year;
+		affectedRows();
+	}
+
+	function nextMonth() {
+		let dt = DateTime.local(shownYear, shownMonth).plus({ months: 1 });
+		shownMonth = dt.month as MonthNumbers;
+		shownYear = dt.year;
+		affectedRows();
+	}
+
+	function selectDate(y: number, m: number, d: number) {
+		selectedDate = DateTime.local(y, m, d);
+		onClick(selectedDate);
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="calendar-container" onclick={(e) => e.stopPropagation()}>
+	<div class="calendar">
+		<div class="calendar-header">
+			<div class="month-year">
+				<IconButton onclick={previousMonth}
+					><CaretLeft class="text-secondary" weight="bold" size="0.75rem" /></IconButton
+				>
+				<h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
+				<IconButton onclick={nextMonth}
+					><CaretRight class="text-secondary" weight="bold" size="0.75rem" /></IconButton
+				>
+			</div>
+		</div>
+		<div class="calendar-body">
+			<table>
+				<thead>
+					<tr>
+						{#each arrDays as day}
+							<th>
+								<p>{day}</p>
+							</th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each rows as col}
+						<tr>
+							{#each col as dayOfMonth}
+								<td>
+									{#if dayOfMonth > 0}
+										<div class="date-container">
+											<p
+												class={dayOfMonth === selectedDay &&
+												selectedMonth === shownMonth &&
+												selectedYear === shownYear
+													? 'date selected-date'
+													: 'date'}
+											>
+												<button
+													onclick={() => {
+														selectDate(shownYear, shownMonth, dayOfMonth);
+													}}
+												>
+													{dayOfMonth}
+												</button>
+											</p>
+											{#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
+												<svg
+													class="current-date-indicator text-accent"
+													xmlns="http://www.w3.org/2000/svg"
+													width="4"
+													height="4"
+													viewBox="0 0 4 4"
+												>
+													<circle cx="2" cy="2" r="2" fill="currentColor" />
+												</svg>
+											{/if}
+										</div>
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
+
+<style>
+	.calendar-container {
+
+    display: flex;
+
+    width: 312px
+}
+
+	.calendar {
+
+    overflow: hidden;
+
+    border-radius: 0.5rem;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding: 1rem;
+
+    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 0.5px rgba(18, 25, 42, 0.08);
+
+    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 0.5px var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+	.month-year {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between
+}
+
+	.month-year .btn-custom {
+
+    border-style: none;
+
+    background-image: none
+}
+
+	.calendar-body {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    overflow-x: auto;
+
+    padding-top: 22px
+}
+
+	table {
+
+    margin: 0px;
+
+    width: 100%;
+
+    border-collapse: collapse;
+
+    --tw-border-spacing-x: 0px;
+
+    --tw-border-spacing-y: 0px;
+
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+
+    padding: 0px
+}
+
+	table thead th p {
+
+    text-align: center;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem;
+
+    font-weight: 500;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	tr {
+
+    height: 2.5rem;
+
+    border-style: none
+}
+
+	table th,
+	table td {
+
+    margin: 0px;
+
+    border-style: none;
+
+    padding: 0px
+}
+
+	.date-container {
+
+    position: relative
+}
+
+	.date {
+
+    display: flex;
+
+    height: 2.5rem;
+
+    width: 2.5rem;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    transition-duration: 150ms
+}
+
+	.date:hover {
+
+    background-color: #5750ee1A
+}
+
+	.date:focus {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+	.selected-date {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+	.selected-date:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1))
+}
+
+	.current-date-indicator {
+
+    position: absolute;
+
+    left: 18px;
+
+    top: 2rem
+}
+
+	.date button {
+
+    border-style: none;
+
+    background-image: none
+}
+</style>

package/dist/components/datepicker/DatePicker.svelte.d.ts

@@ -0,0 +1,8 @@
+import { DateTime } from 'luxon';
+interface Props {
+    selectedDate: DateTime | undefined;
+    onClick?: any;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "selectedDate">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

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

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

package/dist/components/datepicker/index.js

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

package/dist/components/divider/Divider.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+	import Divider from './Divider.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Divider,
+		title: 'Design System/Divider',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<Divider />
+</Story>

package/dist/components/divider/Divider.stories.svelte.d.ts

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class={`h-0 w-full border-b border-static ${className}`}></div>

package/dist/components/divider/Divider.svelte.d.ts

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

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

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

package/dist/components/divider/index.js

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