@invopop/popui 0.1.17 → 0.1.18

package/dist/AlertDialog.svelte

@@ -65,9 +65,11 @@
 </script>
 
 <AlertDialog onOpenChange={handleOpen} bind:open>
-  <AlertDialogTrigger class={children ? '' : 'hidden'}>
-    {@render children?.()}
-  </AlertDialogTrigger>
+  {#if children}
+    <AlertDialogTrigger>
+      {@render children?.()}
+    </AlertDialogTrigger>
+  {/if}
   <AlertDialogContent>
     <AlertDialogHeader>
       <AlertDialogTitle>{title}</AlertDialogTitle>

package/dist/BaseButton.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import type { BaseButtonProps } from './types.ts'
   import Button from './button/button.svelte'
-  import type { ButtonSize } from './button/button.svelte'
 
   let {
     icon,
     iconTheme = 'default',
     iconPosition = 'left',
     type = 'button',
-    variant = 'default',
+    variant = 'outline',
     disabled = false,
     size = 'md',
     dangerIcon = false,

package/dist/BaseDropdown.svelte

@@ -8,7 +8,7 @@
   let {
     isOpen = $bindable(false),
     fullWidth = false,
-    placement = 'bottom-end',
+    placement = 'bottom-start',
     matchParentWidth = false,
     class: className = '',
     trigger,

package/dist/BaseTable.svelte

@@ -264,6 +264,7 @@
                 {indeterminate}
                 checked={allChecked}
                 onChecked={() => {
+                  console.log('toggle all')
                   toggleAllSelected(!selectedRows.length)
                 }}
               />

package/dist/BaseTableCheckbox.svelte

@@ -5,7 +5,6 @@
   let {
     checkboxButton = $bindable(undefined),
     checked = false,
-    hidden = false,
     indeterminate = false,
     onChecked
   }: BaseTableCheckboxProps = $props()
@@ -20,12 +19,13 @@
   role="checkbox"
   aria-checked={checked}
   bind:this={checkboxButton}
-  class="h-full w-full flex items-center justify-center outline-none group cursor-default"
+  class="pl-3 h-full w-full flex items-center justify-center outline-none group cursor-default"
   onclick={handleClick}
 >
   <InputCheckbox
     {checked}
     {indeterminate}
+    onclick={(e) => e.stopPropagation()}
     onchange={(changed) => {
       onChecked?.(changed)
     }}

package/dist/ButtonUuidCopy.svelte

@@ -32,7 +32,8 @@
   icon={Duplicate}
   iconPosition="right"
   variant="ghost"
-  onclick={async () => {
+  onclick={async (e) => {
+    e.stopPropagation()
     await navigator.clipboard.writeText(uuid)
     oncopied?.(uuid)
   }}

package/dist/CardCheckbox.svelte

@@ -19,10 +19,12 @@
   }: CardCheckboxProps = $props()
 
   let containerStyles = $derived(
-    clsx('border gap-3 py-2 pr-2 pl-3 flex items-start rounded-xl', {
+    clsx('border gap-3 flex items-start', {
       'border-foreground-selected': checked,
       'border-border': !checked,
-      'bg-background-default-secondary': disabled
+      'bg-background-default-secondary': disabled,
+      'px-2 py-1.5 rounded-lg': hideRadio,
+      'py-2 pr-2 pl-3 rounded-xl': !hideRadio
     })
   )
 </script>
@@ -53,10 +55,10 @@
         <InputRadio {id} {name} {checked} {disabled} {onchange} />
       </div>
     {/if}
+    {#if footer}
+      <div class="px-3 pb-3 pt-2">
+        {@render footer?.()}
+      </div>
+    {/if}
   </div>
-  {#if footer}
-    <div class="border-t border-border bg-background-default-secondary rounded-b-xl px-3 pb-3 pt-2">
-      {@render footer?.()}
-    </div>
-  {/if}
 </label>

package/dist/DataListItem.svelte

@@ -20,7 +20,7 @@
   )
 </script>
 
-<div class="flex gap-6 items-center px-3 py-1.5 rounded-lg hover:bg-background-default-secondary">
+<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>

package/dist/DatePicker.svelte

@@ -120,7 +120,7 @@
     start: undefined,
     end: undefined
   })
-  let isOpen = $state(true)
+  let isOpen = $state(false)
   let styles = $derived(
     clsx({
       'border-border-selected-bold shadow-active': isOpen,

package/dist/DrawerContext.svelte

@@ -79,7 +79,7 @@
 {/snippet}
 
 <div
-  class="{widthClass} border border-border rounded-2xl shadow-lg bg-white overflow-hidden flex flex-col py-1 max-h-[400px] overflow-y-auto"
+  class="{widthClass} border border-border rounded-2xl shadow-lg bg-white flex flex-col py-1 max-h-[480px] list-none"
 >
   {@render children?.()}
 
@@ -87,18 +87,25 @@
     {#each groups as group, index}
       {@const groupItems = groupedItems.get(group.slug) || []}
       {@const isLastGroup = index === groups!.length - 1}
-      <div class="flex-shrink-0 px-1">
+      {@const isOpen = openGroups[group.slug]}
+      {@const hasOpenGroup = Object.values(openGroups).some((v) => v)}
+      <div
+        class="px-1"
+        class:flex-1={isOpen}
+        class:flex={isOpen}
+        class:flex-col={isOpen}
+        class:min-h-0={isOpen}
+        class:flex-shrink-0={!isOpen && hasOpenGroup}
+      >
         <button
-          class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip"
+          class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip flex-shrink-0"
           onclick={() => toggleGroup(group.slug)}
         >
           <div class="flex items-center gap-1.5">
             <span>{group.label}</span>
             <Icon
               src={ChevronRight}
-              class="size-3 text-icon-default-secondary transition-all transform {openGroups[
-                group.slug
-              ]
+              class="size-3 text-icon-default-secondary transition-all transform {isOpen
                 ? 'rotate-90'
                 : ''}"
             />
@@ -108,8 +115,8 @@
           {/if}
         </button>
 
-        {#if openGroups[group.slug]}
-          <div transition:slide class="w-full">
+        {#if isOpen}
+          <div class="w-full overflow-y-auto flex-1 min-h-0" transition:slide={{ duration: 200 }}>
             {#if !groupItems.length}
               <div class="px-1 pt-1 pb-5">
                 <EmptyState
@@ -119,11 +126,9 @@
                 />
               </div>
             {:else}
-              <div class="max-h-[400px] overflow-y-auto">
-                {#each groupItems as item}
-                  {@render drawerItem(item)}
-                {/each}
-              </div>
+              {#each groupItems as item}
+                {@render drawerItem(item)}
+              {/each}
             {/if}
           </div>
         {/if}
@@ -135,7 +140,7 @@
   {/if}
 
   {#if ungroupedItems.length}
-    <div class="flex-shrink-0">
+    <div class="flex-shrink-0 overflow-y-auto max-h-[474px]">
       {#each ungroupedItems as item}
         {@render drawerItem(item)}
       {/each}

package/dist/DrawerContextItem.svelte

@@ -8,6 +8,7 @@
   import BaseFlag from './BaseFlag.svelte'
   import { getCountryName } from './helpers.js'
   import TagStatus from './TagStatus.svelte'
+  import ProfileAvatar from './ProfileAvatar.svelte'
 
   let {
     multiple = false,
@@ -30,7 +31,7 @@
     )
   )
   let labelStyles = $derived(
-    clsx({ 'text-danger-500': item.destructive }, { 'text-neutral-800': !item.destructive })
+    clsx({ 'text-foreground-critical': item.destructive }, { 'text-foreground': !item.destructive })
   )
   let title = $derived(item.label.length > 25 ? item.label : undefined)
 
@@ -60,7 +61,11 @@
   onclick={handleClick}
 >
   <div class="{styles} rounded-md pr-2 flex items-center justify-start w-full">
-    {#if item.icon}
+    {#if item.useAvatar}
+      <ProfileAvatar name={item.label} picture={item.picture || ''} variant="sm" />
+    {:else if item.picture}
+      <ProfileAvatar name={item.label} picture={item.picture} variant="sm" />
+    {:else if item.icon}
       <Icon
         src={item.icon}
         class="w-4 h-4 {item.destructive ? 'text-icon-critical' : item.iconClass || 'text-icon'}"

package/dist/DropdownSelect.svelte

@@ -44,8 +44,7 @@
     (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-neutral-500'
   )
   let selectedLabel = $derived(
-    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more and more and more and more and more and more' : ''}` ||
-      placeholder
+    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more' : ''}` || placeholder
   )
 
   let styles = $derived(

package/dist/EmptyState.svelte

@@ -23,7 +23,7 @@
     <div class="relative h-[120px] w-[352px] max-w-sm">
       <IconEmpty />
       <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
-        <Icon src={iconSource} class="h-12 w-12 text-foreground-accent" />
+        <Icon src={iconSource} class="size-10 text-foreground-accent" />
         {#if check}
           <CheckBadge />
         {/if}

package/dist/FeedItem.svelte

@@ -33,7 +33,7 @@
   {#if hasNext && icon}
     <span class="absolute bottom-[-20px] left-2 border-l border-border w-px h-[58px]"></span>
   {/if}
-  <div class="flex items-start justify-between space-x-2 py-3">
+  <div class="flex items-start justify-between space-x-2">
     <div class="relative">
       {#if icon}
         <FeedIconEvent {icon} />

package/dist/GlobalSearch.svelte

@@ -11,13 +11,10 @@
   let { collapsed = false, onOpen }: GlobalSearchProps = $props()
 
   const styles = $derived(
-    clsx(
-      'cursor-pointer flex items-center border border-border-inverse-default rounded-lg backdrop-blur-[20px]',
-      {
-        'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse': !collapsed,
-        'p-1.5': collapsed
-      }
-    )
+    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-1.5': collapsed
+    })
   )
 
   function onKeyDown(event: KeyboardEvent) {

package/dist/MenuItem.svelte

@@ -48,7 +48,9 @@
       { 'hover:bg-background-selected-inverse': !active }
     )
   )
-  let iconStyles = $derived(clsx({ 'group-hover:text-white': collapsedSidebar }))
+  let iconStyles = $derived(
+    clsx({ 'group-hover:text-white text-icon-inverse-bold!': collapsedSidebar })
+  )
   let wrapperStyles = $derived(
     clsx({
       'ml-4 border-l border-white-10 pl-2 pt-0.5 relative': isFolderItem

package/dist/TagStatus.svelte

@@ -5,27 +5,23 @@
   let { label = '', status = 'grey', dot = false }: TagStatusProps = $props()
 
   let tagStyles = $derived(
-    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
-      }
-    )
+    clsx('rounded inline-flex items-center text-xs 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-1!': dot && !label,
+      'px-1': !dot
+    })
   )
 
   let dotStyles = $derived(

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

@@ -10,6 +10,8 @@
       variant: {
         primary:
           '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:
@@ -18,9 +20,9 @@
           '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-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'
+        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: {
         sm: 'h-6 rounded-sm',
@@ -92,12 +94,12 @@
       },
       // Icon-only uses bold icon variants
       {
-        variant: ['secondary', 'default', 'outline', 'ghost'],
+        variant: ['secondary', 'outline', 'ghost'],
         iconOnly: true,
         class: '[&_svg]:!text-icon-default-bold'
       },
       {
-        variant: 'primary',
+        variant: ['primary', 'warning'],
         iconOnly: true,
         class: '[&_svg]:!text-icon-inverse-bold'
       },

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

@@ -5,12 +5,13 @@ import type { IconSource } from '@steeze-ui/svelte-icon';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
+        warning: string;
         danger: string;
         outline: string;
         ghost: string;
         secondary: string;
-        default: string;
         dark: string;
+        'dark-ghost': string;
     };
     size: {
         sm: string;
@@ -28,12 +29,13 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, 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: {
         primary: string;
+        warning: string;
         danger: string;
         outline: string;
         ghost: string;
         secondary: string;
-        default: string;
         dark: string;
+        'dark-ghost': string;
     };
     size: {
         sm: string;
@@ -51,12 +53,13 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
+        warning: string;
         danger: string;
         outline: string;
         ghost: string;
         secondary: string;
-        default: string;
         dark: string;
+        'dark-ghost': string;
     };
     size: {
         sm: string;

package/dist/index.d.ts

@@ -67,7 +67,8 @@ import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import UuidCopy from './UuidCopy.svelte';
-import { resolveIcon } from './helpers.js';
-import { getCountryName } from './helpers.js';
-import { getStatusType } from './helpers.js';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType };
+import { resolveIcon } from './helpers.ts';
+import { getCountryName } from './helpers.ts';
+import { getStatusType } from './helpers.ts';
+import { buttonVariants } from './button/button.svelte';
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants };

package/dist/index.js

@@ -64,7 +64,8 @@ import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 import UuidCopy from './UuidCopy.svelte'
-import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
+import { resolveIcon, getCountryName, getStatusType } from './helpers.ts'
+import { buttonVariants } from './button/button.svelte' // Ensure button styles are included
 
 export {
   AlertDialog,
@@ -138,5 +139,6 @@ export {
   UuidCopy,
   resolveIcon,
   getCountryName,
-  getStatusType
+  getStatusType,
+  buttonVariants
 }

package/dist/tailwind.theme.css

@@ -865,13 +865,14 @@
     --color-foreground-status-void: var(--color-neutral-white-alpha-70);
 
     /* Background */
-    --color-background-default-default: var(--color-neutral-100);
+    --color-background-default-default: var(--color-neutral-90);
     --color-background-default-secondary: var(--color-neutral-white-alpha-5);
     --color-background-default-tertiary: var(--color-neutral-white-alpha-10);
     --color-background-default-tertiary-hover: var(--color-neutral-white-alpha-20);
     --color-background-default-tertiary-press: var(--color-neutral-white-alpha-30);
-    --color-background-default-bold: var(--color-accent-60);
-    --color-background-default-negative: var(--color-neutral-white-alpha-10);
+    --color-background-default-bold: var(--color-neutral-100);
+    --color-background-default-accent: var(--color-neutral-white-alpha-10);
+    --color-background-default-negative: var(--color-neutral-100);
 
     --color-background-selected-default: var(--color-accent-alpha-20);
     --color-background-selected-default-hover: var(--color-accent-alpha-30);
@@ -905,7 +906,7 @@
     --color-background-document-png: var(--color-documents-img-alpha-10);
 
     --color-background-status-invalid: var(--color-critical-alpha-20);
-    --color-background-status-empty: var(--color-neutral-100);
+    --color-background-status-empty: var(--color-neutral-white-alpha-5);
     --color-background-status-draft: var(--color-warning-alpha-20);
     --color-background-status-processing: var(--color-attention-alpha-20);
     --color-background-status-registered: var(--color-personalization-alpha-30);

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { IconSource } from '@steeze-ui/svelte-icon';
 import type { Snippet } from 'svelte';
 export type IconTheme = 'default' | 'solid' | 'mini';
 export type IconPosition = 'right' | 'left';
-export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'dark' | 'outline' | 'ghost';
+export type ButtonVariant = 'warning' | 'primary' | 'secondary' | 'danger' | 'dark' | 'outline' | 'ghost';
 export type StatusType = 'grey' | 'green' | 'yellow' | 'red' | 'orange' | 'blue' | 'purple' | 'olive' | 'teal' | 'crimson' | 'blueViolet' | 'steelBlue' | 'empty';
 export type AnyProp = string | number | object | boolean;
 export type SidebarIcon = {
@@ -37,6 +37,7 @@ export type DrawerOption = SelectOption & {
     iconClass?: string;
     disabled?: boolean;
     groupBy?: string;
+    useAvatar?: boolean;
 };
 export type Company = {
     id: string;

package/package.json

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