@invopop/popui 0.0.1

package/dist/FeedViewer.svelte

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

package/dist/FeedViewer.svelte.d.ts

@@ -0,0 +1,21 @@
+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 {};

package/dist/FormLayoutModal.svelte

@@ -0,0 +1,8 @@
+<div class="flex flex-col max-w-lg w-128 py-8 px-6 gap-4">
+  <slot />
+  {#if $$slots.footer}
+    <div class="mt-4 pt-4 flex items-center justify-end gap-x-6 border-t">
+      <slot name="footer" />
+    </div>
+  {/if}
+</div>

package/dist/FormLayoutModal.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @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 {};

package/dist/GlobalSearch.svelte

@@ -0,0 +1,47 @@
+<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";
+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;
+  }
+  const activeElement = document.activeElement;
+  const isInputText = activeElement?.tagName === "INPUT" && ["text", "search"].includes(activeElement.type);
+  const isTextarea = activeElement?.tagName === "TEXTAREA";
+  if (isInputText || isTextarea) {
+    return;
+  }
+  open();
+}
+function open() {
+  dispatch("open");
+}
+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()}
+>
+  <Icon src={Search} class="w-4 h-4 text-white-70" />
+  {#if !collapsed}
+    <span class="text-white-40 text-sm flex-1 text-left tracking-normal">Search</span>
+    <ShortcutWrapper>
+      <Icon src={Slash} class="w-3 h-3 text-white-70" />
+    </ShortcutWrapper>
+  {/if}
+</button>

package/dist/GlobalSearch.svelte.d.ts

@@ -0,0 +1,18 @@
+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 {};

package/dist/InputCheckbox.svelte

@@ -0,0 +1,20 @@
+<script>import { createEventDispatcher } from "svelte";
+import { dispatchWcEvent } from "./wcdispatch.js";
+export let checked = false;
+const dispatch = createEventDispatcher();
+function updateInput(event) {
+  if (event instanceof CustomEvent)
+    return;
+  const target = event.target;
+  checked = target.checked;
+  dispatch("change", checked);
+  dispatchWcEvent(target, "change", checked);
+}
+</script>
+
+<input
+  type="checkbox"
+  {checked}
+  class="form-checkbox w-5 h-5 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 focus:ring-0 focus:ring-offset-0"
+  on:change={updateInput}
+/>

package/dist/InputCheckbox.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        checked?: boolean | undefined;
+    };
+    events: {
+        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 {};

package/dist/InputError.svelte

@@ -0,0 +1,14 @@
+<script>export let errorText = "";
+</script>
+
+<p class="mt-2 text-sm text-danger-500 flex items-center space-x-1">
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5ZM7.99999 9.35C7.66862 9.35 7.39999 9.08137 7.39999 8.75V4.75C7.39999 4.41863 7.66862 4.15 7.99999 4.15C8.33137 4.15 8.59999 4.41863 8.59999 4.75L8.59999 8.75C8.59999 9.08137 8.33136 9.35 7.99999 9.35ZM8.75 11C8.75 11.4142 8.41421 11.75 8 11.75C7.58579 11.75 7.25 11.4142 7.25 11C7.25 10.5858 7.58579 10.25 8 10.25C8.41421 10.25 8.75 10.5858 8.75 11Z"
+      fill="currentColor"
+    />
+  </svg>
+  <span>{errorText}</span>
+</p>

package/dist/InputError.svelte.d.ts

@@ -0,0 +1,16 @@
+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 {};

package/dist/InputLabel.svelte

@@ -0,0 +1,5 @@
+<script>export let id = "";
+export let label = "";
+</script>
+
+<label for={id} class="text-sm font-medium text-neutral-500 mb-2">{label}</label>

package/dist/InputLabel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        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 {};

package/dist/InputRadio.svelte

@@ -0,0 +1,27 @@
+<script>import { createEventDispatcher } from "svelte";
+import { dispatchWcEvent } from "./wcdispatch.js";
+export let checked = false;
+export let id = "";
+let el;
+const dispatch = createEventDispatcher();
+$:
+  if (el && checked) {
+    el.focus();
+  }
+function updateInput(event) {
+  if (event instanceof CustomEvent)
+    return;
+  const target = event.target;
+  dispatch("change", target.checked);
+  dispatchWcEvent(target, "change", target.checked);
+}
+</script>
+
+<input
+  bind:this={el}
+  type="radio"
+  {id}
+  {checked}
+  class="form-radio h-5 w-5 border-neutral-200 text-workspace-accent focus:ring-0 focus:ring-offset-0"
+  on:change={updateInput}
+/>

package/dist/InputRadio.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        checked?: boolean | undefined;
+        id?: 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 {};

package/dist/InputSearch.svelte

@@ -0,0 +1,69 @@
+<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>
+
+<div class="relative flex items-center">
+  <input
+    bind:this={input}
+    bind:value
+    type="search"
+    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}
+    on:input={handleInput}
+    on:focus={() => dispatch('focus')}
+    on:blur={(e) => dispatch('blur', e)}
+    on:click
+  />
+  <Icon src={icon} class="absolute text-neutral-500 w-4 h-4 left-2" />
+
+  {#if shortcut}
+    <div class="absolute top-1 right-0 flex py-1.5 pr-1.5 space-x-1">
+      {#each shortcutKeys as key}
+        <kbd
+          class="w-4 h-4 flex justify-center items-center rounded-md border border-neutral-200 bg-neutral-100 font-sans text-sm text-neutral-500 font-semibold"
+          >{key}</kbd
+        >
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/InputSearch.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        shortcut?: string | undefined;
+        placeholder?: string | undefined;
+        icon?: IconSource | undefined;
+        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 {};

package/dist/InputSelect.svelte

@@ -0,0 +1,75 @@
+<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>
+
+{#if label}
+  <InputLabel {id} {label} />
+{/if}
+<div class="relative">
+  <select
+    {id}
+    {name}
+    bind:value
+    {disabled}
+    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"
+    on:change={handleChange}
+  >
+    <option value="" disabled={disablePlaceholder}>{placeholder}</option>
+    {#each options as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+  {#if resolvedIcon}
+    <Icon
+      src={resolvedIcon}
+      theme={iconTheme}
+      class="h-4 w-4 absolute top-2 left-2 text-neutral-500"
+    />
+  {/if}
+</div>
+
+{#if errorText}
+  <InputError {errorText} />
+{/if}
+
+<style>
+  .ui-select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0iI0YzRjRGNiIvPgo8cGF0aCBkPSJNNi41IDguMjUwMDRMMTAgMTEuNzVMMTMuNSA4LjI1IiBzdHJva2U9IiMwMzA3MTIiIHN0cm9rZS13aWR0aD0iMS4xIi8+Cjwvc3ZnPg==');
+    background-repeat: no-repeat;
+    background-position: center right 6px;
+  }
+</style>

package/dist/InputSelect.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { IconTheme, SelectOption } from './types.ts';
+import { type IconSource } from '@steeze-ui/svelte-icon';
+declare const __propDef: {
+    props: {
+        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 {};

package/dist/InputText.svelte

@@ -0,0 +1,63 @@
+<script>import clsx from "clsx";
+import { createEventDispatcher, onMount } from "svelte";
+import InputLabel from "./InputLabel.svelte";
+import { dispatchWcEvent } from "./wcdispatch.js";
+import InputError from "./InputError.svelte";
+export let id = Math.random().toString(36).slice(2, 7);
+export let label = "";
+export let placeholder = "";
+export let errorText = "";
+export let disabled = false;
+export let value = "";
+export let focusOnLoad = false;
+let inputEl;
+let timer;
+const dispatch = createEventDispatcher();
+const debounce = (target) => {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    dispatch("input", target.value);
+    dispatchWcEvent(target, "input", target.value);
+  }, 750);
+};
+$:
+  inputStyles = clsx(
+    { "pointer-events-none bg-neutral-50": disabled },
+    {
+      "text-danger-500 border-danger-400 outline-danger-400": errorText
+    },
+    {
+      "border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active": !errorText
+    }
+  );
+function handleInput(event) {
+  if (event instanceof CustomEvent)
+    return;
+  const target = event.target;
+  debounce(target);
+}
+onMount(() => {
+  if (!focusOnLoad)
+    return;
+  inputEl.focus();
+});
+</script>
+
+{#if label}
+  <InputLabel {id} {label} />
+{/if}
+<input
+  {id}
+  bind:this={inputEl}
+  bind:value
+  type="text"
+  class="{inputStyles} py-1.5 px-2.5 border w-full rounded-md placeholder:text-neutral-500 text-base tracking-tight"
+  {placeholder}
+  readonly={disabled}
+  on:input={handleInput}
+  on:focus={() => dispatch('focus')}
+  on:blur={(e) => dispatch('blur', e)}
+/>
+{#if errorText}
+  <InputError {errorText} />
+{/if}

package/dist/InputText.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        errorText?: string | undefined;
+        disabled?: boolean | undefined;
+        value?: string | number | undefined;
+        focusOnLoad?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        input: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTextProps = typeof __propDef.props;
+export type InputTextEvents = typeof __propDef.events;
+export type InputTextSlots = typeof __propDef.slots;
+export default class InputText extends SvelteComponent<InputTextProps, InputTextEvents, InputTextSlots> {
+}
+export {};

package/dist/InputTextarea.svelte

@@ -0,0 +1,42 @@
+<script>import { createEventDispatcher } from "svelte";
+import InputLabel from "./InputLabel.svelte";
+import InputError from "./InputError.svelte";
+import clsx from "clsx";
+const dispatch = createEventDispatcher();
+export let id = Math.random().toString(36).slice(2, 7);
+export let label = "";
+export let placeholder = "";
+export let errorText = "";
+export let disabled = false;
+export let value = "";
+export let rows = 4;
+$:
+  inputStyles = clsx(
+    { "pointer-events-none bg-neutral-50": disabled },
+    {
+      "text-danger-500 border-danger-400 outline-danger-400": errorText
+    },
+    {
+      "border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active": !errorText
+    }
+  );
+function handleInput(event) {
+  value = event.target.value;
+  dispatch("input", value);
+}
+</script>
+
+<InputLabel {id} {label} />
+<textarea
+  {id}
+  {placeholder}
+  {value}
+  class="{inputStyles} py-1.5 px-3 border w-full rounded placeholder-neutral-500 text-base tracking-tight"
+  {disabled}
+  {rows}
+  on:input={handleInput}
+/>
+
+{#if errorText}
+  <InputError {errorText} />
+{/if}

package/dist/InputTextarea.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        errorText?: string | undefined;
+        disabled?: boolean | undefined;
+        value?: string | number | undefined;
+        rows?: number | undefined;
+    };
+    events: {
+        input: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTextareaProps = typeof __propDef.props;
+export type InputTextareaEvents = typeof __propDef.events;
+export type InputTextareaSlots = typeof __propDef.slots;
+export default class InputTextarea extends SvelteComponent<InputTextareaProps, InputTextareaEvents, InputTextareaSlots> {
+}
+export {};