@invopop/popui 0.1.3 → 0.1.4-beta.2

package/dist/TagProgress.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import clsx from 'clsx'
+  import ProgressBarCircle from './ProgressBarCircle.svelte'
+  import type { TagProgressProps } from './types'
+
+  let { progress, variant = 'default' }: TagProgressProps = $props()
+
+  let percentage = $derived(Math.round(progress * 100))
+
+  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-secondary': variant === 'default'
+    })
+  )
+
+  let textStyles = $derived(
+    clsx('text-sm font-medium leading-4 whitespace-nowrap', {
+      'text-foreground-inverse-default': variant === 'dark',
+      'text-foreground-default-default': variant === 'default'
+    })
+  )
+</script>
+
+<div class={containerStyles}>
+  <ProgressBarCircle {progress} size={16} {variant} />
+  <span class={textStyles}>{percentage}%</span>
+</div>

package/dist/TagProgress.svelte.d.ts

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

package/dist/TagSearch.svelte

@@ -20,15 +20,15 @@
 <span
   class:pl-2={icon}
   class:pl-3={!icon}
-  class="border rounded pr-1.5 text-sm inline-flex items-center border-workspace-accent-100 bg-workspace-accent-50"
+  class="border rounded pr-1.5 text-sm inline-flex items-center border-border-selected bg-background-selected"
 >
   {#if resolvedIcon}
-    <Icon src={resolvedIcon} theme={iconTheme} class="h-4 w-4 mr-1 text-workspace-accent" />
+    <Icon src={resolvedIcon} theme={iconTheme} class="h-4 w-4 mr-1 text-foreground-selected" />
   {/if}
-  <span class="py-1 pr-2 text-workspace-accent tracking-normal">{label}</span>
+  <span class="py-1 pr-2 text-foreground-selected tracking-normal">{label}</span>
   <button
     aria-label="Clear"
-    class="py-1 border-l border-workspace-accent-100 pl-1 text-neutral-500"
+    class="cursor-pointer py-1 border-l border-border-selected pl-1 text-foreground-default-secondary"
     onclick={handleClear}
   >
     <svg

package/dist/TagStatus.svelte

@@ -5,50 +5,48 @@
   let { label = '', status = 'grey', dot = false }: TagStatusProps = $props()
 
   let tagStyles = $derived(
-    clsx({
-      'bg-positive-100 text-positive-500': status === 'green',
-      'border border-positive-200': status === 'green' && dot,
-      'bg-yellow-100 text-yellow-500': status === 'yellow',
-      'border border-yellow-200': status === 'yellow' && dot,
-      'bg-danger-100 text-danger-500': status === 'red',
-      'border border-danger-200': status === 'red' && dot,
-      'bg-warning-100 text-warning-500': status === 'orange',
-      'border border-warning-200': status === 'orange' && dot,
-      'bg-blue-100 text-blue-500': status === 'blue',
-      'border border-blue-200': status === 'blue' && dot,
-      'bg-purple-100 text-purple-500': status === 'purple',
-      'border border-purple-200': status === 'purple' && dot,
-      'border border-dashed border-neutral-200 text-neutral-400': status === 'empty',
-      'bg-neutral-100 text-neutral-500': status === 'grey',
-      'border border-neutral-200': status === 'grey' && dot,
-      'pl-1.5 pr-[5px] py-0.5': dot && label,
-      'p-0.5': dot && !label,
-      'px-1 py-0.5': !dot
+    clsx('rounded inline-flex items-center text-sm font-medium gap-1 box-border leading-4 py-0.5', {
+      'bg-background-status-paid text-foreground-status-paid': status === 'green',
+      'bg-background-status-processing text-foreground-status-processing': status === 'yellow',
+      'bg-background-status-error text-foreground-status-error': status === 'red',
+      'bg-background-status-draft text-foreground-status-draft': status === 'orange',
+      'bg-background-status-sent text-foreground-status-sent': status === 'blue',
+      'bg-background-status-registered text-foreground-status-registered': status === 'purple',
+      'bg-background-status-completed text-foreground-status-completed': status === 'teal',
+      'bg-background-status-received text-foreground-status-received': status === 'steelBlue',
+      'bg-background-status-rejected text-foreground-status-rejected': status === 'crimson',
+      'bg-sherwood-alpha-10 text-sherwood-60': status === 'olive',
+      'bg-background-status-void text-foreground-default-secondary': status === 'grey',
+      'shadow-avatar text-foreground-default-secondary': status === 'empty',
+      'px-1.5': dot,
+      'p-0!': dot && !label,
+      'px-1': !dot
     })
   )
 
   let dotStyles = $derived(
-    clsx({
-      'bg-positive-500': status === 'green',
-      'bg-yellow-500': status === 'yellow',
-      'bg-danger-500': status === 'red',
-      'bg-warning-500': status === 'orange',
-      'bg-blue-500': status === 'blue',
-      'bg-purple-500': status === 'purple',
-      'bg-neutral-300': status === 'empty',
-      'bg-neutral-500': status === 'grey'
+    clsx('rounded-[2px] shrink-0', {
+      'bg-icon-status-paid': status === 'green',
+      'bg-icon-status-processing': status === 'yellow',
+      'bg-icon-status-error': status === 'red',
+      'bg-icon-status-draft': status === 'orange',
+      'bg-icon-status-sent': status === 'blue',
+      'bg-icon-status-registered': status === 'purple',
+      'bg-icon-status-completed': status === 'teal',
+      'bg-icon-status-received': status === 'steelBlue',
+      'bg-icon-status-rejected': status === 'crimson',
+      'bg-sherwood-50': status === 'olive',
+      'bg-icon-status-void': status === 'grey',
+      'bg-icon-default-secondary': status === 'empty'
     })
   )
 </script>
 
-<span
-  class:h-5={Boolean(label)}
-  class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1 box-border"
->
+<span class={tagStyles}>
   {#if dot}
-    <span class="{dotStyles} w-2 h-2 rounded-sm"></span>
+    <span class="{dotStyles} size-2"></span>
   {/if}
   {#if label}
-    <span>{label}</span>
+    <span class="whitespace-nowrap">{label}</span>
   {/if}
 </span>

package/dist/TitleMain.svelte

@@ -4,7 +4,7 @@
   let { title = '', children }: TitleMainProps = $props()
 </script>
 
-<h1 class="text-neutral-800 font-medium text-lg font-sans tracking-tightest">
+<h1 class="text-foreground font-medium text-lg">
   {#if children}
     {@render children()}
   {:else}

package/dist/TitleSection.svelte

@@ -4,7 +4,7 @@
   let { title = '', children }: TitleSectionProps = $props()
 </script>
 
-<h1 class="text-neutral-800 font-medium text-lg font-sans tracking-tighter">
+<h1 class="text-foreground font-medium text-lg">
   {#if children}
     {@render children()}
   {:else}

package/dist/UuidCopy.svelte

@@ -35,11 +35,11 @@
       'justify-end': rightAlign,
       'text-sm': small,
       'text-base': !small,
-      'text-neutral-800': dark,
-      'text-neutral-500': !dark,
+      'text-foreground': dark,
+      'text-foreground-default-secondary': !dark,
       'justify-between': !compact,
       'w-full': full,
-      'border border-neutral-800/10 rounded-md pl-2.5 pr-2 py-[5px]': !full
+      'border border-border rounded-md pl-2.5 pr-2 py-[5px]': !full
     })
   )
 
@@ -65,6 +65,6 @@
     {formattedUuid}
   </button>
   <button class="p-1 cursor-pointer" onclick={handleIconClick}>
-    <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-neutral-500" />
+    <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-foreground-default-secondary" />
   </button>
 </div>

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -6,16 +6,20 @@
     ref = $bindable(null),
     class: className,
     destructive = false,
-    children
+    children,
+    ...restProps
   }: AlertDialogPrimitive.ActionProps & { destructive: boolean } = $props()
 
-  let variant = $derived((destructive ? 'destructive' : 'primary') as ButtonVariant)
+  let variant = $derived((destructive ? 'danger' : 'primary') as ButtonVariant)
 </script>
 
 <AlertDialogPrimitive.Action
   bind:ref
   data-slot="alert-dialog-action"
-  class={cn(buttonVariants({ variant }), className)}
+  class={cn(buttonVariants({ variant }), 'group', className)}
+  {...restProps}
 >
-  {@render children?.()}
+  <div class="inline-flex items-center transition-transform group-active:translate-y-px">
+    {@render children?.()}
+  </div>
 </AlertDialogPrimitive.Action>

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -5,15 +5,19 @@
   let {
     ref = $bindable(null),
     class: className,
-    children
+    children,
+    ...restProps
   }: AlertDialogPrimitive.CancelProps = $props()
 </script>
 
 <AlertDialogPrimitive.Cancel
   bind:ref
   data-slot="alert-dialog-cancel"
-  class={cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', className)}
+  class={cn(buttonVariants({ variant: 'secondary' }), 'group mt-2 sm:mt-0', className)}
   {onkeydown}
+  {...restProps}
 >
-  {@render children?.()}
+  <div class="inline-flex items-center transition-transform group-active:translate-y-px">
+    {@render children?.()}
+  </div>
 </AlertDialogPrimitive.Cancel>

package/dist/alert-dialog/alert-dialog-content.svelte

@@ -18,7 +18,7 @@
     bind:ref
     data-slot="alert-dialog-content"
     class={cn(
-      'bg-white fixed left-[50%] top-[50%] z-[1002] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-5 pt-3 px-4 pb-4 sm:rounded-lg md:w-full',
+      'bg-background fixed left-1/2 top-1/2 z-[1002] flex flex-col w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl overflow-clip',
       className
     )}
   >

package/dist/alert-dialog/alert-dialog-description.svelte

@@ -12,7 +12,7 @@
   bind:ref
   data-slot="alert-dialog-description"
   class={cn(
-    'text-neutral-500 text-base flex flex-col space-y-2 justify-start items-start !mt-2',
+    'text-base font-normal leading-5 tracking-tight text-foreground-default-secondary',
     className
   )}
 >

package/dist/alert-dialog/alert-dialog-footer.svelte

@@ -11,7 +11,7 @@
 <div
   bind:this={ref}
   data-slot="alert-dialog-footer"
-  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3', className)}
+  class={cn('flex gap-3 justify-end px-3 pb-3', className)}
 >
   {@render children?.()}
 </div>

package/dist/alert-dialog/alert-dialog-header.svelte

@@ -11,7 +11,7 @@
 <div
   bind:this={ref}
   data-slot="alert-dialog-header"
-  class={cn('flex flex-col space-y-1 text-center sm:text-left', className)}
+  class={cn('flex flex-col gap-1 px-4 py-3', className)}
 >
   {@render children?.()}
 </div>

package/dist/alert-dialog/alert-dialog-overlay.svelte

@@ -8,7 +8,7 @@
   bind:ref
   data-slot="alert-dialog-overlay"
   class={cn(
-    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-neutral-800/30 fixed inset-0 z-[1001]',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-neutral-80/30 fixed inset-0 z-[1001]',
     className
   )}
 />

package/dist/alert-dialog/alert-dialog-title.svelte

@@ -11,7 +11,7 @@
 <AlertDialogPrimitive.Title
   bind:ref
   data-slot="alert-dialog-title"
-  class={cn('text-lg font-semibold text-neutral-800', className)}
+  class={cn('text-lg font-semibold leading-6 tracking-tight text-foreground', className)}
 >
   {@render children?.()}
 </AlertDialogPrimitive.Title>

package/dist/alert-dialog/alert-dialog-trigger.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
-  let { ref = $bindable(null) }: AlertDialogPrimitive.TriggerProps = $props()
+  let { ref = $bindable(null), children }: AlertDialogPrimitive.TriggerProps = $props()
 </script>
 
-<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" />
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger">
+  {@render children?.()}
+</AlertDialogPrimitive.Trigger>

package/dist/button/button.svelte

@@ -2,77 +2,277 @@
   import { cn, type WithElementRef } from '../utils.js'
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
   import { type VariantProps, tv } from 'tailwind-variants'
+  import type { IconSource } from '@steeze-ui/svelte-icon'
+
   export const buttonVariants = tv({
-    base: 'ring-workspace-accent-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center font-medium font-sans relative group tracking-tight rounded-md text-base text-neutral-800 box-border',
+    base: 'inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer',
     variants: {
       variant: {
-        default: 'bg-white text-neutral-800 hover:bg-primary/90',
-        destructive:
-          'ring-danger-200 bg-danger-500 border border-danger-500 hover:bg-danger-600 hover:border-danger-600 active:bg-danger-700 active:border-danger-700 text-white',
-        outline:
-          'border-neutral-200 bg-white hover:border-neutral-300 border shadow-button active:shadow-button-active',
         primary:
-          'bg-workspace-accent-500 hover:bg-workspace-accent-600 active:bg-workspace-accent-700 text-white',
+          'bg-background-accent text-foreground-inverse border border-border shadow-button-primary hover:bg-background-accent-hover active:bg-background-accent-hover active:shadow-button-pressed [&_svg]:text-icon-inverse',
+        warning:
+          'bg-background-warning-inverse text-foreground-inverse border border-border shadow-button-primary hover:bg-background-warning-bold active:bg-background-warning-bold active:shadow-button-pressed [&_svg]:text-icon-inverse',
+        danger:
+          'bg-background-default-tertiary text-foreground-critical border border-border shadow-button-default hover:bg-background-critical-bold hover:text-foreground-inverse hover:border-background-critical-bold active:bg-background-critical-bold active:text-foreground-inverse active:border-background-critical-bold active:shadow-[0px_4px_4px_-1px_inset_rgba(11,11,16,0.16)] [&_svg]:text-icon-critical hover:[&_svg]:text-icon-inverse active:[&_svg]:text-icon-inverse',
+        outline:
+          'bg-background text-foreground border border-border-default-secondary shadow-button-default hover:border-border-default-secondary-hover active:shadow-button-pressed [&_svg]:text-icon',
+        ghost:
+          'bg-transparent text-foreground hover:shadow-button-default active:shadow-button-pressed hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-hover [&_svg]:text-icon',
         secondary:
-          'bg-neutral-100 border border-neutral-100 hover:bg-neutral-200 hover:border-neutral-200 active:bg-neutral-300 active:border-neutral-300',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+          'bg-background-default-tertiary text-foreground shadow-button-default hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-hover active:shadow-button-pressed [&_svg]:text-icon',
+        dark: 'bg-transparent text-foreground-inverse border border-border-inverse-secondary hover:bg-background-selected-inverse active:bg-background-inverse-tertiary active:shadow-button-dark-pressed [&_svg]:text-icon-inverse',
+        'dark-ghost':
+          'bg-transparent text-foreground-inverse hover:bg-background-selected-inverse active:bg-background-inverse-tertiary active:shadow-button-dark-pressed [&_svg]:text-icon-inverse'
       },
       size: {
-        default: 'h-7 px-2 py-1',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-7 p-1.5',
-        'icon-sm': 'size-6 p-1 active:pt-[5px] active:pb-[3px]'
+        sm: 'h-6 rounded-sm',
+        md: 'h-7 rounded-md',
+        lg: 'h-8 rounded-lg'
+      },
+      iconOnly: {
+        true: '',
+        false: ''
+      },
+      hasIcon: {
+        true: '',
+        false: ''
+      },
+      stackedLeft: {
+        true: '',
+        false: ''
+      },
+      stackedRight: {
+        true: '',
+        false: ''
       }
     },
+    compoundVariants: [
+      // Icon-only padding (varies by size) - must come first to avoid conflicts
+      {
+        size: 'sm',
+        iconOnly: true,
+        class: '!p-1'
+      },
+      {
+        size: 'md',
+        iconOnly: true,
+        class: '!p-1.5'
+      },
+      {
+        size: 'lg',
+        iconOnly: true,
+        class: '!p-2'
+      },
+      // Vertical padding for buttons with text
+      {
+        size: ['sm', 'md'],
+        iconOnly: false,
+        class: 'py-1'
+      },
+      {
+        size: 'lg',
+        iconOnly: false,
+        class: 'py-1.5'
+      },
+      // No icon - symmetric padding
+      {
+        size: ['sm', 'md'],
+        iconOnly: false,
+        hasIcon: false,
+        class: 'px-2'
+      },
+      {
+        size: 'lg',
+        iconOnly: false,
+        hasIcon: false,
+        class: 'px-3'
+      },
+      // Icon-left - asymmetric padding (less on icon side)
+      {
+        size: ['sm', 'md'],
+        iconOnly: false,
+        hasIcon: true,
+        class: 'pl-1.5 pr-2'
+      },
+      {
+        size: 'lg',
+        iconOnly: false,
+        hasIcon: true,
+        class: 'pl-2 pr-3'
+      },
+      // Icon-only uses bold icon variants
+      {
+        variant: ['secondary', 'outline', 'ghost'],
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-default-bold'
+      },
+      {
+        variant: ['primary', 'warning', 'dark-ghost'],
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-inverse-bold'
+      },
+      {
+        variant: 'dark',
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-inverse-bold'
+      },
+      {
+        size: 'sm',
+        iconOnly: true,
+        class: 'w-6'
+      },
+      {
+        size: 'md',
+        iconOnly: true,
+        class: 'w-7'
+      },
+      {
+        size: 'lg',
+        iconOnly: true,
+        class: 'w-8'
+      },
+      {
+        stackedLeft: true,
+        class:
+          '!rounded-l-none hover:!bg-background-default-secondary active:!bg-background-default-secondary'
+      },
+      {
+        stackedRight: true,
+        class:
+          '!rounded-r-none hover:!bg-background-default-secondary active:!bg-background-default-secondary'
+      }
+    ],
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: 'primary',
+      size: 'md',
+      iconOnly: false,
+      hasIcon: false,
+      stackedLeft: false,
+      stackedRight: false
     }
   })
+
   export type ButtonVariant = VariantProps<typeof buttonVariants>['variant']
   export type ButtonSize = VariantProps<typeof buttonVariants>['size']
   export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
     WithElementRef<HTMLAnchorAttributes> & {
       variant?: ButtonVariant
       size?: ButtonSize
+      icon?: IconSource
+      iconPosition?: 'left' | 'right'
+      iconClass?: string
+      stackedLeft?: boolean
+      stackedRight?: boolean
     }
 </script>
 
 <script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+
   let {
     class: className,
-    variant = 'default',
-    size = 'default',
+    variant = 'primary',
+    size = 'lg',
+    icon,
+    iconPosition = 'left',
+    iconClass = '',
+    stackedLeft = false,
+    stackedRight = false,
     ref = $bindable(null),
     href = undefined,
     type = 'button',
     disabled,
-    children
+    children,
+    onclick,
+    ...rest
   }: ButtonProps = $props()
+
+  let iconOnly = $derived(!children)
+  let hasIcon = $derived(!!icon && !iconOnly)
+
+  let iconSize = $derived(
+    {
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-4'
+    }[size]
+  )
+
+  // For icon-right, we need to reverse the padding
+  let paddingClass = $derived(
+    iconPosition === 'right' && hasIcon ? (size === 'lg' ? 'pl-3 pr-2' : 'pl-2 pr-1.5') : ''
+  )
 </script>
 
+{#snippet iconContent()}
+  {#if icon}
+    <div class={cn('relative z-10', iconClass && `[&_svg]:${iconClass}`)}>
+      <Icon src={icon} class={iconSize} />
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet buttonContent()}
+  <div
+    class={cn(
+      'inline-flex items-center transition-transform group-active:translate-y-px',
+      !iconOnly && 'gap-1'
+    )}
+  >
+    {#if icon && !children}
+      {@render iconContent()}
+    {:else if iconPosition === 'right'}
+      {#if children}
+        <span class="z-10">{@render children()}</span>
+      {/if}
+      {#if icon}
+        {@render iconContent()}
+      {/if}
+    {:else}
+      {#if icon}
+        {@render iconContent()}
+      {/if}
+      {#if children}
+        <span class="z-10">{@render children()}</span>
+      {/if}
+    {/if}
+  </div>
+{/snippet}
+
 {#if href}
   <a
     bind:this={ref}
     data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
+    class={cn(
+      buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
+      iconPosition === 'right' && 'flex-row-reverse',
+      paddingClass,
+      className
+    )}
     href={disabled ? undefined : href}
     aria-disabled={disabled}
     role={disabled ? 'link' : undefined}
     tabindex={disabled ? -1 : undefined}
+    {...rest}
   >
-    {@render children?.()}
+    {@render buttonContent()}
   </a>
 {:else}
   <button
     bind:this={ref}
     data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
+    class={cn(
+      buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
+      'group',
+      iconPosition === 'right' && 'flex-row-reverse',
+      paddingClass,
+      className
+    )}
     {type}
     {disabled}
+    {onclick}
+    {...rest}
   >
-    {@render children?.()}
+    {@render buttonContent()}
   </button>
 {/if}