@reshape-biotech/design-system 1.2.5 → 1.2.6

package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte

@@ -0,0 +1,28 @@
+<!-- src/lib/design-system/src/lib/components/manual-cfu-counter/ManualCFUCounterTestWrapper.svelte -->
+<script lang="ts">
+	import MultiCFUCounter from '../MultiCFUCounter.svelte';
+
+	interface Props {
+		initialTestMarks?: Array<{ x: number; y: number }>;
+		imageUrl?: string;
+		onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+		activeMarkerName?: string;
+	}
+
+	let {
+		initialTestMarks = [],
+		imageUrl = 'test-image.jpg',
+		onclick,
+		activeMarkerName = 'Test Marker'
+	}: Props = $props();
+
+	let marks = $state([...initialTestMarks]);
+
+	export function getCurrentMarks() {
+		return marks;
+	}
+</script>
+
+<MultiCFUCounter bind:marks {imageUrl} {onclick} {activeMarkerName} />
+
+<span data-testid="wrapper-marks-count" class="sr-only">{marks.length}</span>

package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    initialTestMarks?: Array<{
+        x: number;
+        y: number;
+    }>;
+    imageUrl?: string;
+    onclick?: (event: MouseEvent, marks: Array<{
+        x: number;
+        y: number;
+    }>) => void;
+    activeMarkerName?: string;
+}
+declare const MultiCfuCounterTestWrapper: import("svelte").Component<Props, {
+    getCurrentMarks: () => {
+        x: number;
+        y: number;
+    }[];
+}, "">;
+type MultiCfuCounterTestWrapper = ReturnType<typeof MultiCfuCounterTestWrapper>;
+export default MultiCfuCounterTestWrapper;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/manual-cfu-counter/';
+export * from './components/multi-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/notifications/';
 export * from './components/pill/';
@@ -47,4 +48,6 @@ export * from './components/checkbox/';
 export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
 export { notifications } from './notifications';
-import './app.css';
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
+export * as TokensColors from './tokens/colors';
+export * as TokensTypography from './tokens/typography';

package/dist/index.js

@@ -22,6 +22,7 @@ export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/manual-cfu-counter/';
+export * from './components/multi-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/notifications/';
 export * from './components/pill/';
@@ -49,4 +50,7 @@ export * from './components/sjsf-wrappers/';
 // Styles and Tokens
 export { tokens } from './tokens';
 export { notifications } from './notifications';
-import './app.css';
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
+// Export tokens modules for granular imports
+export * as TokensColors from './tokens/colors';
+export * as TokensTypography from './tokens/typography';

package/dist/styles.d.ts

@@ -0,0 +1 @@
+import './app.css';

package/dist/styles.js

@@ -0,0 +1,4 @@
+// Optional CSS imports - import this file if you need the design system styles
+import './app.css';
+// Re-export is not needed for CSS files
+// CSS files don't have named exports to re-export

package/dist/tailwind-safelist.js

