@invopop/popui 0.0.102 → 0.0.104

package/dist/DrawerContext.svelte

@@ -1,11 +1,9 @@
 <script>import DrawerContextItem from "./DrawerContextItem.svelte";
-import InputSearch from "./InputSearch.svelte";
 import { createEventDispatcher } from "svelte";
 import DrawerContextSeparator from "./DrawerContextSeparator.svelte";
 const dispatch = createEventDispatcher();
 export let items = [];
 export let multiple = false;
-export let searchable = false;
 export let widthClass = "w-60";
 $:
   selectedItems = items.filter((i) => i.selected);
@@ -22,13 +20,9 @@ function updateItem(event) {
 </script>
 
 <div
-  class="{widthClass} border border-neutral-200 py-1 rounded-md shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
+  class="{widthClass} border border-neutral-200 py-1 rounded-2xl shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
 >
-  {#if searchable}
-    <div class="px-2 mt-2 mb-1">
-      <InputSearch placeholder="Search" />
-    </div>
-  {/if}
+  <slot />
   <ul class="space-y-0.5 max-h-80 overflow-y-auto">
     {#each items as item}
       {#if item.separator}

package/dist/DrawerContext.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
     props: {
         items?: DrawerOption[] | undefined;
         multiple?: boolean | undefined;
-        searchable?: boolean | undefined;
         widthClass?: string | undefined;
     };
     events: {
@@ -13,7 +12,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type DrawerContextProps = typeof __propDef.props;
 export type DrawerContextEvents = typeof __propDef.events;

package/dist/DrawerContextItem.svelte

@@ -77,9 +77,9 @@ onMount(() => {
       {#if item.country}
         <span class="flex space-x-1 items-center">
           <BaseFlag country={item.country} width={10} />
-          <span class="text-sm text-neutral-500 tracking-normal"
-            >{getCountryName(item.country)}</span
-          >
+          <span class="text-sm text-neutral-500 tracking-normal">
+            {getCountryName(item.country)}
+          </span>
         </span>
       {/if}
     </div>
@@ -91,9 +91,9 @@ onMount(() => {
         }}
       />
     {:else if item.selected}
-      <Icon src={Tick} class="w-5 h-5 text-workspace-accent text-neutral-500" />
+      <Icon src={Tick} class="w-5 h-5 text-workspace-accent" />
     {:else if item.rightIcon}
-      <Icon src={item.rightIcon} class="w-5 h-5 text-neutral-800" />
+      <Icon src={item.rightIcon} class="w-5 h-5 text-neutral-400" />
     {/if}
   </div>
 </button>

package/dist/MenuItemCollapsible.svelte

@@ -24,7 +24,7 @@ $:
     <slot />
     {#if !collapsed}
       <div>
-        <div class="whitespace-nowrap max-w-[140px] truncate tracking-tight">{title}</div>
+        <div class="whitespace-nowrap max-w-[118px] truncate tracking-tight">{title}</div>
         {#if subtitle}
           <div class="text-sm font-medium text-yellow-600">{subtitle}</div>
         {/if}

package/dist/ProgressBar.svelte

@@ -0,0 +1,6 @@
+<script>export let percentage = 0;
+</script>
+
+<div class="w-full h-1 flex-shrink-0 rounded-full bg-neutral-200">
+  <div class="rounded-full h-1 bg-workspace-accent" style="width: {percentage}%;" />
+</div>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        percentage?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProgressBarProps = typeof __propDef.props;
+export type ProgressBarEvents = typeof __propDef.events;
+export type ProgressBarSlots = typeof __propDef.slots;
+export default class ProgressBar extends SvelteComponent<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -44,6 +44,7 @@ import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import Notification from './Notification.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
 import ProfileSelector from './ProfileSelector.svelte';
+import ProgressBar from './ProgressBar.svelte';
 import SectionLayout from './SectionLayout.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
@@ -74,4 +75,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, ButtonUuidCopy, CardCheckbox, CardRelation, ComboBox, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, 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, ComboBox, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, ProgressBar, 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

@@ -44,6 +44,7 @@ import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
 import ProfileSelector from './ProfileSelector.svelte'
+import ProgressBar from './ProgressBar.svelte'
 import SectionLayout from './SectionLayout.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
@@ -118,6 +119,7 @@ export {
   Notification,
   ProfileAvatar,
   ProfileSelector,
+  ProgressBar,
   SectionLayout,
   SeparatorHorizontal,
   ShortcutWrapper,

package/dist/tw.theme.d.ts

@@ -120,11 +120,18 @@ declare namespace _default {
                 400: string;
                 500: string;
             };
+            namespace banner {
+                export let sandbox: string;
+                let warning_1: string;
+                export { warning_1 as warning };
+                let danger_1: string;
+                export { danger_1 as danger };
+            }
         }
         namespace boxShadow {
             export let active: string;
-            let warning_1: string;
-            export { warning_1 as warning };
+            let warning_2: string;
+            export { warning_2 as warning };
         }
         namespace letterSpacing {
             let tightest: string;

package/dist/tw.theme.js

@@ -123,6 +123,11 @@ export default {
         300: 'rgba(136, 74, 190, 0.3)',
         400: 'rgba(136, 74, 190, 0.4)',
         500: '#884ABE'
+      },
+      banner: {
+        sandbox: '#D2F7CB',
+        warning: '#A04A12',
+        danger: '#B32530',
       }
     },
 

package/package.json

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