@invopop/popui 0.1.66 → 0.1.68

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/tailwind.theme.css

@@ -1008,24 +1008,27 @@
 }
 
 .icon-sidebar-hide_anim_line {
-  transition-behavior: allow-discrete;
+  transform: translate(3.5px, 0.5px);
 }
 
-.icon-sidebar-hide_anim {
-  overflow: hidden;
+.icon-sidebar-hide:hover .icon-sidebar-hide_anim_line {
+  transform: translate(-.25px, 0.5px) scale(0.70, 1);
 }
 
-.icon-sidebar-hide:hover .icon-sidebar-hide_anim_line {
-  transform: translate(-2.5px, 0) scale(0.70, 1);
+.icon-sidebar-hide_anim {
+  overflow: hidden;
 }
 
 .icon-sidebar-hide:hover .icon-sidebar-hide_anim_line rect {
   rx: 0.5px;
 }
 
+.icon-sidebar-hide_anim_arrow {
+    transform: translate(-1.5px, -2px);
+}
+
 .icon-sidebar-hide:hover .icon-sidebar-hide_anim_arrow {
-  transform: translate(-11px, 0);
-  display: block;
+  transform: translate(-4px, -2px);
 }
 
 /* Animated sidebar show icon */
@@ -1057,7 +1060,7 @@
 }
 
 .icon-sidebar-show:hover .icon-sidebar-show_anim_arrow {
-    transform: scale(-1,1) translate(-4px, 0);
+  transform: scale(-1, 1) translate(-4px, 0);
 }
 
 /* Animated pulse icon */
@@ -1067,4 +1070,4 @@
 @keyframes icon-pulse-animation {
   0%, 100% { fill: var(--color-background-default-tertiary); }
   40% { fill: var(--color-accent-50); }
-}
+}

package/dist/types.d.ts

@@ -266,6 +266,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.66",
+  "version": "0.1.68",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },