@invopop/popui 0.1.14 → 0.1.15

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/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 border rounded-md border-border overflow-auto">
   <Table class="hidden md:table" {...rest}>
     <colgroup>
       {#if selectable}
@@ -282,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-white sticky top-0 z-10 rounded-tr-md"> </th>
         {/if}
       </TableRow>
     </TableHeader>
@@ -295,17 +293,17 @@
             <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-sm font-medium 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="flex items-center space-x-1 box-border border-b border-border h-8"
               >
                 <span>{group.label}</span>
                 {#if !hideCounter}
-                  <BaseCounter content={group.rows.length} />
+                  <BaseCounter value={group.rows.length} />
                 {/if}
               </span>
             </th>
@@ -364,7 +362,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

@@ -23,8 +23,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
     })
   )
 

package/dist/BaseTableCellContent.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div class="flex flex-col">
-  <span class="md:hidden text-sm text-neutral-600 font-normal">
+  <span class="md:hidden text-sm text-neutral-60 font-normal">
     {field.headerLabel}
   </span>
   <span class="flex items-center" class:justify-end={field.rightAlign}>
@@ -46,7 +46,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/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
     })
   )
 
@@ -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"

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>

package/dist/ButtonFile.svelte

@@ -1,32 +1,29 @@
 <script lang="ts">
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { Invoice, Download } from '@invopop/ui-icons'
-  import BaseButton from './BaseButton.svelte'
+  import { Download } from '@invopop/ui-icons'
+  import Button from './button/button.svelte'
   import type { ButtonFileProps } from './types.js'
-  import clsx from 'clsx'
+  import { cn } from './utils.js'
 
   let {
-    icon = Invoice,
     name = '',
     disabled = false,
     date = '',
-    iconColor = 'grey',
+    fileType = 'pdf',
     onPreview,
     onDownload,
+    class: className,
     ...rest
   }: ButtonFileProps = $props()
 
