@invopop/popui 0.0.103 → 0.1.1

package/dist/ButtonFile.svelte.d.ts

@@ -1,26 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type IconSource } from '@steeze-ui/svelte-icon';
-import type { StatusType } from './types.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        icon?: IconSource | undefined;
-        name?: string | undefined;
-        disabled?: boolean | undefined;
-        date?: string | undefined;
-        iconColor?: StatusType | undefined;
-    };
-    events: {
-        preview: CustomEvent<any>;
-        download: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ButtonFileProps = typeof __propDef.props;
-export type ButtonFileEvents = typeof __propDef.events;
-export type ButtonFileSlots = typeof __propDef.slots;
-export default class ButtonFile extends SvelteComponent<ButtonFileProps, ButtonFileEvents, ButtonFileSlots> {
-}
-export {};
+import type { ButtonFileProps } from './types.js';
+declare const ButtonFile: import("svelte").Component<ButtonFileProps, {}, "">;
+type ButtonFile = ReturnType<typeof ButtonFile>;
+export default ButtonFile;

package/dist/ButtonUuidCopy.svelte

@@ -1,22 +1,29 @@
-<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;
+<script lang="ts">
+  import { Duplicate } from '@invopop/ui-icons'
+  import BaseButton from './BaseButton.svelte'
+  import type { ButtonUuidCopyProps } from './types'
+
+  let {
+    uuid = '',
+    prefixLength = 4,
+    suffixLength = 4,
+    full = false,
+    disabled = false,
+    oncopied
+  }: 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
   }
-  const prefix = inputString.substring(0, prefixLength2);
-  const suffix = inputString.substring(inputString.length - suffixLength2);
-  return prefix + "..." + suffix;
-}
-$:
-  formattedUuid = full ? uuid : shortenString(uuid, prefixLength, suffixLength);
+
+  let formattedUuid = $derived(full ? uuid : shortenString(uuid, prefixLength, suffixLength))
 </script>
 
 <BaseButton
@@ -24,9 +31,9 @@ $:
   big
   icon={Duplicate}
   iconPosition="right"
