@reshape-biotech/design-system 2.4.0 → 2.4.2

package/dist/components/dropdown/components/DropdownMenu.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    class?: string;
-    children?: Snippet;
-  }
-
-  let { class: className = '', children }: Props = $props();
-</script>
-
-<ul
-  tabIndex="0"
-  class={`menu dropdown-content menu-md z-[1] rounded-lg bg-surface p-1 shadow-menu ${className}`}
->
-  {@render children?.()}
-</ul>
-
-<style>
-  :global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
-    background-color: #12192A1A
-}
-</style>

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

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

package/dist/components/dropdown/components/DropdownTrigger.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  interface Props {
-    size?: 'sm' | 'md' | 'lg';
-    class?: string;
-    variant?: Color;
-    children?: Snippet;
-    noPadding?: boolean;
-    iconButton?: boolean;
-  }
-  let {
-    size = 'md',
-    class: className = '',
-    variant = 'primary',
-    children,
-    noPadding = false,
-    iconButton = false,
-  }: Props = $props();
-
-  type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
-
-  const sizes = $derived({
-    sm: `h-8 ${noPadding ? 'px-0' : iconButton ? 'px-2' : 'px-3'} ${noPadding ? 'py-0' : iconButton ? 'py-2' : 'py-3'}`,
-    md: 'h-10 px-5 py-3',
-    lg: 'h-12 px-6 py-4',
-  });
-
-  const colors: Record<Color, string> = {
-    primary:
-      'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover disabled:bg-neutral disabled:text-tertiary',
-    secondary:
-      'bg-neutral text-primary hover:bg-neutral-hover disabled:bg-neutral disabled:text-tertiary',
-    transparent:
-      'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
-    danger:
-      'bg-danger text-primary-inverse hover:bg-danger-hover disabled:bg-neutral disabled:text-tertiary',
-  };
-</script>
-
-<div
-  role="button"
-  tabindex="0"
-  class={`inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 ${colors[variant]} ${sizes[size]} ${className}`}
->
-  {@render children?.()}
-</div>

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

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
-interface Props {
-    size?: 'sm' | 'md' | 'lg';
-    class?: string;
-    variant?: Color;
-    children?: Snippet;
-    noPadding?: boolean;
-    iconButton?: boolean;
-}
-declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
-type DropdownTrigger = ReturnType<typeof DropdownTrigger>;
-export default DropdownTrigger;

package/dist/components/dropdown/components/OutlinedButton.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    class?: string;
-    children: Snippet;
-  }
-
-  let { class: className = '', children }: Props = $props();
-</script>
-
-<div role="button" tabindex="0" class={`${className}`}>{@render children()}</div>
-
-<style>
-  div {
-
-    display: flex;
-
-    width: 100%;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    gap: 0.25rem;
-
-    border-radius: 0.5rem;
-
-    border-width: 1px;
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding: 0.75rem;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
-
-    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-  div:not(:focus-within):hover {
-
-    border-color: #5750ee40
-}
-
-  div:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
-</style>

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

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

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

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

package/dist/components/dropdown/index.js

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

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

@@ -1,47 +0,0 @@
-<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" asChild>
-  <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" asChild>
-  <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

@@ -1,27 +0,0 @@
-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/EmptyContent.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    icon: Snippet;
-    children: Snippet;
-  };
-
-  const { icon, children }: Props = $props();
-</script>
-
-<div class="flex w-full justify-center">
-  <div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
-    {@render icon()}
-    <div class="flex w-full flex-col items-center justify-center gap-2">
-      {@render children()}
-    </div>
-  </div>
-</div>

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

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

package/dist/components/empty-content/index.d.ts

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

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

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

package/dist/components/graphs/bar-chart/BarChart.stories.svelte