-  let iconStyles = $derived(
-    clsx({
-      'border-positive-100 bg-positive-50 text-positive-500': iconColor === 'green',
-      'border-yellow-100 bg-yellow-50 text-yellow-500': iconColor === 'yellow',
-      'border-red-100 bg-red-50 text-red-500': iconColor === 'red',
-      'border-warning-100 bg-warning-50 text-warning-500': iconColor === 'orange',
-      'border-blue-100 bg-blue-50 text-blue-500': iconColor === 'blue',
-      'border-purple-100 bg-purple-50 text-purple-500': iconColor === 'purple',
-      'border-dashed border-neutral-100 text-neutral-400': iconColor === 'empty',
-      'border-neutral-100 bg-neutral-50 text-neutral-500': iconColor === 'grey'
-    })
+  let fileAvatarStyles = $derived(
+    cn(
+      'size-8 rounded-md border border-border flex items-center justify-center text-xs font-black font-mono leading-4 uppercase',
+      {
+        'text-foreground-document-pdf': fileType === 'pdf',
+        'text-foreground-document-xml': fileType === 'xml',
+        'text-foreground-document-png': fileType === 'png'
+      }
+    )
   )
 
   function handleClick(event: MouseEvent) {
@@ -36,27 +33,35 @@
 </script>
 
 <button
-  class:opacity-40={disabled}
-  class="border border-neutral-100 hover:bg-neutral-50 active:bg-neutral-100 hover:border-neutral-200 active:border-neutral-300 rounded-lg flex items-center space-x-3 py-1.5 pr-3 pl-2.5 w-full cursor-pointer"
+  class={cn(
+    'flex items-center gap-3 px-2 py-1.5 rounded-[10px] w-full hover:bg-background-default-secondary',
+    disabled && 'opacity-30 pointer-events-none',
+    className
+  )}
   {disabled}
   {...rest}
   onclick={handleClick}
 >
-  <span class="flex items-center justify-start space-x-2.5 flex-1">
-    <div class="{iconStyles} p-2 border rounded">
-      <Icon src={icon} class="w-4 h-4" />
+  <div class="flex items-center gap-[10px] flex-1 min-w-0">
+    <div class={fileAvatarStyles}>
+      {fileType}
     </div>
-    <div class="flex flex-col items-start space-y-0.5">
-      <span class="text-base font-medium text-neutral-800 tracking-tight max-w-[174px] truncate">
+    <div class="flex flex-col text-start min-w-0 flex-1">
+      <div class="text-sm font-medium text-foreground truncate w-full">
         {name}
-      </span>
-      <span class="text-sm text-neutral-500">{date}</span>
+      </div>
+      <div class="text-xs text-foreground-default-secondary truncate w-full">
+        {date}
+      </div>
     </div>
-  </span>
-  <BaseButton
-    {disabled}
+  </div>
+  <Button
+    variant="secondary"
+    size="md"
     icon={Download}
-    onclick={() => {
+    {disabled}
+    onclick={(e) => {
+      e.stopPropagation()
       onDownload?.()
     }}
   />

package/dist/ButtonUuidCopy.svelte

@@ -28,7 +28,7 @@
 
 <BaseButton
   {disabled}
-  big
+  size="lg"
   icon={Duplicate}
   iconPosition="right"
   onclick={async () => {
@@ -36,5 +36,5 @@
     oncopied?.(uuid)
   }}
 >
-  <span class="font-mono text-neutral-500">{formattedUuid}</span>
+  <span class="font-mono">{formattedUuid}</span>
 </BaseButton>

package/dist/CardCheckbox.svelte

@@ -11,47 +11,51 @@
     description = '',
     accentText = '',
     checked = false,
+    disabled = false,
     icon = undefined,
     hideRadio = false,
     footer,
     onchange
   }: CardCheckboxProps = $props()
 
-  let styles = $derived(
-    clsx(
-      { 'border-workspace-accent shadow-active': checked },
-      { 'border-neutral-200 hover:border-neutral-300': !checked }
-    )
+  let containerStyles = $derived(
+    clsx('border gap-3 py-2 pr-2 pl-3 flex items-start rounded-xl', {
+      'border-foreground-selected': checked,
+      'border-border': !checked,
+      'bg-background-default-secondary': disabled
+    })
   )
 </script>
 
-<label for={id} class="{styles} border rounded-lg w-full text-left cursor-pointer block">
-  <div class="py-2 pr-2 pl-3 flex items-start justify-between">
-    <div class="flex space-x-2">
+<label for={id} class="cursor-pointer">
+  <div class={containerStyles}>
+    <div class="flex grow items-start gap-1 min-w-0">
       {#if icon}
-        <Icon src={icon} class="h-5 w-5 text-neutral-500 flex-shrink-0" />
+        <Icon src={icon} class="size-5 text-icon shrink-0" />
       {/if}
-      <div class="flex flex-col space-y-0.5">
-        <span class="text-base text-neutral-800 font-medium">{title}</span>
+      <div class="flex flex-col gap-1 min-w-0">
+        <span class="text-base font-medium text-foreground">
+          {title}
+        </span>
         {#if description}
-          <span class="flex items-center space-x-1">
+          <span class="text-sm text-foreground-default-secondary">
             {#if accentText}
-              <p class="text-workspace-accent text-sm font-bold">{accentText}</p>
+              <span class="font-medium text-foreground-accent">{accentText}</span>
+              {' · '}
             {/if}
-            <p class="text-sm text-neutral-500" class:first-letter:uppercase={!accentText}>
-              {description}
-            </p>
+            {description}
           </span>
         {/if}
       </div>
     </div>
-
-    <div class:hidden={hideRadio}>
-      <InputRadio {id} {name} {checked} {onchange} />
-    </div>
+    {#if !hideRadio}
+      <div class="flex items-center p-px">
+        <InputRadio {id} {name} {checked} {disabled} {onchange} />
+      </div>
+    {/if}
   </div>
   {#if footer}
-    <div class="bg-neutral-50 rounded-b-lg px-3 py-2.5 border-t border-neutral-100">
+    <div class="border-t border-border bg-background-default-secondary rounded-b-xl px-3 pb-3 pt-2">
       {@render footer?.()}
     </div>
   {/if}