@reshape-biotech/design-system 2.6.1 → 2.6.2

package/dist/components/card/Card.svelte

@@ -6,12 +6,21 @@
     children: Snippet;
     headerBorder?: boolean;
     class?: string;
+    variant?: 'full-width' | 'content-width';
   };
 
-  const { Header, children, headerBorder = false, class: additionalClasses = '' }: Props = $props();
+  const {
+    Header,
+    children,
+    headerBorder = false,
+    class: additionalClasses = '',
+    variant = 'content-width',
+  }: Props = $props();
 </script>
 
-<div class="rounded-xl border border-static bg-surface shadow-container {additionalClasses}">
+<div
+  class="overflow-hidden rounded-xl border border-static bg-surface shadow-container {additionalClasses}"
+>
   {#if Header}
     <header
       class="flex h-12 items-center px-4"
@@ -22,7 +31,7 @@
     </header>
   {/if}
   {#if children}
-    <div class="p-4 pb-5">
+    <div class={variant === 'full-width' ? '' : 'p-4 pb-5'}>
       {@render children()}
     </div>
   {/if}

package/dist/components/card/Card.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = {
     children: Snippet;
     headerBorder?: boolean;
     class?: string;
+    variant?: 'full-width' | 'content-width';
 };
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/components/card/CardWrapper.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    Header?: Snippet;
+    children: Snippet;
+    Footer?: Snippet;
+    class?: string;
+    variant?: 'default' | 'compact';
+  };
+
+  const {
+    Header,
+    children,
+    Footer,
+    class: additionalClasses = '',
+    variant = 'default',
+  }: Props = $props();
+</script>
+
+<div class="wrapper {variant} {additionalClasses}">
+  {#if Header}
+    <header class="wrapper-header">
+      {@render Header()}
+    </header>
+  {/if}
+  <div class="flex w-full !overflow-hidden [&>*]:w-full [&>*]:rounded-xl">
+    {@render children()}
+  </div>
+  {#if Footer}
+    <footer class="wrapper-footer">
+      {@render Footer()}
+    </footer>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+
+    display: flex;
+
+    flex-direction: column;
+
+    border-radius: 1rem;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1))
+}
+
+  .wrapper.default {
+
+    gap: 0.25rem;
+
+    padding: 0.25rem
+}
+
+  .wrapper.compact {
+
+    gap: 0.125rem;
+
+    padding: 0.125rem
+}
+
+  .wrapper-header {
+
+    display: flex;
+
+    min-height: 2rem;
+
+    width: 100%;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    padding-left: 1rem;
+
+    padding-right: 1rem
+}
+
+  .wrapper-footer {
+
+    display: flex;
+
+    min-height: 2.5rem;
+
+    width: 100%;
+
+    align-items: center;
+
+    padding-left: 1rem;
+
+    padding-right: 1rem
+}
+</style>

package/dist/components/card/CardWrapper.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    Header?: Snippet;
+    children: Snippet;
+    Footer?: Snippet;
+    class?: string;
+    variant?: 'default' | 'compact';
+};
+declare const CardWrapper: import("svelte").Component<Props, {}, "">;
+type CardWrapper = ReturnType<typeof CardWrapper>;
+export default CardWrapper;

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <Collapsible.Trigger {...props} class="transition-all {props.class}">
-  <div class="container h-8">
+  <div class="container h-6">
     {@render children()}
     {#if withIcon}
       <Icon iconName="CaretDown" color="secondary" class="icon m-1" />

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

@@ -1,10 +1,10 @@
-import type { IconComponentProps } from 'phosphor-svelte';
+import { type IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor, backgroundColor } from './../../tokens';
 export * from './custom';
 import type { CustomIconName } from './custom';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X' | 'XCircle';
+export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'IntersectThree' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X' | 'XCircle';
 export type AllIconName = IconName | CustomIconName;
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;

package/dist/components/icons/index.js

@@ -1,3 +1,4 @@
+import {} from 'phosphor-svelte';
 import Aperture from 'phosphor-svelte/lib/Aperture';
 import Archive from 'phosphor-svelte/lib/Archive';
 import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
@@ -63,6 +64,7 @@ import House from 'phosphor-svelte/lib/House';
 import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
 import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
 import Info from 'phosphor-svelte/lib/Info';
+import IntersectThree from 'phosphor-svelte/lib/IntersectThree';
 import Lock from 'phosphor-svelte/lib/Lock';
 import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
@@ -187,6 +189,7 @@ export const iconMap = {
     ImageSquare,
     ImagesSquare,
     Info,
+    IntersectThree,
     Lock,
     LineSegments,
     List,

package/dist/components/select/components/Group.svelte

@@ -9,14 +9,22 @@
     children: Snippet;
     class?: string;
     contentClass?: string;
+    headerClass?: string;
   }
 
-  let { label, children, class: className, contentClass, ...restProps }: Props = $props();
+  let {
+    label,
+    children,
+    class: className,
+    contentClass,
+    headerClass,
+    ...restProps
+  }: Props = $props();
 </script>
 
 <SelectPrimitive.Group class={className} {...restProps}>
   {#if label}
-    <GroupHeading>{label}</GroupHeading>
+    <GroupHeading class={headerClass}>{label}</GroupHeading>
   {/if}
   <div class={contentClass}>
     {@render children()}

package/dist/components/select/components/Group.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props extends PrimitiveGroupProps {
     children: Snippet;
     class?: string;
     contentClass?: string;
+    headerClass?: string;
 }
 declare const Group: import("svelte").Component<Props, {}, "">;
 type Group = ReturnType<typeof Group>;

package/dist/components/stat-card/StatCard.svelte

@@ -15,6 +15,7 @@
     editable?: boolean;
     onsubmit?: (value: string | number) => void;
     inputType?: 'text' | 'number';
+    variant?: 'default' | 'light';
   }
 
   let {
@@ -25,6 +26,7 @@
     showTitleTooltip = false,
     editable = false,
     inputType = 'text',
+    variant = 'default',
     onsubmit,
   }: Props = $props();
   const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
@@ -92,7 +94,9 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   data-testid="stat-card-body"
-  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4 text-left transition-colors"
+  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg p-4 text-left transition-colors"
+  class:bg-neutral={variant === 'default'}
+  class:bg-surface={variant === 'light'}
   class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
   class:cursor-pointer={editable && !isEditing && value !== null}
   onclick={handleCardClick}

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     editable?: boolean;
     onsubmit?: (value: string | number) => void;
     inputType?: 'text' | 'number';
+    variant?: 'default' | 'light';
 }
 declare const StatCard: import("svelte").Component<Props, {}, "">;
 type StatCard = ReturnType<typeof StatCard>;

package/package.json

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