@reshape-biotech/design-system 0.0.51 → 0.0.52

package/dist/components/empty-content/EmptyContent.stories.svelte

@@ -0,0 +1,47 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import EmptyContent from './EmptyContent.svelte';
+	import { Icon } from '../../components/icons';
+
+	const { Story } = defineMeta({
+		component: EmptyContent,
+		title: 'Design System/EmptyContent',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default">
+	<div class="w-full bg-surface p-12">
+		<EmptyContent>
+			{#snippet icon()}
+				<Icon
+					iconName="ClockCountdown"
+					color="icon-tertiary"
+					width={48}
+					height={48}
+					weight="light"
+				/>
+			{/snippet}
+			<h6>No activity</h6>
+			<p class="text-center text-sm">Nothing has been logged for this job.</p>
+		</EmptyContent>
+	</div>
+</Story>
+
+<Story name="With Different Icon">
+	<div class="w-full bg-surface p-12">
+		<EmptyContent>
+			{#snippet icon()}
+				<Icon
+					iconName="MagnifyingGlass"
+					color="icon-tertiary"
+					width={48}
+					height={48}
+					weight="light"
+				/>
+			{/snippet}
+			<h6>No results found</h6>
+			<p class="text-center text-sm">Try adjusting your search or filters.</p>
+		</EmptyContent>
+	</div>
+</Story>

package/dist/components/empty-content/EmptyContent.stories.svelte.d.ts

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

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

package/dist/components/empty-content/index.js

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

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

@@ -2,7 +2,7 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealQuestion' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'Calendar' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'RadioButton' | 'SealQuestion' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type IconColor = keyof typeof textColor;

package/dist/components/icons/index.js

@@ -2,9 +2,11 @@ import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
 import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
 import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
 import Barcode from 'phosphor-svelte/lib/Barcode';
+import Bell from 'phosphor-svelte/lib/Bell';
 import BookOpen from 'phosphor-svelte/lib/BookOpen';
 import BookOpenText from 'phosphor-svelte/lib/BookOpenText';
 import BowlingBall from 'phosphor-svelte/lib/BowlingBall';
+import Calendar from 'phosphor-svelte/lib/Calendar';
 import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
 import CameraSlash from 'phosphor-svelte/lib/CameraSlash';
 import CaretDown from 'phosphor-svelte/lib/CaretDown';
@@ -51,6 +53,7 @@ import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
 import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
 import Info from 'phosphor-svelte/lib/Info';
 import Lock from 'phosphor-svelte/lib/Lock';
+import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
 import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
 import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
@@ -65,11 +68,14 @@ import Play from 'phosphor-svelte/lib/Play';
 import Plus from 'phosphor-svelte/lib/Plus';
 import PlusMinus from 'phosphor-svelte/lib/PlusMinus';
 import Question from 'phosphor-svelte/lib/Question';
+import RadioButton from 'phosphor-svelte/lib/RadioButton';
 import SealQuestion from 'phosphor-svelte/lib/SealQuestion';
+import SelectionAll from 'phosphor-svelte/lib/SelectionAll';
 import Share from 'phosphor-svelte/lib/Share';
 import SidebarSimple from 'phosphor-svelte/lib/SidebarSimple';
 import SkipBack from 'phosphor-svelte/lib/SkipBack';
 import SkipForward from 'phosphor-svelte/lib/SkipForward';
+import SortAscending from 'phosphor-svelte/lib/SortAscending';
 import Sparkle from 'phosphor-svelte/lib/Sparkle';
 import SpinnerGap from 'phosphor-svelte/lib/SpinnerGap';
 import SquaresFour from 'phosphor-svelte/lib/SquaresFour';
@@ -82,6 +88,7 @@ import Tag from 'phosphor-svelte/lib/Tag';
 import TestTube from 'phosphor-svelte/lib/TestTube';
 import Trash from 'phosphor-svelte/lib/Trash';
 import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
+import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
 import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
@@ -93,9 +100,11 @@ export const iconMap = {
     ArrowRight,
     ArrowUpRight,
     Barcode,
+    Bell,
     BookOpen,
     BookOpenText,
     BowlingBall,
+    Calendar,
     CalendarBlank,
     CameraSlash,
     CaretDown,
@@ -142,6 +151,7 @@ export const iconMap = {
     ImagesSquare,
     Info,
     Lock,
+    LineSegments,
     List,
     MagnifyingGlass,
     MegaphoneSimple,
@@ -155,12 +165,15 @@ export const iconMap = {
     Play,
     Plus,
     PlusMinus,
+    RadioButton,
     Question,
     SealQuestion,
+    SelectionAll,
     Share,
     SidebarSimple,
     SkipBack,
     SkipForward,
+    SortAscending,
     Sparkle,
     SpinnerGap,
     SquaresFour,
@@ -173,6 +186,7 @@ export const iconMap = {
     TestTube,
     Trash,
     TrashSimple,
+    UserCircle,
     UserPlus,
     Video,
     Warning,

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/divider/';
 export * from './components/drawer/';
 export * from './components/drawer/';
 export * from './components/dropdown/';
+export * from './components/empty-content/';
 export * from './components/icons/';
 export * from './components/icon-button/';
 export * from './components/image';

package/dist/index.js

@@ -11,6 +11,7 @@ export * from './components/divider/';
 export * from './components/drawer/';
 export * from './components/drawer/';
 export * from './components/dropdown/';
+export * from './components/empty-content/';
 export * from './components/icons/';
 export * from './components/icon-button/';
 export * from './components/image';

package/dist/tailwind-safelist.d.ts

@@ -23,5 +23,6 @@ export const hoverVariants: string[];
 export const focusVariants: string[];
 export const disabledVariants: string[];
 export const activeVariants: string[];
+export const groupVariants: string[];
 export const safelist: string[];
 export const responsive: string[];

package/dist/tailwind-safelist.js

@@ -121,6 +121,7 @@ export const sizes = ['h-5', 'w-5', 'min-w-5', 'h-7', 'w-7', 'min-w-7'];
 
 export const display = [
 	'flex',
+	'grow',
 	'items-center',
 	'justify-center',
 	'flex-row',
@@ -206,6 +207,7 @@ export const sizing = [
 	'h-16',
 	'h-28',
 	'h-screen',
+	'w-0.5',
 	'w-4',
 	'w-5',
 	'w-6',
@@ -444,6 +446,9 @@ export const activeVariants = [
 	'active:transform'
 ];
 
+// Add group variants
+export const groupVariants = ['group-first:invisible', 'group-last:invisible'];
+
 // Export all arrays as a single safelist
 export const safelist = [
 	...textColors,
@@ -469,7 +474,8 @@ export const safelist = [
 	...hoverVariants,
 	...focusVariants,
 	...disabledVariants,
-	...activeVariants
+	...activeVariants,
+	...groupVariants
 ];
 
 export const responsive = ['sm:w-[460px]', 'md:flex', 'lg:block', 'sm:gap-2'];

package/dist/tailwind.preset.d.ts

@@ -380,6 +380,7 @@ declare const config: {
                 'icon-lilac': string;
                 'icon-lime': string;
                 'icon-pear': string;
+                'icon-white': string;
                 'dark-primary': string;
                 'dark-secondary': string;
                 'dark-tertiary': string;

package/dist/tokens.d.ts

@@ -273,6 +273,7 @@ export declare const textColor: {
     'icon-lilac': string;
     'icon-lime': string;
     'icon-pear': string;
+    'icon-white': string;
     'dark-primary': string;
     'dark-secondary': string;
     'dark-tertiary': string;
@@ -705,6 +706,7 @@ export declare const tokens: {
         'icon-lilac': string;
         'icon-lime': string;
         'icon-pear': string;
+        'icon-white': string;
         'dark-primary': string;
         'dark-secondary': string;
         'dark-tertiary': string;

package/dist/tokens.js

@@ -174,7 +174,8 @@ const lightIconColor = {
     'icon-plum': colors.plum[5].default,
     'icon-lilac': colors.lilac[5].default,
     'icon-lime': colors.lime[5].default,
-    'icon-pear': colors.pear[5].default
+    'icon-pear': colors.pear[5].default,
+    'icon-white': colors.base.white.default
 };
 const lightBorderColor = {
     static: colors.base.midnight[8],

package/package.json

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