-  on:click={async () => {
+  onclick={async () => {
     await navigator.clipboard.writeText(uuid)
-    dispatch('copied', uuid)
+    oncopied?.(uuid)
   }}
 >
   <span class="font-mono text-neutral-500">{formattedUuid}</span>

package/dist/ButtonUuidCopy.svelte.d.ts

@@ -1,22 +1,4 @@
-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 {};
+import type { ButtonUuidCopyProps } from './types';
+declare const ButtonUuidCopy: import("svelte").Component<ButtonUuidCopyProps, {}, "">;
+type ButtonUuidCopy = ReturnType<typeof ButtonUuidCopy>;
+export default ButtonUuidCopy;

package/dist/CardCheckbox.svelte

@@ -1,19 +1,28 @@
-<script>import clsx from "clsx";
-import { Icon } from "@steeze-ui/svelte-icon";
-import InputRadio from "./InputRadio.svelte";
-export let id = Math.random().toString(36).slice(2, 7);
-export let name = "";
-export let title = "";
-export let description = "";
-export let accentText = "";
-export let checked = false;
-export let icon = void 0;
-export let hideRadio = false;
-$:
-  styles = clsx(
-    { "border-workspace-accent shadow-active": checked },
-    { "border-neutral-200 hover:border-neutral-300": !checked }
-  );
+<script lang="ts">
+  import clsx from 'clsx'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import InputRadio from './InputRadio.svelte'
+  import type { CardCheckboxProps } from './types'
+
+  let {
+    id = Math.random().toString(36).slice(2, 7),
+    name = '',
+    title = '',
+    description = '',
+    accentText = '',
+    checked = false,
+    icon = undefined,
+    hideRadio = false,
+    footer,
+    onchange
+  }: CardCheckboxProps = $props()
+
+  let styles = $derived(
+    clsx(
+      { 'border-workspace-accent shadow-active': checked },
+      { 'border-neutral-200 hover:border-neutral-300': !checked }
+    )
+  )
 </script>
 
 <label for={id} class="{styles} border rounded-lg w-full text-left cursor-pointer block">
@@ -38,12 +47,12 @@ $:
     </div>
 
     <div class:hidden={hideRadio}>
-      <InputRadio {id} {name} {checked} on:change />
+      <InputRadio {id} {name} {checked} {onchange} />
     </div>
   </div>
-  {#if !!$$slots.footer}
+  {#if footer}
     <div class="bg-neutral-50 rounded-b-lg px-3 py-2.5 border-t border-neutral-100">
-      <slot name="footer" />
+      {@render footer?.()}
     </div>
   {/if}
 </label>

package/dist/CardCheckbox.svelte.d.ts

@@ -1,28 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        id?: string | undefined;
-        name?: string | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
-        accentText?: string | undefined;
-        checked?: boolean | undefined;
-        icon?: IconSource | undefined;
-        hideRadio?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        footer: {};
-    };
-};
-export type CardCheckboxProps = typeof __propDef.props;
-export type CardCheckboxEvents = typeof __propDef.events;
-export type CardCheckboxSlots = typeof __propDef.slots;
-export default class CardCheckbox extends SvelteComponent<CardCheckboxProps, CardCheckboxEvents, CardCheckboxSlots> {
-}
-export {};
+import type { CardCheckboxProps } from './types';
+declare const CardCheckbox: import("svelte").Component<CardCheckboxProps, {}, "">;
+type CardCheckbox = ReturnType<typeof CardCheckbox>;
+export default CardCheckbox;

package/dist/CardRelation.svelte

@@ -1,13 +1,14 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-import { ChevronRight } from "@invopop/ui-icons";
-import SeparatorHorizontal from "./SeparatorHorizontal.svelte";
-export let title = "";
-export let icon = void 0;
-export let items = [];
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { CardRelationProps } from './types.js'
+  import { ChevronRight } from '@invopop/ui-icons'
+  import SeparatorHorizontal from './SeparatorHorizontal.svelte'
+
+  let { title = '', icon = undefined, items = [], onclick }: CardRelationProps = $props()
 </script>
 
-<div class="border rounded-lg">
-  <button class="pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full" on:click>
+<div class="border border-neutral-100 rounded-lg">
+  <button class="pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full" {onclick}>
     <div class="flex items-center space-x-1.5">
       {#if icon}
         <Icon src={icon} class="h-4 w-4 text-neutral-500" />

package/dist/CardRelation.svelte.d.ts

@@ -1,22 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type IconSource } from '@steeze-ui/svelte-icon';
-import type { DataListItem } from './types.js';
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        icon?: IconSource | undefined;
-        items?: DataListItem[] | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CardRelationProps = typeof __propDef.props;
-export type CardRelationEvents = typeof __propDef.events;
-export type CardRelationSlots = typeof __propDef.slots;
-export default class CardRelation extends SvelteComponent<CardRelationProps, CardRelationEvents, CardRelationSlots> {
-}
-export {};
+import type { CardRelationProps } from './types.js';
+declare const CardRelation: import("svelte").Component<CardRelationProps, {}, "">;
+type CardRelation = ReturnType<typeof CardRelation>;
+export default CardRelation;

package/dist/CompanySelector.svelte

@@ -1,25 +1,27 @@
-<script>import ProfileAvatar from "./ProfileAvatar.svelte";
-import BaseDropdown from "./BaseDropdown.svelte";
-import DrawerContextWorkspace from "./DrawerContextWorkspace.svelte";
-import { createEventDispatcher } from "svelte";
-import { DoubleArrow } from "@invopop/ui-icons";
-import MenuItemCollapsible from "./MenuItemCollapsible.svelte";
-const dispatch = createEventDispatcher();
-export let companies = [];
-export let selectedCompany = null;
-let companyDropdown;
-let isOpen = false;
-export let collapsed = false;
-$:
-  name = selectedCompany?.name || "";
-$:
-  country = selectedCompany?.country || "";
-$:
-  picture = selectedCompany?.logo_url || "";
-$:
-  isSandbox = selectedCompany?.sandbox;
-$:
-  items = [
+<script lang="ts">
+  import ProfileAvatar from './ProfileAvatar.svelte'
+  import type { AnyProp, CompanySelectorProps, DrawerOption } from './types.js'
+  import BaseDropdown from './BaseDropdown.svelte'
+  import DrawerContextWorkspace from './DrawerContextWorkspace.svelte'
+  import { DoubleArrow } from '@invopop/ui-icons'
+  import MenuItemCollapsible from './MenuItemCollapsible.svelte'
+
+  let companyDropdown: BaseDropdown | undefined = $state()
+  let isOpen = $state(false)
+
+  let {
+    companies = [],
+    selectedCompany = $bindable(null),
+    collapsed = false,
+    onAdd,
+    onSelect
+  }: CompanySelectorProps = $props()
+
+  let name = $derived(selectedCompany?.name || '')
+  let country = $derived(selectedCompany?.country || '')
+  let picture = $derived(selectedCompany?.logo_url || '')
+  let isSandbox = $derived(selectedCompany?.sandbox)
+  let items = $derived([
     ...companies.map((c) => ({
       value: c.id,
       label: c.name,
@@ -28,16 +30,19 @@ $:
       picture: c.logo_url,
       sandbox: c.sandbox
     }))
-  ];
-function selectCompany(event) {
-  companyDropdown.toggle();
-  if (event.detail === "add") {
-    dispatch("add");
-    return;
+  ] as DrawerOption[])
+
+  function selectCompany(value: AnyProp) {
+    companyDropdown?.toggle()
+
+    if (value === 'add') {
+      onAdd?.()
+      return
+    }
+
+    selectedCompany = companies.find((c) => c.id === value) || null
+    onSelect?.(selectedCompany)
   }
-  selectedCompany = companies.find((c) => c.id === event.detail) || null;
-  dispatch("select", selectedCompany);
-}
 </script>
 
 <BaseDropdown
@@ -46,16 +51,17 @@ function selectCompany(event) {
   placement="bottom-start"
   fullWidth={!collapsed}
 >
-  <MenuItemCollapsible
-    slot="trigger"
-    {collapsed}
-    title={name}
-    subtitle={isSandbox ? 'Sandbox' : ''}
-    icon={collapsed ? undefined : DoubleArrow}
-    active={isOpen}
-    bold
-  >
-    <ProfileAvatar {name} {picture} {country} dark large />
-  </MenuItemCollapsible>
-  <DrawerContextWorkspace {items} on:click={selectCompany} />
+  {#snippet trigger()}
+    <MenuItemCollapsible
+      {collapsed}
+      title={name}
+      subtitle={isSandbox ? 'Sandbox' : ''}
+      icon={collapsed ? undefined : DoubleArrow}
+      active={isOpen}
+      bold
+    >
+      <ProfileAvatar {name} {picture} {country} dark large />
+    </MenuItemCollapsible>
+  {/snippet}
+  <DrawerContextWorkspace {items} onclick={selectCompany} />
 </BaseDropdown>

package/dist/CompanySelector.svelte.d.ts

@@ -1,22 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { Company } from './types.js';
-declare const __propDef: {
-    props: {
-        companies?: Company[] | undefined;
-        selectedCompany?: Company | null | undefined;
-        collapsed?: boolean | undefined;
-    };
-    events: {
-        add: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CompanySelectorProps = typeof __propDef.props;
-export type CompanySelectorEvents = typeof __propDef.events;
-export type CompanySelectorSlots = typeof __propDef.slots;
-export default class CompanySelector extends SvelteComponent<CompanySelectorProps, CompanySelectorEvents, CompanySelectorSlots> {
-}
-export {};
+import type { CompanySelectorProps } from './types.js';
+declare const CompanySelector: import("svelte").Component<CompanySelectorProps, {}, "selectedCompany">;
+type CompanySelector = ReturnType<typeof CompanySelector>;
+export default CompanySelector;

package/dist/CounterWorkflow.svelte

@@ -1,11 +1,15 @@
-<script>import clsx from "clsx";
-export let content;
-export let variant = "default";
-$:
-  styles = clsx({
-    "bg-white rounded-md": variant === "default",
-    rounded: variant === "transparent"
-  });
+<script lang="ts">
+  import clsx from 'clsx'
+  import type { CounterWorkflowProps } from './types'
+
+  let { content, variant = 'default' }: CounterWorkflowProps = $props()
+
+  let styles = $derived(
+    clsx({
+      'bg-white rounded-md': variant === 'default',
+      rounded: variant === 'transparent'
+    })
+  )
 </script>
 
 <div

package/dist/CounterWorkflow.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        content: number | string;
-        variant?: "default" | "transparent" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CounterWorkflowProps = typeof __propDef.props;
-export type CounterWorkflowEvents = typeof __propDef.events;
-export type CounterWorkflowSlots = typeof __propDef.slots;
-export default class CounterWorkflow extends SvelteComponent<CounterWorkflowProps, CounterWorkflowEvents, CounterWorkflowSlots> {
-}
-export {};
+import type { CounterWorkflowProps } from './types';
+declare const CounterWorkflow: import("svelte").Component<CounterWorkflowProps, {}, "">;
+type CounterWorkflow = ReturnType<typeof CounterWorkflow>;
+export default CounterWorkflow;

package/dist/DataListItem.svelte

@@ -1,22 +1,32 @@
-<script>import clsx from "clsx";
-export let label = "";
-export let value = "";
-export let monospaced = false;
-export let monospacedNums = false;
-export let fullWidth = false;
-$:
-  styles = clsx({
-    "font-mono": monospaced,
-    "slashed-zero tabular-nums lining-nums": monospacedNums,
-    "w-full": fullWidth
-  });
+<script lang="ts">
+  import clsx from 'clsx'
+  import type { DataListItemProps } from './types'
+
+  let {
+    label = '',
+    value = '',
+    monospaced = false,
+    monospacedNums = false,
+    fullWidth = false,
+    children
+  }: DataListItemProps = $props()
+
+  let styles = $derived(
+    clsx({
+      'font-mono': monospaced,
+      'slashed-zero tabular-nums lining-nums': monospacedNums,
+      'w-full': fullWidth
+    })
+  )
 </script>
 
 <div class="flex space-x-4 text-base items-center">
   <div class="text-neutral-500 min-w-[125px]">{label}</div>
   <div class="{styles} text-neutral-800 font-medium">
-    <slot>
+    {#if children}
+      {@render children()}
+    {:else}
       {value}
-    </slot>
+    {/if}
   </div>
 </div>

package/dist/DataListItem.svelte.d.ts

@@ -1,22 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        value?: string | undefined;
-        monospaced?: boolean | undefined;
-        monospacedNums?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DataListItemProps = typeof __propDef.props;
-export type DataListItemEvents = typeof __propDef.events;
-export type DataListItemSlots = typeof __propDef.slots;
-export default class DataListItem extends SvelteComponent<DataListItemProps, DataListItemEvents, DataListItemSlots> {
-}
-export {};
+import type { DataListItemProps } from './types';
+declare const DataListItem: import("svelte").Component<DataListItemProps, {}, "">;
+type DataListItem = ReturnType<typeof DataListItem>;
+export default DataListItem;