@@ -1,119 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { textColor } from '../../../tokens';
-  import BarChart from './BarChart.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Graphs/BarChart',
-    component: BarChart,
-    tags: ['autodocs'],
-    argTypes: {
-      // Define argTypes for props if needed, e.g., for controls
-    },
-  });
-
-  const simpleData = [
-    { category: 'A', value: 10 },
-    { category: 'B', value: 20 },
-    { category: 'C', value: 15 },
-    { category: 'D', value: 25 },
-    { category: 'E', value: 30 },
-  ];
-
-  const longerLabelsData = [
-    { longCategoryName: 'Very Long Label One', value: 45 },
-    { longCategoryName: 'Another Quite Long Label', value: 35 },
-    { longCategoryName: 'Short', value: 55 },
-    { longCategoryName: 'Label Four Is Also Lengthy', value: 25 },
-    { longCategoryName: 'Fifth Label Is Here', value: 65 },
-  ];
-
-  const customColorData = [
-    { category: 'Apple', value: 50 },
-    { category: 'Banana', value: 70 },
-    { category: 'Cherry', value: 60 },
-    { category: 'Date', value: 40 },
-  ];
-
-  const customColors = {
-    Apple: '#ff6b6b', // Red
-    Banana: '#feca57', // Yellow
-    Cherry: '#ff9ff3', // Pink
-    Date: '#a4b0be', // Grey
-  };
-</script>
-
-<Story
-  name="Base"
-  args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Count', height: '400px' }}
-/>
-
-<Story
-  name="Custom Y-Axis Name"
-  args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Units Sold', height: '400px' }}
-/>
-
-<Story
-  name="With Custom Colors"
-  args={{
-    data: customColorData,
-    xAxisName: 'category',
-    yAxisName: 'Fruit Amount',
-    colors: customColors,
-    height: '400px',
-  }}
-/>
-
-<Story
-  name="With Rotated Labels"
-  args={{
-    data: longerLabelsData,
-    xAxisName: 'longCategoryName',
-    yAxisName: 'Measurement',
-    rotateXAxisLabels: true,
-    height: '400px',
-  }}
-/>
-
-<Story
-  name="Empty Data"
-  args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
-/>
-
-<Story
-  name="With Capture Interval"
-  args={{
-    data: [
-      { category: '0', value: 10 },
-      { category: '1', value: 20 },
-      { category: '2', value: 15 },
-      { category: '3', value: 25 },
-      { category: '4', value: 30 },
-      { category: '5', value: 18 },
-      { category: '6', value: 22 },
-    ],
-    xAxisName: 'category',
-    yAxisName: 'Value',
-    height: '400px',
-    captureInterval: 3600,
-  }}
-/>
-
-<Story
-  name="With Capture Interval - Short Duration"
-  args={{
-    data: [
-      { category: '0', value: 10 },
-      { category: '1', value: 20 },
-      { category: '2', value: 15 },
-      { category: '3', value: 25 },
-      { category: '4', value: 30 },
-      { category: '5', value: 18 },
-      { category: '6', value: 22 },
-    ],
-    xAxisName: 'category',
-    yAxisName: 'Value',
-    height: '400px',
-    captureInterval: 600,
-  }}
-/>

package/dist/components/graphs/bar-chart/BarChart.stories.svelte.d.ts

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

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -1,169 +0,0 @@
-<script lang="ts">
-  import { textColor, borderColor, backgroundColor, boxShadow, chartColor } from '../../../tokens';
-  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-  import type { EChartsOption, BarSeriesOption } from 'echarts';
-  import { createTooltipFormatter } from '../utils/tooltipFormatter';
-  import { formattedDurationCompact } from '../utils/duration';
-
-  type DataItem = {
-    value: number;
-    [key: string]: string | number; // Allows other properties, like the one used for xAxisName
-  };
-
-  interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
-    data: DataItem[];
-    colors?: Record<string, string>; // Optional: Color mapping per x-axis category
-    rotateXAxisLabels?: boolean;
-    grid?: EChartsOption['grid'];
-    captureInterval?: number;
-    shouldDim?: (key: string) => boolean;
-  }
-
-  let {
-    data,
-    colors,
-    rotateXAxisLabels = false,
-    xAxisName,
-    yAxisName,
-    captureInterval,
-    shouldDim = () => false,
-
-    ...props
-  }: BarChartProps = $props();
-
-  const defaultColors: Record<string, string> = {
-    accent: chartColor['accent'],
-    blue: chartColor['blue'],
-    orange: chartColor['orange'],
-    plum: chartColor['plum'],
-    sky: chartColor['sky'],
-    pear: chartColor['pear'],
-    pink: chartColor['pink'],
-    lilac: chartColor['lilac'],
-    lime: chartColor['lime'],
-  };
-  const defaultColorRotationArray = $derived(Object.values(defaultColors));
-
-  const xAxisData = $derived(data.map((item) => item[xAxisName!]));
-
-  const captureIntervals = captureInterval
-    ? Array(data.length)
-        .fill(null)
-        .map((_, timeIndex) => {
-          const seconds = timeIndex * captureInterval;
-          return formattedDurationCompact(seconds);
-        })
-    : undefined;
-
-  const createBarDataItem = (value: number | null, color: string, key: string) => {
-    return {
-      value,
-      itemStyle: {
-        color,
-        borderRadius: 2,
-        borderWidth: 0.5,
-        borderColor: borderColor['white'],
-        opacity: shouldDim(key) ? 0.3 : 1,
-      },
-      emphasis: {
-        disabled: true,
-      },
-    };
-  };
-
-  const chartSeries: BarSeriesOption[] = $derived.by(() => {
-    const seriesData = data.map((item) => item.value);
-    const seriesColors = data.map(
-      (item, index) =>
-        colors?.[item[xAxisName!] as string] ??
-        defaultColorRotationArray[index % defaultColorRotationArray.length]
-    );
-
-    const singleSeries: BarSeriesOption[] = [
-      {
-        name: yAxisName,
-        type: 'bar',
-        data: seriesData.map((value, index) =>
-          createBarDataItem(value, seriesColors[index], String(data[index][xAxisName!]))
-        ),
-        emphasis: { disabled: true },
-      },
-    ];
-    return singleSeries;
-  });
-
-  const formatTooltip = createTooltipFormatter({
-    yAxisName: yAxisName,
-    yAxisUnit: props.yAxisUnit,
-  });
-
-  const options: EChartsOption = $derived.by(() => {
-    return {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-          shadowStyle: {
-            color: backgroundColor['neutral'],
-          },
-        },
-        borderWidth: 0,
-        borderRadius: 6,
-        extraCssText: `box-shadow: ${boxShadow.menu}`,
-        formatter: formatTooltip,
-      },
-      grid: {
-        containLabel: true,
-        left: 0,
-        right: 16,
-        bottom: 16,
-        top: 16,
-      },
-      xAxis: {
-        type: 'category',
-        data: captureIntervals || xAxisData,
-        axisTick: {
-          show: false,
-          alignWithLabel: true,
-        },
-        axisLabel: {
-          fontSize: 11,
-          color: textColor['secondary'],
-          show: true,
-          ...(rotateXAxisLabels
-            ? { rotate: 90, overflow: 'break', width: 60, padding: [0, 40, 0, 0] }
-            : { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 }),
-        },
-        axisLine: {
-          lineStyle: {
-            color: borderColor['axis'],
-          },
-        },
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          fontSize: 11,
-          color: textColor['secondary'],
-        },
-        axisLine: {
-          show: false,
-        },
-        splitLine: {
-          lineStyle: {
-            color: borderColor['input'],
-            type: 'dashed',
-          },
-        },
-      },
-      textStyle: {
-        color: textColor['secondary'],
-        fontFamily: 'af Another Sans',
-      },
-      series: chartSeries,
-      color: defaultColorRotationArray,
-    };
-  });
-</script>
-
-<Chart {options} {...props} {xAxisName} {yAxisName} />

