@invopop/popui 0.1.14 → 0.1.16

package/dist/BaseButton.svelte

@@ -1,8 +1,7 @@
 <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'
+  import type { ButtonSize } from './button/button.svelte'
 
   let {
     icon,
@@ -11,114 +10,37 @@
     type = 'button',
     variant = 'default',
     disabled = false,
-    small = false,
-    big = false,
+    size = 'md',
     dangerIcon = false,
     shortcut = false,
     fullwidth = false,
     notification = 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': !big && children && icon && iconPosition === 'left' },
-      { 'pl-2 pr-1.5': !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,
+    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="cursor-pointer 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 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 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">
+    <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-xs 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">
+      <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-xs 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

@@ -10,6 +10,7 @@
     fullWidth = false,
     placement = 'bottom-end',
     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="cursor-pointer text-left"
-    class:w-full={fullWidth}
+    class="cursor-pointer text-left w-full min-w-0"
     use:floatingRef
     {...rest}
     onclick={handleClick}

package/dist/BaseTable.svelte

@@ -241,7 +241,7 @@
   }}
 />
 
-<div class="h-full w-full font-sans border rounded-md border-neutral-100 overflow-auto">
+<div class="h-full w-full font-sans rounded-md overflow-auto">
   <Table class="hidden md:table" {...rest}>
     <colgroup>
       {#if selectable}
@@ -261,7 +261,6 @@
           <TableHead class="bg-white sticky top-0 z-10 p-0 h-9">
             {#if !hideSelectAll}
               <BaseTableCheckbox
-                hidden={!selectedRows.length}
                 {indeterminate}
                 checked={allChecked}
                 onChecked={() => {
@@ -282,9 +281,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-white sticky top-0 z-10 rounded-tr-md"> </th>
         {/if}
       </TableRow>
     </TableHeader>
@@ -295,17 +292,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-white 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-13={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>
@@ -364,7 +360,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-neutral-20 rounded"
           onclick={() => {
             if (disableRowClick) return
 

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

@@ -18,10 +18,10 @@
 </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} />
@@ -34,9 +34,7 @@
       <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}>
@@ -46,7 +44,7 @@
     {#if icons}
       <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-neutral-20 rounded-md p-px">
             {#if typeof icon === 'string'}
               <img alt="icon" src={icon} class="h-4 w-4" />
             {:else}

package/dist/BaseTableCheckbox.svelte

@@ -20,16 +20,14 @@
   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="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}
+    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-neutral-5 focus:bg-neutral-10': 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-neutral-40 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>

package/dist/BaseTableRow.svelte

@@ -87,19 +87,21 @@
 >
   {#if selectable}
     <TableCell>
-      <BaseTableCheckbox
-        bind:checkboxButton
-        {checked}
-        hidden={selectedRows.length === 0}
-        {onChecked}
-      />
+      <BaseTableCheckbox bind:checkboxButton {checked} {onChecked} />
     </TableCell>
   {/if}
   {#each fields as field, i (i)}
+    {@const extraPaddingLeft = i === 0 && !selectable}
+    {@const extraPaddingRight = i === fields.length - 1 && !actions.length}
     <TableCell
-      class="{i === 0 && !selectable ? 'pl-6' : 'pl-3'}  {i === fields.length - 1 && !actions.length
-        ? 'pr-6'
-        : 'pr-3'}"
+      class={clsx({
+        'font-medium': i === 0,
+        'pl-6': extraPaddingLeft,
+        'pl-3': !extraPaddingLeft,
+        'pr-6': extraPaddingRight,
+        'pr-3': !extraPaddingRight,
+        'py-2': field.copy
+      })}
     >
       <BaseTableCellContent
         {field}
@@ -112,7 +114,7 @@
     </TableCell>
   {/each}
   {#if actions.length}
-    <TableCell>
+    <TableCell class="py-2">
       <BaseTableActions
         bind:this={actionsDropdown}
         {actions}

package/dist/Breadcrumb.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { BreadcrumbProps } from './types.js'
+  import BaseFlag from './BaseFlag.svelte'
+  import clsx from 'clsx'
+
+  let { breadcrumb, isLast, oncopied }: BreadcrumbProps = $props()
+
+  let textStyles = $derived(
+    clsx('font-sans text-base leading-6 tracking-[-0.16px] whitespace-nowrap', {
+      'text-foreground-default-secondary font-normal': !isLast,
+      'text-foreground font-medium': isLast,
+      'cursor-pointer': breadcrumb.copiable
+    })
+  )
+
+  async function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    await navigator.clipboard.writeText(breadcrumb.label)
+    oncopied?.(breadcrumb.label)
+  }
+</script>
+
+<li class="flex items-center gap-1">
+  {#if breadcrumb.url}
+    <a href={breadcrumb.url} class={textStyles}>
+      {breadcrumb.label}
+    </a>
+  {:else if breadcrumb.copiable}
+    <button class={textStyles} onclick={handleClick}>
+      {breadcrumb.label}
+    </button>
+  {:else}
+    <span class={textStyles}>
+      {breadcrumb.label}
+    </span>
+  {/if}
+  {#if breadcrumb.country}
+    <BaseFlag country={breadcrumb.country} width={14} />
+  {/if}
+</li>

package/dist/Breadcrumb.svelte.d.ts

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

package/dist/Breadcrumbs.svelte

@@ -1,43 +1,18 @@
 <script lang="ts">
   import type { BreadcrumbsProps } from './types.js'
   import { Slash } from '@invopop/ui-icons'
-  import BaseFlag from './BaseFlag.svelte'
+  import Breadcrumb from './Breadcrumb.svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
 
   let { breadcrumbs = [], oncopied }: BreadcrumbsProps = $props()
-
-  async function handleClick(event: MouseEvent, label: string) {
-    event.stopPropagation()
-    await navigator.clipboard.writeText(label)
-    oncopied?.(label)
-  }
 </script>
 
-<ul class="flex items-center justify-start text-neutral-800">
+<ul class="flex items-center gap-1">
   {#each breadcrumbs as breadcrumb, i}
-    <li class="pr-1 text-lg flex items-center space-x-1.5 text-neutral-800">
-      {#if breadcrumb.url}
-        <a href={breadcrumb.url}>
-          <span class:text-neutral-400={i < breadcrumbs.length - 1}>{breadcrumb.label}</span>
-        </a>
-      {:else if breadcrumb.copiable}
-        <button
-          class="cursor-pointer {i < breadcrumbs.length - 1 ? 'text-neutral-400' : 'font-medium'}"
-          onclick={(e) => handleClick(e, breadcrumb.label)}
-        >
-          {breadcrumb.label}
-        </button>
-      {:else}
-        <span class={i < breadcrumbs.length - 1 ? 'text-neutral-400' : 'font-medium'}>
-          {breadcrumb.label}
-        </span>
-      {/if}
-      {#if breadcrumb.country}
-        <BaseFlag country={breadcrumb.country} width={14} />
-      {/if}
-    </li>
+    <Breadcrumb {breadcrumb} isLast={i === breadcrumbs.length - 1} {oncopied} />
+
     {#if i < breadcrumbs.length - 1}
-      <Icon src={Slash} class="w-3 h-3 text-neutral-300 pr-1" />
+      <Icon src={Slash} class="size-4 text-icon-default-secondary" />
     {/if}
   {/each}
 </ul>