@invopop/popui 0.1.23 → 0.1.25

package/dist/Breadcrumb.svelte

@@ -6,7 +6,7 @@
   let { breadcrumb, isLast, oncopied }: BreadcrumbProps = $props()
 
   let textStyles = $derived(
-    clsx('font-sans text-base leading-6 tracking-[-0.16px] whitespace-nowrap', {
+    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

package/dist/ButtonFile.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { Download } from '@invopop/ui-icons'
+  import { Download, Invoice } from '@invopop/ui-icons'
   import Button from './button/button.svelte'
   import type { ButtonFileProps } from './types.js'
   import { cn } from './utils.js'
+  import { Icon } from '@steeze-ui/svelte-icon'
 
   let {
     name = '',
@@ -34,7 +35,7 @@
 
 <button
   class={cn(
-    'flex items-center gap-3 px-2 py-1.5 rounded-[10px] w-full hover:bg-background-default-secondary cursor-pointer',
+    '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
   )}
@@ -44,7 +45,11 @@
 >
   <div class="flex items-center gap-[10px] flex-1 min-w-0">
     <div class={fileAvatarStyles}>
-      {fileType}
+      {#if fileType === 'generic'}
+        <Icon src={Invoice} class="size-4 text-icon" />
+      {:else}
+        {fileType}
+      {/if}
     </div>
     <div class="flex flex-col text-start min-w-0 flex-1">
       <div class="text-sm font-medium text-foreground truncate w-full">

package/dist/DatePicker.svelte

@@ -188,7 +188,7 @@
       onclick={() => {
         isOpen = !isOpen
       }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
+      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-2 text-left border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
     >
       {selectedLabel}
     </button>

package/dist/DrawerContext.svelte

@@ -79,7 +79,7 @@
 {/snippet}
 
 <div
-  class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[480px] list-none"
+  class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[460px] list-none"
 >
   {@render children?.()}
 
@@ -140,7 +140,7 @@
   {/if}
 
   {#if ungroupedItems.length}
-    <div class="flex-shrink-0 overflow-y-auto max-h-[474px]">
+    <div class="flex-shrink-0 overflow-y-auto max-h-[454px]">
       {#each ungroupedItems as item}
         {@render drawerItem(item)}
       {/each}

package/dist/GlobalSearch.svelte

@@ -11,10 +11,13 @@
   let { collapsed = false, onOpen }: GlobalSearchProps = $props()
 
   const styles = $derived(
-    clsx('cursor-pointer flex items-center border border-border-inverse-default rounded-lg h-8', {
-      'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse': !collapsed,
-      'p-2': collapsed
-    })
+    clsx(
+      'cursor-pointer flex items-center border border-border-inverse-default rounded-lg box-border',
+      {
+        'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse h-8': !collapsed,
+        'p-2 size-8': collapsed
+      }
+    )
   )
 
   function onKeyDown(event: KeyboardEvent) {

package/dist/MenuItem.svelte

@@ -39,9 +39,10 @@
       { 'text-foreground-inverse font-medium': !isFolderItem },
       { 'text-foreground-inverse-secondary': isFolderItem && !active },
       {
-        'border border-transparent hover:bg-background-selected-inverse group p-2': collapsedSidebar
+        'border border-transparent hover:bg-background-selected-inverse group p-[7px] size-8':
+          collapsedSidebar
       },
-      { 'w-full px-2 py-1.5': !collapsedSidebar },
+      { 'w-full px-2 py-1.5 h-8': !collapsedSidebar },
       {
         'bg-background-selected-inverse text-white': active
       },
@@ -109,7 +110,7 @@
     onmouseleave={handleBlur}
     onclick={handleClick}
     title={label}
-    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg h-8"
+    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg"
   >
     <span class="flex items-center space-x-1.5">
       {#if resolvedIcon}

package/dist/ProfileAvatar.svelte

@@ -56,7 +56,7 @@
     <img
       src={picture}
       alt={name}
-      class="absolute inset-0 size-full object-cover bg-background-default-bold"
+      class="absolute inset-0 size-full object-cover"
       onerror={() => {
         picture = ''
       }}

package/dist/tailwind.theme.css

@@ -379,7 +379,7 @@
   --color-accent-50: var(--color-base-accent, var(--color-green-50));
   --color-accent-60: color-mix(in srgb, var(--color-accent-50) 84%, black);
   --color-accent-70: color-mix(in srgb, var(--color-accent-50) 68%, black);
-  --color-accent-80: color-mix(in srgb, var(--color-accent-50) 52%, black);
+  --color-accent-80: var(--color-base-accent-bg, color-mix(in srgb, var(--color-accent-50) 52%, black));
   --color-accent-alpha-5: color-mix(in srgb, var(--color-accent-50) 5%, transparent);
   --color-accent-alpha-10: color-mix(in srgb, var(--color-accent-50) 10%, transparent);
   --color-accent-alpha-20: color-mix(in srgb, var(--color-accent-50) 20%, transparent);

package/dist/types.d.ts

@@ -285,11 +285,12 @@ export interface BreadcrumbsProps {
     breadcrumbs?: Breadcrumb[];
     oncopied?: (label: string) => void;
 }
+export type ButtonFileType = 'pdf' | 'xml' | 'png' | 'generic';
 export interface ButtonFileProps {
     name?: string;
     disabled?: boolean;
     date?: string;
-    fileType?: 'pdf' | 'xml' | 'png';
+    fileType?: ButtonFileType;
     onPreview?: () => void;
     onDownload?: () => void;
     class?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",