@invopop/popui 0.0.104 → 0.1.1

package/dist/DropdownSelect.svelte.d.ts

@@ -1,27 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { AnyProp, DrawerOption, IconTheme } from './types.ts';
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        value?: AnyProp | undefined;
-        icon?: IconSource | string | undefined;
-        iconTheme?: IconTheme | undefined;
-        options?: DrawerOption[] | undefined;
-        placeholder?: string | undefined;
-        multiple?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        widthClass?: string | undefined;
-    };
-    events: {
-        selected: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DropdownSelectProps = typeof __propDef.props;
-export type DropdownSelectEvents = typeof __propDef.events;
-export type DropdownSelectSlots = typeof __propDef.slots;
-export default class DropdownSelect extends SvelteComponent<DropdownSelectProps, DropdownSelectEvents, DropdownSelectSlots> {
-}
-export {};
+import type { DropdownSelectProps } from './types.ts';
+declare const DropdownSelect: import("svelte").Component<DropdownSelectProps, {}, "value">;
+type DropdownSelect = ReturnType<typeof DropdownSelect>;
+export default DropdownSelect;

package/dist/EmptyStateIcon.svelte

@@ -1,9 +1,15 @@
-<script>import IconEmpty from "./svg/IconEmpty.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-export let icon = void 0;
-export let title = "";
-export let description = "";
-export let check = false;
+<script lang="ts">
+  import IconEmpty from './svg/IconEmpty.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { EmptyStateIconProps } from './types'
+
+  let {
+    icon = undefined,
+    title = '',
+    description = '',
+    check = false,
+    children
+  }: EmptyStateIconProps = $props()
 </script>
 
 <div
@@ -41,6 +47,6 @@ export let check = false;
   <div class="space-y-0.5">
     <h4 class="font-medium text-base text-neutral-800 tracking-tight">{title}</h4>
     <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
-    <p><slot /></p>
+    <p>{@render children?.()}</p>
   </div>
 </div>

package/dist/EmptyStateIcon.svelte.d.ts

@@ -1,22 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        icon?: IconSource | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
-        check?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type EmptyStateIconProps = typeof __propDef.props;
-export type EmptyStateIconEvents = typeof __propDef.events;
-export type EmptyStateIconSlots = typeof __propDef.slots;
-export default class EmptyStateIcon extends SvelteComponent<EmptyStateIconProps, EmptyStateIconEvents, EmptyStateIconSlots> {
-}
-export {};
+import type { EmptyStateIconProps } from './types';
+declare const EmptyStateIcon: import("svelte").Component<EmptyStateIconProps, {}, "">;
+type EmptyStateIcon = ReturnType<typeof EmptyStateIcon>;
+export default EmptyStateIcon;

package/dist/EmptyStateIllustration.svelte

@@ -1,28 +1,36 @@
-<script>import BgPattern from "./svg/BgPattern.svelte";
-import IconContact from "./svg/IconContact.svelte";
-import IconInvoice from "./svg/IconInvoice.svelte";
-import IconProduct from "./svg/IconProduct.svelte";
-import IconFile from "./svg/IconFile.svelte";
-import IconPdf from "./svg/IconPdf.svelte";
-import IconNoResults from "./svg/IconNoResults.svelte";
-export let icon = void 0;
-export let title = "";
-export let description = "";
-$:
-  iconComponent = getComponent(icon);
-function getComponent(icon2) {
-  if (!icon2)
-    return void 0;
-  const icons = {
-    invoices: IconInvoice,
-    contacts: IconContact,
-    products: IconProduct,
-    file: IconFile,
-    pdf: IconPdf,
-    "no-results": IconNoResults
-  };
-  return icons[icon2];
-}
+<script lang="ts">
+  import type { EmptyStateIcon, EmptyStateIllustrationProps } from './types.js'
+  import BgPattern from './svg/BgPattern.svelte'
+  import IconContact from './svg/IconContact.svelte'
+  import IconInvoice from './svg/IconInvoice.svelte'
+  import IconProduct from './svg/IconProduct.svelte'
+  import IconFile from './svg/IconFile.svelte'
+  import IconPdf from './svg/IconPdf.svelte'
+  import IconNoResults from './svg/IconNoResults.svelte'
+  import type { SvelteComponent } from 'svelte'
+
+  let {
+    icon = undefined,
+    title = '',
+    description = '',
+    children
+  }: EmptyStateIllustrationProps = $props()
+
+  function getComponent(icon: EmptyStateIcon | undefined) {
+    if (!icon) return undefined
+
+    const icons: Record<EmptyStateIcon, unknown> = {
+      invoices: IconInvoice,
+      contacts: IconContact,
+      products: IconProduct,
+      file: IconFile,
+      pdf: IconPdf,
+      'no-results': IconNoResults
+    }
+
+    return icons[icon] as typeof SvelteComponent
+  }
+  let iconComponent = $derived(getComponent(icon))
 </script>
 
 <div
@@ -30,29 +38,29 @@ function getComponent(icon2) {
   aria-label={title}
 >
   {#if iconComponent}
+    {@const SvelteComponent_1 = iconComponent}
+    {@const SvelteComponent_2 = iconComponent}
+    {@const SvelteComponent_3 = iconComponent}
     <div class="relative h-[120px] w-full max-w-sm">
       <div class="absolute top-0 left-0">
         <BgPattern />
       </div>
-      <svelte:component
-        this={iconComponent}
+      <SvelteComponent_1
         classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] -ml-[40px] rotate-[-8deg] mt-0.5 z-20 w-[86px] h-[104px]"
       />
-      <svelte:component
-        this={iconComponent}
+      <SvelteComponent_2
         classes="{icon === 'no-results'
           ? 'text-neutral-400'
           : 'text-workspace-accent'} absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-30 w-[97px] h-[117px]"
       />
-      <svelte:component
-        this={iconComponent}
+      <SvelteComponent_3
         classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] ml-[40px] rotate-[8deg] mt-0.5 z-20 w-[86px] h-[104px]"
       />
     </div>
   {/if}
   <div class="space-y-0.5">
