@invopop/popui 0.0.1

package/dist/InputToggle.svelte

@@ -0,0 +1,33 @@
+<script>import clsx from "clsx";
+import { createEventDispatcher } from "svelte";
+import { createSwitch } from "svelte-headlessui";
+import { dispatchWcEvent } from "./wcdispatch.js";
+const dispatch = createEventDispatcher();
+const sw = createSwitch({ label: "Set Preference" });
+let rootEl;
+export let checked = false;
+$:
+  $sw.checked = checked;
+$:
+  togleStyles = clsx({ "bg-gray-200": !$sw.checked }, { "bg-workspace-accent": $sw.checked });
+function handleChange() {
+  dispatch("change", $sw.checked);
+  dispatchWcEvent(rootEl, "change", $sw.checked);
+}
+</script>
+
+<div bind:this={rootEl} class="flex w-full flex-col items-center justify-center">
+  <button
+    class="{togleStyles} relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 focus:ring-offset-0"
+    use:sw.toggle
+    on:click={handleChange}
+  >
+    <span class="sr-only">Use setting</span>
+    <span
+      aria-hidden="true"
+      class="{$sw.checked
+        ? 'translate-x-3'
+        : 'translate-x-0'} pointer-events-none inline-block h-4 w-4 transform rounded bg-white shadow ring-0 transition duration-200 ease-in-out"
+    />
+  </button>
+</div>

package/dist/InputToggle.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 InputToggleProps = typeof __propDef.props;
+export type InputToggleEvents = typeof __propDef.events;
+export type InputToggleSlots = typeof __propDef.slots;
+export default class InputToggle extends SvelteComponent<InputToggleProps, InputToggleEvents, InputToggleSlots> {
+}
+export {};

package/dist/MenuItem.svelte

