@invopop/popui 0.0.108 → 0.1.2

package/dist/FormLayoutModal.svelte.d.ts

@@ -1,29 +1,4 @@
-/** @typedef {typeof __propDef.props}  FormLayoutModalProps */
-/** @typedef {typeof __propDef.events}  FormLayoutModalEvents */
-/** @typedef {typeof __propDef.slots}  FormLayoutModalSlots */
-export default class FormLayoutModal extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    footer: {};
-}> {
-}
-export type FormLayoutModalProps = typeof __propDef.props;
-export type FormLayoutModalEvents = typeof __propDef.events;
-export type FormLayoutModalSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        footer: {};
-    };
-};
-export {};
+import type { FormLayoutModalProps } from './types';
+declare const FormLayoutModal: import("svelte").Component<FormLayoutModalProps, {}, "">;
+type FormLayoutModal = ReturnType<typeof FormLayoutModal>;
+export default FormLayoutModal;

package/dist/GlobalSearch.svelte

@@ -1,39 +1,46 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-import { Search, Slash } from "@invopop/ui-icons";
-import { createEventDispatcher, onDestroy, onMount } from "svelte";
-import clsx from "clsx";
-import ShortcutWrapper from "./ShortcutWrapper.svelte";
-import { GLOBAL_SEARCH_KEY } from "./constants.js";
-import { isInputFocused } from "./helpers.js";
-const dispatch = createEventDispatcher();
-export let collapsed = false;
-$:
-  styles = clsx({
-    "space-x-1 w-full": !collapsed
-  });
-function onKeyDown(event) {
-  if (event.key !== GLOBAL_SEARCH_KEY) {
-    return;
-  }
-  if (isInputFocused()) {
-    return;
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Search, Slash } from '@invopop/ui-icons'
+  import { onDestroy, onMount } from 'svelte'
+  import clsx from 'clsx'
+  import ShortcutWrapper from './ShortcutWrapper.svelte'
+  import { GLOBAL_SEARCH_KEY } from './constants.js'
+  import { isInputFocused } from './helpers.js'
+  import type { GlobalSearchProps } from './types'
+
+  let { collapsed = false, onOpen }: GlobalSearchProps = $props()
+
+  let styles = $derived(
+    clsx({
+      'space-x-1 w-full': !collapsed
+    })
+  )
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key !== GLOBAL_SEARCH_KEY) {
+      return
+    }
+
+    // We allow to type the GLOBAL SEARCH KEY on text fields
+    if (isInputFocused()) {
+      return
+    }
+
+    onOpen?.()
   }
-  open();
-}
-function open() {
-  dispatch("open");
-}
-onMount(() => {
-  window.addEventListener("keydown", onKeyDown);
-});
-onDestroy(() => {
-  window.removeEventListener("keydown", onKeyDown);
-});
+
+  onMount(() => {
+    window.addEventListener('keydown', onKeyDown)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', onKeyDown)
+  })
 </script>
 
 <button
   class="{styles} flex items-center border pl-1.5 py-1.5 pr-2 border-white-10 bg-neutral-800/10 rounded-md"
