@invopop/popui 0.1.3 → 0.1.4-beta.2

package/dist/BaseTableHeaderOrderBy.svelte

@@ -1,24 +1,35 @@
 <script lang="ts">
-  import { SortAscending, SortDescending } from '@invopop/ui-icons'
+  import { SortAscending, SortDescending, Preview } from '@invopop/ui-icons'
   import type { TableSortBy, DrawerOption, BaseTableHeaderOrderByProps } from './types.js'
   import DrawerContext from './DrawerContext.svelte'
 
-  let { isActive = false, sortDirection, onOrderBy }: BaseTableHeaderOrderByProps = $props()
+  let { isActive = false, sortDirection, onOrderBy, onHide }: BaseTableHeaderOrderByProps = $props()
 
-  let items = $derived(
-    [
-      { icon: SortAscending, label: 'Sort Ascending', value: 'asc' },
-      { icon: SortDescending, label: 'Sort Descending', value: 'desc' }
-    ].map((o) => ({
-      ...o,
-      selected: isActive && sortDirection === o.value
-    })) as DrawerOption[]
-  )
+  let items = $derived([
+    {
+      icon: SortAscending,
+      label: 'Sort Ascending',
+      value: 'asc',
+      selected: isActive && sortDirection === 'asc'
+    },
+    {
+      icon: SortDescending,
+      label: 'Sort Descending',
+      value: 'desc',
+      selected: isActive && sortDirection === 'desc'
+    },
+    { label: '', value: '', separator: true },
+    { icon: Preview, label: 'Hide', value: 'hide' }
+  ] as DrawerOption[])
 </script>
 
 <DrawerContext
   {items}
   onclick={(e) => {
-    onOrderBy?.(e as TableSortBy)
+    if (e === 'hide') {
+      onHide?.()
+    } else {
+      onOrderBy?.(e as TableSortBy)
+    }
   }}
 />

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-lg 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} />
+  {/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={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,30 @@
 <script lang="ts">
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { Invoice, Download } from '@invopop/ui-icons'
-  import BaseButton from './BaseButton.svelte'
+  import { Download, Invoice } 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'
+  import { Icon } from '@steeze-ui/svelte-icon'
 
   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-sm 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 +34,39 @@
 </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 p-2 rounded-[10px] w-full hover:bg-background-default-secondary cursor-pointer',
+    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}>
+      {#if fileType === 'generic'}
+        <Icon src={Invoice} class="size-4 text-icon" />
+      {:else}
+        {fileType}
+      {/if}
     </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-sm 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,13 +28,16 @@
 
 <BaseButton
   {disabled}
-  big
+  size="sm"
   icon={Duplicate}
   iconPosition="right"
-  onclick={async () => {
+  variant="ghost"
+  data-uuid-copy
+  onclick={async (e) => {
+    e.stopPropagation()
     await navigator.clipboard.writeText(uuid)
     oncopied?.(uuid)
   }}
 >
-  <span class="font-mono text-neutral-500">{formattedUuid}</span>
+  <span class="font-mono">{formattedUuid}</span>
 </BaseButton>

package/dist/CardCheckbox.svelte

@@ -10,49 +10,62 @@
     title = '',
     description = '',
     accentText = '',
-    checked = false,
+    checked = $bindable(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', {
+      'border-foreground-selected': checked,
+      'border-border': !checked,
+      'bg-background-default-secondary': disabled,
+      'rounded-lg': hideRadio,
+      'rounded-xl': !hideRadio
+    })
+  )
+
+  let headerStyles = $derived(
+    clsx('flex items-start', {
+      'px-2 py-1.5': hideRadio,
+      'py-2 pr-2 pl-3': !hideRadio
+    })
   )
 </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">
-      {#if icon}
-        <Icon src={icon} class="h-5 w-5 text-neutral-500 flex-shrink-0" />
-      {/if}
-      <div class="flex flex-col space-y-0.5">
-        <span class="text-base text-neutral-800 font-medium">{title}</span>
-        {#if description}
-          <span class="flex items-center space-x-1">
-            {#if accentText}
-              <p class="text-workspace-accent text-sm font-bold">{accentText}</p>
-            {/if}
-            <p class="text-sm text-neutral-500" class:first-letter:uppercase={!accentText}>
-              {description}
-            </p>
-          </span>
+<label for={id} class="cursor-pointer">
+  <div class={containerStyles}>
+    <div class={headerStyles}>
+      <div class="flex grow items-start gap-1 min-w-0">
+        {#if icon}
+          <Icon src={icon} class="size-4 text-icon shrink-0 mt-0.5" />
         {/if}
+        <div class="flex flex-col gap-1 min-w-0">
+          <span class="text-base font-medium text-foreground">
+            {title}
+          </span>
+          {#if description}
+            <span class="text-sm text-foreground-default-secondary">
+              {#if accentText}
+                <span class="font-medium text-foreground-accent">{accentText}</span>
+                {' · '}
+              {/if}
+              {description}
+            </span>
+          {/if}
+        </div>
+      </div>
+      <div class={clsx('flex items-center p-px', { 'sr-only': hideRadio })}>
+        <InputRadio {id} {name} bind:checked {disabled} {onchange} />
       </div>
     </div>
-
-    <div class:hidden={hideRadio}>
-      <InputRadio {id} {name} {checked} {onchange} />
-    </div>
+    {#if footer}
+      <div class="pl-3 pr-2 pb-3 pt-2">
+        {@render footer?.()}
+      </div>
+    {/if}
   </div>
-  {#if footer}
-    <div class="bg-neutral-50 rounded-b-lg px-3 py-2.5 border-t border-neutral-100">
-      {@render footer?.()}
-    </div>
-  {/if}
 </label>

package/dist/CardCheckbox.svelte.d.ts

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

package/dist/CardRelation.svelte

@@ -2,28 +2,27 @@
   import { Icon } from '@steeze-ui/svelte-icon'
   import type { CardRelationProps } from './types.js'
   import { ChevronRight } from '@invopop/ui-icons'
-  import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 
   let { title = '', icon = undefined, items = [], onclick }: CardRelationProps = $props()
 </script>
 
-<div class="border border-neutral-100 rounded-lg">
-  <button class="pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full" {onclick}>
-    <div class="flex items-center space-x-1.5">
+<div class="border border-border-default-secondary rounded-2xl overflow-hidden">
+  <button class="flex items-center gap-3 px-3 py-2 w-full cursor-pointer" {onclick}>
+    <div class="flex grow items-center gap-1.5 min-w-0">
       {#if icon}
-        <Icon src={icon} class="h-4 w-4 text-neutral-500" />
+        <Icon src={icon} class="size-4 text-icon shrink-0" />
       {/if}
-      <span class="text-base font-medium text-neutral-800">{title}</span>
+      <span class="text-base font-medium text-foreground whitespace-nowrap">
+        {title}
+      </span>
     </div>
-
-    <Icon src={ChevronRight} class="h-4 w-4 text-neutral-500" />
+    <Icon src={ChevronRight} class="size-3 text-icon shrink-0" />
   </button>
-  <SeparatorHorizontal />
-  <div class="py-1.5 text-sm">
+  <div class="flex flex-col gap-2 px-3 pb-3 pt-2">
     {#each items as item}
-      <div class="px-3 py-1 flex items-center space-x-3">
-        <div class="min-w-[88px] text-neutral-500">{item.label}</div>
-        <div class="text-neutral-800">{item.value}</div>
+      <div class="flex items-center gap-3 text-sm">
+        <div class="min-w-[88px] text-foreground-default-secondary shrink-0">{item.label}</div>
+        <div class="grow text-foreground min-w-0">{item.value}</div>
       </div>
     {/each}
   </div>

package/dist/CompanySelector.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import ProfileAvatar from './ProfileAvatar.svelte'
-  import type { AnyProp, CompanySelectorProps, DrawerOption } from './types.js'
+  import type { AnyProp, CompanySelectorProps, DrawerOption, DrawerGroup } from './types.js'
   import BaseDropdown from './BaseDropdown.svelte'
-  import DrawerContextWorkspace from './DrawerContextWorkspace.svelte'
-  import { DoubleArrow } from '@invopop/ui-icons'
+  import DrawerContext from './DrawerContext.svelte'
+  import { DoubleArrow, Workspace, AddCircle, ExternalLink } from '@invopop/ui-icons'
   import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 
   let companyDropdown: BaseDropdown | undefined = $state()
@@ -21,6 +21,24 @@
   let country = $derived(selectedCompany?.country || '')
   let picture = $derived(selectedCompany?.logo_url || '')
   let isSandbox = $derived(selectedCompany?.sandbox)
+
+  let groups: DrawerGroup[] = [
+    {
+      label: 'Live',
+      slug: 'live',
+      emptyIcon: Workspace,
+      emptyTitle: 'No workspaces here',
+      emptyDescription: 'Create a workspace to start'
+    },
+    {
+      label: 'Sandbox',
+      slug: 'sandbox',
+      emptyIcon: Workspace,
+      emptyTitle: 'No workspaces here',
+      emptyDescription: 'Create a workspace to start'
+    }
+  ]
+
   let items = $derived([
     ...companies.map((c) => ({
       value: c.id,
@@ -28,8 +46,18 @@
       selected: c.slug === selectedCompany?.slug && !!c.sandbox === !!selectedCompany?.sandbox,
       country: c.country,
       picture: c.logo_url,
-      sandbox: c.sandbox
-    }))
+      sandbox: c.sandbox,
+      groupBy: c.sandbox ? 'sandbox' : 'live'
+    })),
+    {
+      separator: true
+    },
+    {
+      value: 'add',
+      label: 'Create workspace',
+      icon: AddCircle,
+      rightIcon: ExternalLink
+    }
   ] as DrawerOption[])
 
   function selectCompany(value: AnyProp) {
@@ -60,8 +88,8 @@
       active={isOpen}
       bold
     >
-      <ProfileAvatar {name} {picture} {country} dark large />
+      <ProfileAvatar {name} {picture} {country} dark variant="lg" />
     </MenuItemCollapsible>
   {/snippet}
-  <DrawerContextWorkspace {items} onclick={selectCompany} />
+  <DrawerContext {items} {groups} onclick={selectCompany} widthClass="w-[300px]" />
 </BaseDropdown>

package/dist/CounterWidget.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { CounterWidgetProps } from './types'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Warning, Failure } from '@invopop/ui-icons'
+  import ProgressBar from './ProgressBar.svelte'
+
+  let {
+    label,
+    current,
+    total,
+    resetDate = '',
+    icon,
+    allowOverage = true
+  }: CounterWidgetProps = $props()
+
+  let percentage = $derived(total > 0 ? (current / total) * 100 : 0)
+  let isOverage = $derived(current > total && allowOverage)
+  let isCritical = $derived(percentage >= 100 || (current > total && !allowOverage))
+  let isWarning = $derived(percentage >= 80 && percentage < 100)
+</script>
+
+<div class="border border-border-inverse rounded-xl w-full py-[5px] pl-2 pr-1.5 flex flex-col">
+  <div class="flex items-center justify-between text-base font-medium">
+    <div class="flex items-center gap-1.5">
+      {#if icon}
+        <Icon src={icon} class="size-3 text-icon-inverse rounded-xs" />
+      {/if}
+      <span class="font-medium text-foreground-inverse">
+        {label}
+      </span>
+    </div>
+    <div class="flex items-center gap-1.5">
+      {#if isCritical && !isOverage}
+        <Icon src={Failure} class="size-4 text-icon-critical-inverse" />
+      {:else if isWarning && !isOverage}
+        <Icon src={Warning} class="size-4 text-icon-warning-inverse" />
+      {/if}
+      <span class="font-mono text-foreground-inverse">
+        {current}<span class="text-white/70">/{total}</span>
+      </span>
+    </div>
+  </div>
+  <div class="py-2">
+    <ProgressBar {percentage} {current} {total} {allowOverage} />
+  </div>
+
+  {#if resetDate}
+    <span class="text-sm font-normal text-foreground-inverse-secondary">
+      {label} reset {resetDate}
+    </span>
+  {/if}
+</div>

package/dist/CounterWidget.svelte.d.ts

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

package/dist/DataListItem.svelte

@@ -11,8 +11,8 @@
     children
   }: DataListItemProps = $props()
 
-  let styles = $derived(
-    clsx({
+  let valueStyles = $derived(
+    clsx('text-foreground font-medium text-base', {
       'font-mono': monospaced,
       'slashed-zero tabular-nums lining-nums': monospacedNums,
       'w-full': fullWidth
@@ -20,13 +20,17 @@
   )
 </script>
 
-<div class="flex space-x-4 text-base items-center">
-  <div class="text-neutral-500 min-w-[125px]">{label}</div>
-  <div class="{styles} text-neutral-800 font-medium">
-    {#if children}
-      {@render children()}
-    {:else}
-      {value}
-    {/if}
+<div class="flex gap-6 items-center px-3 py-1 rounded-lg hover:bg-background-default-secondary">
+  <div class="text-foreground-default-secondary text-base min-w-[125px]">
+    {label}
+  </div>
+  <div class="flex gap-1 items-center">
+    <div class={valueStyles}>
+      {#if children}
+        {@render children()}
+      {:else}
+        {value}
+      {/if}
+    </div>
   </div>
 </div>