@reshape-biotech/design-system 2.2.0 → 2.2.2

package/dist/components/button/Button.svelte

@@ -8,13 +8,14 @@
     | 'secondary-inverse'
     | 'transparent-inverse';
   export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
 </script>
 
 <script lang="ts">
   import Spinner from '../spinner/Spinner.svelte';
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  interface Props extends HTMLButtonAttributes {
     class?: string;
     onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
@@ -44,6 +45,7 @@
     children,
     dataTestId = undefined,
     rounded = false,
+    ...rest
   }: Props = $props();
 
   let variantClass = $derived(`btn-${variant}`);
@@ -68,6 +70,7 @@
   data-testid={dataTestId}
   class:rounded
   class:disabled
+  {...rest}
 >
   {#if loading}
     <Spinner />
@@ -225,9 +228,7 @@
 
     background-color: transparent;
 
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+    color: inherit
 }
   .btn-transparent:hover {
 

package/dist/components/button/Button.svelte.d.ts

@@ -1,7 +1,8 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse' | 'transparent-inverse';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-interface Props {
+interface Props extends HTMLButtonAttributes {
     class?: string;
     onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;

package/dist/components/combobox/components/combobox-content.svelte

@@ -2,6 +2,7 @@
   import { Combobox } from 'bits-ui';
   import type { ComboboxContentProps } from '../types';
   import { Icon } from '../../icons';
+  import { fade } from 'svelte/transition';
 
   let {
     children,
@@ -10,27 +11,41 @@
     portalled = true,
     header,
     footer,
+    paddedContent = true,
+    fadeDuration = 0,
     ...props
   }: ComboboxContentProps = $props();
 </script>
 
 {#snippet content()}
-  <Combobox.Content {...props} class={className}>
-    {@render header?.()}
-    {#if showScroll}
-      <Combobox.ScrollUpButton class="flex justify-center">
-        <Icon iconName="CaretUp" />
-      </Combobox.ScrollUpButton>
-      <Combobox.Viewport class="p-1">
-        {@render children()}
-      </Combobox.Viewport>
-      <Combobox.ScrollDownButton class="flex justify-center">
-        <Icon iconName="CaretDown" />
-      </Combobox.ScrollDownButton>
-    {:else}
-      {@render children()}
-    {/if}
-    {@render footer?.()}
+  <Combobox.Content {...props} class={className} forceMount>
+    {#snippet child({ wrapperProps, props, open })}
+      {#snippet content()}
+        {@render header?.()}
+        {#if showScroll}
+          <Combobox.ScrollUpButton class="flex justify-center">
+            <Icon iconName="CaretUp" />
+          </Combobox.ScrollUpButton>
+          <Combobox.Viewport class={paddedContent ? 'p-1' : ''}>
+            {@render children()}
+          </Combobox.Viewport>
+          <Combobox.ScrollDownButton class="flex justify-center">
+            <Icon iconName="CaretDown" />
+          </Combobox.ScrollDownButton>
+        {:else}
+          {@render children()}
+        {/if}
+        {@render footer?.()}
+      {/snippet}
+
+      {#if open}
+        <div {...wrapperProps}>
+          <div {...props} transition:fade={{ duration: fadeDuration }}>
+            {@render content()}
+          </div>
+        </div>
+      {/if}
+    {/snippet}
   </Combobox.Content>
 {/snippet}
 
@@ -45,19 +60,19 @@
 <style>
   :global([data-combobox-content]) {
 
+    z-index: 1;
+
     width: 100%;
 
     border-radius: 0.75rem;
 
-    border-width: 1px;
-
     --tw-bg-opacity: 1;
 
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
 
-    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 

package/dist/components/combobox/types.d.ts

@@ -7,6 +7,8 @@ export type ComboboxContentProps = {
     portalled?: boolean;
     header?: Snippet;
     footer?: Snippet;
+    paddedContent?: boolean;
+    fadeDuration?: number;
 } & BitsComboboxContentProps;
 export type ComboboxTriggerProps = {
     children: Snippet;

package/dist/components/icon-button/IconButton.svelte

@@ -75,6 +75,7 @@
 <style>
   button {
     display: flex;
+    flex-shrink: 0;
     cursor: pointer;
     align-items: center;
     justify-content: center;
@@ -94,39 +95,39 @@
 }
 
   .size-xs {
-    height: 1.5rem;
-    width: 1.5rem
+    width: 1.5rem;
+    height: 1.5rem
 }
 
   .size-xs :global(svg) {
-    height: 1rem;
-    width: 1rem
+    width: 1rem;
+    height: 1rem
 }
   .size-sm {
-    height: 2rem;
-    width: 2rem
+    width: 2rem;
+    height: 2rem
 }
   .size-sm :global(svg) {
-    height: 1rem;
-    width: 1rem
+    width: 1rem;
+    height: 1rem
 }
   .size-md {
-    height: 2.5rem;
-    width: 2.5rem
+    width: 2.5rem;
+    height: 2.5rem
 }
   .size-md :global(svg) {
-    height: 1.25rem;
-    width: 1.25rem
+    width: 1.25rem;
+    height: 1.25rem
 }
 
   .size-lg {
-    height: 3rem;
-    width: 3rem
+    width: 3rem;
+    height: 3rem
 }
 
   .size-lg :global(svg) {
-    height: 1.5rem;
-    width: 1.5rem
+    width: 1.5rem;
+    height: 1.5rem
 }
 
   .color-primary {

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

@@ -9,6 +9,11 @@ export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
 export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';
+export interface IconComponentProps {
+    size?: number | string;
+    color?: string;
+    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+}
 export { default as Icon } from './Icon.svelte';
 export type IconProps = {
     iconName: IconName;

package/dist/components/icons/index.js

@@ -60,7 +60,6 @@ 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 Link from 'phosphor-svelte/lib/Link';
 import Lock from 'phosphor-svelte/lib/Lock';
 import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
@@ -102,6 +101,7 @@ import Stop from 'phosphor-svelte/lib/Stop';
 import StopCircle from 'phosphor-svelte/lib/StopCircle';
 import Sun from 'phosphor-svelte/lib/Sun';
 import Table from 'phosphor-svelte/lib/Table';
+import Link from 'phosphor-svelte/lib/Link';
 import Tag from 'phosphor-svelte/lib/Tag';
 import Target from 'phosphor-svelte/lib/Target';
 import TestTube from 'phosphor-svelte/lib/TestTube';

package/dist/components/input/Input.svelte

@@ -7,13 +7,13 @@
   interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
     id?: string | undefined;
+    variant?: 'default' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
     prefix?: Snippet<[any]>;
     suffix?: Snippet;
     error?: Snippet;
     input?: HTMLInputElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    transparent?: boolean;
     clearable?: boolean;
     onclear?: () => void;
     class?: string;
@@ -23,6 +23,7 @@
 
   let {
     label = null,
+    variant = 'default',
     value = $bindable(),
     type = 'text',
     validator = (_) => {
@@ -33,7 +34,6 @@
     error,
     input = $bindable(),
     size = 'md',
-    transparent = false,
     clearable = false,
     onclear = () => {},
     class: className,
@@ -75,9 +75,10 @@
 
   <div
     class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
-    class:border-transparent={transparent}
-    class:shadow-input={!transparent}
+    class:border-transparent={variant === 'transparent'}
+    class:shadow-input={!(variant === 'transparent')}
     class:!border-error={!valid}
+    class:borderless={variant === 'borderless'}
   >
     <div class="whitespace-nowrap text-secondary">
       {@render prefix?.({ valid })}
@@ -102,6 +103,7 @@
     {#if clearable && value}
       <IconButton
         variant="transparent"
+        rounded={false}
         size="xs"
         onclick={() => {
           value = '';
@@ -124,6 +126,8 @@
 
     resize: none;
 
+    padding: 0.25rem;
+
     outline: 2px solid transparent;
 
     outline-offset: 2px
@@ -141,11 +145,37 @@
     border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
 }
 
+  .borderless {
+
+    border-style: none;
+
+    --tw-shadow: 0 0 #0000;
+
+    --tw-shadow-colored: 0 0 #0000;
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+  .borderless input {
+
+    border-style: none;
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px;
+
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
   .size-xs {
 
     height: 1.5rem;
 
-    padding: 0.5rem;
+    padding: 0.25rem;
 
     font-size: 0.75rem;
 
@@ -156,35 +186,23 @@
 
     height: 2rem;
 
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
+    padding: 0.25rem
 }
 
   .size-md {
 
     height: 2.5rem;
 
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
+    padding: 0.5rem
 }
 
   .size-lg {
 
     height: 3rem;
 
-    padding-left: 0.75rem;
+    padding-left: 0.5rem;
 
-    padding-right: 0.75rem;
+    padding-right: 0.5rem;
 
     padding-top: 0.75rem;
 

package/dist/components/input/Input.svelte.d.ts

@@ -3,13 +3,13 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
     id?: string | undefined;
+    variant?: 'default' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
     prefix?: Snippet<[any]>;
     suffix?: Snippet;
     error?: Snippet;
     input?: HTMLInputElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    transparent?: boolean;
     clearable?: boolean;
     onclear?: () => void;
     class?: string;

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export * from './components/pill/';
 export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
-export * from './components/select/';
+export * as Select from './components/select/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';

package/dist/index.js

@@ -28,7 +28,7 @@ export * from './components/pill/';
 export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
-export * from './components/select/';
+export * as Select from './components/select/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';

package/package.json

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