-  on:click={() => open()}
+  onclick={() => onOpen?.()}
 >
   <Icon src={Search} class="w-4 h-4 text-white-70" />
   {#if !collapsed}

package/dist/GlobalSearch.svelte.d.ts

@@ -1,18 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        collapsed?: boolean | undefined;
-    };
-    events: {
-        open: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GlobalSearchProps = typeof __propDef.props;
-export type GlobalSearchEvents = typeof __propDef.events;
-export type GlobalSearchSlots = typeof __propDef.slots;
-export default class GlobalSearch extends SvelteComponent<GlobalSearchProps, GlobalSearchEvents, GlobalSearchSlots> {
-}
-export {};
+import type { GlobalSearchProps } from './types';
+declare const GlobalSearch: import("svelte").Component<GlobalSearchProps, {}, "">;
+type GlobalSearch = ReturnType<typeof GlobalSearch>;
+export default GlobalSearch;

package/dist/InputCheckbox.svelte

@@ -1,14 +1,23 @@
-<script>import { createEventDispatcher } from "svelte";
-export let id = Math.random().toString(36).slice(2, 7);
-export let checked = false;
-export let indeterminate = false;
-export let label = "";
-const dispatch = createEventDispatcher();
-function updateInput(event) {
-  const target = event.target;
-  checked = target.checked;
-  dispatch("change", checked);
-}
+<script lang="ts">
+  import type { InputCheckboxProps } from './types'
+
+  let {
+    id = Math.random().toString(36).slice(2, 7),
+    checked = $bindable(false),
+    indeterminate = false,
+    label = '',
+    onchange,
+    onclick,
+    ...rest
+  }: InputCheckboxProps = $props()
+
+  function updateInput(event: Event) {
+    const target = event.target as HTMLInputElement
+
+    checked = target.checked
+
+    onchange?.(checked)
+  }
 </script>
 
 <label
@@ -21,9 +30,9 @@ function updateInput(event) {
     {checked}
     {indeterminate}
     class="form-checkbox w-4 h-4 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 hover:border-neutral-300 group-hover:border-neutral-300 focus:ring-0 focus:ring-offset-0"
-    {...$$restProps}
-    on:change={updateInput}
-    on:click|stopPropagation
+    {...rest}
+    onchange={updateInput}
+    {onclick}
   />
   {#if label}
     <span>{label}</span>

package/dist/InputCheckbox.svelte.d.ts

@@ -1,23 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        checked?: boolean | undefined;
-        indeterminate?: boolean | undefined;
-        label?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputCheckboxProps = typeof __propDef.props;
-export type InputCheckboxEvents = typeof __propDef.events;
-export type InputCheckboxSlots = typeof __propDef.slots;
-export default class InputCheckbox extends SvelteComponent<InputCheckboxProps, InputCheckboxEvents, InputCheckboxSlots> {
-}
-export {};
+import type { InputCheckboxProps } from './types';
+declare const InputCheckbox: import("svelte").Component<InputCheckboxProps, {}, "checked">;
+type InputCheckbox = ReturnType<typeof InputCheckbox>;
+export default InputCheckbox;

package/dist/InputError.svelte

@@ -1,4 +1,7 @@
-<script>export let errorText = "";
+<script lang="ts">
+  import type { InputErrorProps } from './types'
+
+  let { errorText = '' }: InputErrorProps = $props()
 </script>
 
 <p class="mt-2 text-sm text-danger-500 flex items-center space-x-1">

package/dist/InputError.svelte.d.ts

@@ -1,16 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        errorText?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputErrorProps = typeof __propDef.props;
-export type InputErrorEvents = typeof __propDef.events;
-export type InputErrorSlots = typeof __propDef.slots;
-export default class InputError extends SvelteComponent<InputErrorProps, InputErrorEvents, InputErrorSlots> {
-}
-export {};
+import type { InputErrorProps } from './types';
+declare const InputError: import("svelte").Component<InputErrorProps, {}, "">;
+type InputError = ReturnType<typeof InputError>;
+export default InputError;

package/dist/InputLabel.svelte

@@ -1,5 +1,7 @@
-<script>export let id = "";
-export let label = "";
+<script lang="ts">
+  import type { InputLabelProps } from './types'
+
+  let { id = '', label = '', ...rest }: InputLabelProps = $props()
 </script>
 
-<label for={id} class="text-sm font-medium text-neutral-500 mb-2" {...$$restProps}>{label}</label>
+<label for={id} class="text-sm font-medium text-neutral-500 mb-2" {...rest}>{label}</label>

package/dist/InputLabel.svelte.d.ts

@@ -1,18 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        label?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputLabelProps = typeof __propDef.props;
-export type InputLabelEvents = typeof __propDef.events;
-export type InputLabelSlots = typeof __propDef.slots;
-export default class InputLabel extends SvelteComponent<InputLabelProps, InputLabelEvents, InputLabelSlots> {
-}
-export {};
+import type { InputLabelProps } from './types';
+declare const InputLabel: import("svelte").Component<InputLabelProps, {}, "">;
+type InputLabel = ReturnType<typeof InputLabel>;
+export default InputLabel;

package/dist/InputRadio.svelte

@@ -1,21 +1,27 @@
-<script>import { createEventDispatcher } from "svelte";
-import { dispatchWcEvent } from "./wcdispatch.js";
-export let checked = false;
-export let id = Math.random().toString(36).slice(2, 7);
-export let name = "";
-let el;
-const dispatch = createEventDispatcher();
-$:
-  if (el && checked) {
-    el.focus();
+<script lang="ts">
+  import type { InputRadioProps } from './types'
+
+  let {
+    checked = false,
+    id = Math.random().toString(36).slice(2, 7),
+    name = '',
+    onchange,
+    ...rest
+  }: InputRadioProps = $props()
+
+  let el: HTMLInputElement | undefined = $state()
+
+  $effect(() => {
+    if (el && checked) {
+      el.focus()
+    }
+  })
+
+  function updateInput(event: Event) {
+    const target = event.target as HTMLInputElement
+
+    onchange?.(target.checked)
   }
-function updateInput(event) {
-  if (event instanceof CustomEvent)
-    return;
-  const target = event.target;
-  dispatch("change", target.checked);
-  dispatchWcEvent(target, "change", target.checked);
-}
 </script>
 
 <input
@@ -25,6 +31,6 @@ function updateInput(event) {
   {name}
   {checked}
   class="form-radio h-5 w-5 border-neutral-200 text-workspace-accent focus:ring-0 focus:ring-offset-0 cursor-pointer"
-  {...$$restProps}
-  on:change={updateInput}
+  {...rest}
+  onchange={updateInput}
 />

package/dist/InputRadio.svelte.d.ts

@@ -1,21 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        id?: string | undefined;
-        name?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputRadioProps = typeof __propDef.props;
-export type InputRadioEvents = typeof __propDef.events;
-export type InputRadioSlots = typeof __propDef.slots;
-export default class InputRadio extends SvelteComponent<InputRadioProps, InputRadioEvents, InputRadioSlots> {
-}
-export {};
+import type { InputRadioProps } from './types';
+declare const InputRadio: import("svelte").Component<InputRadioProps, {}, "">;
+type InputRadio = ReturnType<typeof InputRadio>;
+export default InputRadio;

package/dist/InputSearch.svelte

@@ -1,44 +1,64 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { dispatchWcEvent } from "./wcdispatch.js";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { Search } from "@invopop/ui-icons";
-const dispatch = createEventDispatcher();
-const debounce = (target) => {
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    dispatch("input", target.value);
-    dispatchWcEvent(target, "input", target.value);
-  }, 750);
-};
-export let value = "";
-export let shortcut = "";
-export let placeholder = "";
-export let icon = Search;
-export let focusOnLoad = false;
-let input;
-let timer;
-export const focus = () => {
-  input.focus();
-};
-export const toggle = () => {
-  input === document.activeElement ? input.blur() : input.focus();
-};
-export const clear = () => {
-  value = "";
-};
-$:
-  shortcutKeys = shortcut.split("");
-function handleInput(event) {
-  if (event instanceof CustomEvent)
-    return;
-  const target = event.target;
-  debounce(target);
-}
-onMount(() => {
-  if (!focusOnLoad)
-    return;
-  input.focus();
-});
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Search } from '@invopop/ui-icons'
+  import type { InputSearchProps } from './types.js'
+
+  const debounce = (target: HTMLInputElement) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      oninput?.(target.value)
+    }, 750)
+  }
+
+  let {
+    value = $bindable(''),
+    shortcut = '',
+    placeholder = '',
+    icon = Search,
+    focusOnLoad = false,
+    oninput,
+    onclick,
+    onfocus,
+    onblur,
+    ...rest
+  }: InputSearchProps = $props()
+
+  let input: HTMLInputElement | undefined = $state()
+  let timer: ReturnType<typeof setTimeout>
+
+  export const focus = () => {
+    input?.focus()
+  }
+
+  export const blur = () => {
+    input?.blur()
+  }
+
+  export const toggle = () => {
+    input === document.activeElement ? blur() : focus()
+  }
+
+  export const clear = () => {
+    value = ''
+  }
+
+  let shortcutKeys = $derived(shortcut.split(''))
+
+  function handleInput(event: unknown) {
+    // If event is not a native event we skip the dispatch to avoid infinite loop
+    if (event instanceof CustomEvent) return
+
+    const target = (event as PointerEvent).target as HTMLInputElement
+
+    debounce(target)
+  }
+
+  onMount(() => {
+    if (!focusOnLoad) return
+
+    focus()
+  })
 </script>
 
 <div class="relative flex items-center">
