@reshape-biotech/design-system 2.6.5 → 2.7.0

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
-  import { Icon } from '../icons';
+  import Star from 'phosphor-svelte/lib/Star';
+  import { Icon } from 'design-system';
   import SegmentedControlButtons from './SegmentedControlButtons.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -13,18 +14,54 @@
 <Story name="Primary" asChild>
   <SegmentedControlButtons class="w-[350px]">
     {#snippet children({ ControlButton })}
-      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+      <ControlButton active
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Low</ControlButton
+      >
+      <ControlButton
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Medium</ControlButton
+      >
+      <ControlButton disabled
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> High</ControlButton
+      >
     {/snippet}
   </SegmentedControlButtons>
 </Story>
 <Story name="Large" asChild>
   <SegmentedControlButtons size="lg" class="w-[350px]">
     {#snippet children({ ControlButton })}
-      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+      <ControlButton active
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Low</ControlButton
+      >
+      <ControlButton
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Medium</ControlButton
+      >
+      <ControlButton disabled
+        ><Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> High</ControlButton
+      >
     {/snippet}
   </SegmentedControlButtons>
 </Story>
@@ -32,13 +69,25 @@
   <SegmentedControlButtons class="w-[350px]">
     {#snippet children({ ControlButton })}
       <ControlButton active color="secondary">
-        <Icon iconName="Star" /> Low
+        <Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Low
       </ControlButton>
       <ControlButton color="secondary">
-        <Icon iconName="Star" /> Medium
+        <Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> Medium
       </ControlButton>
       <ControlButton color="secondary">
-        <Icon iconName="Star" /> High
+        <Icon>
+          {#snippet children(props)}
+            <Star {...props} />
+          {/snippet}
+        </Icon> High
       </ControlButton>
     {/snippet}
   </SegmentedControlButtons>

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import X from 'phosphor-svelte/lib/X';
+  import Icon from '../../icons/Icon.svelte';
   import * as Select from '../index';
-  import { Icon, type IconName } from '../../icons';
   import IconButton from '../../icon-button/IconButton.svelte';
 
   type ItemType = {
     value: string;
     label: string;
-    iconName?: IconName | string;
     disabled?: boolean;
   };
 
@@ -45,9 +45,7 @@
             class="flex h-7 w-fit items-center gap-1 rounded-md bg-neutral py-0.5 pl-2 pr-0.5 text-sm"
             aria-label={`Selected item ${item.label}`}
           >
-            {#if item.iconName}
-              <Icon iconName={item.iconName as IconName} color="secondary" />
-            {/if}
+            <!-- Icons not currently supported in multi-select items -->
             <span class:text-secondary={item.disabled}>{item.label}</span>
             {#if !item.disabled}
               <IconButton
@@ -59,7 +57,7 @@
                 rounded={false}
                 class="text-primary focus:outline-none"
               >
-                <Icon iconName="X" color="tertiary" />
+                <Icon color="tertiary" icon={X} />
               </IconButton>
             {/if}
           </div>

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

@@ -1,8 +1,6 @@
-import { type IconName } from '../../icons';
 type ItemType = {
     value: string;
     label: string;
-    iconName?: IconName | string;
     disabled?: boolean;
 };
 interface Props {

package/dist/components/select/components/SelectContent.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import CaretUp from 'phosphor-svelte/lib/CaretUp';
+  import CaretDown from 'phosphor-svelte/lib/CaretDown';
+  import { Icon } from 'design-system';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { ContentProps } from '../types';
 
   import type { Snippet } from 'svelte';
-  import Icon from '../../icons/Icon.svelte';
 
   interface Props extends ContentProps {
     children: Snippet;
@@ -21,13 +23,13 @@
 <SelectPrimitive.Portal>
   <SelectPrimitive.Content {...restProps} {sideOffset} class={baseClasses + ' ' + className}>
     <SelectPrimitive.ScrollUpButton class="flex justify-center">
-      <Icon iconName="CaretUp" color="tertiary" />
+      <Icon color="tertiary" icon={CaretUp} />
     </SelectPrimitive.ScrollUpButton>
     <SelectPrimitive.Viewport class="p-1 ">
       {@render children()}
     </SelectPrimitive.Viewport>
     <SelectPrimitive.ScrollDownButton class="flex justify-center">
-      <Icon iconName="CaretDown" color="tertiary" />
+      <Icon color="tertiary" icon={CaretDown} />
     </SelectPrimitive.ScrollDownButton>
   </SelectPrimitive.Content>
 </SelectPrimitive.Portal>

package/dist/components/select/components/SelectItem.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import Check from 'phosphor-svelte/lib/Check';
+  import { Icon } from 'design-system';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { ItemProps, ItemSlotProps } from '../types';
 
   import type { Snippet } from 'svelte';
-  import Icon from '../../icons/Icon.svelte';
 
   interface Props extends ItemProps {
     children?: Snippet<[ItemSlotProps]>;
@@ -33,7 +34,7 @@
       >
     {/if}
     {#if params.selected}
-      <Icon iconName="Check" color="accent" />
+      <Icon color="accent" icon={Check} />
     {/if}
   {/snippet}
 </SelectPrimitive.Item>

package/dist/components/select/components/SelectTrigger.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import CaretDown from 'phosphor-svelte/lib/CaretDown';
+  import { Icon } from 'design-system';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { TriggerProps, IconSnippet } from '../types';
 
   import type { Snippet } from 'svelte';
-  import { Icon } from '../../icons';
 
   interface Props extends TriggerProps {
     TriggerIcon?: IconSnippet;
@@ -43,6 +44,6 @@
   {#if TriggerIcon}
     {@render TriggerIcon()}
   {:else}
-    <Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
+    <Icon color="secondary" class="mx-1 shrink-0" icon={CaretDown} />
   {/if}
 </SelectPrimitive.Trigger>

package/dist/components/slider/Slider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Icon } from '../icons';
+  import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
+  import { Icon } from 'design-system';
 
   let className = '';
   export { className as class };
@@ -66,7 +67,7 @@
     {disabled}
   />
   <div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
-    <Icon iconName="CaretUpDown" class="rotate-90" />
+    <Icon class="rotate-90" icon={CaretUpDown} />
   </div>
 </div>
 

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import Info from 'phosphor-svelte/lib/Info';
+  import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
+  import { Icon } from 'design-system';
   import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
   import Spinner from '../spinner/Spinner.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';
   import { Input } from '../input';
@@ -117,7 +119,7 @@
     {#if titleTooltip && showTitleTooltip}
       <Tooltip>
         {#snippet trigger()}
-          <Icon iconName="Info" color="icon-tertiary" />
+          <Icon color="icon-tertiary" icon={Info} />
         {/snippet}
         {#snippet content()}
           <span>
@@ -156,7 +158,7 @@
         </div>
         {#if editable}
           <IconButton onclick={(e) => startEditing(e)} rounded={false}>
-            <Icon iconName="PencilSimple" />
+            <Icon icon={PencilSimple} />
           </IconButton>
         {/if}
       {/if}

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -1,9 +1,15 @@
 <script module lang="ts">
+  import SpinnerGap from 'phosphor-svelte/lib/SpinnerGap';
+  import Moon from 'phosphor-svelte/lib/Moon';
+  import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+  import StopCircle from 'phosphor-svelte/lib/StopCircle';
+  import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
+  import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
+  import { Icon } from 'design-system';
   import StatusBadge from '../status-badge/StatusBadge.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';
   import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Icon } from '../icons';
 
   const { Story } = defineMeta({
     component: StatusBadge,
@@ -20,7 +26,11 @@
     <div class="flex flex-row gap-1">
       <StatusBadge type="neutral">
         {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
+          <Icon>
+            {#snippet children(props)}
+              <SpinnerGap {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           <div>Pending</div>
@@ -28,14 +38,22 @@
       </StatusBadge>
       <StatusBadge type="neutral">
         {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
+          <Icon>
+            {#snippet children(props)}
+              <SpinnerGap {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
     <div class="flex flex-row gap-1">
       <StatusBadge type="neutral">
         {#snippet icon()}
-          <Icon iconName="Moon" />
+          <Icon>
+            {#snippet children(props)}
+              <Moon {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           <div>Idle</div>
@@ -43,7 +61,11 @@
       </StatusBadge>
       <StatusBadge type="neutral">
         {#snippet icon()}
-          <Icon iconName="Moon" />
+          <Icon>
+            {#snippet children(props)}
+              <Moon {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
@@ -54,7 +76,11 @@
     <div class="flex flex-row gap-1">
       <StatusBadge type="neutral" size="sm">
         {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
+          <Icon>
+            {#snippet children(props)}
+              <SpinnerGap {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           <div>Pending</div>
@@ -62,14 +88,22 @@
       </StatusBadge>
       <StatusBadge type="neutral" size="sm">
         {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
+          <Icon>
+            {#snippet children(props)}
+              <SpinnerGap {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
     <div class="flex flex-row gap-1">
       <StatusBadge type="neutral" size="sm">
         {#snippet icon()}
-          <Icon iconName="Moon" />
+          <Icon>
+            {#snippet children(props)}
+              <Moon {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
         {#snippet content()}
           <div>Idle</div>
@@ -77,7 +111,11 @@
       </StatusBadge>
       <StatusBadge type="neutral" size="sm">
         {#snippet icon()}
-          <Icon iconName="Moon" />
+          <Icon>
+            {#snippet children(props)}
+              <Moon {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
@@ -93,7 +131,11 @@
           <div>
             <StatusBadge type="success">
               {#snippet icon()}
-                <Icon iconName="CheckCircle" />
+                <Icon>
+                  {#snippet children(props)}
+                    <CheckCircle {...props} />
+                  {/snippet}
+                </Icon>
               {/snippet}
               {#snippet content()}
                 <div>Completed</div>
@@ -110,7 +152,11 @@
       </Tooltip>
       <StatusBadge type="success">
         {#snippet icon()}
-          <Icon iconName="CheckCircle" weight="fill" />
+          <Icon weight="fill">
+            {#snippet children(props)}
+              <CheckCircle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
@@ -120,7 +166,11 @@
           <div>
             <StatusBadge type="success">
               {#snippet icon()}
-                <Icon iconName="StopCircle" />
+                <Icon>
+                  {#snippet children(props)}
+                    <StopCircle {...props} />
+                  {/snippet}
+                </Icon>
               {/snippet}
               {#snippet content()}
                 <div>Stopped</div>
@@ -137,7 +187,11 @@
       </Tooltip>
       <StatusBadge type="success">
         {#snippet icon()}
-          <Icon iconName="StopCircle" />
+          <Icon>
+            {#snippet children(props)}
+              <StopCircle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
@@ -150,7 +204,11 @@
         {#snippet trigger()}
           <StatusBadge type="success" size="sm">
             {#snippet icon()}
-              <Icon iconName="CheckCircle" weight="fill" />
+              <Icon weight="fill">
+                {#snippet children(props)}
+                  <CheckCircle {...props} />
+                {/snippet}
+              </Icon>
             {/snippet}
             {#snippet content()}
               <div>Completed</div>
@@ -166,7 +224,11 @@
       </Tooltip>
       <StatusBadge type="success" size="sm">
         {#snippet icon()}
-          <Icon iconName="CheckCircle" weight="fill" />
+          <Icon weight="fill">
+            {#snippet children(props)}
+              <CheckCircle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
@@ -175,7 +237,11 @@
         {#snippet trigger()}
           <StatusBadge type="success" size="sm">
             {#snippet icon()}
-              <Icon iconName="StopCircle" />
+              <Icon>
+                {#snippet children(props)}
+                  <StopCircle {...props} />
+                {/snippet}
+              </Icon>
             {/snippet}
             {#snippet content()}
               <div>Stopped</div>
@@ -191,7 +257,11 @@
       </Tooltip>
       <StatusBadge type="success" size="sm">
         {#snippet icon()}
-          <Icon iconName="StopCircle" />
+          <Icon>
+            {#snippet children(props)}
+              <StopCircle {...props} />
+            {/snippet}
+          </Icon>
         {/snippet}
       </StatusBadge>
     </div>
@@ -275,7 +345,11 @@
       {#snippet trigger()}
         <StatusBadge type="warning">
           {#snippet icon()}
-            <Icon iconName="WifiSlash" />
+            <Icon>
+              {#snippet children(props)}
+                <WifiSlash {...props} />
+              {/snippet}
+            </Icon>
           {/snippet}
           {#snippet content()}
             <div>Offline</div>
@@ -292,7 +366,11 @@
 
     <StatusBadge type="warning">
       {#snippet icon()}
-        <Icon iconName="WifiSlash" />
+        <Icon>
+          {#snippet children(props)}
+            <WifiSlash {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
     </StatusBadge>
   </div>
@@ -303,7 +381,11 @@
       {#snippet trigger()}
         <StatusBadge type="warning" size="sm">
           {#snippet icon()}
-            <Icon iconName="WifiSlash" />
+            <Icon>
+              {#snippet children(props)}
+                <WifiSlash {...props} />
+              {/snippet}
+            </Icon>
           {/snippet}
           {#snippet content()}
             <div>Offline</div>
@@ -320,7 +402,11 @@
 
     <StatusBadge type="warning" size="sm">
       {#snippet icon()}
-        <Icon iconName="WifiSlash" />
+        <Icon>
+          {#snippet children(props)}
+            <WifiSlash {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
     </StatusBadge>
   </div>
@@ -333,7 +419,11 @@
       {#snippet trigger()}
         <StatusBadge type="error">
           {#snippet icon()}
-            <Icon iconName="WarningCircle" weight="fill" />
+            <Icon weight="fill">
+              {#snippet children(props)}
+                <WarningCircle {...props} />
+              {/snippet}
+            </Icon>
           {/snippet}
           {#snippet content()}
             <div>Failed</div>
@@ -350,7 +440,11 @@
 
     <StatusBadge type="error">
       {#snippet icon()}
-        <Icon iconName="WarningCircle" weight="fill" />
+        <Icon weight="fill">
+          {#snippet children(props)}
+            <WarningCircle {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
     </StatusBadge>
   </div>
@@ -361,7 +455,11 @@
       {#snippet trigger()}
         <StatusBadge type="error" size="sm">
           {#snippet icon()}
-            <Icon iconName="WarningCircle" weight="fill" />
+            <Icon weight="fill">
+              {#snippet children(props)}
+                <WarningCircle {...props} />
+              {/snippet}
+            </Icon>
           {/snippet}
           {#snippet content()}
             <div>Failed</div>
@@ -378,7 +476,11 @@
 
     <StatusBadge type="error" size="sm">
       {#snippet icon()}
-        <Icon iconName="WarningCircle" weight="fill" />
+        <Icon weight="fill">
+          {#snippet children(props)}
+            <WarningCircle {...props} />
+          {/snippet}
+        </Icon>
       {/snippet}
     </StatusBadge>
   </div>
@@ -387,7 +489,11 @@
 <Story name="Icon only" asChild>
   <StatusBadge type="neutral" iconOnly>
     {#snippet icon()}
-      <Icon iconName="SpinnerGap" />
+      <Icon>
+        {#snippet children(props)}
+          <SpinnerGap {...props} />
+        {/snippet}
+      </Icon>
     {/snippet}
   </StatusBadge>
 </Story>

package/dist/components/stepper/components/stepper-step.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import Check from 'phosphor-svelte/lib/Check';
+  import { Icon } from 'design-system';
   import type { Snippet } from 'svelte';
   import { getContext } from 'svelte';
-  import { Icon } from '../../icons/';
   import type { StepState } from '../';
 
   interface Props {
@@ -74,7 +75,7 @@
     aria-hidden="true"
   >
     {#if variant.showIcon}
-      <Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
+      <Icon class="h-3 w-3 {variant.iconColor}" icon={Check} />
     {:else}
       <span class="text-xs font-medium leading-none {variant.iconColor}">
         {stepNumber}

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

@@ -1,4 +1,6 @@
 <script module lang="ts">
+  import Phone from 'phosphor-svelte/lib/Phone';
+  import { Icon } from 'design-system';
   import Table from './Table.svelte';
 
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -8,7 +10,6 @@
     tags: ['autodocs'],
   });
   import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
 
   export const users = [
     {
@@ -83,7 +84,11 @@
             <Td>{user.role}</Td>
             <Td>
               <IconButton disabled={user.role === 'deactivated'}>
-                <Icon iconName="Phone" />
+                <Icon>
+                  {#snippet children(props)}
+                    <Phone {...props} />
+                  {/snippet}
+                </Icon>
               </IconButton>
             </Td>
           </Tr>

package/dist/components/tag/Tag.stories.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
-  import { Icon } from '../icons';
+  import Folder from 'phosphor-svelte/lib/Folder';
+  import { Icon } from 'design-system';
   import Tag from './Tag.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -44,7 +45,11 @@
 <Story name="Default icon onclick" asChild>
   <div class="w-fit">
     <Tag onclick={() => {}}>
-      <Icon iconName="Folder" />
+      <Icon>
+        {#snippet children(props)}
+          <Folder {...props} />
+        {/snippet}
+      </Icon>
       Default
     </Tag>
   </div>