@invopop/popui 0.1.14 → 0.1.16

package/dist/TagStatus.svelte

@@ -5,64 +5,52 @@
   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,
-      'bg-olive-100 text-olive-500': status === 'olive',
-      'border border-olive-200': status === 'olive' && dot,
-      'bg-teal-100 text-teal-500': status === 'teal',
-      'border border-teal-200': status === 'teal' && dot,
-      'bg-crimson-100 text-crimson-500': status === 'crimson',
-      'border border-crimson-200': status === 'crimson' && dot,
-      'bg-blue-violet-100 text-blue-violet-500': status === 'blueViolet',
-      'border border-blue-violet-200': status === 'blueViolet' && dot,
-      'bg-steel-blue-100 text-steel-blue-500': status === 'steelBlue',
-      'border border-steel-blue-200': status === 'steelBlue' && 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-xs font-medium gap-1 box-border leading-4 py-0.5 h-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',
+        'border border-dashed border-border-default-secondary text-foreground-default-secondary':
+          status === 'empty',
+        'px-1.5': dot,
+        'p-1!': 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-olive-500': status === 'olive',
-      'bg-teal-500': status === 'teal',
-      'bg-crimson-500': status === 'crimson',
-      'bg-blue-violet-500': status === 'blueViolet',
-      '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

@@ -10,14 +10,16 @@
     ...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

@@ -13,9 +13,11 @@
 <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-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/button/button.svelte

@@ -2,77 +2,251 @@
   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: 'cursor-pointer 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-workspace-accent 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',
+        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',
+        default:
+          'bg-background text-foreground border border-border shadow-button-default hover:bg-background-default-secondary active:bg-background-default-tertiary 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'
       },
       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: ''
       }
     },
+    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', 'default', 'outline', 'ghost'],
+        iconOnly: true,
+        class: '[&_svg]:!text-icon-default-bold'
+      },
+      {
+        variant: 'primary',
+        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'
+      }
+    ],
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: 'primary',
+      size: 'md',
+      iconOnly: false,
+      hasIcon: 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
     }
 </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 = '',
     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 }),
+      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 }),
+      'group',
+      iconPosition === 'right' && 'flex-row-reverse',
+      paddingClass,
+      className
+    )}
     {type}
     {disabled}
+    {onclick}
+    {...rest}
   >
-    {@render children?.()}
+    {@render buttonContent()}
   </button>
 {/if}

package/dist/button/button.svelte.d.ts

@@ -1,63 +1,85 @@
 import { type WithElementRef } from '../utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
+import type { IconSource } from '@steeze-ui/svelte-icon';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        default: string;
+        dark: string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
     };
-}, undefined, "cursor-pointer 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", {
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        default: string;
+        dark: string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
+    };
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
         primary: string;
-        secondary: string;
+        danger: string;
+        outline: string;
         ghost: string;
-        link: string;
+        secondary: string;
+        default: string;
+        dark: string;
     };
     size: {
-        default: string;
         sm: string;
+        md: string;
         lg: string;
-        icon: string;
-        'icon-sm': string;
     };
-}, undefined, "cursor-pointer 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", unknown, unknown, undefined>>;
+    iconOnly: {
+        true: string;
+        false: string;
+    };
+    hasIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", unknown, unknown, undefined>>;
 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;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;