@invopop/popui 0.0.86 → 0.0.87

package/dist/ComboBox.svelte

@@ -0,0 +1,12 @@
+<script>import Select from "svelte-select-kit";
+import ComboBoxContent from "./ComboBoxContent.svelte";
+export let disabled = false;
+export let id = Math.random().toString(36).slice(2, 7);
+export let placeholder = "";
+export let value = "";
+export let options = [];
+</script>
+
+<Select.Root label={id}>
+  <ComboBoxContent {disabled} {placeholder} {options} bind:value />
+</Select.Root>

package/dist/ComboBox.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { SelectOption } from './types';
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        id?: string | undefined;
+        placeholder?: string | undefined;
+        value?: string | undefined;
+        options?: SelectOption[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboBoxProps = typeof __propDef.props;
+export type ComboBoxEvents = typeof __propDef.events;
+export type ComboBoxSlots = typeof __propDef.slots;
+export default class ComboBox extends SvelteComponent<ComboBoxProps, ComboBoxEvents, ComboBoxSlots> {
+}
+export {};

package/dist/ComboBoxContent.svelte

@@ -0,0 +1,33 @@
+<script>import Select, { getStore } from "svelte-select-kit";
+export let disabled = false;
+export let placeholder = "";
+export let value = "";
+export let options = [];
+const { matchCount } = getStore();
+</script>
+
+<Select.Input
+  bind:value
+  {disabled}
+  {placeholder}
+  class="py-1.5 px-2.5 border w-full rounded-md placeholder:text-neutral-500 text-base tracking-tight border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active"
+/>
+<Select.ListBox let:open>
+  {#if open}
+    <div
+      class="{$matchCount === 0
+        ? 'invisible'
+        : ''} mt-[3px] border border-neutral-200 bg-white shadow-lg rounded-md p-1 space-y-0.5"
+    >
+      {#each options as option}
+        <Select.Item
+          id={String(option.value)}
+          value={String(option.value)}
+          class="py-1.5 border border-transparent rounded pl-2 pr-1.5 flex items-center justify-start w-full data-[active=true]:bg-workspace-accent-100"
+        >
+          {option.label}
+        </Select.Item>
+      {/each}
+    </div>
+  {/if}
+</Select.ListBox>

package/dist/ComboBoxContent.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { SelectOption } from './types';
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
+        value?: string | undefined;
+        options?: SelectOption[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboBoxContentProps = typeof __propDef.props;
+export type ComboBoxContentEvents = typeof __propDef.events;
+export type ComboBoxContentSlots = typeof __propDef.slots;
+export default class ComboBoxContent extends SvelteComponent<ComboBoxContentProps, ComboBoxContentEvents, ComboBoxContentSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import ButtonFile from './ButtonFile.svelte';
 import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
+import ComboBox from './ComboBox.svelte';
 import CompanySelector from './CompanySelector.svelte';
 import CounterWorkflow from './CounterWorkflow.svelte';
 import DataListItem from './DataListItem.svelte';
@@ -71,4 +72,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, 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, ComboBox, 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

@@ -12,6 +12,7 @@ import ButtonFile from './ButtonFile.svelte'
 import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
+import ComboBox from './ComboBox.svelte'
 import CompanySelector from './CompanySelector.svelte'
 import CounterWorkflow from './CounterWorkflow.svelte'
 import DataListItem from './DataListItem.svelte'
@@ -83,6 +84,7 @@ export {
   ButtonUuidCopy,
   CardCheckbox,
   CardRelation,
+  ComboBox,
   CompanySelector,
   CounterWorkflow,
   DataListItem,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -102,6 +102,7 @@
     "svelte-floating-ui": "^1.5.8",
     "svelte-intersection-observer-action": "^0.0.4",
     "svelte-portal": "^2.2.1",
+    "svelte-select-kit": "^0.1.1",
     "svelte-transition": "^0.0.10",
     "svelte-viewport-info": "^1.0.2",
     "tailwind-variants": "^1.0.0",