@@ -49,11 +69,11 @@ onMount(() => {
     class="py-[5px] pl-7 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 placeholder-neutral-500 text-base outline-none tracking-tight caret-workspace-accent focus:border-workspace-accent focus:shadow-active"
     style:padding-right={`${shortcutKeys.length * 15 + 12}px`}
     {placeholder}
-    {...$$restProps}
-    on:input={handleInput}
-    on:focus={() => dispatch('focus')}
-    on:blur={(e) => dispatch('blur', e)}
-    on:click
+    {...rest}
+    oninput={handleInput}
+    {onfocus}
+    {onblur}
+    {onclick}
   />
   <Icon src={icon} class="absolute text-neutral-500 w-4 h-4 left-2" />
 

package/dist/InputSearch.svelte.d.ts

@@ -1,32 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | undefined;
-        shortcut?: string | undefined;
-        placeholder?: string | undefined;
-        icon?: any;
-        focusOnLoad?: boolean | undefined;
-        focus?: (() => void) | undefined;
-        toggle?: (() => void) | undefined;
-        clear?: (() => void) | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
-        input: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputSearchProps = typeof __propDef.props;
-export type InputSearchEvents = typeof __propDef.events;
-export type InputSearchSlots = typeof __propDef.slots;
-export default class InputSearch extends SvelteComponent<InputSearchProps, InputSearchEvents, InputSearchSlots> {
-    get focus(): () => void;
-    get toggle(): () => void;
-    get clear(): () => void;
-}
-export {};
+import type { InputSearchProps } from './types.js';
+declare const InputSearch: import("svelte").Component<InputSearchProps, {
+    focus: () => void;
+    blur: () => void;
+    toggle: () => void;
+    clear: () => void;
+}, "value">;
+type InputSearch = ReturnType<typeof InputSearch>;
+export default InputSearch;

package/dist/InputSelect.svelte

@@ -1,34 +1,37 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-import InputLabel from "./InputLabel.svelte";
-import { createEventDispatcher } from "svelte";
-import { resolveIcon } from "./helpers.js";
-import { dispatchWcEvent } from "./wcdispatch.js";
-import InputError from "./InputError.svelte";
-const dispatch = createEventDispatcher();
-export let id = Math.random().toString(36).slice(2, 7);
-export let name = "";
-export let label = "";
-export let disabled = false;
-export let value = "";
-export let icon = void 0;
-export let iconTheme = "default";
-export let options = [];
-export let placeholder = "Select one...";
-export let disablePlaceholder = true;
-export let errorText = "";
-let resolvedIcon;
-$: {
-  resolveIcon(icon).then((icon2) => {
-    resolvedIcon = icon2;
-  });
-}
-function handleChange(event) {
-  if (event instanceof CustomEvent)
-    return;
-  const target = event.target;
-  dispatch("change", target.value);
-  dispatchWcEvent(target, "change", target.value);
-}
+<script lang="ts">
+  import type { InputSelectProps } from './types.ts'
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
+  import InputLabel from './InputLabel.svelte'
+  import { resolveIcon } from './helpers.js'
+  import InputError from './InputError.svelte'
+
+  let {
+    id = Math.random().toString(36).slice(2, 7),
+    name = '',
+    label = '',
+    disabled = false,
+    value = $bindable(''),
+    icon = undefined,
+    iconTheme = 'default',
+    options = [],
+    placeholder = 'Select one...',
+    disablePlaceholder = true,
+    errorText = '',
+    onchange,
+    ...rest
+  }: InputSelectProps = $props()
+
+  let resolvedIcon: IconSource | undefined = $state()
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
+  function handleChange(event: Event) {
+    const target = (event as PointerEvent).target as HTMLSelectElement
+
+    onchange?.(target.value)
+  }
 </script>
 
 {#if label}
@@ -43,8 +46,8 @@ function handleChange(event) {
     class:pl-7={icon}
     class:pl-2={!icon}
     class="py-1.5 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 text-base pr-9 outline-none tracking-tight ui-select focus:border-workspace-accent focus:shadow-active"
-    {...$$restProps}
-    on:change={handleChange}
+    {...rest}
+    onchange={handleChange}
   >
     <option value="" disabled={disablePlaceholder}>{placeholder}</option>
     {#each options as option}

package/dist/InputSelect.svelte.d.ts

@@ -1,31 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { IconTheme, SelectOption } from './types.ts';
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        name?: string | undefined;
-        label?: string | undefined;
-        disabled?: boolean | undefined;
-        value?: string | undefined;
-        icon?: IconSource | string | undefined;
-        iconTheme?: IconTheme | undefined;
-        options?: SelectOption[] | undefined;
-        placeholder?: string | undefined;
-        disablePlaceholder?: boolean | undefined;
-        errorText?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputSelectProps = typeof __propDef.props;
-export type InputSelectEvents = typeof __propDef.events;
-export type InputSelectSlots = typeof __propDef.slots;
-export default class InputSelect extends SvelteComponent<InputSelectProps, InputSelectEvents, InputSelectSlots> {
-}
-export {};
+import type { InputSelectProps } from './types.ts';
+declare const InputSelect: import("svelte").Component<InputSelectProps, {}, "value">;
+type InputSelect = ReturnType<typeof InputSelect>;
+export default InputSelect;