@@ -58,6 +58,7 @@ export const backgroundColors = [
 	'bg-danger-inverse-hover',
 	'bg-blue',
 	'bg-blue-hover',
+	'bg-blue-inverse',
 	'bg-orange',
 	'bg-orange-hover',
 	'bg-orange-inverse',
@@ -65,7 +66,9 @@ export const backgroundColors = [
 	'bg-sky',
 	'bg-sky-hover',
 	'bg-sky-inverse',
-	'bg-sky-inverse-hover'
+	'bg-sky-inverse-hover',
+	'bg-pink-inverse',
+	'bg-lime-inverse'
 ];
 
 export const borders = [
@@ -75,7 +78,12 @@ export const borders = [
 	'border-focus',
 	'border-danger',
 	'border-input',
-	'border-transparent'
+	'border-transparent',
+	'border-blue-inverse',
+	'border-orange-inverse',
+	'border-pink-inverse',
+	'border-lime-inverse',
+	'border-neutral-light'
 ];
 
 export const shadows = [

package/dist/tailwind.preset.d.ts

@@ -366,6 +366,10 @@ declare const config: {
                 danger: string;
                 'static-inverse': string;
                 'interactive-inverse': string;
+                'blue-inverse': string;
+                'orange-inverse': string;
+                'pink-inverse': string;
+                'lime-inverse': string;
                 white: string;
                 axis: string;
             };

package/dist/tokens/colors.d.ts

@@ -0,0 +1,246 @@
+export declare const colors: {
+    base: {
+        mist: string;
+        snow: string;
+        white: {
+            default: string;
+            5: string;
+            10: string;
+            15: string;
+            25: string;
+            50: string;
+            70: string;
+            90: string;
+        };
+        midnight: {
+            default: string;
+            5: string;
+            8: string;
+            10: string;
+            15: string;
+            25: string;
+            50: string;
+            70: string;
+            90: string;
+        };
+    };
+    gray: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    periwinkle: {
+        1: string;
+        2: string;
+        3: {
+            default: string;
+            10: string;
+            25: string;
+            50: string;
+            75: string;
+        };
+        4: {
+            default: string;
+            10: string;
+            25: string;
+            50: string;
+            75: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+            50: string;
+            75: string;
+        };
+        6: string;
+    };
+    orange: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    sky: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    blue: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    green: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            5: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    yellow: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    red: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    shadow: {
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+    };
+    pink: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    plum: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    lilac: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    lime: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+    pear: {
+        1: string;
+        2: string;
+        3: string;
+        4: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        5: {
+            default: string;
+            10: string;
+            25: string;
+        };
+        6: string;
+    };
+};

package/dist/tokens/colors.js

@@ -0,0 +1,139 @@
+export const colors = {
+    base: {
+        mist: '#fbfbfb',
+        snow: '#f6f7f7',
+        white: {
+            default: '#FFFFFF',
+            5: '#FFFFFF0D',
+            10: '#FFFFFF1A',
+            15: '#FFFFFF26',
+            25: '#FFFFFF40',
+            50: '#FFFFFF80',
+            70: '#FFFFFFB3',
+            90: '#FFFFFFE6'
+        },
+        midnight: {
+            default: '#12192a',
+            5: '#12192a0A',
+            8: '#12192a14',
+            10: '#12192A1A',
+            15: '#12192A26',
+            25: '#12192A40',
+            50: '#12192A80',
+            70: '#12192AB3',
+            90: '#12192AE6'
+        }
+    },
+    gray: {
+        1: '#ecedee',
+        2: '#dbdddf',
+        3: '#c4c6ca',
+        4: '#888c94',
+        5: '#595e6a',
+        6: '#2A303F'
+    },
+    periwinkle: {
+        1: '#eeeefd',
+        2: '#cbc9fa',
+        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480', 75: '#8e8af4BF' },
+        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180', 75: '#7973f1BF' },
+        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80', 75: '#5750eeBF' },
+        6: '#4741c1'
+    },
+    orange: {
+        1: '#fff2e6',
+        2: '#ffd6b0',
+        3: '#ffa654',
+        4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
+        5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040' },
+        6: '#cf6300'
+    },
+    sky: {
+        1: '#f3fafc',
+        2: '#D2F0F6',
+        3: '#89D8E6',
+        4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
+        5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
+        6: '#3597a9'
+    },
+    blue: {
+        1: '#e8f4fe',
+        2: '#b8defd',
+        3: '#66b8fb',
+        4: { default: '#49aafa', 10: '#49aafa1A', 25: '#49aafa40' },
+        5: { default: '#1b95f9', 10: '#1b95f91A', 25: '#1b95f940' },
+        6: '#146db6'
+    },
+    green: {
+        1: '#e7f7f1',
+        2: '#c4ebdc',
+        3: '#65cba4',
+        4: { default: '#36bc88', 10: '#36bc881A', 25: '#36bc8840' },
+        5: { default: '#0aad6e', 5: '#0aad6e0D', 10: '#0aad6e1A', 25: '#0aad6e40' },
+        6: '#088756'
+    },
+    yellow: {
+        1: '#fff8e9',
+        2: '#feeabb',
+        3: '#fed16c',
+        4: { default: '#fdc850', 10: '#fdc8501A', 25: '#fdc85040' },
+        5: { default: '#f1b123', 10: '#f1b1231A', 25: '#f1b12340' },
+        6: '#cc951e'
+    },
+    red: {
+        1: '#fdeded',
+        2: '#f9c6c6',
+        3: '#f28384',
+        4: { default: '#ef6b6c', 10: '#ef6b6c1A', 25: '#ef6b6c40' },
+        5: { default: '#eb4647', 10: '#eb46471A', 25: '#eb464740' },
+        6: '#bf393a'
+    },
+    shadow: {
+        2: 'rgba(18, 25, 42, 0.02)',
+        4: 'rgba(18, 25, 42, 0.04)',
+        6: 'rgba(18, 25, 42, 0.06)',
+        8: 'rgba(18, 25, 42, 0.08)',
+        12: 'rgba(18, 25, 42, 0.12)',
+        16: 'rgba(18, 25, 42, 0.16)'
+    },
+    pink: {
+        1: '#fdedf4',
+        2: '#f9c6dd',
+        3: '#f284b6',
+        4: { default: '#f06da8', 10: '#f06da81A', 25: '#f06da840' },
+        5: { default: '#ec4892', 10: '#ec48921A', 25: '#ec489240' },
+        6: '#bf3b77'
+    },
+    plum: {
+        1: '#f9edf8',
+        2: '#ecc6ea',
+        3: '#d583d2',
+        4: { default: '#cd6bc9', 10: '#cd6bc91A', 25: '#cd6bc940' },
+        5: { default: '#c146bc', 10: '#c146bc1A', 25: '#c146bc40' },
+        6: '#9d3998'
+    },
+    lilac: {
+        1: '#f5ecfd',
+        2: '#dfc5f7',
+        3: '#b982ee',
+        4: { default: '#ac69eb', 10: '#ac69eb1A', 25: '#ac69eb40' },
+        5: { default: '#9744e6', 10: '#9744e61A', 25: '#9744e640' },
+        6: '#7a37ba'
+    },
+    lime: {
+        1: '#f2f8e8',
+        2: '#d5eab6',
+        3: '#a5d162',
+        4: { default: '#93c843', 10: '#93c8431A', 25: '#93c84340' },
+        5: { default: '#78ba14', 10: '#78ba141A', 25: '#78ba1440' },
+        6: '#619710'
+    },
+    pear: {
+        1: '#f8f8e7',
+        2: '#e9eab6',
+        3: '#cfd161',
+        4: { default: '#c6c842', 10: '#c6c8421A', 25: '#c6c84240' },
+        5: { default: '#b8ba13', 10: '#b8ba131A', 25: '#b8ba1340' },
+        6: '#95970F'
+    }
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export { colors } from './colors';
+export { typography } from './typography';
+export * from '../tokens';

package/dist/tokens/index.js

@@ -0,0 +1,5 @@
+// Export individual token categories for granular imports
+export { colors } from './colors';
+export { typography } from './typography';
+// Re-export everything from the main tokens file for backwards compatibility
+export * from '../tokens';

package/dist/tokens/typography.d.ts

@@ -0,0 +1,48 @@
+export declare const typography: {
+    fontFamily: {
+        sans: string[];
+        mono: string[];
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    fontWeight: {
+        thin: string;
+        extralight: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+    lineHeight: {
+        none: string;
+        tight: string;
+        snug: string;
+        normal: string;
+        relaxed: string;
+        loose: string;
+    };
+    letterSpacing: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+};

package/dist/tokens/typography.js

@@ -0,0 +1,48 @@
+export const typography = {
+    fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace']
+    },
+    fontSize: {
+        xs: '0.75rem', // 12px
+        sm: '0.875rem', // 14px
+        base: '1rem', // 16px
+        lg: '1.125rem', // 18px
+        xl: '1.25rem', // 20px
+        '2xl': '1.5rem', // 24px
+        '3xl': '1.875rem', // 30px
+        '4xl': '2.25rem', // 36px
+        '5xl': '3rem', // 48px
+        '6xl': '3.75rem', // 60px
+        '7xl': '4.5rem', // 72px
+        '8xl': '6rem', // 96px
+        '9xl': '8rem' // 128px
+    },
+    fontWeight: {
+        thin: '100',
+        extralight: '200',
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extrabold: '800',
+        black: '900'
+    },
+    lineHeight: {
+        none: '1',
+        tight: '1.25',
+        snug: '1.375',
+        normal: '1.5',
+        relaxed: '1.625',
+        loose: '2'
+    },
+    letterSpacing: {
+        tighter: '-0.05em',
+        tight: '-0.025em',
+        normal: '0em',
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em'
+    }
+};