@@ -0,0 +1,141 @@
+<script>import { flip, shift, offset } from "svelte-floating-ui/dom";
+import { createFloatingActions } from "svelte-floating-ui";
+import clsx from "clsx";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { ChevronDown, ChevronRight } from "@invopop/ui-icons";
+import { SubFolder } from "@invopop/ui-icons";
+import { createEventDispatcher } from "svelte";
+import { resolveIcon } from "./helpers.js";
+import DrawerContext from "./DrawerContext.svelte";
+const [floatingRef, floatingContent] = createFloatingActions({
+  strategy: "absolute",
+  placement: "bottom-start",
+  middleware: [offset(-4), flip(), shift()]
+});
+export let label = "";
+export let url = "";
+export let isFolderItem = false;
+export let collapsable = false;
+export let open = false;
+export let active = false;
+export let collapsedSidebar = false;
+export let iconTheme = "default";
+export let icon = void 0;
+export let children = void 0;
+let resolvedIcon;
+let hovered = false;
+let highlight = false;
+let leaveHoverTimeout = null;
+const dispatch = createEventDispatcher();
+$: {
+  resolveIcon(icon).then((icon2) => {
+    resolvedIcon = icon2;
+  });
+}
+$:
+  itemStyles = clsx(
+    { "text-white font-medium": !isFolderItem },
+    { "text-white-40": isFolderItem && !active },
+    { "bg-white-10": active },
+    { "border border-transparent hover:border-white-5 group p-2": collapsedSidebar },
+    { "w-full px-2 py-1.5": !collapsedSidebar },
+    {
+      "bg-white-10 border-white-5 text-white": active
+    },
+    { "hover:bg-white-5 focus:bg-white-10": !active }
+  );
+$:
+  iconStyles = clsx({ "group-hover:text-white": collapsedSidebar });
+$:
+  wrapperStyles = clsx({
+    "ml-4 border-l border-white-10 pl-2 pt-0.5 relative": isFolderItem
+  });
+$:
+  items = [
+    { label, value: url, selected: active, icon: resolvedIcon },
+    ...(children || []).map((c) => ({
+      label: c.label || "",
+      value: c.url || "",
+      selected: c.active,
+      icon: SubFolder
+    }))
+  ];
+function handleClick() {
+  if (!url && collapsable) {
+    open = !open;
+  }
+  dispatch("click", url);
+}
+function handleClickChild(event) {
+  hovered = false;
+  dispatch("click", event.detail);
+}
+function handleHover() {
+  highlight = true;
+  if (leaveHoverTimeout) {
+    clearTimeout(leaveHoverTimeout);
+  }
+  hovered = true;
+}
+function handleBlur() {
+  highlight = false;
+  leaveHoverTimeout = setTimeout(() => {
+    hovered = false;
+  }, 200);
+}
+</script>
+
+<div class={wrapperStyles}>
+  {#if isFolderItem && (highlight || active)}
+    <div class="border-l border-white h-3 w-px absolute top-[14px] left-0 -m-px" />
+  {/if}
+  <button
+    use:floatingRef
+    on:mouseenter={handleHover}
+    on:mouseleave={handleBlur}
+    on:click={handleClick}
+    title={label}
+    class="{itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-md"
+  >
+    <span class="flex items-center space-x-2">
+      {#if resolvedIcon}
+        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-white-70" />
+      {/if}
+      {#if !collapsedSidebar}
+        <span class="whitespace-nowrap tracking-normal">{label}</span>
+      {/if}
+    </span>
+    {#if collapsable && !collapsedSidebar}
+      <button
+        on:click|stopPropagation={() => {
+          open = !open
+        }}
+      >
+        <Icon src={open ? ChevronDown : ChevronRight} class="h-4 w-4 text-white-40" />
+      </button>
+    {/if}
+  </button>
+  {#if children?.length}
+    {#if collapsedSidebar}
+      {#if hovered}
+        <div
+          use:floatingContent
+          role="contentinfo"
+          on:mouseenter={handleHover}
+          on:mouseleave={handleBlur}
+          class="pt-4 z-30"
+        >
+          <DrawerContext on:click={handleClickChild} {items} />
+        </div>
+      {/if}
+    {:else if open || !collapsable}
+      <ul>
+        {#each children as child}
+          <li>
+            <svelte:self {...child} isFolderItem on:click />
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  {/if}
+</div>

package/dist/MenuItem.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { IconTheme, MenuItemProps } from './types.ts';
+import { type IconSource } from '@steeze-ui/svelte-icon';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        url?: string | undefined;
+        isFolderItem?: boolean | undefined;
+        collapsable?: boolean | undefined;
+        open?: boolean | undefined;
+        active?: boolean | undefined;
+        collapsedSidebar?: boolean | undefined;
+        iconTheme?: IconTheme | undefined;
+        icon?: IconSource | string | undefined;
+        children?: MenuItemProps[] | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type MenuItemProps_ = typeof __propDef.props;
+export { MenuItemProps_ as MenuItemProps };
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+}

package/dist/ProfileAvatar.svelte

@@ -0,0 +1,39 @@
+<script>import clsx from "clsx";
+import BaseFlag from "./BaseFlag.svelte";
+export let name = "";
+export let small = false;
+export let large = false;
+export let dark = false;
+export let picture = "";
+export let country = "";
+$:
+  avatarStyles = clsx(
+    { "text-sm": !large },
+    { "h-4 w-4": small },
+    { "h-5 w-5": !large && !small },
+    { "h-8 w-8": large },
+    { "bg-neutral-50 border-neutral-100 text-neutral-500": !dark },
+    { "bg-white-5 border-white-10 text-white-70": dark },
+    { border: !picture }
+  );
+</script>
+
+<div class="{avatarStyles} rounded flex items-center justify-center font-semibold relative">
+  {#if picture}
+    <img
+      class="h-full w-full rounded object-cover"
+      src={picture}
+      alt={name}
+      on:error={() => {
+        picture = ''
+      }}
+    />
+  {:else}
+    <span>{name?.charAt(0)}</span>
+  {/if}
+  {#if country}
+    <div class="absolute -bottom-0.5 -right-0.5">
+      <BaseFlag {country} />
+    </div>
+  {/if}
+</div>

package/dist/ProfileAvatar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        small?: boolean | undefined;
+        large?: boolean | undefined;
+        dark?: boolean | undefined;
+        picture?: string | undefined;
+        country?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProfileAvatarProps = typeof __propDef.props;
+export type ProfileAvatarEvents = typeof __propDef.events;
+export type ProfileAvatarSlots = typeof __propDef.slots;
+export default class ProfileAvatar extends SvelteComponent<ProfileAvatarProps, ProfileAvatarEvents, ProfileAvatarSlots> {
+}
+export {};

package/dist/ProfileSelector.svelte

@@ -0,0 +1,20 @@
+<script>import clsx from "clsx";
+import ProfileAvatar from "./ProfileAvatar.svelte";
+export let name = "";
+export let picture = "";
+export let collapsed = false;
+$:
+  styles = clsx({ "p-[5px]": collapsed }, { "w-full pl-1.5 pr-2 py-[7px]": !collapsed });
+</script>
+
+<button
+  class="{styles} text-white text-base font-medium flex items-center justify-between space-x-1 focus:border-white-10 active:border-white-10 hover:bg-white-5 rounded"
+  on:click
+>
+  <span class="flex items-center space-x-2">
+    <ProfileAvatar {name} {picture} dark />
+    {#if !collapsed}
+      <span class="whitespace-nowrap tracking-normal">{name}</span>
+    {/if}
+  </span>
+</button>

package/dist/ProfileSelector.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        picture?: string | undefined;
+        collapsed?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProfileSelectorProps = typeof __propDef.props;
+export type ProfileSelectorEvents = typeof __propDef.events;
+export type ProfileSelectorSlots = typeof __propDef.slots;
+export default class ProfileSelector extends SvelteComponent<ProfileSelectorProps, ProfileSelectorEvents, ProfileSelectorSlots> {
+}
+export {};

package/dist/SectionLayout.svelte

@@ -0,0 +1,10 @@
+<script>import TitleSection from "./TitleSection.svelte";
+export let title = "";
+</script>
+
+<div class="py-5">
+  <TitleSection {title} />
+  <div class="mt-3">
+    <slot />
+  </div>
+</div>

package/dist/SectionLayout.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SectionLayoutProps = typeof __propDef.props;
+export type SectionLayoutEvents = typeof __propDef.events;
+export type SectionLayoutSlots = typeof __propDef.slots;
+export default class SectionLayout extends SvelteComponent<SectionLayoutProps, SectionLayoutEvents, SectionLayoutSlots> {
+}
+export {};

package/dist/SeparatorHorizontal.svelte

@@ -0,0 +1,14 @@
+<div class="border-b border-transparent hr-separator" />
+
+<style>
+  .hr-separator {
+    border-image: repeating-linear-gradient(
+      90deg,
+      rgba(229, 231, 235, 1),
+      rgba(229, 231, 235, 1) 3px,
+      transparent 3px,
+      transparent 7px
+    );
+    border-image-slice: 1;
+  }
+</style>

package/dist/SeparatorHorizontal.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SeparatorHorizontalProps */
+/** @typedef {typeof __propDef.events}  SeparatorHorizontalEvents */
+/** @typedef {typeof __propDef.slots}  SeparatorHorizontalSlots */
+export default class SeparatorHorizontal extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SeparatorHorizontalProps = typeof __propDef.props;
+export type SeparatorHorizontalEvents = typeof __propDef.events;
+export type SeparatorHorizontalSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/ShortcutWrapper.svelte

@@ -0,0 +1,6 @@
+<div
+  class="bg-white-5 rounded border border-white-10 inline-flex items-center justify-center"
+  style="box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15);"
+>
+  <slot />
+</div>

package/dist/ShortcutWrapper.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ShortcutWrapperProps */
+/** @typedef {typeof __propDef.events}  ShortcutWrapperEvents */
+/** @typedef {typeof __propDef.slots}  ShortcutWrapperSlots */
+export default class ShortcutWrapper extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ShortcutWrapperProps = typeof __propDef.props;
+export type ShortcutWrapperEvents = typeof __propDef.events;
+export type ShortcutWrapperSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/StatusLabel.svelte

@@ -0,0 +1,20 @@
+<script>import clsx from "clsx";
+import FeedIconStatus from "./FeedIconStatus.svelte";
+export let status;
+export let label = "";
+$:
+  styles = clsx({
+    "text-positive-500": status === "success",
+    "text-neutral-500": status === "queued",
+    "text-warning-500": status === "alert",
+    "text-danger-500": status === "failure",
+    "text-yellow-500": status === "run"
+  });
+</script>
+
+<div class="flex items-center space-x-1">
+  <span class="{styles} text-base font-inter font-medium">{label}</span>
+  {#if status}
+    <FeedIconStatus {status} />
+  {/if}
+</div>

package/dist/StatusLabel.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { FeedItemStatus } from './types.js';
+declare const __propDef: {
+    props: {
+        status: FeedItemStatus;
+        label?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StatusLabelProps = typeof __propDef.props;
+export type StatusLabelEvents = typeof __propDef.events;
+export type StatusLabelSlots = typeof __propDef.slots;
+export default class StatusLabel extends SvelteComponent<StatusLabelProps, StatusLabelEvents, StatusLabelSlots> {
+}
+export {};

package/dist/Tabs.svelte

@@ -0,0 +1,41 @@
+<script>import { createTabs } from "svelte-headlessui";
+import BaseCounter from "./BaseCounter.svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { Alert, Success } from "@invopop/ui-icons";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let items = [];
+export let selected = "";
+const tabs = createTabs({ selected: items.find((i) => i.slug === selected) || items[0] });
+</script>
+
+<div
+  use:tabs.list
+  class="inline-flex space-x-0.5 rounded-md border p-0.5 border-neutral-200 bg-neutral-100 w-full"
+>
+  {#each items as value}
+    <button
+      use:tabs.tab={{ value }}
+      class:bg-white={selected === value.slug}
+      class="flex items-center space-x-1 justify-center w-full whitespace-nowrap text-neutral-800 text-base font-medium focus:outline-none focus:ring-0 py-0.5 px-3 rounded"
+      on:click={() => {
+        selected = value.slug
+        dispatch('selected', selected)
+      }}
+    >
+      <span class="tracking-tighter">{value.label}</span>
+      {#if value.counter}
+        <BaseCounter
+          content={value.counter}
+          variant={selected === value.slug ? 'light' : 'default'}
+        />
+      {/if}
+      {#if value.check}
+        <Icon src={Success} class="h-4 w-4" />
+      {/if}
+      {#if value.warning}
+        <Icon src={Alert} class="h-4 w-4" />
+      {/if}
+    </button>
+  {/each}
+</div>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { TabItem } from './types.js';
+declare const __propDef: {
+    props: {
+        items?: TabItem[] | undefined;
+        selected?: string | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/TagBeta.svelte

@@ -0,0 +1,23 @@
+<div class="rounded p-px beta-tag relative">
+  <svg viewBox="0 0 37 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4 4L4 7.5H0V8H4L4 11.5H0V12H4V15.5H0V16H4V20H4.5V16H8V20H8.5V16H12V20H12.5V16H16V20H16.5V16H20V20H20.5V16H24V20H24.5V16H28V20H28.5V16H32V20H32.5V16H37V15.5H32.5V12H37V11.5H32.5V8H37V7.5H32.5V4H37V3.5H32.5V0H32V3.5H28.5V0H28V3.5H24.5V0H24V3.5H20.5V0H20V3.5H16.5V0H16V3.5H12.5V0H12V3.5H8.5V0H8V3.5H4.5V0H4L4 3.5H0V4H4ZM32 4H28.5V7.5H32V4ZM32 8H28.5V11.5H32V8ZM32 12H28.5V15.5H32V12ZM28 12V15.5H24.5V12H28ZM28 8V11.5H24.5V8H28ZM28 4V7.5H24.5V4H28ZM24 4H20.5V7.5H24V4ZM24 8H20.5V11.5H24V8ZM24 12H20.5V15.5H24V12ZM20 12V15.5H16.5V12H20ZM20 8V11.5H16.5V8H20ZM20 4V7.5H16.5V4H20ZM16 4H12.5V7.5H16V4ZM16 8H12.5L12.5 11.5H16L16 8ZM16 12H12.5V15.5H16V12ZM12 12V15.5H8.5V12H12ZM12 8L12 11.5H8.5L8.5 8H12ZM12 4V7.5H8.5V4H12ZM8 4H4.5V7.5H8L8 4ZM8 8H4.5L4.5 11.5H8V8ZM8 12H4.5V15.5H8L8 12Z"
+      fill="white"
+      fill-opacity="0.05"
+    />
+  </svg>
+  <div
+    class="rounded-[3px] py-px px-1 text-white font-mono"
+    style="border: 0.5px solid var(--white-60, rgba(255, 255, 255, 0.60));"
+  >
+    Beta
+  </div>
+</div>
+
+<style>
+  .beta-tag {
+    background: linear-gradient(180deg, #0072f5 0%, rgba(0, 77, 164, 0.4) 100%), #0072f5;
+  }
+</style>

package/dist/TagBeta.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TagBetaProps */
+/** @typedef {typeof __propDef.events}  TagBetaEvents */
+/** @typedef {typeof __propDef.slots}  TagBetaSlots */
+export default class TagBeta extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TagBetaProps = typeof __propDef.props;
+export type TagBetaEvents = typeof __propDef.events;
+export type TagBetaSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/TagSearch.svelte

@@ -0,0 +1,46 @@
+<script>import { Icon } from "@steeze-ui/svelte-icon";
+import { createEventDispatcher } from "svelte";
+import { dispatchWcEvent } from "./wcdispatch.js";
+import { resolveIcon } from "./helpers.js";
+const dispatch = createEventDispatcher();
+export let label = "";
+export let icon = void 0;
+export let iconTheme = "default";
+let resolvedIcon;
+$: {
+  resolveIcon(icon).then((icon2) => {
+    resolvedIcon = icon2;
+  });
+}
+function handleClear(event) {
+  const target = event.target;
+  dispatch("clear");
+  dispatchWcEvent(target, "clear");
+}
+</script>
+
+<span
+  class:pl-2={icon}
+  class:pl-3={!icon}
+  class="border rounded pr-1.5 text-sm inline-flex items-center border-workspace-accent-100 bg-workspace-accent-50"
+>
+  {#if resolvedIcon}
+    <Icon src={resolvedIcon} theme={iconTheme} class="h-4 w-4 mr-1 text-workspace-accent" />
+  {/if}
+  <span class="py-1 pr-2 text-workspace-accent tracking-normal">{label}</span>
+  <button
+    class="py-1 border-l border-workspace-accent-100 pl-1 text-neutral-500"
+    on:click={handleClear}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-5 h-5"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  </button>
+</span>

package/dist/TagSearch.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
+import type { IconTheme } from './types.ts';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        icon?: IconSource | string | undefined;
+        iconTheme?: IconTheme | undefined;
+    };
+    events: {
+        clear: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TagSearchProps = typeof __propDef.props;
+export type TagSearchEvents = typeof __propDef.events;
+export type TagSearchSlots = typeof __propDef.slots;
+export default class TagSearch extends SvelteComponent<TagSearchProps, TagSearchEvents, TagSearchSlots> {
+}
+export {};