@invopop/popui 0.1.56 → 0.1.58

package/dist/DataListItem.svelte

@@ -1,36 +1,75 @@
 <script lang="ts">
   import clsx from 'clsx'
   import type { DataListItemProps } from './types'
+  import BaseButton from './BaseButton.svelte'
+  import { Duplicate, ExternalLink } from '@invopop/ui-icons'
 
   let {
     label = '',
     value = '',
     monospaced = false,
-    monospacedNums = false,
-    fullWidth = false,
-    children
+    children,
+    onCopy,
+    onLink
   }: DataListItemProps = $props()
 
   let valueStyles = $derived(
-    clsx('text-foreground font-medium text-base', {
-      'font-mono': monospaced,
-      'slashed-zero tabular-nums lining-nums': monospacedNums,
-      'w-full': fullWidth
+    clsx('text-foreground font-medium text-base truncate min-w-0', {
+      'font-mono slashed-zero tabular-nums lining-nums': monospaced
     })
   )
+
+  let clickAction = $derived(onCopy || onLink)
+
+  const handleAreaClick = (e: MouseEvent) => {
+    // Only handle click if not clicking on a button
+    if ((e.target as HTMLElement).closest('button')) return
+
+    if (onCopy) {
+      onCopy()
+    } else if (onLink) {
+      onLink()
+    }
+  }
 </script>
 
-<div class="flex gap-6 items-center px-3 py-1 rounded-lg hover:bg-background-default-secondary">
+<div class="flex gap-6 items-center group">
   <div class="text-foreground-default-secondary text-base min-w-[125px]">
     {label}
   </div>
-  <div class="flex gap-1 items-center">
-    <div class={valueStyles}>
-      {#if children}
-        {@render children()}
-      {:else}
-        {value}
-      {/if}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class={clsx(
+      'flex flex-1 gap-1 items-center group-hover:bg-background-default-secondary py-1 pl-2 pr-1 rounded-md min-w-0',
+      { 'cursor-pointer': clickAction }
+    )}
+    onclick={clickAction ? handleAreaClick : undefined}
+  >
+    <div class="flex-1 min-w-0">
+      <div class={valueStyles}>
+        {#if children}
+          {@render children()}
+        {:else}
+          {value}
+        {/if}
+      </div>
     </div>
+    {#if onCopy}
+      <BaseButton
+        variant="outline"
+        icon={Duplicate}
+        onclick={onCopy}
+        class="opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    {/if}
+    {#if onLink}
+      <BaseButton
+        variant="outline"
+        icon={ExternalLink}
+        onclick={onLink}
+        class="opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    {/if}
   </div>
 </div>

package/dist/DrawerContext.svelte

@@ -8,6 +8,7 @@
   import { ChevronRight } from '@steeze-ui/heroicons'
   import { slide } from 'svelte/transition'
   import { flip } from 'svelte/animate'
+  import clsx from 'clsx'
   import {
     draggable as makeDraggable,
     dropTargetForElements
@@ -53,6 +54,16 @@
 
   type DndItem = DrawerOption & { id: string }
 
+  let containerClasses = $derived(
+    clsx(
+      widthClass,
+      'border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] overflow-y-auto list-none',
+      {
+        '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden': draggable
+      }
+    )
+  )
+
   let selectedItems = $derived(items.filter((i) => i.selected))
   let hasGroups = $derived(groups && groups.length > 0)
   let { groupedItems, ungroupedItems } = $derived.by(() => {
@@ -485,7 +496,7 @@
 
 <div
   bind:this={containerRef}
-  class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] list-none"
+  class={containerClasses}
 >
   {@render children?.()}
 

package/dist/FeedItemDetail.svelte

@@ -2,7 +2,7 @@
   import clsx from 'clsx'
   import type { FeedItemDetailProps } from './types.ts'
   import FeedIconStatus from './FeedIconStatus.svelte'
-  import UuidCopy from './UuidCopy.svelte'
+  import ButtonUuidCopy from './ButtonUuidCopy.svelte'
   import FeedEvents from './FeedEvents.svelte'
   import { slide } from 'svelte/transition'
   import SeparatorHorizontal from './SeparatorHorizontal.svelte'
@@ -52,7 +52,7 @@
   <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">
     <span class="text-sm text-foreground-default-secondary whitespace-nowrap">{idLabel}</span>
     {#if uuid}
-      <UuidCopy {uuid} full small {onCopied} />
+      <ButtonUuidCopy {uuid} full oncopied={onCopied} />
     {/if}
   </div>
   {#if events.length}

package/dist/InputToggle.svelte

@@ -4,12 +4,15 @@
   import type { InputToggleProps } from './types'
   import { cn } from './utils.js'
   import { onMount } from 'svelte'
+  import { TooltipAutoHide, TooltipContent, TooltipTrigger } from './tooltip'
   const sw = createSwitch({ label: 'Set Preference' })
 
   let {
     id = Math.random().toString(36).slice(2, 7),
     label = '',
     checked = $bindable(false),
+    disabled = false,
+    hint,
     onchange,
     class: className = ''
   }: InputToggleProps = $props()
@@ -35,7 +38,8 @@
       {
         'bg-background-default-tertiary': !$sw.checked,
         'bg-background-accent': $sw.checked,
-        'transition-colors duration-200 ease-in-out': hasInteracted
+        'transition-colors duration-200 ease-in-out': hasInteracted,
+        'opacity-30 cursor-not-allowed': disabled
       }
     )
   )
@@ -51,19 +55,45 @@
     )
   )
 
+  let labelStyles = $derived(
+    clsx(
+      'inline-flex items-center gap-2',
+      {
+        'cursor-not-allowed': disabled,
+        'cursor-pointer': !disabled
+      }
+    )
+  )
+
   function handleChange() {
+    if (disabled) return
     hasInteracted = true
     onchange?.($sw.checked)
     checked = $sw.checked
   }
 </script>
 
-<label for={id} class={cn("inline-flex items-center gap-2 cursor-pointer", className)}>
-  <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange}>
-    <span class="sr-only">Use setting</span>
-    <span aria-hidden="true" class={circleStyles}></span>
-  </button>
-  {#if label}
-    <span class="text-base text-foreground">{label}</span>
-  {/if}
-</label>
+{#snippet toggleContent()}
+  <label for={id} class={cn(labelStyles, className)}>
+    <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange} disabled={disabled}>
+      <span class="sr-only">Use setting</span>
+      <span aria-hidden="true" class={circleStyles}></span>
+    </button>
+    {#if label}
+      <span class="text-base text-foreground">{label}</span>
+    {/if}
+  </label>
+{/snippet}
+
+{#if disabled && hint}
+  <TooltipAutoHide>
+    <TooltipTrigger>
+      {@render toggleContent()}
+    </TooltipTrigger>
+    <TooltipContent>
+      {hint}
+    </TooltipContent>
+  </TooltipAutoHide>
+{:else}
+  {@render toggleContent()}
+{/if}

package/dist/button/button.svelte

@@ -126,17 +126,17 @@
       {
         size: 'sm',
         iconOnly: true,
-        class: 'w-6'
+        class: 'w-6 shrink-0'
       },
       {
         size: 'md',
         iconOnly: true,
-        class: 'w-7'
+        class: 'w-7 shrink-0'
       },
       {
         size: 'lg',
         iconOnly: true,
-        class: 'w-8'
+        class: 'w-8 shrink-0'
       },
       {
         stackedLeft: true,
@@ -201,15 +201,7 @@
   let iconOnly = $derived(!children)
   let hasIcon = $derived(!!icon && !iconOnly)
 
-  let iconSize = $derived.by(() => {
-    if (shortcut) return 'size-3'
-
-    return {
-      sm: 'size-3',
-      md: 'size-4',
-      lg: 'size-4'
-    }[size]
-  })
+  let iconSize = $derived(shortcut ? 'size-3' : 'size-4')
 
   // For icon-right, we need to reverse the padding
   let paddingClass = $derived(
@@ -240,7 +232,7 @@
 
 {#snippet buttonContent()}
   <div
-    class={clsx('inline-flex items-center transition-transform group-active:translate-y-px', {
+    class={clsx('inline-flex items-center transition-transform group-active/button:translate-y-px', {
       'gap-1': !iconOnly && !shortcut,
       'gap-1.5': !iconOnly && shortcut
     })}
@@ -271,6 +263,7 @@
     data-slot="button"
     class={cn(
       buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
+      'group/button',
       iconPosition === 'right' && 'flex-row-reverse',
       paddingClass,
       className
@@ -289,7 +282,7 @@
     data-slot="button"
     class={cn(
       buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
-      'group',
+      'group/button',
       iconPosition === 'right' && 'flex-row-reverse',
       paddingClass,
       className

package/dist/data-table/data-table-view-options.svelte

@@ -103,13 +103,18 @@
 
 {#snippet toggleAction(item: DrawerOption)}
   {@const column = table.getColumn(String(item.value))}
-  {#if column?.getCanHide()}
-    <InputToggle
-      class="cursor-default"
-      checked={column?.getIsVisible() ?? false}
-      onchange={(v) => column?.toggleVisibility(!!v)}
-    />
-  {/if}
+  {@const canHide = column?.getCanHide() ?? false}
+  <InputToggle
+    class="cursor-default"
+    checked={column?.getIsVisible() ?? false}
+    disabled={!canHide}
+    hint={!canHide ? 'This column cannot be hidden' : undefined}
+    onchange={(v) => {
+      if (canHide) {
+        column?.toggleVisibility(!!v)
+      }
+    }}
+  />
 {/snippet}
 
 <BaseDropdown class="ms-auto hidden lg:flex">

package/dist/index.d.ts

@@ -75,7 +75,6 @@ import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import { TooltipAutoHide } from './tooltip';
-import UuidCopy from './UuidCopy.svelte';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
@@ -87,4 +86,4 @@ import { FlexRender } from './data-table';
 import { createSvelteTable } from './data-table';
 import { renderComponent } from './data-table';
 import { renderSnippet } from './data-table';
-export { 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, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };
+export { 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 };

package/dist/index.js

@@ -68,7 +68,6 @@ import TitleMain from './TitleMain.svelte'
 import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger, TooltipAutoHide } from './tooltip'
-import UuidCopy from './UuidCopy.svelte'
 import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
 import { buttonVariants } from './button/button.svelte' // Ensure button styles are included
 import {
@@ -159,7 +158,6 @@ export {
   TooltipContent,
   TooltipTrigger,
   TooltipAutoHide,
-  UuidCopy,
   resolveIcon,
   getCountryName,
   getStatusType,

package/dist/tooltip/tooltip-content.svelte

@@ -20,7 +20,7 @@
     {sideOffset}
     {side}
     class={cn(
-      'bg-background-default-negative border border-border-inverse z-50 rounded-md px-2 py-1 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md',
+      'bg-background-default-negative border border-border-inverse z-[1002] rounded-md px-2 py-1 text-sm font-medium text-foreground-inverse leading-5 tracking-tight shadow-md',
       className
     )}
   >
@@ -29,7 +29,7 @@
       {#snippet child({ props })}
         <div
           class={cn(
-            'bg-background-default-negative z-50 size-2.5 rotate-45 rounded-[2px]',
+            'bg-background-default-negative z-[1002] size-2.5 rotate-45 rounded-[2px]',
             'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
             'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
             'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',

package/dist/types.d.ts

@@ -96,7 +96,6 @@ export type TableField = {
     helperIcons?: (data: TableDataRow) => TableIcon[];
     monospaced?: boolean;
     nowrap?: boolean;
-    monospacedNums?: boolean;
     rightAlign?: boolean;
     isCountry?: boolean;
     copy?: boolean;
@@ -309,9 +308,10 @@ export interface DataListItemProps {
     label?: string;
     value?: string;
     monospaced?: boolean;
-    monospacedNums?: boolean;
     fullWidth?: boolean;
     children?: Snippet;
+    onCopy?: () => void;
+    onLink?: () => void;
 }
 export interface DatePickerProps {
     label?: string;
@@ -506,6 +506,8 @@ export interface InputToggleProps {
     id?: string;
     checked?: boolean;
     label?: string;
+    disabled?: boolean;
+    hint?: string;
     onchange?: (checked: boolean) => void;
     [key: string]: any;
 }
@@ -585,17 +587,4 @@ export interface ShortcutWrapperProps {
     theme?: 'light' | 'navigation';
     children?: Snippet;
 }
-export interface UuidCopyProps {
-    uuid?: string;
-    small?: boolean;
-    dark?: boolean;
-    rightAlign?: boolean;
-    prefixLength?: number;
-    suffixLength?: number;
-    full?: boolean;
-    compact?: boolean;
-    link?: boolean;
-    onCopied?: (uuid: string) => void;
-    onLinkClick?: (uuid: string) => void;
-}
 export type { DataTableColumn, DataTableProps, CellType, TextCellConfig, BooleanCellConfig, TagCellConfig, DateCellConfig, CurrencyCellConfig, CellConfig } from './data-table/data-table-types.js';

package/package.json

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

package/dist/UuidCopy.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import { Duplicate, ExternalLink } from '@invopop/ui-icons'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import clsx from 'clsx'
-  import type { UuidCopyProps } from './types'
-
-  let {
-    uuid = '',
-    small = false,
-    dark = false,
-    rightAlign = false,
-    prefixLength = 4,
-    suffixLength = 4,
-    full = false,
-    compact = false,
-    link = false,
-    onCopied,
-    onLinkClick
-  }: UuidCopyProps = $props()
-
-  function shortenString(inputString: string, prefixLength: number, suffixLength: number) {
-    if (inputString.length <= prefixLength + suffixLength) {
-      return inputString // Return the whole string if it's too short
-    }
-
-    const prefix = inputString.substring(0, prefixLength)
-    const suffix = inputString.substring(inputString.length - suffixLength)
-
-    return prefix + '...' + suffix
-  }
-
-  let formattedUuid = $derived(full ? uuid : shortenString(uuid, prefixLength, suffixLength))
-  let styles = $derived(
-    clsx({
-      'justify-end': rightAlign,
-      'text-sm': small,
-      'text-base': !small,
-      'text-foreground': dark,
-      'text-foreground-default-secondary': !dark,
-      'justify-between': !compact,
-      'w-full': full,
-      'border border-border rounded-md pl-2.5 pr-2 py-[5px]': !full
-    })
-  )
-
-  async function handleClick(event: MouseEvent) {
-    event.stopPropagation()
-    await navigator.clipboard.writeText(uuid)
-    onCopied?.(uuid)
-  }
-
-  async function handleIconClick(event: MouseEvent) {
-    event.stopPropagation()
-    await navigator.clipboard.writeText(uuid)
-    if (link) {
-      onLinkClick?.(uuid)
-    } else {
-      onCopied?.(uuid)
-    }
-  }
-</script>
-
-<div class="{styles} relative inline-flex items-center space-x-1 text-left whitespace-nowrap">
-  <button class="tracking-wide font-mono text-base cursor-pointer" onclick={handleClick}>
-    {formattedUuid}
-  </button>
-  <button class="p-1 cursor-pointer" onclick={handleIconClick}>
-    <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-foreground-default-secondary" />
-  </button>
-</div>

package/dist/UuidCopy.svelte.d.ts

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