@invopop/popui 0.1.34 → 0.1.40

package/dist/DropdownSelect.svelte

@@ -7,6 +7,7 @@
   import clsx from 'clsx'
   import TagStatus from './TagStatus.svelte'
   import { resolveIcon } from './helpers.js'
+  import { buttonVariants } from './button/button.svelte'
 
   let {
     value = $bindable(''),
@@ -17,7 +18,11 @@
     multiple = false,
     fullWidth = false,
     widthClass = 'min-w-[160px] max-w-[420px]',
-    onSelect
+    onSelect,
+    onOpenChange,
+    stackLeft = false,
+    stackRight = false,
+    multipleLabel = 'items'
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -28,6 +33,10 @@
     resolveIcon(icon).then((res) => (resolvedIcon = res))
   })
 
+  $effect(() => {
+    onOpenChange?.(isOpen)
+  })
+
   let items = $derived(
     options.map((o) => ({
       ...o,
@@ -38,30 +47,45 @@
   )
 
   let selectedItems = $derived(items.filter((i) => i.selected))
-  let selectedColor = $derived(!multiple && items.find((i) => i.selected)?.color)
-  let selectedIcon = $derived(!multiple && items.find((i) => i.selected)?.icon)
+  let selectedItem = $derived(items.find((i) => i.selected))
+  let showSingleIcon = $derived(!multiple || selectedItems.length === 1)
+  let selectedColor = $derived(!multiple && selectedItem?.color)
+  let selectedColors = $derived(
+    multiple ? selectedItems.filter((i) => i.color).map((i) => i.color) : []
+  )
+  let hasMultipleColors = $derived(multiple && selectedColors.length > 0)
+  let selectedIcon = $derived(showSingleIcon && selectedItem?.icon)
   let selectedIconColor = $derived(
-    (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-foreground-default-secondary'
+    (showSingleIcon && selectedItem?.iconClass) || 'text-foreground-default-secondary'
   )
   let selectedLabel = $derived(
-    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 && multiple ? ' and more' : ''}` ||
-      placeholder
+    hasMultipleColors && selectedItems.length > 1
+      ? `${selectedItems.length} ${multipleLabel}`
+      : `${selectedItems[0]?.label || ''}${selectedItems.length > 1 && multiple ? ' and more' : ''}` ||
+          placeholder
   )
 
+  let isStacked = $derived(stackLeft || stackRight)
+
   let styles = $derived(
-    clsx('border backdrop-blur-sm backdrop-filter', {
-      'border-border-selected-bold shadow-active': isOpen,
-      'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
-    })
+    isStacked
+      ? buttonVariants({
+          variant: 'ghost',
+          stackedLeft: stackLeft,
+          stackedRight: stackRight
+        })
+      : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
+          'border-border-selected-bold shadow-active': isOpen,
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+        })
   )
 
   function handleClick(val: AnyProp) {
     value = val
 
-    onSelect?.(value)
-
     if (multiple) return
 
+    onSelect?.(value)
     selectDropdown?.toggle()
   }
 
@@ -72,14 +96,27 @@
     if (isEqual(value, val)) return
 
     value = val
+    onSelect?.(value)
+  }
+
+  export const open = () => {
+    if (!isOpen) {
+      selectDropdown?.toggle()
+    }
+  }
+
+  export const toggle = () => {
+    selectDropdown?.toggle()
   }
 </script>
 
 {#snippet label()}
   <span
-    class="flex-1 text-base truncate {selectedItems.length
-      ? 'text-foreground'
-      : 'text-foreground-default-secondary'}"
+    class={clsx('flex-1 text-base truncate', {
+      'text-foreground': selectedItems.length,
+      'text-foreground-default-secondary': !selectedItems.length,
+      'font-normal': isStacked && !selectedItems.length
+    })}
   >
     {selectedLabel}
   </span>
@@ -90,13 +127,26 @@
   placement="bottom-start"
   {fullWidth}
   bind:this={selectDropdown}
-  class={fullWidth ? '' : widthClass}
+  class={fullWidth || isStacked ? '' : widthClass}
 >
   {#snippet trigger()}
     <div
-      class="{styles} dropdown-select flex items-center rounded-lg py-1.5 pl-2 pr-[28px] bg-background overflow-hidden w-full h-8"
+      class="{styles} flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7"
+      class:pr-[28px]={!isStacked}
+      class:pr-2={isStacked}
     >
-      {#if selectedColor}
+      {#if hasMultipleColors}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <div class="flex items-center -space-x-0.5">
+            {#each selectedColors.slice(0, 3) as color}
+              <span class="border-l border-background rounded-xs flex first:border-l-0">
+                <TagStatus dot status={color} />
+              </span>
+            {/each}
+          </div>
+          {@render label()}
+        </div>
+      {:else if selectedColor}
         <div class="flex items-center gap-1 flex-1 min-w-0">
           <TagStatus dot status={selectedColor} />
           {@render label()}

package/dist/DropdownSelect.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { DropdownSelectProps } from './types.ts';
-declare const DropdownSelect: import("svelte").Component<DropdownSelectProps, {}, "value">;
+declare const DropdownSelect: import("svelte").Component<DropdownSelectProps, {
+    open: () => void;
+    toggle: () => void;
+}, "value">;
 type DropdownSelect = ReturnType<typeof DropdownSelect>;
 export default DropdownSelect;

package/dist/DropdownSelectGroup.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<div
+  class="flex items-center h-7 rounded-md border border-border-default-secondary divide-x divide-border-default-secondary"
+>
+  {@render children()}
+</div>

package/dist/DropdownSelectGroup.svelte.d.ts

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

package/dist/EmptyState.svelte

@@ -31,8 +31,12 @@
     </div>
   {/if}
   <div class="flex flex-col items-center gap-0.5 text-center">
-    <h4 class="font-medium text-foreground text-base">{title}</h4>
-    <p class="text-foreground-default-secondary text-base">{description}</p>
+    {#if title}
+      <h4 class="font-medium text-foreground text-base">{title}</h4>
+    {/if}
+    {#if description}
+      <p class="text-foreground-default-secondary text-base">{description}</p>
+    {/if}
   </div>
   {#if children}
     <div class="mt-4">

package/dist/InputSearch.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
-  import { Search } from '@invopop/ui-icons'
+  import { Search, Close, Pulse } from '@invopop/ui-icons'
   import ShortcutWrapper from './ShortcutWrapper.svelte'
   import type { InputSearchProps } from './types.js'
+  import clsx from 'clsx'
 
   const debounce = (target: HTMLInputElement) => {
     clearTimeout(timer)
@@ -18,6 +19,8 @@
     placeholder = '',
     icon = Search,
     focusOnLoad = false,
+    size = 'md',
+    loading = false,
     oninput,
     onclick,
     onfocus,
@@ -42,6 +45,7 @@
 
   export const clear = () => {
     value = ''
+    oninput?.('')
   }
 
   let shortcutKeys = $derived(shortcut.split(''))
@@ -66,9 +70,22 @@
   <input
     bind:this={input}
     bind:value
-    type="search"
-    class="flex items-center gap-1 h-8 w-full px-2 py-1.5 pl-7 rounded-lg border bg-background-default-default text-base text-foreground-default-default placeholder:text-foreground-default-tertiary outline-none caret-foreground-accent focus:ring-0 border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active"
-    style:padding-right={shortcut ? `${shortcutKeys.length * 20 + 12}px` : undefined}
+    type="text"
+    class={clsx(
+      'flex items-center gap-1 w-full px-2 pl-7 border bg-background-default-default text-base text-foreground-default-default placeholder:text-foreground-default-tertiary outline-none caret-foreground-accent focus:ring-0 border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active',
+      {
+        'h-[26px] rounded-sm pl-5': size === 'xs',
+        'h-7 py-1 rounded-md pl-6': size === 'sm',
+        'h-8 py-1.5 rounded-lg': size === 'md'
+      }
+    )}
+    style:padding-right={shortcut && (value || loading)
+      ? `${shortcutKeys.length * 20 + 32}px`
+      : shortcut
+        ? `${shortcutKeys.length * 20 + 12}px`
+        : value || loading
+          ? '28px'
+          : undefined}
     {placeholder}
     {...rest}
     oninput={handleInput}
@@ -76,7 +93,30 @@
     {onblur}
     {onclick}
   />
-  <Icon src={icon} class="absolute left-2 size-4 text-foreground-default-tertiary" />
+  <Icon src={icon} class={clsx("absolute size-4 text-foreground-default-tertiary", {
+    'left-1': size === 'xs',
+    'left-1.5': size === 'sm',
+    'left-2': size === 'md'
+  })} />
+
+  {#if loading}
+    <div
+      class="absolute"
+      style:right={shortcut ? `${shortcutKeys.length * 20 + 16}px` : '8px'}
+    >
+      <Icon src={Pulse} class="size-4 pulse-icon" />
+    </div>
+  {:else if value}
+    <button
+      type="button"
+      class="absolute text-foreground"
+      style:right={shortcut ? `${shortcutKeys.length * 20 + 16}px` : '8px'}
+      onclick={clear}
+      tabindex="-1"
+    >
+      <Icon src={Close} class="size-4" />
+    </button>
+  {/if}
 
   {#if shortcut}
     <div class="absolute right-2 flex items-center gap-1">

package/dist/InputSelect.svelte

@@ -4,6 +4,7 @@
   import InputLabel from './InputLabel.svelte'
   import { resolveIcon } from './helpers.js'
   import InputError from './InputError.svelte'
+  import clsx from 'clsx'
 
   let {
     id = Math.random().toString(36).slice(2, 7),
@@ -17,6 +18,7 @@
     placeholder = 'Select one...',
     disablePlaceholder = true,
     errorText = '',
+    size = 'md',
     onchange,
     ...rest
   }: InputSelectProps = $props()
@@ -43,9 +45,16 @@
       {name}
       bind:value
       {disabled}
-      class="h-8 w-full px-2 py-1.5 rounded-lg border bg-background text-base outline-none focus:ring-0 border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active text-foreground ui-select"
-      class:pl-7={resolvedIcon}
-      class:text-foreground-default-secondary={!value}
+      class={clsx(
+        'w-full px-2 rounded-lg border bg-background text-base outline-none focus:ring-0 border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active text-foreground ui-select',
+        {
+          'h-[26px]': size === 'xs',
+          'h-7 py-1': size === 'sm',
+          'h-8 py-1.5': size === 'md',
+          'pl-7': resolvedIcon,
+          'text-foreground-default-secondary': !value
+        }
+      )}
       {...rest}
       onchange={handleChange}
     >

package/dist/InputText.svelte

@@ -13,6 +13,10 @@
     disabled = false,
     value = $bindable(''),
     focusOnLoad = false,
+    stackLeft = false,
+    stackRight = false,
+    widthClass = '',
+    size = 'md',
     oninput,
     onkeydown,
     onfocus,
@@ -30,21 +34,34 @@
     }, 750)
   }
 
+  let isStacked = $derived(stackLeft || stackRight)
+
   let inputStyles = $derived(
     clsx(
-      'h-8 w-full rounded-lg border px-2 py-1 text-base tracking-tight bg-background-default-default backdrop-blur-[2px] caret-foreground-accent',
+      'px-2 py-1 text-base text-foreground tracking-tight bg-background-default-default backdrop-blur-[2px] caret-foreground-accent',
       'placeholder:text-foreground-default-tertiary',
       'outline-none focus:ring-0',
+      widthClass,
       {
+        // Width defaults
+        'w-full': !isStacked && !widthClass,
+        // Size variants (applied to all)
+        'h-[26px]': size === 'xs',
+        'h-7': size === 'sm',
+        'h-8': size === 'md',
+        // Stacked styles
+        'border-0 rounded-none hover:bg-background-default-secondary focus:bg-background-default-default':
+          isStacked,
+        'rounded-l-lg': isStacked && stackLeft && !stackRight,
+        'rounded-r-lg': isStacked && stackRight && !stackLeft,
+        // Non-stacked styles
+        'rounded-lg border': !isStacked,
         'pointer-events-none bg-background-default-secondary border-border-default-default':
-          disabled
-      },
-      {
-        'text-foreground-critical border-border-critical-bold caret-foreground-critical': errorText
-      },
-      {
+          !isStacked && disabled,
+        'text-foreground-critical border-border-critical-bold caret-foreground-critical':
+          !isStacked && errorText,
         'text-foreground border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':
-          !errorText && !disabled
+          !isStacked && !errorText && !disabled
       }
     )
   )

package/dist/InputToggle.svelte

@@ -2,46 +2,63 @@
   import clsx from 'clsx'
   import { createSwitch } from 'svelte-headlessui'
   import type { InputToggleProps } from './types'
+  import { cn } from './utils.js'
+  import { onMount } from 'svelte'
   const sw = createSwitch({ label: 'Set Preference' })
 
   let {
     id = Math.random().toString(36).slice(2, 7),
     label = '',
     checked = $bindable(false),
-    onchange
+    onchange,
+    class: className = ''
   }: InputToggleProps = $props()
 
+  let hasInteracted = $state(false)
+
+  onMount(() => {
+    // Defer enabling transitions until after the next frame
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        hasInteracted = true
+      })
+    })
+  })
+
   $effect(() => {
     $sw.checked = checked
   })
 
   let toggleStyles = $derived(
     clsx(
-      'relative inline-flex h-5 w-[30px] shrink-0 cursor-pointer items-center rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0',
+      'relative inline-flex h-5 w-[30px] shrink-0 items-center rounded-md focus:outline-none focus:ring-0',
       {
         'bg-background-default-tertiary': !$sw.checked,
-        'bg-background-accent': $sw.checked
+        'bg-background-accent': $sw.checked,
+        'transition-colors duration-200 ease-in-out': hasInteracted
       }
     )
   )
 
   let circleStyles = $derived(
     clsx(
-      'pointer-events-none inline-block size-4 transform rounded bg-icon-inverse-bold transition duration-200 ease-in-out',
+      'pointer-events-none inline-block size-4 transform rounded bg-icon-inverse-bold',
       {
         'translate-x-[2px]': !$sw.checked,
-        'translate-x-[12px]': $sw.checked
+        'translate-x-[12px]': $sw.checked,
+        'transition duration-200 ease-in-out': hasInteracted
       }
     )
   )
 
   function handleChange() {
+    hasInteracted = true
     onchange?.($sw.checked)
     checked = $sw.checked
   }
 </script>
 
-<label for={id} class="inline-flex items-center gap-2 cursor-pointer">
+<label for={id} class={cn("inline-flex items-center gap-2 cursor-pointer", className)}>
   <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange}>
     <span class="sr-only">Use setting</span>
     <span aria-hidden="true" class={circleStyles}></span>

package/dist/SeparatorHorizontal.svelte

@@ -4,8 +4,8 @@
   .hr-separator {
     border-image: repeating-linear-gradient(
       90deg,
-      var(--color-border-default-default),
-      var(--color-border-default-default) 3px,
+      var(--color-border-default-secondary),
+      var(--color-border-default-secondary) 3px,
       transparent 3px,
       transparent 7px
     );

package/dist/StepIcon.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { TooltipAutoHide, TooltipContent, TooltipTrigger } from './tooltip'
+  import type { StepIconProps } from './types.js'
+
+  let {
+    name,
+    showMask = false,
+    tooltipContent,
+    children
+  }: StepIconProps = $props()
+</script>
+
+<TooltipAutoHide>
+  <TooltipTrigger class="shrink-0">
+    <div
+      style={showMask
+        ? `mask-image: url("data:image/svg+xml,%3Csvg width='26' height='28' viewBox='0 0 26 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4004 0C21.7603 9.85818e-10 23.4402 0.000417824 24.7236 0.654297C25.1531 0.873098 25.552 1.14144 25.9131 1.45215C25.5579 1.90591 25.2449 2.39516 24.9805 2.91406C23.9996 4.83925 24 7.36007 24 12.4004V15.5996C24 20.6399 23.9996 23.1608 24.9805 25.0859C25.2447 25.6046 25.5581 26.0933 25.9131 26.5469C25.5519 26.8578 25.1532 27.1268 24.7236 27.3457C23.4402 27.9996 21.7603 28 18.4004 28H9.59961C6.23965 28 4.55977 27.9996 3.27637 27.3457C2.14739 26.7705 1.22954 25.8526 0.654297 24.7236C0.00041777 23.4402 9.8162e-10 21.7603 0 18.4004V9.59961C9.88222e-10 6.23965 0.000417662 4.55977 0.654297 3.27637C1.22954 2.14739 2.14739 1.22954 3.27637 0.654297C4.55977 0.000417608 6.23965 9.84018e-10 9.59961 0H18.4004Z' fill='white'/%3E%3C/svg%3E");
+           mask-size: 100% 100%;
+           mask-repeat: no-repeat;
+           -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='26' height='28' viewBox='0 0 26 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4004 0C21.7603 9.85818e-10 23.4402 0.000417824 24.7236 0.654297C25.1531 0.873098 25.552 1.14144 25.9131 1.45215C25.5579 1.90591 25.2449 2.39516 24.9805 2.91406C23.9996 4.83925 24 7.36007 24 12.4004V15.5996C24 20.6399 23.9996 23.1608 24.9805 25.0859C25.2447 25.6046 25.5581 26.0933 25.9131 26.5469C25.5519 26.8578 25.1532 27.1268 24.7236 27.3457C23.4402 27.9996 21.7603 28 18.4004 28H9.59961C6.23965 28 4.55977 27.9996 3.27637 27.3457C2.14739 26.7705 1.22954 25.8526 0.654297 24.7236C0.00041777 23.4402 9.8162e-10 21.7603 0 18.4004V9.59961C9.88222e-10 6.23965 0.000417662 4.55977 0.654297 3.27637C1.22954 2.14739 2.14739 1.22954 3.27637 0.654297C4.55977 0.000417608 6.23965 9.84018e-10 9.59961 0H18.4004Z' fill='white'/%3E%3C/svg%3E");
+           -webkit-mask-size: 100% 100%;
+           -webkit-mask-repeat: no-repeat;`
+        : ''}
+    >
+      {@render children()}
+    </div>
+  </TooltipTrigger>
+  <TooltipContent>
+    {#if tooltipContent}
+      {@render tooltipContent()}
+    {:else if name}
+      {name}
+    {/if}
+  </TooltipContent>
+</TooltipAutoHide>

package/dist/StepIcon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { StepIconProps } from './types.js';
+declare const StepIcon: import("svelte").Component<StepIconProps, {}, "">;
+type StepIcon = ReturnType<typeof StepIcon>;
+export default StepIcon;

package/dist/StepIconList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from './tooltip'
+  import { TooltipProvider } from './tooltip'
+  import StepIcon from './StepIcon.svelte'
   import type { StepIconListProps } from './types.js'
 
   let { icons = [] }: StepIconListProps = $props()
@@ -9,42 +10,34 @@
   let restIcons = $derived(icons.slice(maxItems, icons.length))
 </script>
 
-{#snippet separator()}
-  <div class="hidden sm:block h-px w-3 bg-border shrink-0"></div>
+{#snippet restTooltip()}
+  {#each restIcons as restIcon}
+    <div>{restIcon.name}</div>
+  {/each}
 {/snippet}
 
 <TooltipProvider>
-  <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
+  <div class="flex flex-col space-y-2 sm:flex-row sm:flex-nowrap sm:space-y-0 items-center">
     {#each mainIcons as icon, i (i)}
-      <Tooltip>
-        <TooltipTrigger class="shrink-0">
-          <div
-            class="p-1.5 rounded-md border border-border flex items-center space-x-1 bg-background text-icon"
-          >
-            <img src={icon.url} alt={icon.name} class="size-4" />
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>{icon.name}</TooltipContent>
-      </Tooltip>
-
-      {#if i < mainIcons.length - 1}
-        {@render separator()}
-      {/if}
+      <StepIcon name={icon.name} showMask={i < mainIcons.length - 1 || restIcons.length > 0}>
+        <div
+          class="p-1.5 rounded-md flex items-center space-x-1 bg-background-default-secondary text-icon shrink-0 {i >
+          0
+            ? 'ml-[-2px]'
+            : ''}"
+        >
+          <img src={icon.url} alt={icon.name} class="size-4 shrink-0" />
+        </div>
+      </StepIcon>
     {/each}
     {#if restIcons.length}
-      {@render separator()}
-      <Tooltip>
-        <TooltipTrigger class="shrink-0">
-          <div class="flex items-center justify-center text-icon font-medium text-base size-7">
-            +{restIcons.length}
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>
-          {#each restIcons as restIcon}
-            <div>{restIcon.name}</div>
-          {/each}
-        </TooltipContent>
-      </Tooltip>
+      <StepIcon tooltipContent={restTooltip}>
+        <div
+          class="flex items-center justify-center text-icon font-medium text-sm size-7 shrink-0 rounded-md bg-background-default-secondary ml-[-1px]"
+        >
+          +{restIcons.length}
+        </div>
+      </StepIcon>
     {/if}
   </div>
 </TooltipProvider>

package/dist/TagProgress.svelte

@@ -10,12 +10,12 @@
   let containerStyles = $derived(
     clsx('inline-flex items-center gap-1 rounded-full overflow-hidden pl-0.5 pr-1 py-0.5', {
       'bg-background-selected-inverse': variant === 'dark',
-      'bg-background-default-tertiary': variant === 'default'
+      'bg-background-default-secondary': variant === 'default'
     })
   )
 
   let textStyles = $derived(
-    clsx('text-xs font-medium leading-4 whitespace-nowrap', {
+    clsx('text-sm font-medium leading-4 whitespace-nowrap', {
       'text-foreground-inverse-default': variant === 'dark',
       'text-foreground-default-default': variant === 'default'
     })

package/dist/TagStatus.svelte

@@ -19,7 +19,7 @@
       'bg-background-status-void text-foreground-default-secondary': status === 'grey',
       'shadow-avatar text-foreground-default-secondary': status === 'empty',
       'px-1.5': dot,
-      'p-1!': dot && !label,
+      'p-0!': dot && !label,
       'px-1': !dot
     })
   )