@invopop/popui 0.0.77-beta8 → 0.0.78

package/dist/BaseButton.svelte

@@ -30,7 +30,7 @@ $:
     { "flex-row-reverse space-x-reverse": iconPosition === "right" },
     { "bg-white": variant === "default" },
     { "bg-workspace-accent": variant === "primary" },
-    { "bg-neutral-100 hover:bg-neutral-200 focus:bg-neutral-300": variant === "secondary" },
+    { "bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300": variant === "secondary" },
     { "bg-danger-500": variant === "danger" },
     { "bg-warning-500": variant === "warning" },
     { "text-sm rounded": small },
@@ -41,16 +41,16 @@ $:
     { "px-3": big && $$slots.default && !icon },
     { "px-2": !big && $$slots.default && !icon },
     { "pl-2 pr-2.5": big && $$slots.default && icon && iconPosition === "left" },
-    { "pl-1.5 pr-2": big && $$slots.default && icon && iconPosition === "right" },
+    { "pl-2.5 pr-2": big && $$slots.default && icon && iconPosition === "right" },
     { "pl-1.5 pr-2": !small && !big && $$slots.default && icon && iconPosition === "left" },
     { "pl-2 pr-1.5": !small && !big && $$slots.default && icon && iconPosition === "right" },
     { "py-1.5": big && $$slots.default },
     { "py-1": !big && $$slots.default },
     { "text-white": ["primary", "danger", "dark", "warning"].includes(variant) },
     { "text-neutral-800": ["default", "secondary"].includes(variant) },
-    { "border border-white-10 hover:border-white-20 focus:border-white-40": variant === "dark" },
+    { "border border-white-10 hover:border-white-20 active:border-white-40": variant === "dark" },
     {
-      "border border-neutral-200 hover:bg-neutral-100 focus:border-neutral-300 focus:bg-neutral-200": variant === "default"
+      "border border-neutral-200 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-200": variant === "default"
     },
     { "gap-1": icon && $$slots.default }
   );

package/dist/ButtonUuidCopy.svelte

@@ -0,0 +1,33 @@
+<script>import { Duplicate } from "@invopop/ui-icons";
+import { createEventDispatcher } from "svelte";
+import BaseButton from "./BaseButton.svelte";
+const dispatch = createEventDispatcher();
+export let uuid = "";
+export let prefixLength = 4;
+export let suffixLength = 4;
+export let full = false;
+export let disabled = false;
+function shortenString(inputString, prefixLength2, suffixLength2) {
+  if (inputString.length <= prefixLength2 + suffixLength2) {
+    return inputString;
+  }
+  const prefix = inputString.substring(0, prefixLength2);
+  const suffix = inputString.substring(inputString.length - suffixLength2);
+  return prefix + "..." + suffix;
+}
+$:
+  formattedUuid = full ? uuid : shortenString(uuid, prefixLength, suffixLength);
+</script>
+
+<BaseButton
+  {disabled}
+  big
+  icon={Duplicate}
+  iconPosition="right"
+  on:click={async () => {
+    await navigator.clipboard.writeText(uuid)
+    dispatch('copied', uuid)
+  }}
+>
+  <span class="font-mono text-neutral-500">{formattedUuid}</span>
+</BaseButton>

package/dist/ButtonUuidCopy.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        uuid?: string | undefined;
+        prefixLength?: number | undefined;
+        suffixLength?: number | undefined;
+        full?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        copied: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonUuidCopyProps = typeof __propDef.props;
+export type ButtonUuidCopyEvents = typeof __propDef.events;
+export type ButtonUuidCopySlots = typeof __propDef.slots;
+export default class ButtonUuidCopy extends SvelteComponent<ButtonUuidCopyProps, ButtonUuidCopyEvents, ButtonUuidCopySlots> {
+}
+export {};

package/dist/CardCheckbox.svelte

@@ -4,6 +4,7 @@ import InputRadio from "./InputRadio.svelte";
 export let id;
 export let title = "";
 export let description = "";
+export let accentText = "";
 export let checked = false;
 $:
   styles = clsx(
@@ -22,7 +23,14 @@ export let icon = void 0;
       <div class="flex flex-col space-y-0.5">
         <span class="text-base text-neutral-800 font-medium">{title}</span>
         {#if description}
-          <span class="text-sm text-neutral-500">{description}</span>
+          <span class="flex items-center space-x-1">
+            {#if accentText}
+              <p class="text-workspace-accent text-sm font-bold">{accentText}</p>
+            {/if}
+            <p class="text-sm text-neutral-500" class:first-letter:uppercase={!accentText}>
+              {description}
+            </p>
+          </span>
         {:else}
           <span class="text-sm text-neutral-300">No description</span>
         {/if}

package/dist/CardCheckbox.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: any;
         title?: string | undefined;
         description?: string | undefined;
+        accentText?: string | undefined;
         checked?: boolean | undefined;
         icon?: IconSource | undefined;
     };

package/dist/StepIconList.svelte

@@ -8,12 +8,12 @@ $:
   restIcons = icons.slice(maxItems, icons.length);
 </script>
 
-<div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center overflow-x-auto">
+<div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
   {#each mainIcons as icon, i (i)}
     <Tooltip>
-      <TooltipTrigger>
+      <TooltipTrigger class="flex-shrink-0">
         <div
-          class="p-1.5 border rounded-md border-neutral-200 flex items-center space-x-1 bg-white text-neutral-800 flex-shrink-0"
+          class="p-1.5 border rounded-md border-neutral-200 flex items-center space-x-1 bg-white text-neutral-800"
         >
           <img src={icon.url} alt={icon.name} class="w-4 h-4" />
         </div>
@@ -28,7 +28,7 @@ $:
   {#if restIcons.length}
     <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0" />
     <Tooltip>
-      <TooltipTrigger>
+      <TooltipTrigger class="flex-shrink-0">
         <div
           class="flex items-center justify-center text-neutral-500 font-medium text-base h-7 w-7"
         >

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import BaseTableActions from './BaseTableActions.svelte';
 import BaseTableHeaderContent from './BaseTableHeaderContent.svelte';
 import Breadcrumbs from './Breadcrumbs.svelte';
 import ButtonFile from './ButtonFile.svelte';
+import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
 import CompanySelector from './CompanySelector.svelte';
@@ -70,4 +71,4 @@ import twTheme from './tw.theme.js';
 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, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -9,6 +9,7 @@ import BaseTableActions from './BaseTableActions.svelte'
 import BaseTableHeaderContent from './BaseTableHeaderContent.svelte'
 import Breadcrumbs from './Breadcrumbs.svelte'
 import ButtonFile from './ButtonFile.svelte'
+import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
@@ -79,6 +80,7 @@ export {
   BaseTableHeaderContent,
   Breadcrumbs,
   ButtonFile,
+  ButtonUuidCopy,
   CardCheckbox,
   CardRelation,
   CompanySelector,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.77-beta8",
+  "version": "0.0.78",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",