@invopop/popui 0.1.3 → 0.1.4-beta.2

package/dist/AlertDialog.svelte

@@ -27,6 +27,7 @@
     children
   }: AlertDialogProps = $props()
 
+  let previousOpen = $state(open)
   let recentAction = $state(false)
 
   function cancel() {
@@ -46,17 +47,13 @@
   }
 
   $effect(() => {
-    if (!open) {
-      cancelByEsc()
+    // Only fire oncancel when transitioning from true to false (ESC or backdrop click)
+    if (previousOpen && !open && !recentAction) {
+      oncancel?.()
     }
+    previousOpen = open
   })
 
-  function cancelByEsc() {
-    if (recentAction) return
-
-    oncancel?.()
-  }
-
   function handleOpen(value: boolean) {
     if (value) {
       const focusEl = document.querySelector(
@@ -68,9 +65,11 @@
 </script>
 
 <AlertDialog onOpenChange={handleOpen} bind:open>
-  <AlertDialogTrigger class={children ? '' : 'hidden'}>
-    {@render children?.()}
-  </AlertDialogTrigger>
+  {#if children}
+    <AlertDialogTrigger>
+      {@render children?.()}
+    </AlertDialogTrigger>
+  {/if}
   <AlertDialogContent>
     <AlertDialogHeader>
       <AlertDialogTitle>{title}</AlertDialogTitle>

package/dist/BaseButton.svelte

@@ -1,124 +1,49 @@
 <script lang="ts">
-  import clsx from 'clsx'
   import type { BaseButtonProps } from './types.ts'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import ShortcutWrapper from './ShortcutWrapper.svelte'
+  import Button from './button/button.svelte'
 
   let {
     icon,
     iconTheme = 'default',
     iconPosition = 'left',
     type = 'button',
-    variant = 'default',
+    variant = 'outline',
     disabled = false,
-    small = false,
-    big = false,
+    size = 'md',
     dangerIcon = false,
     shortcut = false,
     fullwidth = false,
     notification = false,
+    stackedLeft = false,
+    stackedRight = false,
     children,
     onclick,
+    class: className,
     ...rest
   }: BaseButtonProps = $props()
 
-  let buttonStyles = $derived(
-    clsx(
-      { 'w-full': fullwidth },
-      { 'opacity-30 pointer-events-none': disabled },
-      { 'flex-row-reverse space-x-reverse': iconPosition === 'right' },
-      { 'bg-white': variant === 'default' },
-      { 'bg-workspace-accent': variant === 'primary' },
-      { 'bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300': variant === 'secondary' },
-      { 'bg-danger-500': variant === 'danger' },
-      { 'bg-warning-500': variant === 'warning' },
-      { 'text-sm rounded': small },
-      { 'text-base rounded-md': !small },
-      { 'p-1': small && !children },
-      { 'p-1.5': !small && !big && !children },
-      { 'p-2': big && !children },
-      { 'px-3': big && children && !icon },
-      { 'px-2': !big && children && !icon },
-      { 'pl-2 pr-2.5': big && children && icon && iconPosition === 'left' },
-      { 'pl-2.5 pr-2': big && children && icon && iconPosition === 'right' },
-      { 'pl-1.5 pr-2': !small && !big && children && icon && iconPosition === 'left' },
-      { 'pl-2 pr-1.5': !small && !big && children && icon && iconPosition === 'right' },
-      { 'py-1.5': big && children },
-      { 'py-1': !big && children },
-      { 'text-white': ['primary', 'danger', 'dark', 'warning'].includes(variant) },
-      { 'text-neutral-800': ['default', 'secondary', 'outline'].includes(variant) },
-      { 'border border-white-10 hover:border-white-20 active:border-white-40': variant === 'dark' },
-      {
-        'border border-neutral-200 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-200':
-          variant === 'default'
-      },
-      {
-        'border border-neutral-800/10 hover:bg-neutral-800/5 active:border-neutral-800/20 active:bg-neutral-800/10':
-          variant === 'outline'
-      },
-      { 'gap-1': icon && children }
-    )
-  )
-
-  let iconStyles = $derived(
-    clsx(
-      {
-        'text-neutral-500': ['default', 'secondary'].includes(variant) && children && !dangerIcon
-      },
-      {
-        'text-neutral-800': ['default', 'secondary'].includes(variant) && !children && !dangerIcon
-      },
-      {
-        'text-white-70': !['default', 'secondary'].includes(variant) && children && !dangerIcon
-      },
-      {
-        'text-white': !['default', 'secondary'].includes(variant) && !children && !dangerIcon
-      },
-      { 'text-danger-500': dangerIcon }
-    )
-  )
-
-  let overlayClasses = $derived(
-    clsx({
-      'rounded-md': !small,
-      rounded: small,
-      'group-hover:bg-black/[.16] group-active:bg-black/[.32]': [
-        'primary',
-        'danger',
-        'warning'
-      ].includes(variant)
-    })
-  )
-
-  function handleClick(event: MouseEvent) {
-    event.stopPropagation()
-    onclick?.(event)
-  }
+  let iconClass = $derived(dangerIcon ? 'text-icon-critical' : '')
+  let fullWidthClass = $derived(fullwidth ? 'w-full' : '')
+  let buttonProps = $derived({
+    variant,
+    size,
+    icon,
+    iconPosition,
+    iconClass,
+    type,
+    disabled,
+    stackedLeft,
+    stackedRight,
+    onclick,
+    class: `${fullWidthClass} ${className || ''}`,
+    ...rest
+  })
 </script>
 
-<button
-  {type}
-  {disabled}
-  class="{buttonStyles} flex items-center justify-center font-medium font-sans relative group tracking-tight cursor-pointer"
-  {...rest}
-  onclick={handleClick}
->
-  <span class="{overlayClasses} absolute inset-0"></span>
-  {#if icon}
-    <div class="relative">
-      {#if shortcut}
-        <ShortcutWrapper>
-          <Icon src={icon} theme={iconTheme} class="{iconStyles} h-3 w-3 z-10" />
-        </ShortcutWrapper>
-      {:else}
-        <Icon src={icon} theme={iconTheme} class="{iconStyles} h-4 w-4 z-10" />
-      {/if}
-      {#if notification}
-        <span class="absolute top-0 right-0 w-1.5 h-1.5 bg-danger-500 rounded-full z-20"></span>
-      {/if}
-    </div>
-  {/if}
-  {#if children}
-    <span class="z-10">{@render children?.()}</span>
-  {/if}
-</button>
+{#if children}
+  <Button {...buttonProps}>
+    {@render children()}
+  </Button>
+{:else}
+  <Button {...buttonProps} />
+{/if}

package/dist/BaseCard.svelte

@@ -8,7 +8,6 @@
     title = '',
     description = '',
     type = 'default',
-    enabled = false,
     footer,
     onclick,
     ...rest
@@ -16,43 +15,49 @@
 </script>
 
 <button
-  class="rounded-lg bg-white hover:bg-neutral-100 focus:bg-neutral-200 disabled:bg-neutral-50 disabled:pointer-events-none border border-neutral-100 p-3 flex flex-col min-w-[298px] min-h-[126px] text-left"
+  class="flex flex-col gap-4 p-3 min-w-[298px] bg-background border border-border rounded-xl cursor-pointer text-left transition-colors hover:border-border-default-secondary disabled:bg-background-default-secondary disabled:cursor-not-allowed disabled:pointer-events-none"
   disabled={type === 'soon'}
   {...rest}
   {onclick}
 >
-  <div class="flex flex-col items-start justify-center space-y-2 w-full">
-    <div class="flex items-center justify-between w-full">
-      <div class="rounded-md bg-white border border-neutral-100 p-1.5">
-        <img class="h-5 w-5 flex-shrink-0" src={imageUrl} alt={imageAlt} />
-      </div>
-      <div class="flex items-center space-x-2">
-        {#if enabled}
-          <div
-            class="flex items-center space-x-1 rounded bg-neutral-50 border border-neutral-100 py-0.5 pl-1.5 pr-[5px] text-sm text-neutral-500 font-medium"
-          >
-            <div class="bg-positive-500 h-2 w-2 rounded-full"></div>
-            <span>Enabled</span>
-          </div>
-        {/if}
-        {#if type === 'beta'}
-          <TagBeta />
-        {:else if type === 'soon'}
-          <div
-            class="flex items-center space-x-1 rounded bg-neutral-50 border border-neutral-200 py-0.5 pl-1.5 pr-[5px] text-sm text-neutral-400 font-medium"
-          >
-            <span>Soon</span>
-          </div>
-        {/if}
+  <div class="flex flex-col gap-2 w-full flex-1">
+    <div class="flex items-start justify-between w-full">
+      <div
+        class="size-8 border border-border rounded-lg overflow-hidden flex items-center justify-center shrink-0"
+      >
+        <img class="size-5 shrink-0" src={imageUrl} alt={imageAlt} />
       </div>
+      {#if type === 'beta' || type === 'soon'}
+        <div class="flex gap-2 items-start">
+          {#if type === 'beta'}
+            <TagBeta />
+          {:else if type === 'soon'}
+            <div
+              class="flex items-center gap-2 px-[5px] py-0.5 rounded bg-background-default-secondary border border-border"
+            >
+              <span
+                class="font-medium text-sm leading-4 text-foreground-default-tertiary whitespace-nowrap"
+              >
+                Soon
+              </span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="flex flex-col gap-0.5 w-full flex-1">
+      <h3 class="font-medium text-sm leading-5 tracking-[-0.07px] text-foreground w-full">
+        {title}
+      </h3>
+      <p
+        class="font-normal text-sm leading-5 tracking-[-0.07px] text-foreground-default-secondary w-full"
+      >
+        {description}
+      </p>
     </div>
-    <h3 class="truncate text-base font-medium text-neutral-800 tracking-tight">{title}</h3>
   </div>
-  <p class="flex mt-0.5 text-base text-neutral-500 tracking-normal flex-1">
-    {description}
-  </p>
   {#if footer}
-    <div class="mt-5">
+    <div class="shrink-0">
       {@render footer?.()}
     </div>
   {/if}

package/dist/BaseCounter.svelte

@@ -2,19 +2,22 @@
   import clsx from 'clsx'
   import type { BaseCounterProps } from './types'
 
-  let { content, variant = 'default' }: BaseCounterProps = $props()
+  let { value, theme = 'light' }: BaseCounterProps = $props()
 
   let styles = $derived(
     clsx(
-      { 'bg-neutral-100': variant === 'light' },
-      { 'bg-neutral-200': variant === 'default' },
-      { 'bg-neutral-300': variant === 'dark' }
+      'inline-flex items-center justify-center rounded px-[3px] pb-[1.5px] pt-[2.5px] font-mono font-medium text-sm leading-none',
+      {
+        'bg-background-default-tertiary text-foreground': theme === 'light',
+        'bg-background-accent text-foreground-inverse': theme === 'accent',
+        'bg-background-selected-inverse text-foreground-inverse': theme === 'navigation'
+      }
     )
   )
 </script>
 
-<div
-  class="{styles} inline-flex items-center justify-center rounded p-1 text-neutral-500 text-sm font-medium h-4 min-w-[16px] tracking-wide tabular-nums slashed-zero lining-nums box-border"
->
-  {content}
+<div class="p-0.5">
+  <div class={styles}>
+    <p class="flex items-center justify-center min-w-2.5">{value}</p>
+  </div>
 </div>

package/dist/BaseDropdown.svelte

@@ -8,8 +8,9 @@
   let {
     isOpen = $bindable(false),
     fullWidth = false,
-    placement = 'bottom-end',
+    placement = 'bottom-start',
     matchParentWidth = false,
+    class: className = '',
     trigger,
     children,
     ...rest
@@ -49,10 +50,9 @@
   }
 </script>
 
-<div class="inline-flex" class:w-full={fullWidth} role="menu">
+<div class="flex {className}" class:w-full={fullWidth} role="menu">
   <button
-    class="text-left"
-    class:w-full={fullWidth}
+    class="cursor-pointer text-left w-full min-w-0"
     use:floatingRef
     {...rest}
     onclick={handleClick}
@@ -61,7 +61,7 @@
   </button>
   {#if isOpen}
     <div
-      class="max-h-40 absolute z-[1001]"
+      class="max-h-40 absolute z-1001"
       use:portal
       use:floatingContent
       use:clickOutside

package/dist/BaseFlag.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import 'flag-icons/css/flag-icons.min.css'
   import type { BaseFlagProps } from './types'
 
-  let { country = '', width = 12 }: BaseFlagProps = $props()
+  let { country = '' }: BaseFlagProps = $props()
 
   let iso = $derived(country.toLowerCase())
 </script>
 
-<!-- https://github.com/HatScripts/circle-flags -->
-<img src={`https://hatscripts.github.io/circle-flags/flags/${iso}.svg`} alt={country} {width} />
+<div class="w-3.5 h-2.5 rounded-[1.5px] overflow-hidden flex items-center justify-center">
+  <span class="fi fi-{country.toLocaleLowerCase()} text-[14px] leading-none"></span>
+</div>

package/dist/BaseFlag.svelte.d.ts

@@ -1,3 +1,4 @@
+import 'flag-icons/css/flag-icons.min.css';
 import type { BaseFlagProps } from './types';
 declare const BaseFlag: import("svelte").Component<BaseFlagProps, {}, "">;
 type BaseFlag = ReturnType<typeof BaseFlag>;

package/dist/BaseTable.svelte

@@ -26,7 +26,7 @@
 
   let {
     sortBy = '',
-    sortDirection = '',
+    sortDirection = $bindable(''),
     fields = [],
     data = [],
     getActions = undefined,
@@ -127,7 +127,10 @@
       return
     }
 
-    selectionMode = 'keyboard'
+    // Only set keyboard mode if it's not just the Shift key alone
+    if (event.key !== 'Shift') {
+      selectionMode = 'keyboard'
+    }
 
     if (event.key === 'Escape' || event.key === 'Esc') {
       event.preventDefault()
@@ -238,7 +241,7 @@
   }}
 />
 
-<div class="w-full font-sans border rounded-md border-neutral-100">
+<div class="h-full w-full font-sans rounded-md overflow-auto">
   <Table class="hidden md:table" {...rest}>
     <colgroup>
       {#if selectable}
@@ -255,13 +258,13 @@
       <TableRow>
         {#if selectable}
           <!-- if table is selectable we need to add an extra header with a checkbox -->
-          <TableHead class="bg-white sticky top-0 z-10 p-0 h-9">
+          <TableHead class="bg-background sticky top-0 z-10 p-0 h-9">
             {#if !hideSelectAll}
               <BaseTableCheckbox
-                hidden={!selectedRows.length}
                 {indeterminate}
                 checked={allChecked}
                 onChecked={() => {
+                  console.log('toggle all')
                   toggleAllSelected(!selectedRows.length)
                 }}
               />
@@ -270,7 +273,7 @@
         {/if}
         {#each fields as field, i (i)}
           <TableHead
-            class="bg-white group sticky z-10 top-0 py-0 {i === 0 && !selectable
+            class="bg-background group sticky z-10 top-0 py-0 {i === 0 && !selectable
               ? 'pl-3'
               : 'pl-0'} {i === fields.length - 1 && !addExtraCell ? 'pr-3' : 'pr-0'}"
           >
@@ -279,9 +282,7 @@
         {/each}
         {#if addExtraCell}
           <!-- if table has actions cell we need to add an extra header -->
-          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md">
-            <div class="border-b border-neutral-100 h-9"></div>
-          </th>
+          <th scope="col" class="bg-background sticky top-0 z-10 rounded-tr-md"> </th>
         {/if}
       </TableRow>
     </TableHeader>
@@ -292,17 +293,16 @@
             <th
               scope="colgroup"
               colspan={fields.length + (selectable ? 2 : 1)}
-              class="bg-white text-left text-sm font-medium text-neutral-500 sticky top-9 tracking-normal h-8 z-10"
+              class="bg-background text-left text-base font-normal text-foreground-default-secondary sticky top-9 tracking-normal h-8 z-10"
             >
               <span
-                class:border-t={i > 0}
-                class:pl-12={selectable}
-                class:pl-3={!selectable}
-                class="flex items-center space-x-1 box-border border-b border-neutral-100 h-8"
+                class:pl-16={selectable}
+                class:pl-6={!selectable}
+                class="flex items-center space-x-1 box-border border-b border-border h-9"
               >
                 <span>{group.label}</span>
                 {#if !hideCounter}
-                  <BaseCounter content={group.rows.length} />
+                  <BaseCounter value={group.rows.length} />
                 {/if}
               </span>
             </th>
@@ -361,7 +361,7 @@
       {#each group.rows as row}
         <button
           class:cursor-default={disableRowClick}
-          class="w-full text-left border border-neutral-200 rounded"
+          class="w-full text-left border border-border rounded"
           onclick={() => {
             if (disableRowClick) return
 

package/dist/BaseTable.svelte.d.ts

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

package/dist/BaseTableActions.svelte

@@ -5,6 +5,7 @@
   import DrawerContext from './DrawerContext.svelte'
   import { Options } from '@invopop/ui-icons'
   import clsx from 'clsx'
+  import BaseButton from './BaseButton.svelte'
 
   let { actions, onclick }: BaseTableActionsProps = $props()
 
@@ -23,8 +24,8 @@
 
   let overlayClasses = $derived(
     clsx({
-      'group-hover:bg-neutral-800/[.05]': !isOpen,
-      'bg-neutral-800/[.1]': isOpen
+      'group-hover:bg-foreground/[.05]': !isOpen,
+      'bg-foreground/[.1]': isOpen
     })
   )
 
@@ -34,10 +35,7 @@
 </script>
 
 {#snippet trigger()}
-  <div class="relative group flex justify-center items-center rounded p-1 cursor-pointer">
-    <span class="{overlayClasses} absolute inset-0 rounded"></span>
-    <Icon src={Options} class="w-4 text-neutral-500" />
-  </div>
+  <BaseButton variant="ghost" aria-label="Row actions" icon={Options} />
 {/snippet}
 
 <BaseDropdown bind:isOpen bind:this={actionDropdown} {trigger}>

package/dist/BaseTableCellContent.svelte

@@ -4,13 +4,12 @@
   import FeedIconStatus from './FeedIconStatus.svelte'
   import BaseFlag from './BaseFlag.svelte'
   import { getCountryName } from './helpers.js'
-  import UuidCopy from './UuidCopy.svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
+  import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 
   let {
     field,
     data = '',
-    isMobile = false,
     badge = null,
     status = null,
     icons = null,
@@ -19,34 +18,23 @@
 </script>
 
 <div class="flex flex-col">
-  <span class="md:hidden text-sm text-neutral-600 font-normal">
+  <span class="md:hidden text-sm font-normal">
     {field.headerLabel}
   </span>
-  <span class="flex items-center" class:justify-end={field.rightAlign}>
+  <span class="flex items-center gap-2" class:justify-end={field.rightAlign}>
     {#if field.isCountry && data}
       <span class="flex items-center space-x-1">
-        <BaseFlag country={String(data)} width={16} />
+        <BaseFlag country={String(data)} />
         <span>{getCountryName(String(data))}</span>
       </span>
     {:else if field.copy && data}
-      <UuidCopy
-        rightAlign={isMobile ? false : field.rightAlign}
-        uuid={String(data)}
-        prefixLength={4}
-        suffixLength={4}
-        full
-        compact
-        dark={isMobile}
-        {onCopied}
-      />
-    {:else}
+      <ButtonUuidCopy uuid={String(data)} full oncopied={onCopied} />
+    {:else if data}
       <span class="hidden md:inline">{data}</span>
       <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
     {/if}
     {#if badge}
-      <span class:ml-2={!!data}>
-        <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
-      </span>
+      <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
     {/if}
     {#if status}
       <span class:ml-2={!!data}>
@@ -54,9 +42,9 @@
       </span>
     {/if}
     {#if icons}
-      <span class:ml-2={!!data} class="flex items-center gap-1 flex-shrink-0">
+      <span class:ml-2={!!data} class="flex items-center gap-1 shrink-0">
         {#each icons as icon}
-          <div class="border border-neutral-200 rounded-md p-px">
+          <div class="border border-border rounded-md p-px">
             {#if typeof icon === 'string'}
               <img alt="icon" src={icon} class="h-4 w-4" />
             {:else}

package/dist/BaseTableCheckbox.svelte

@@ -5,7 +5,6 @@
   let {
     checkboxButton = $bindable(undefined),
     checked = false,
-    hidden = false,
     indeterminate = false,
     onChecked
   }: BaseTableCheckboxProps = $props()
@@ -20,16 +19,15 @@
   role="checkbox"
   aria-checked={checked}
   bind:this={checkboxButton}
-  class="absolute inset-0 h-full w-full flex items-center justify-center outline-none group cursor-default"
+  class="pl-3 h-full w-full flex items-center justify-center outline-none group cursor-default"
   onclick={handleClick}
 >
-  <div class:invisible={hidden} class="group-hover:visible">
-    <InputCheckbox
-      {checked}
-      {indeterminate}
-      onchange={(changed) => {
-        onChecked?.(changed)
-      }}
-    />
-  </div>
+  <InputCheckbox
+    {checked}
+    {indeterminate}
+    onclick={(e) => e.stopPropagation()}
+    onchange={(changed) => {
+      onChecked?.(changed)
+    }}
+  />
 </button>

package/dist/BaseTableHeaderContent.svelte

@@ -15,7 +15,7 @@
 
   let headerStyles = $derived(
     clsx({
-      'hover:bg-neutral-50 focus:bg-neutral-100': field.sortable
+      'hover:bg-background-default-secondary focus:bg-background-default-tertiary': field.sortable
     })
   )
 
@@ -29,7 +29,7 @@
   {#if field.sortable}
     {#snippet trigger()}
       <span
-        class="{headerStyles} w-full p-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+        class="{headerStyles} w-full px-3 py-2.5 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
       >
         <span class="w-full" class:text-right={field.rightAlign}>{field.headerLabel}</span>
         {#if sortBy === field.slug}
@@ -38,7 +38,7 @@
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             class:rotate-180={sortDirection === 'asc'}
-            class="mt-px text-neutral-400 h-3 w-3"
+            class="mt-px text-icon h-3 w-3"
           >
             <path
               fill-rule="evenodd"
@@ -59,7 +59,7 @@
     </BaseDropdown>
   {:else}
     <div
-      class="{headerStyles} p-3 text-left text-base font-normal tracking-normal whitespace-nowrap"
+      class="{headerStyles} px-3 py-2.5 text-left text-base font-normal tracking-normal whitespace-nowrap"
     >
       <div class="h-5">{field.headerLabel}</div>
     </div>