package/dist/components/graphs/bar-chart/BarChart.svelte.d.ts

@@ -1,17 +0,0 @@
-import { type GenericChartProps } from '../chart/Chart.svelte';
-import type { EChartsOption } from 'echarts';
-type DataItem = {
-    value: number;
-    [key: string]: string | number;
-};
-interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
-    data: DataItem[];
-    colors?: Record<string, string>;
-    rotateXAxisLabels?: boolean;
-    grid?: EChartsOption['grid'];
-    captureInterval?: number;
-    shouldDim?: (key: string) => boolean;
-}
-declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
-type BarChart = ReturnType<typeof BarChart>;
-export default BarChart;

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte

@@ -1,74 +0,0 @@
-<script lang="ts" context="module">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { textColor } from '../../../tokens';
-  import StackedBarChart from './StackedBarChart.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Graphs/StackedBarChart',
-    component: StackedBarChart,
-    tags: ['autodocs'],
-  });
-
-  const stackedChartProps = {
-    xAxisCategories: ['ID 1', 'ID 2', 'ID 3', 'ID 4'],
-    series: [
-      { name: 'Halo', data: [100, 132, 101, 134] },
-      { name: 'Spot', data: [220, 182, 191, 234] },
-      { name: 'Microbial', data: [150, 232, 201, 154] },
-    ],
-  };
-
-  const seriesColors = {
-    Halo: textColor['icon-warning'],
-    Spot: textColor['icon-tertiary'],
-    Microbial: textColor['icon-lime'],
-  };
-</script>
-
-<Story
-  name="Default Colors"
-  args={{ ...stackedChartProps, height: '400px', xAxisName: 'ID', yAxisName: 'Count' }}
-/>
-
-<Story
-  name="Custom Colors"
-  args={{
-    ...stackedChartProps,
-    height: '400px',
-    colors: seriesColors,
-    xAxisName: 'ID',
-    yAxisName: 'Count',
-  }}
-/>
-
-<Story
-  name="With Capture Interval"
-  args={{
-    xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
-    series: [
-      { name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
-      { name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
-      { name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] },
-    ],
-    height: '400px',
-    xAxisName: 'Time',
-    yAxisName: 'Count',
-    captureInterval: 3600,
-  }}
-/>
-
-<Story
-  name="With Capture Interval - Short Duration"
-  args={{
-    xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
-    series: [
-      { name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
-      { name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
-      { name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] },
-    ],
-    height: '400px',
-    xAxisName: 'Time',
-    yAxisName: 'Count',
-    captureInterval: 600,
-  }}
-/>