@invopop/popui 0.1.69 → 0.1.71

package/dist/AvatarIcon.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { TooltipAutoHide, TooltipContent, TooltipTrigger } from './tooltip'
+  import type { AvatarIconProps } from './types.js'
+
+  let { name, showMask = false, size = 'md', tooltipContent, children }: AvatarIconProps = $props()
+
+  const masks = {
+    md: `url("data:image/svg+xml,%3Csvg width='26' height='28' viewBox='0 0 26 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4004 0C21.7603 9.85818e-10 23.4402 0.000417824 24.7236 0.654297C25.1531 0.873098 25.552 1.14144 25.9131 1.45215C25.5579 1.90591 25.2449 2.39516 24.9805 2.91406C23.9996 4.83925 24 7.36007 24 12.4004V15.5996C24 20.6399 23.9996 23.1608 24.9805 25.0859C25.2447 25.6046 25.5581 26.0933 25.9131 26.5469C25.5519 26.8578 25.1532 27.1268 24.7236 27.3457C23.4402 27.9996 21.7603 28 18.4004 28H9.59961C6.23965 28 4.55977 27.9996 3.27637 27.3457C2.14739 26.7705 1.22954 25.8526 0.654297 24.7236C0.00041777 23.4402 9.8162e-10 21.7603 0 18.4004V9.59961C9.88222e-10 6.23965 0.000417662 4.55977 0.654297 3.27637C1.22954 2.14739 2.14739 1.22954 3.27637 0.654297C4.55977 0.000417608 6.23965 9.84018e-10 9.59961 0H18.4004Z' fill='white'/%3E%3C/svg%3E")`,
+    sm: `url("data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5996 1.63272e-09C19.8398 1.63272e-09 20.9608 -0.000427061 21.8164 0.435547C21.9034 0.479874 21.9882 0.527831 22.0713 0.578125C21.9172 0.80011 21.778 1.03354 21.6543 1.27637C21.0004 2.55977 21 4.23965 21 7.59961V16.4004C21 19.7603 21.0004 21.4402 21.6543 22.7236C21.7779 22.9662 21.9174 23.1991 22.0713 23.4209C21.9881 23.4713 21.9035 23.52 21.8164 23.5645C20.9608 24.0004 19.8398 24 17.5996 24H6.40039C4.16018 24 3.03924 24.0004 2.18359 23.5645C1.43109 23.181 0.819016 22.5689 0.435547 21.8164C-0.000427061 20.9608 1.63272e-09 19.8398 1.63272e-09 17.5996V6.40039C1.63272e-09 4.16018 -0.000427061 3.03924 0.435547 2.18359C0.819016 1.43109 1.43109 0.819016 2.18359 0.435547C3.03924 -0.000427061 4.16018 1.63272e-09 6.40039 1.63272e-09H17.5996Z' fill='white'/%3E%3C/svg%3E")`
+  }
+</script>
+
+<TooltipAutoHide>
+  <TooltipTrigger class="shrink-0">
+    <div
+      style={showMask
+        ? `mask-image: ${masks[size]};
+           mask-size: 100% 100%;
+           mask-repeat: no-repeat;
+           -webkit-mask-image: ${masks[size]};
+           -webkit-mask-size: 100% 100%;
+           -webkit-mask-repeat: no-repeat;`
+        : ''}
+    >
+      {@render children()}
+    </div>
+  </TooltipTrigger>
+  <TooltipContent>
+    {#if tooltipContent}
+      {@render tooltipContent()}
+    {:else if name}
+      {name}
+    {/if}
+  </TooltipContent>
+</TooltipAutoHide>

package/dist/AvatarIcon.svelte.d.ts

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

package/dist/AvatarStack.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import clsx from 'clsx'
+  import { TooltipProvider } from './tooltip'
+  import AvatarIcon from './AvatarIcon.svelte'
+  import type { AvatarStackProps } from './types.js'
+  import { cn } from './utils.js'
+
+  let { icons = [], size = 'md', class: className }: AvatarStackProps = $props()
+
+  let maxItems = $derived(icons.length > 5 ? 4 : 5)
+  let mainIcons = $derived(icons.slice(0, maxItems))
+  let restIcons = $derived(icons.slice(maxItems, icons.length))
+</script>
+
+{#snippet restTooltip()}
+  {#each restIcons as restIcon}
+    <div>{restIcon.name}</div>
+  {/each}
+{/snippet}
+
+<TooltipProvider>
+  <div class={cn('flex flex-col space-y-2 sm:flex-row sm:flex-nowrap sm:space-y-0 items-center', className)}>
+    {#each mainIcons as icon, i (i)}
+      <AvatarIcon
+        name={icon.name}
+        {size}
+        showMask={i < mainIcons.length - 1 || restIcons.length > 0}
+      >
+        <div
+          data-avatar-stack-item
+          class={clsx(
+            'flex items-center bg-background-default-secondary text-icon shrink-0',
+            size === 'sm' ? 'p-1 rounded' : 'p-1.5 rounded-md'
+          )}
+        >
+          {#if icon.icon}
+            <Icon src={icon.icon} class="size-4 shrink-0" />
+          {:else if icon.url}
+            <img src={icon.url} alt={icon.name} class="size-4 shrink-0" />
+          {/if}
+        </div>
+      </AvatarIcon>
+    {/each}
+    {#if restIcons.length}
+      <AvatarIcon {size} tooltipContent={restTooltip}>
+        <div
+          data-avatar-stack-overflow
+          class={clsx(
+            'flex items-center justify-center text-icon font-medium text-sm shrink-0 bg-background-default-secondary',
+            size === 'sm' ? 'size-6 rounded' : 'size-7 rounded-md'
+          )}
+        >
+          +{restIcons.length}
+        </div>
+      </AvatarIcon>
+    {/if}
+  </div>
+</TooltipProvider>

package/dist/AvatarStack.svelte.d.ts

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

package/dist/BaseDropdown.svelte

@@ -13,6 +13,7 @@
     matchParentWidth = false,
     usePortal = true,
     strategy: strategyProp,
+    disabled = false,
     class: className = '',
     trigger,
     children,
@@ -91,7 +92,8 @@
 
 <div class="flex {className}" class:w-full={fullWidth} role="menu">
   <button
-    class="cursor-pointer text-left w-full min-w-0 outline-none"
+    class="cursor-pointer disabled:cursor-default text-left w-full min-w-0 outline-none"
+    {disabled}
     use:floatingRef
     {...rest}
     onclick={handleClick}

package/dist/DrawerContext.svelte

@@ -49,7 +49,8 @@
     onreorder,
     ondropitem,
     children,
-    groups
+    groups,
+    ...rest
   }: DrawerContextProps = $props()
 
   type DndItem = DrawerOption & { id: string }
@@ -497,6 +498,7 @@
 <div
   bind:this={containerRef}
   class={containerClasses}
+  {...rest}
 >
   {@render children?.()}
 

package/dist/DropdownSelect.svelte

@@ -9,6 +9,7 @@
   import BaseFlag from './BaseFlag.svelte'
   import { resolveIcon } from './helpers.js'
   import { buttonVariants } from './button/button.svelte'
+  import { cn } from './utils.js'
 
   let {
     value = $bindable(''),
@@ -25,7 +26,9 @@
     stackLeft = false,
     stackRight = false,
     multipleLabel = 'items',
-    strategy
+    strategy,
+    disabled = false,
+    class: className = ''
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -71,16 +74,25 @@
   let isStacked = $derived(stackLeft || stackRight)
 
   let styles = $derived(
-    isStacked
-      ? buttonVariants({
-          variant: 'ghost',
-          stackedLeft: stackLeft,
-          stackedRight: stackRight
-        })
-      : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
-          'border-border-selected-bold shadow-active': isOpen,
-          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
-        })
+    cn(
+      'flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7',
+      {
+        'pr-[28px]': !isStacked,
+        'pr-2': isStacked,
+        'opacity-30 pointer-events-none': disabled
+      },
+      isStacked
+        ? buttonVariants({
+            variant: 'ghost',
+            stackedLeft: stackLeft,
+            stackedRight: stackRight
+          })
+        : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
+            'border-border-selected-bold shadow-active': isOpen,
+            'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+          }),
+      className
+    )
   )
 
   function handleClick(val: AnyProp) {
@@ -115,6 +127,7 @@
 
 {#snippet label()}
   <span
+    data-dropdown-select-label
     class={clsx('flex-1 text-base truncate', {
       'text-foreground': selectedItems.length,
       'text-foreground-default-secondary': !selectedItems.length,
@@ -126,19 +139,17 @@
 {/snippet}
 
 <BaseDropdown
+  data-dropdown-select
   bind:isOpen
   placement="bottom-start"
   {fullWidth}
   {strategy}
+  {disabled}
   bind:this={selectDropdown}
   class={fullWidth || isStacked ? '' : widthClass}
 >
   {#snippet trigger()}
-    <div
-      class="{styles} flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7"
-      class:pr-[28px]={!isStacked}
-      class:pr-2={isStacked}
-    >
+    <div data-dropdown-select-trigger class={styles}>
       {#if hasMultipleColors}
         <div class="flex items-center gap-1 flex-1 min-w-0">
           <div class="flex items-center -space-x-0.5">
@@ -177,6 +188,7 @@
     </div>
   {/snippet}
   <DrawerContext
+    data-dropdown-select-content
     widthClass="min-w-[256px]"
     {multiple}
     {items}

package/dist/index.d.ts

@@ -51,8 +51,8 @@ import { SkeletonAvatar } from './skeleton';
 import { SkeletonCard } from './skeleton';
 import { SkeletonList } from './skeleton';
 import StatusLabel from './StatusLabel.svelte';
-import StepIcon from './StepIcon.svelte';
-import StepIconList from './StepIconList.svelte';
+import AvatarIcon from './AvatarIcon.svelte';
+import AvatarStack from './AvatarStack.svelte';
 import { Table } from './table';
 import { TableBody } from './table';
 import { TableCaption } from './table';
@@ -87,4 +87,4 @@ import { FlexRender } from './data-table';
 import { createSvelteTable } from './data-table';
 import { renderComponent } from './data-table';
 import { renderSnippet } from './data-table';
-export { Accordion, AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, StepIcon, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };
+export { Accordion, AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, AvatarIcon, AvatarStack, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -48,8 +48,8 @@ import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
 import { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList } from './skeleton'
 import StatusLabel from './StatusLabel.svelte'
-import StepIcon from './StepIcon.svelte'
-import StepIconList from './StepIconList.svelte'
+import AvatarIcon from './AvatarIcon.svelte'
+import AvatarStack from './AvatarStack.svelte'
 import {
   Table,
   TableHeader,
@@ -135,8 +135,8 @@ export {
   SkeletonCard,
   SkeletonList,
   StatusLabel,
-  StepIcon,
-  StepIconList,
+  AvatarIcon,
+  AvatarStack,
   Table,
   TableBody,
   TableCaption,

package/dist/types.d.ts

@@ -135,9 +135,10 @@ export type Breadcrumb = {
     country?: string;
     copiable?: boolean;
 };
-export type StepIcon = {
+export type AvatarIcon = {
     name: string;
-    url: string;
+    url?: string;
+    icon?: IconSource;
 };
 export interface AccordionProps {
     label: string;
@@ -223,6 +224,7 @@ export interface BaseDropdownProps {
     matchParentWidth?: boolean;
     usePortal?: boolean;
     strategy?: 'absolute' | 'fixed';
+    disabled?: boolean;
     trigger?: Snippet;
     children?: Snippet;
     [key: string]: any;
@@ -349,6 +351,7 @@ export interface DrawerContextProps {
     ondropitem?: (groups: Record<string, DrawerOption[]>) => void;
     children?: Snippet;
     groups?: DrawerGroup[];
+    [key: string]: unknown;
 }
 export interface DrawerContextItemProps {
     multiple?: boolean;
@@ -374,6 +377,8 @@ export interface DropdownSelectProps {
     stackRight?: boolean;
     multipleLabel?: string;
     strategy?: 'absolute' | 'fixed';
+    disabled?: boolean;
+    class?: string;
 }
 export interface EmptyStateProps {
     icon?: Snippet;
@@ -561,13 +566,15 @@ export interface StatusLabelProps {
     status: FeedItemStatus;
     label?: string;
 }
-export interface StepIconListProps {
-    icons?: StepIcon[];
-    [key: string]: any;
+export interface AvatarStackProps {
+    icons?: AvatarIcon[];
+    size?: 'sm' | 'md';
+    class?: string;
 }
-export interface StepIconProps {
+export interface AvatarIconProps {
     name?: string;
     showMask?: boolean;
+    size?: 'sm' | 'md';
     tooltipContent?: Snippet;
     children: Snippet;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },

package/dist/StepIcon.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { TooltipAutoHide, TooltipContent, TooltipTrigger } from './tooltip'
-  import type { StepIconProps } from './types.js'
-
-  let {
-    name,
-    showMask = false,
-    tooltipContent,
-    children
-  }: StepIconProps = $props()
-</script>
-
-<TooltipAutoHide>
-  <TooltipTrigger class="shrink-0">
-    <div
-      style={showMask
-        ? `mask-image: url("data:image/svg+xml,%3Csvg width='26' height='28' viewBox='0 0 26 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4004 0C21.7603 9.85818e-10 23.4402 0.000417824 24.7236 0.654297C25.1531 0.873098 25.552 1.14144 25.9131 1.45215C25.5579 1.90591 25.2449 2.39516 24.9805 2.91406C23.9996 4.83925 24 7.36007 24 12.4004V15.5996C24 20.6399 23.9996 23.1608 24.9805 25.0859C25.2447 25.6046 25.5581 26.0933 25.9131 26.5469C25.5519 26.8578 25.1532 27.1268 24.7236 27.3457C23.4402 27.9996 21.7603 28 18.4004 28H9.59961C6.23965 28 4.55977 27.9996 3.27637 27.3457C2.14739 26.7705 1.22954 25.8526 0.654297 24.7236C0.00041777 23.4402 9.8162e-10 21.7603 0 18.4004V9.59961C9.88222e-10 6.23965 0.000417662 4.55977 0.654297 3.27637C1.22954 2.14739 2.14739 1.22954 3.27637 0.654297C4.55977 0.000417608 6.23965 9.84018e-10 9.59961 0H18.4004Z' fill='white'/%3E%3C/svg%3E");
-           mask-size: 100% 100%;
-           mask-repeat: no-repeat;
-           -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='26' height='28' viewBox='0 0 26 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4004 0C21.7603 9.85818e-10 23.4402 0.000417824 24.7236 0.654297C25.1531 0.873098 25.552 1.14144 25.9131 1.45215C25.5579 1.90591 25.2449 2.39516 24.9805 2.91406C23.9996 4.83925 24 7.36007 24 12.4004V15.5996C24 20.6399 23.9996 23.1608 24.9805 25.0859C25.2447 25.6046 25.5581 26.0933 25.9131 26.5469C25.5519 26.8578 25.1532 27.1268 24.7236 27.3457C23.4402 27.9996 21.7603 28 18.4004 28H9.59961C6.23965 28 4.55977 27.9996 3.27637 27.3457C2.14739 26.7705 1.22954 25.8526 0.654297 24.7236C0.00041777 23.4402 9.8162e-10 21.7603 0 18.4004V9.59961C9.88222e-10 6.23965 0.000417662 4.55977 0.654297 3.27637C1.22954 2.14739 2.14739 1.22954 3.27637 0.654297C4.55977 0.000417608 6.23965 9.84018e-10 9.59961 0H18.4004Z' fill='white'/%3E%3C/svg%3E");
-           -webkit-mask-size: 100% 100%;
-           -webkit-mask-repeat: no-repeat;`
-        : ''}
-    >
-      {@render children()}
-    </div>
-  </TooltipTrigger>
-  <TooltipContent>
-    {#if tooltipContent}
-      {@render tooltipContent()}
-    {:else if name}
-      {name}
-    {/if}
-  </TooltipContent>
-</TooltipAutoHide>

package/dist/StepIcon.svelte.d.ts

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

package/dist/StepIconList.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { TooltipProvider } from './tooltip'
-  import StepIcon from './StepIcon.svelte'
-  import type { StepIconListProps } from './types.js'
-
-  let { icons = [] }: StepIconListProps = $props()
-
-  let maxItems = $derived(icons.length > 6 ? 5 : 6)
-  let mainIcons = $derived(icons.slice(0, maxItems))
-  let restIcons = $derived(icons.slice(maxItems, icons.length))
-</script>
-
-{#snippet restTooltip()}
-  {#each restIcons as restIcon}
-    <div>{restIcon.name}</div>
-  {/each}
-{/snippet}
-
-<TooltipProvider>
-  <div class="flex flex-col space-y-2 sm:flex-row sm:flex-nowrap sm:space-y-0 items-center">
-    {#each mainIcons as icon, i (i)}
-      <StepIcon name={icon.name} showMask={i < mainIcons.length - 1 || restIcons.length > 0}>
-        <div
-          class="p-1.5 rounded-md flex items-center space-x-1 bg-background-default-secondary text-icon shrink-0 {i >
-          0
-            ? 'ml-[-2px]'
-            : ''}"
-        >
-          <img src={icon.url} alt={icon.name} class="size-4 shrink-0" />
-        </div>
-      </StepIcon>
-    {/each}
-    {#if restIcons.length}
-      <StepIcon tooltipContent={restTooltip}>
-        <div
-          class="flex items-center justify-center text-icon font-medium text-sm size-7 shrink-0 rounded-md bg-background-default-secondary ml-[-1px]"
-        >
-          +{restIcons.length}
-        </div>
-      </StepIcon>
-    {/if}
-  </div>
-</TooltipProvider>

package/dist/StepIconList.svelte.d.ts

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