@reshape-biotech/design-system 0.0.35 → 0.0.37

package/dist/components/drawer/Drawer.stories.svelte

@@ -14,11 +14,11 @@
 <Story name="Base">
 	<div class="py-12">
 		<Drawer id="my-drawer">
-			{#snippet trigger({ C })}
+			{#snippet trigger({ DrawerLabel })}
 				<div>
-					<C.DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
+					<DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
 						>Open Drawer
-					</C.DrawerLabel>
+					</DrawerLabel>
 				</div>
 			{/snippet}
 			{#snippet content()}
@@ -35,10 +35,10 @@
 <Story name="Open">
 	<div class="py-12">
 		<Drawer id="my-drawer" open controlled>
-			{#snippet trigger({ C })}
-				<C.DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
+			{#snippet trigger({ DrawerLabel })}
+				<DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
 					>Open Drawer
-				</C.DrawerLabel>
+				</DrawerLabel>
 			{/snippet}
 			{#snippet content()}
 				<div>
@@ -54,10 +54,10 @@
 <Story name="Open Left">
 	<div class="py-12">
 		<Drawer id="my-drawer" side="left">
-			{#snippet trigger({ C })}
-				<C.DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
+			{#snippet trigger({ DrawerLabel })}
+				<DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
 					>Open Drawer
-				</C.DrawerLabel>
+				</DrawerLabel>
 			{/snippet}
 			{#snippet content()}
 				<div>

package/dist/components/drawer/Drawer.svelte

@@ -8,7 +8,7 @@
 		// Open only works when controlled is true
 		open?: boolean;
 		side?: 'left' | 'right';
-		trigger?: Snippet<[{ C: { DrawerLabel: typeof DrawerLabel } }]>;
+		trigger?: Snippet<[{ DrawerLabel: typeof DrawerLabel }]>;
 		content: Snippet;
 	}
 
@@ -20,9 +20,6 @@
 		trigger,
 		content
 	}: Props = $props();
-	const C = {
-		DrawerLabel
-	};
 </script>
 
 <div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
@@ -33,7 +30,7 @@
 	{/if}
 
 	<div class="drawer-content">
-		{@render trigger?.({ C })}
+		{@render trigger?.({ DrawerLabel })}
 	</div>
 	<div class="drawer-side" inert={controlled ? !open : false}>
 		<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -6,9 +6,7 @@ interface Props {
     open?: boolean;
     side?: 'left' | 'right';
     trigger?: Snippet<[{
-        C: {
-            DrawerLabel: typeof DrawerLabel;
-        };
+        DrawerLabel: typeof DrawerLabel;
     }]>;
     content: Snippet;
 }

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -15,16 +15,16 @@
 			{#snippet trigger({ Trigger })}
 				<Trigger>Dropdown</Trigger>
 			{/snippet}
-			{#snippet content({ C })}
+			{#snippet content({ DropdownMenu })}
 				<div>
-					<C.DropdownMenu class="w-full">
+					<DropdownMenu class="w-full">
 						<li>
 							<p>1st item</p>
 						</li>
 						<li>
 							<p>2nd item</p>
 						</li>
-					</C.DropdownMenu>
+					</DropdownMenu>
 				</div>
 			{/snippet}
 		</Dropdown>
@@ -37,16 +37,16 @@
 			{#snippet trigger({ Trigger })}
 				<Trigger variant="secondary">Dropdown</Trigger>
 			{/snippet}
-			{#snippet content({ C })}
+			{#snippet content({ DropdownMenu })}
 				<div>
-					<C.DropdownMenu class="w-full">
+					<DropdownMenu class="w-full">
 						<li>
 							<p>1st item</p>
 						</li>
 						<li>
 							<p>2nd item</p>
 						</li>
-					</C.DropdownMenu>
+					</DropdownMenu>
 				</div>
 			{/snippet}
 		</Dropdown>
@@ -58,16 +58,16 @@
 			{#snippet trigger({ Trigger })}
 				<Trigger variant="transparent">Dropdown</Trigger>
 			{/snippet}
-			{#snippet content({ C })}
+			{#snippet content({ DropdownMenu })}
 				<div>
-					<C.DropdownMenu class="w-full">
+					<DropdownMenu class="w-full">
 						<li>
 							<p>1st item</p>
 						</li>
 						<li>
 							<p>2nd item</p>
 						</li>
-					</C.DropdownMenu>
+					</DropdownMenu>
 				</div>
 			{/snippet}
 		</Dropdown>
@@ -79,16 +79,16 @@
 			{#snippet trigger({ Trigger })}
 				<Trigger variant="danger">Dropdown</Trigger>
 			{/snippet}
-			{#snippet content({ C })}
+			{#snippet content({ DropdownMenu })}
 				<div>
-					<C.DropdownMenu class="w-full">
+					<DropdownMenu class="w-full">
 						<li>
 							<p>1st item</p>
 						</li>
 						<li>
 							<p>2nd item</p>
 						</li>
-					</C.DropdownMenu>
+					</DropdownMenu>
 				</div>
 			{/snippet}
 		</Dropdown>
@@ -103,16 +103,16 @@
 					<Trigger>Bottom</Trigger>
 				{/snippet}
 
-				{#snippet content({ C })}
+				{#snippet content({ DropdownMenu })}
 					<div>
-						<C.DropdownMenu class="w-[120px]">
+						<DropdownMenu class="w-[120px]">
 							<li>
 								<p>1st item</p>
 							</li>
 							<li>
 								<p>2nd item</p>
 							</li>
-						</C.DropdownMenu>
+						</DropdownMenu>
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -120,16 +120,16 @@
 				{#snippet trigger({ Trigger })}
 					<Trigger>Top</Trigger>
 				{/snippet}
-				{#snippet content({ C })}
+				{#snippet content({ DropdownMenu })}
 					<div>
-						<C.DropdownMenu class="w-[120px]">
+						<DropdownMenu class="w-[120px]">
 							<li>
 								<p>1st item</p>
 							</li>
 							<li>
 								<p>2nd item</p>
 							</li>
-						</C.DropdownMenu>
+						</DropdownMenu>
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -137,16 +137,16 @@
 				{#snippet trigger({ Trigger })}
 					<Trigger>Right</Trigger>
 				{/snippet}
-				{#snippet content({ C })}
+				{#snippet content({ DropdownMenu })}
 					<div>
-						<C.DropdownMenu class="w-[120px]">
+						<DropdownMenu class="w-[120px]">
 							<li>
 								<p>1st item</p>
 							</li>
 							<li>
 								<p>2nd item</p>
 							</li>
-						</C.DropdownMenu>
+						</DropdownMenu>
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -154,16 +154,16 @@
 				{#snippet trigger({ Trigger })}
 					<Trigger>Left</Trigger>
 				{/snippet}
-				{#snippet content({ C })}
+				{#snippet content({ DropdownMenu })}
 					<div>
-						<C.DropdownMenu class="w-[120px]">
+						<DropdownMenu class="w-[120px]">
 							<li>
 								<p>1st item</p>
 							</li>
 							<li>
 								<p>2nd item</p>
 							</li>
-						</C.DropdownMenu>
+						</DropdownMenu>
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -177,16 +177,16 @@
 			{#snippet trigger({ Trigger })}
 				<Trigger>Dropdown</Trigger>
 			{/snippet}
-			{#snippet content({ C })}
+			{#snippet content({ DropdownMenu })}
 				<div>
-					<C.DropdownMenu>
+					<DropdownMenu>
 						<li>
 							<p>1st item</p>
 						</li>
 						<li>
 							<p>2nd item</p>
 						</li>
-					</C.DropdownMenu>
+					</DropdownMenu>
 				</div>
 			{/snippet}
 		</Dropdown>
@@ -199,14 +199,14 @@
 			{#snippet trigger({ Trigger })}
 				<Trigger>Dropdown</Trigger>
 			{/snippet}
-			{#snippet content({ C })}
+			{#snippet content({ DropdownContent })}
 				<div>
-					<C.DropdownContent>
+					<DropdownContent>
 						<div>
 							<p>This is a dropdown with other content</p>
 							<p>It doesn't have to be list items</p>
 						</div>
-					</C.DropdownContent>
+					</DropdownContent>
 				</div>
 			{/snippet}
 		</Dropdown>

package/dist/components/dropdown/Dropdown.svelte

@@ -13,7 +13,7 @@
 		class?: string;
 		trigger?: Snippet<[{ Trigger: typeof DropdownTrigger }]>;
 		content?: Snippet<
-			[{ C: { DropdownContent: typeof DropdownContent; DropdownMenu: typeof DropdownMenu } }]
+			[{ DropdownContent: typeof DropdownContent; DropdownMenu: typeof DropdownMenu }]
 		>;
 	}
 
@@ -28,10 +28,7 @@
 		content
 	}: Props = $props();
 
-	let C = {
-		DropdownMenu,
-		DropdownContent
-	};
+	let C = {};
 
 	const closeDropdown = () => {
 		open = false;
@@ -66,6 +63,6 @@
 		onkeydown={handleKeyDown}
 		onclick={handleItemClick}
 	>
-		{@render content?.({ C })}
+		{@render content?.({ DropdownMenu, DropdownContent })}
 	</div>
 </div>

package/dist/components/dropdown/Dropdown.svelte.d.ts

@@ -14,10 +14,8 @@ interface Props {
     }]>;
     content?: Snippet<[
         {
-            C: {
-                DropdownContent: typeof DropdownContent;
-                DropdownMenu: typeof DropdownMenu;
-            };
+            DropdownContent: typeof DropdownContent;
+            DropdownMenu: typeof DropdownMenu;
         }
     ]>;
 }

package/dist/components/table/Table.stories.svelte

@@ -66,21 +66,25 @@
 
 <Story name="Base">
 	<Table>
-		{#snippet children({ C })}
-			<C.Tr>
-				<C.Th>Name</C.Th>
-				<C.Th>Age</C.Th>
-				<C.Th class="w-[100px]">Role</C.Th>
-				<C.Th class="w-6"></C.Th>
-			</C.Tr>
-			{#each users as user}
-				<C.Tr disabled={user.role === 'deactivated'}>
-					<C.Td>{user.name}</C.Td>
-					<C.Td>{user.age}</C.Td>
-					<C.Td>{user.role}</C.Td>
-					<C.Td><IconButton disabled={user.role === 'deactivated'}><Phone /></IconButton></C.Td>
-				</C.Tr>
-			{/each}
+		{#snippet children({ THead, TBody, Tr, Th, Td })}
+			<THead>
+				<Tr>
+					<Th>Name</Th>
+					<Th>Age</Th>
+					<Th class="w-[100px]">Role</Th>
+					<Th class="w-6"></Th>
+				</Tr>
+			</THead>
+			<TBody>
+				{#each users as user}
+					<Tr disabled={user.role === 'deactivated'}>
+						<Td>{user.name}</Td>
+						<Td>{user.age}</Td>
+						<Td>{user.role}</Td>
+						<Td><IconButton disabled={user.role === 'deactivated'}><Phone /></IconButton></Td>
+					</Tr>
+				{/each}
+			</TBody>
 		{/snippet}
 	</Table>
 </Story>

package/dist/components/table/Table.svelte

@@ -3,14 +3,28 @@
 	import Td from './components/Td.svelte';
 	import Th from './components/Th.svelte';
 	import Tr from './components/Tr.svelte';
+	import THead from './components/THead.svelte';
+	import TBody from './components/TBody.svelte';
 
 	interface Props {
 		tableLayout?: 'fixed' | 'auto';
-		children?: Snippet<[{ C: { Tr: typeof Tr; Th: typeof Th; Td: typeof Td } }]>;
+		children?: Snippet<
+			[
+				{
+					THead: typeof THead;
+					TBody: typeof TBody;
+					Tr: typeof Tr;
+					Th: typeof Th;
+					Td: typeof Td;
+				}
+			]
+		>;
 	}
 
 	let { tableLayout = 'fixed', children }: Props = $props();
 	const C = {
+		THead: THead,
+		TBody: TBody,
 		Tr: Tr,
 		Th: Th,
 		Td: Td
@@ -19,7 +33,7 @@
 
 <div class="w-full rounded-lg bg-surface px-6 pb-1 pt-3">
 	<table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
-		{@render children?.({ C })}
+		{@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
 	</table>
 </div>
 

package/dist/components/table/Table.svelte.d.ts

@@ -2,15 +2,19 @@ import type { Snippet } from 'svelte';
 import Td from './components/Td.svelte';
 import Th from './components/Th.svelte';
 import Tr from './components/Tr.svelte';
+import THead from './components/THead.svelte';
+import TBody from './components/TBody.svelte';
 interface Props {
     tableLayout?: 'fixed' | 'auto';
-    children?: Snippet<[{
-        C: {
+    children?: Snippet<[
+        {
+            THead: typeof THead;
+            TBody: typeof TBody;
             Tr: typeof Tr;
             Th: typeof Th;
             Td: typeof Td;
-        };
-    }]>;
+        }
+    ]>;
 }
 declare const Table: import("svelte").Component<Props, {}, "">;
 type Table = ReturnType<typeof Table>;

package/dist/components/table/components/TBody.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<tbody class={`${className}`}>
+	{@render children?.()}
+</tbody>

package/dist/components/table/components/TBody.svelte.d.ts

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

package/dist/components/table/components/THead.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<thead class={`${className}`}>
+	{@render children?.()}
+</thead>

package/dist/components/table/components/THead.svelte.d.ts

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

package/dist/components/tabs/Tabs.stories.svelte

@@ -13,18 +13,16 @@
 
 <Story name="Primary">
 	<Tabs>
-		{#snippet children({ C })}
-			<C.Tabs>
-				<C.Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</C.Tab>
-				<C.Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</C.Tab>
-				<C.Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</C.Tab>
-			</C.Tabs>
+		{#snippet children({ Tabs, Tab, Content })}
+			<Tabs>
+				<Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</Tab>
+				<Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</Tab>
+				<Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</Tab>
+			</Tabs>
 
-			<C.Content show={activeTab === 'tab-1'}>Showing tab 1 content</C.Content>
-
-			<C.Content show={activeTab === 'tab-2'}>Showing tab 2 content</C.Content>
-
-			<C.Content show={activeTab === 'tab-3'}>Showing tab 3 content</C.Content>
+			<Content show={activeTab === 'tab-1'}>Showing tab 1 content</Content>
+			<Content show={activeTab === 'tab-2'}>Showing tab 2 content</Content>
+			<Content show={activeTab === 'tab-3'}>Showing tab 3 content</Content>
 		{/snippet}
 	</Tabs>
 </Story>

package/dist/components/tabs/Tabs.svelte

@@ -4,12 +4,10 @@
 	import Tab from './components/Tab.svelte';
 	import Tabs from './components/Tabs.svelte';
 	interface Props {
-		children?: Snippet<[any]>;
+		children?: Snippet<[{ Tabs: typeof Tabs; Tab: typeof Tab; Content: typeof Content }]>;
 	}
 
 	let { children }: Props = $props();
-
-	const C = { Tabs, Tab, Content };
 </script>
 
-{@render children?.({ C })}
+{@render children?.({ Tabs, Tab, Content })}

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -1,7 +1,13 @@
 import type { Snippet } from 'svelte';
+import Content from './components/Content.svelte';
+import Tab from './components/Tab.svelte';
 import Tabs from './components/Tabs.svelte';
 interface Props {
-    children?: Snippet<[any]>;
+    children?: Snippet<[{
+        Tabs: typeof Tabs;
+        Tab: typeof Tab;
+        Content: typeof Content;
+    }]>;
 }
 declare const Tabs: import("svelte").Component<Props, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/tailwind-safelist.d.ts

@@ -11,6 +11,7 @@ export const sizes: string[];
 export const display: string[];
 export const rounded: string[];
 export const tables: string[];
+export const leading: string[];
 export const flexLayout: string[];
 export const spacing: string[];
 export const sizing: string[];
@@ -18,5 +19,9 @@ export const positioning: string[];
 export const cursors: string[];
 export const misc: string[];
 export const daisyui: string[];
+export const hoverVariants: string[];
+export const focusVariants: string[];
+export const disabledVariants: string[];
+export const activeVariants: string[];
 export const safelist: string[];
 export const responsive: string[];

package/dist/tailwind-safelist.js

@@ -73,7 +73,8 @@ export const borders = [
 	'border-interactive',
 	'border-hover',
 	'border-focus',
-	'border-danger'
+	'border-danger',
+	'border-transparent'
 ];
 
 export const shadows = [
@@ -137,6 +138,8 @@ export const rounded = [
 
 export const tables = ['table-fixed', 'table-auto'];
 
+export const leading = ['leading-4', 'leading-5', 'leading-6', 'leading-7'];
+
 export const flexLayout = [
 	'flex',
 	'inline-flex',
@@ -155,6 +158,7 @@ export const flexLayout = [
 	'text-left',
 	'text-right',
 	'text-center',
+	'text-base',
 	'gap-1',
 	'gap-2',
 	'gap-3',
@@ -197,6 +201,7 @@ export const sizing = [
 	'h-10',
 	'h-11',
 	'h-12',
+	'h-16',
 	'h-28',
 	'h-screen',
 	'w-4',
@@ -225,6 +230,7 @@ export const misc = [
 	'active:red',
 	'active:bg-neutral',
 	'active:bg-neutral-inverse',
+	'[&>*>.control-button]:flex-col',
 	'[&>svg]:w-4',
 	'[&>svg]:h-4',
 	'[&>svg]:w-5',
@@ -387,6 +393,55 @@ export const daisyui = [
 	'stack'
 ];
 
+// Add hover variants
+export const hoverVariants = [
+	'hover:bg-neutral',
+	'hover:bg-neutral-hover',
+	'hover:bg-neutral-darker-hover',
+	'hover:bg-neutral-inverse-hover',
+	'hover:bg-accent-hover',
+	'hover:bg-accent-inverse-hover',
+	'hover:bg-success-hover',
+	'hover:bg-success-inverse-hover',
+	'hover:bg-warning-hover',
+	'hover:bg-warning-inverse-hover',
+	'hover:bg-danger-hover',
+	'hover:bg-danger-inverse-hover',
+	'hover:bg-blue-hover',
+	'hover:bg-orange-hover',
+	'hover:bg-orange-inverse-hover',
+	'hover:bg-sky-hover',
+	'hover:bg-sky-inverse-hover'
+];
+
+// Add focus variants
+export const focusVariants = [
+	'focus:outline-none',
+	'focus:ring-2',
+	'focus:ring-offset-2',
+	'focus:border-focus',
+	'focus-visible:outline-none',
+	'focus-visible:ring-2'
+];
+
+// Add disabled variants
+export const disabledVariants = [
+	'disabled:bg-neutral',
+	'disabled:opacity-50',
+	'disabled:cursor-not-allowed',
+	'disabled:text-tertiary',
+	'disabled:border-none'
+];
+
+// Add active variants
+export const activeVariants = [
+	'active:bg-neutral',
+	'active:bg-neutral-inverse',
+	'active:red',
+	'active:scale-95',
+	'active:transform'
+];
+
 // Export all arrays as a single safelist
 export const safelist = [
 	...textColors,
@@ -408,7 +463,11 @@ export const safelist = [
 	...positioning,
 	...cursors,
 	...misc,
-	...daisyui
+	...daisyui,
+	...hoverVariants,
+	...focusVariants,
+	...disabledVariants,
+	...activeVariants
 ];
 
 export const responsive = ['sm:w-[460px]', 'md:flex', 'lg:block', 'sm:gap-2'];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.35",
+	"version": "0.0.37",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",