@invopop/popui 0.1.67 → 0.1.69

package/dist/Accordion.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronDown } from '@invopop/ui-icons'
+  import clsx from 'clsx'
+  import type { AccordionProps } from './types'
+  import { cn } from './utils.js'
+
+  let { label, open = true, children, onToggle, class: className }: AccordionProps = $props()
+
+  let isOpen = $derived(open)
+
+  function toggle() {
+    isOpen = !isOpen
+    onToggle?.(isOpen)
+  }
+</script>
+
+<div class={cn('flex flex-col', className)}>
+  <button
+    data-accordion-trigger
+    class="flex items-center gap-1.5 overflow-clip pl-2 py-2 pr-1.5 rounded-lg cursor-pointer"
+    onclick={toggle}
+  >
+    <p data-accordion-label class="text-sm font-medium text-foreground-default-secondary text-left">
+      {label}
+    </p>
+    <Icon
+      data-accordion-icon
+      src={ChevronDown}
+      class={clsx('size-3 text-icon-default-secondary transition-transform', {
+        '-rotate-90': !isOpen
+      })}
+    />
+  </button>
+  {#if isOpen}
+    <div data-accordion-content>
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

package/dist/Accordion.svelte.d.ts

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

package/dist/ButtonUuidCopy.svelte

@@ -3,6 +3,7 @@
   import BaseButton from './BaseButton.svelte'
   import type { ButtonUuidCopyProps } from './types'
   import { copyToClipboard } from './helpers'
+  import { cn } from './utils'
 
   let {
     uuid = '',
@@ -10,21 +11,13 @@
     suffixLength = 4,
     full = false,
     disabled = false,
-    oncopied
+    oncopied,
+    class: className
   }: ButtonUuidCopyProps = $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 prefix = $derived(uuid.substring(0, prefixLength))
+  let suffix = $derived(uuid.substring(uuid.length - suffixLength))
+  let middle = $derived(uuid.substring(prefixLength, uuid.length - suffixLength))
 </script>
 
 <BaseButton
@@ -34,11 +27,23 @@
   iconPosition="right"
   variant="ghost"
   data-uuid-copy
+  class={cn(
+    'max-w-full [&_[data-button-content]]:max-w-full [&_[data-button-content]]:min-w-0 [&_[data-button-content]>span]:min-w-0',
+    className
+  )}
   onclick={async (e) => {
     e.stopPropagation()
     await copyToClipboard(uuid)
     oncopied?.(uuid)
   }}
 >
-  <span class="font-mono">{formattedUuid}</span>
+  {#if full}
+    <span class="font-mono">{uuid}</span>
+  {:else}
+    <span class="font-mono flex items-center min-w-0 overflow-hidden">
+      <span class="shrink-0">{prefix}</span>
+      <span class="truncate min-w-0">{middle}</span>
+      <span class="shrink-0">{suffix}</span>
+    </span>
+  {/if}
 </BaseButton>

package/dist/button/button.svelte

@@ -232,10 +232,14 @@
 
 {#snippet buttonContent()}
   <div
-    class={clsx('inline-flex items-center transition-transform group-active/button:translate-y-px', {
-      'gap-1': !iconOnly && !shortcut,
-      'gap-1.5': !iconOnly && shortcut
-    })}
+    data-button-content
+    class={clsx(
+      'inline-flex items-center transition-transform group-active/button:translate-y-px',
+      {
+        'gap-1': !iconOnly && !shortcut,
+        'gap-1.5': !iconOnly && shortcut
+      }
+    )}
   >
     {#if icon && !children}
       {@render iconContent()}

package/dist/data-table/cells/uuid-cell.svelte

@@ -14,6 +14,7 @@
       full={config?.full}
       disabled={config?.disabled}
       oncopied={config?.onCopy}
+      class="!font-[weight:inherit]"
     />
   </div>
 {:else}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import Accordion from './Accordion.svelte';
 import AlertDialog from './AlertDialog.svelte';
 import BaseButton from './BaseButton.svelte';
 import BaseCard from './BaseCard.svelte';
@@ -86,4 +87,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, 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, 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

@@ -1,3 +1,4 @@
+import Accordion from './Accordion.svelte'
 import AlertDialog from './AlertDialog.svelte'
 import BaseButton from './BaseButton.svelte'
 import BaseCard from './BaseCard.svelte'
@@ -81,6 +82,7 @@ import {
 } from './data-table'
 
 export {
+  Accordion,
   AlertDialog,
   BaseButton,
   BaseCard,

package/dist/types.d.ts

@@ -139,6 +139,13 @@ export type StepIcon = {
     name: string;
     url: string;
 };
+export interface AccordionProps {
+    label: string;
+    open?: boolean;
+    children?: Snippet;
+    onToggle?: (open: boolean) => void;
+    class?: string;
+}
 export interface AlertDialogProps {
     open?: boolean;
     destructive?: boolean;
@@ -266,6 +273,7 @@ export interface ButtonUuidCopyProps {
     full?: boolean;
     disabled?: boolean;
     oncopied?: (label: string) => void;
+    class?: string;
 }
 export interface ButtonSearchProps {
     value?: string;

package/package.json

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