-    <h4 class="font-medium text-base text-neutral-800 text-base tracking-tight">{title}</h4>
+    <h4 class="font-medium text-neutral-800 text-base tracking-tight">{title}</h4>
     <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
-    <p><slot /></p>
+    <p>{@render children?.()}</p>
   </div>
 </div>

package/dist/EmptyStateIllustration.svelte.d.ts

@@ -1,21 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { EmptyStateIcon } from './types.js';
-declare const __propDef: {
-    props: {
-        icon?: EmptyStateIcon | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type EmptyStateIllustrationProps = typeof __propDef.props;
-export type EmptyStateIllustrationEvents = typeof __propDef.events;
-export type EmptyStateIllustrationSlots = typeof __propDef.slots;
-export default class EmptyStateIllustration extends SvelteComponent<EmptyStateIllustrationProps, EmptyStateIllustrationEvents, EmptyStateIllustrationSlots> {
-}
-export {};
+import type { EmptyStateIllustrationProps } from './types.js';
+declare const EmptyStateIllustration: import("svelte").Component<EmptyStateIllustrationProps, {}, "">;
+type EmptyStateIllustration = ReturnType<typeof EmptyStateIllustration>;
+export default EmptyStateIllustration;

package/dist/FeedEvents.svelte

@@ -1,5 +1,8 @@
-<script>import TagStatus from "./TagStatus.svelte";
-export let events = [];
+<script lang="ts">
+  import TagStatus from './TagStatus.svelte'
+  import type { FeedEventsProps } from './types.js'
+
+  let { events = [] }: FeedEventsProps = $props()
 </script>
 
 <div class="border border-neutral-100 bg-neutral-50 rounded">

package/dist/FeedEvents.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { FeedEvent } from './types.js';
-declare const __propDef: {
-    props: {
-        events?: FeedEvent[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedEventsProps = typeof __propDef.props;
-export type FeedEventsEvents = typeof __propDef.events;
-export type FeedEventsSlots = typeof __propDef.slots;
-export default class FeedEvents extends SvelteComponent<FeedEventsProps, FeedEventsEvents, FeedEventsSlots> {
-}
-export {};
+import type { FeedEventsProps } from './types.js';
+declare const FeedEvents: import("svelte").Component<FeedEventsProps, {}, "">;
+type FeedEvents = ReturnType<typeof FeedEvents>;
+export default FeedEvents;

package/dist/FeedIconEvent.svelte

@@ -1,6 +1,8 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-export let icon = void 0;
-export let iconTheme = "default";
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { FeedIconEventProps } from './types.js'
+
+  let { icon = undefined, iconTheme = 'default' }: FeedIconEventProps = $props()
 </script>
 
 <div class="relative py-0.5 mt-2">

package/dist/FeedIconEvent.svelte.d.ts

@@ -1,19 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type IconSource } from '@steeze-ui/svelte-icon';
-import type { IconTheme } from './types.js';
-declare const __propDef: {
-    props: {
-        icon?: IconSource | undefined;
-        iconTheme?: IconTheme | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedIconEventProps = typeof __propDef.props;
-export type FeedIconEventEvents = typeof __propDef.events;
-export type FeedIconEventSlots = typeof __propDef.slots;
-export default class FeedIconEvent extends SvelteComponent<FeedIconEventProps, FeedIconEventEvents, FeedIconEventSlots> {
-}
-export {};
+import type { FeedIconEventProps } from './types.js';
+declare const FeedIconEvent: import("svelte").Component<FeedIconEventProps, {}, "">;
+type FeedIconEvent = ReturnType<typeof FeedIconEvent>;
+export default FeedIconEvent;

package/dist/FeedIconStatus.svelte

@@ -1,20 +1,25 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-import { Alert, Failure, Queue, Running, Success, CheckBadge, Skip } from "@invopop/ui-icons";
-export let status;
-$:
-  iconStatus = getIconStatus(status);
-function getIconStatus(status2) {
-  const icons = {
-    failure: Failure,
-    success: Success,
-    run: Running,
-    queued: Queue,
-    alert: Alert,
-    skip: Skip,
-    signed: CheckBadge
-  };
-  return icons[status2];
-}
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { FeddIconStatusProps, FeedItemStatus } from './types.ts'
+  import { Alert, Failure, Queue, Running, Success, CheckBadge, Skip } from '@invopop/ui-icons'
+  import type { IconSource } from '@steeze-ui/heroicons'
+
+  let { status }: FeddIconStatusProps = $props()
+
+  function getIconStatus(status: FeedItemStatus): IconSource | undefined {
+    const icons: Record<FeedItemStatus, IconSource> = {
+      failure: Failure,
+      success: Success,
+      run: Running,
+      queued: Queue,
+      alert: Alert,
+      skip: Skip,
+      signed: CheckBadge
+    }
+
+    return icons[status]
+  }
+  let iconStatus = $derived(getIconStatus(status))
 </script>
 
 {#if iconStatus}
@@ -22,5 +27,5 @@ function getIconStatus(status2) {
     <Icon src={iconStatus} class="h-4 w-4 flex-shrink-0" />
   </div>
 {:else}
-  <div class="w-4 h-4 flex-shrink-0 bg-neutral-200 rounded-full" />
+  <div class="w-4 h-4 flex-shrink-0 bg-neutral-200 rounded-full"></div>
 {/if}

package/dist/FeedIconStatus.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { FeedItemStatus } from './types.ts';
-declare const __propDef: {
-    props: {
-        status: FeedItemStatus;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedIconStatusProps = typeof __propDef.props;
-export type FeedIconStatusEvents = typeof __propDef.events;
-export type FeedIconStatusSlots = typeof __propDef.slots;
-export default class FeedIconStatus extends SvelteComponent<FeedIconStatusProps, FeedIconStatusEvents, FeedIconStatusSlots> {
-}
-export {};
+import type { FeddIconStatusProps } from './types.ts';
+declare const FeedIconStatus: import("svelte").Component<FeddIconStatusProps, {}, "">;
+type FeedIconStatus = ReturnType<typeof FeedIconStatus>;
+export default FeedIconStatus;

package/dist/FeedItem.svelte

@@ -1,33 +1,38 @@
-<script>import FeedIconEvent from "./FeedIconEvent.svelte";
-import FeedIconStatus from "./FeedIconStatus.svelte";
-import { createEventDispatcher } from "svelte";
-import BaseButton from "./BaseButton.svelte";
-import ProfileAvatar from "./ProfileAvatar.svelte";
-const dispatch = createEventDispatcher();
-export let status = void 0;
-export let icon = void 0;
-export let title = "";
-export let date = void 0;
-export let hasNext = false;
-export let slug = "";
-export let viewable = false;
-export let viewableText = "View";
-export let user = void 0;
-export let type = "";
-export let extraText = "";
-const dateOptions = {
-  year: "numeric",
-  month: "short",
-  day: "numeric",
-  hour: "2-digit",
-  minute: "2-digit",
-  hour12: false
-};
+<script lang="ts">
+  import type { FeedItemProps } from './types.ts'
+  import FeedIconEvent from './FeedIconEvent.svelte'
+  import FeedIconStatus from './FeedIconStatus.svelte'
+  import BaseButton from './BaseButton.svelte'
+  import ProfileAvatar from './ProfileAvatar.svelte'
+
+  let {
+    status = undefined,
+    icon = undefined,
+    title = '',
+    date = undefined,
+    hasNext = false,
+    slug = '',
+    viewable = false,
+    viewableText = 'View',
+    user = undefined,
+    type = '',
+    extraText = '',
+    onView
+  }: FeedItemProps = $props()
+
+  const dateOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  } as Intl.DateTimeFormatOptions
 </script>
 
 <div id={`feed-item-${slug}`} class="relative text-left w-full min-w-[344px]">
   {#if hasNext && icon}
-    <span class="absolute bottom-[-20px] left-2 border-l border-neutral-100 w-px h-[58px]" />
+    <span class="absolute bottom-[-20px] left-2 border-l border-neutral-100 w-px h-[58px]"></span>
   {/if}
   <div class="flex items-start justify-between space-x-2 py-3">
     <div class="relative">
@@ -76,8 +81,8 @@ const dateOptions = {
       <BaseButton
         small
         variant="secondary"
-        on:click={() => {
-          dispatch('view', type)
+        onclick={() => {
+          onView?.(type)
         }}
       >
         {viewableText}

package/dist/FeedItem.svelte.d.ts

@@ -1,30 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { IconSource } from '@steeze-ui/svelte-icon';
-import type { FeedItemStatus, FeedItemUser } from './types.ts';
-declare const __propDef: {
-    props: {
-        status?: FeedItemStatus | undefined;
-        icon?: IconSource | undefined;
-        title?: string | undefined;
-        date?: Date | undefined;
-        hasNext?: boolean | undefined;
-        slug?: string | undefined;
-        viewable?: boolean | undefined;
-        viewableText?: string | undefined;
-        user?: FeedItemUser | undefined;
-        type?: string | undefined;
-        extraText?: string | undefined;
-    };
-    events: {
-        view: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedItemProps = typeof __propDef.props;
-export type FeedItemEvents = typeof __propDef.events;
-export type FeedItemSlots = typeof __propDef.slots;
-export default class FeedItem extends SvelteComponent<FeedItemProps, FeedItemEvents, FeedItemSlots> {
-}
-export {};
+import type { FeedItemProps } from './types.ts';
+declare const FeedItem: import("svelte").Component<FeedItemProps, {}, "">;
+type FeedItem = ReturnType<typeof FeedItem>;
+export default FeedItem;

package/dist/FeedItemDetail.svelte

@@ -1,14 +1,21 @@
-<script>import FeedIconStatus from "./FeedIconStatus.svelte";
-import UuidCopy from "./UuidCopy.svelte";
-import FeedEvents from "./FeedEvents.svelte";
-import { slide } from "svelte/transition";
-import SeparatorHorizontal from "./SeparatorHorizontal.svelte";
-export let status = void 0;
-export let title = "";
-export let uuid = "";
-export let events = [];
-export let idLabel = "ID:";
-let open = false;
+<script lang="ts">
+  import type { FeedItemDetailProps } from './types.ts'
+  import FeedIconStatus from './FeedIconStatus.svelte'
+  import UuidCopy from './UuidCopy.svelte'
+  import FeedEvents from './FeedEvents.svelte'
+  import { slide } from 'svelte/transition'
+  import SeparatorHorizontal from './SeparatorHorizontal.svelte'
+
+  let {
+    status = undefined,
+    title = '',
+    uuid = '',
+    events = [],
+    idLabel = 'ID:',
+    onCopied
+  }: FeedItemDetailProps = $props()
+
+  let open = $state(false)
 </script>
 
 <div class="w-full rounded-lg border border-neutral-100">
@@ -22,7 +29,7 @@ let open = false;
   <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">
     <span class="text-sm text-neutral-500 whitespace-nowrap">{idLabel}</span>
     {#if uuid}
-      <UuidCopy {uuid} full small on:copied />
+      <UuidCopy {uuid} full small {onCopied} />
     {/if}
   </div>
   {#if events.length}
@@ -30,7 +37,8 @@ let open = false;
     <div class="px-3 py-2 text-sm text-neutral-500 flex items-center justify-between">
       <span>Logs</span>
       <button
-        on:click={() => {
+        aria-label="Toggle details"
+        onclick={() => {
           open = !open
         }}
       >

package/dist/FeedItemDetail.svelte.d.ts

@@ -1,23 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { FeedEvent, FeedItemStatus } from './types.ts';
-declare const __propDef: {
-    props: {
-        status?: FeedItemStatus | undefined;
-        title?: string | undefined;
-        uuid?: string | undefined;
-        events?: FeedEvent[] | undefined;
-        idLabel?: string | undefined;
-    };
-    events: {
-        copied: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedItemDetailProps = typeof __propDef.props;
-export type FeedItemDetailEvents = typeof __propDef.events;
-export type FeedItemDetailSlots = typeof __propDef.slots;
-export default class FeedItemDetail extends SvelteComponent<FeedItemDetailProps, FeedItemDetailEvents, FeedItemDetailSlots> {
-}
-export {};
+import type { FeedItemDetailProps } from './types.ts';
+declare const FeedItemDetail: import("svelte").Component<FeedItemDetailProps, {}, "">;
+type FeedItemDetail = ReturnType<typeof FeedItemDetail>;
+export default FeedItemDetail;

package/dist/FeedViewer.svelte

@@ -1,19 +1,12 @@
-<script>import { createEventDispatcher } from "svelte";
-import FeedItem from "./FeedItem.svelte";
-const dispatch = createEventDispatcher();
-export let items = [];
+<script lang="ts">
+  import FeedItem from './FeedItem.svelte'
+  import type { FeedViewerProps } from './types.js'
+
+  let { items = [], onView }: FeedViewerProps = $props()
 </script>
 
 <div>
   {#each items as item, i (i)}
-    <FeedItem
-      {...item}
-      hasNext={i < items.length - 1}
-      on:open
-      on:copied
-      on:view={() => {
-        dispatch('view', item)
-      }}
-    />
+    <FeedItem {...item} hasNext={i < items.length - 1} {onView} />
   {/each}
 </div>

package/dist/FeedViewer.svelte.d.ts

@@ -1,21 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { FeedItemProps } from './types.js';
-declare const __propDef: {
-    props: {
-        items?: FeedItemProps[] | undefined;
-    };
-    events: {
-        open: CustomEvent<any>;
-        copied: CustomEvent<any>;
-        view: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedViewerProps = typeof __propDef.props;
-export type FeedViewerEvents = typeof __propDef.events;
-export type FeedViewerSlots = typeof __propDef.slots;
-export default class FeedViewer extends SvelteComponent<FeedViewerProps, FeedViewerEvents, FeedViewerSlots> {
-}
-export {};
+import type { FeedViewerProps } from './types.js';
+declare const FeedViewer: import("svelte").Component<FeedViewerProps, {}, "">;
+type FeedViewer = ReturnType<typeof FeedViewer>;
+export default FeedViewer;

package/dist/FormLayoutModal.svelte

@@ -1,8 +1,14 @@
+<script lang="ts">
+  import type { FormLayoutModalProps } from './types'
+
+  let { children, footer }: FormLayoutModalProps = $props()
+</script>
+
 <div class="flex flex-col max-w-lg w-128 py-8 px-6 gap-4">
-  <slot />
-  {#if $$slots.footer}
+  {@render children?.()}
+  {#if footer}
     <div class="mt-4 pt-4 flex items-center justify-end gap-x-6 border-t">
-      <slot name="footer" />
+      {@render footer?.()}
     </div>
   {/if}
 </div>