@invopop/popui 0.0.104 → 0.1.1

package/dist/StepIconList.svelte.d.ts

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

package/dist/TagBeta.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  TagBetaProps */
-/** @typedef {typeof __propDef.events}  TagBetaEvents */
-/** @typedef {typeof __propDef.slots}  TagBetaSlots */
-export default class TagBeta extends SvelteComponent<{
+export default TagBeta;
+type TagBeta = 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: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const TagBeta: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/TagSearch.svelte

@@ -1,22 +1,20 @@
-<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 lang="ts">
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
+  import type { TagSearchProps } from './types.ts'
+  import { resolveIcon } from './helpers.js'
+
+  let { label = '', icon = undefined, iconTheme = 'default', onclear }: TagSearchProps = $props()
+
+  let resolvedIcon: IconSource | undefined = $state()
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
+  function handleClear(event: unknown) {
+    const target = (event as PointerEvent).target
+    onclear?.()
+  }
 </script>
 
 <span
@@ -29,8 +27,9 @@ function handleClear(event) {
   {/if}
   <span class="py-1 pr-2 text-workspace-accent tracking-normal">{label}</span>
   <button
+    aria-label="Clear"
     class="py-1 border-l border-workspace-accent-100 pl-1 text-neutral-500"
-    on:click={handleClear}
+    onclick={handleClear}
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"

package/dist/TagSearch.svelte.d.ts

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

package/dist/TagStatus.svelte

@@ -1,39 +1,44 @@
-<script>import clsx from "clsx";
-export let label = "";
-export let status = "grey";
-export let dot = false;
-$:
-  tagStyles = clsx({
-    "bg-positive-100 text-positive-500": status === "green",
-    "border border-positive-200": status === "green" && dot,
-    "bg-yellow-100 text-yellow-500": status === "yellow",
-    "border border-yellow-200": status === "yellow" && dot,
-    "bg-danger-100 text-danger-500": status === "red",
-    "border border-danger-200": status === "red" && dot,
-    "bg-warning-100 text-warning-500": status === "orange",
-    "border border-warning-200": status === "orange" && dot,
-    "bg-blue-100 text-blue-500": status === "blue",
-    "border border-blue-200": status === "blue" && dot,
-    "bg-purple-100 text-purple-500": status === "purple",
-    "border border-purple-200": status === "purple" && dot,
-    "border border-dashed border-neutral-200 text-neutral-400": status === "empty",
-    "bg-neutral-100 text-neutral-500": status === "grey",
-    "border border-neutral-200": status === "grey" && dot,
-    "pl-1.5 pr-[5px] py-0.5": dot && label,
-    "p-0.5": dot && !label,
-    "px-1 py-0.5": !dot
-  });
-$:
-  dotStyles = clsx({
-    "bg-positive-500": status === "green",
-    "bg-yellow-500": status === "yellow",
-    "bg-danger-500": status === "red",
-    "bg-warning-500": status === "orange",
-    "bg-blue-500": status === "blue",
-    "bg-purple-500": status === "purple",
-    "bg-neutral-300": status === "empty",
-    "bg-neutral-500": status === "grey"
-  });
+<script lang="ts">
+  import clsx from 'clsx'
+  import type { TagStatusProps } from './types.ts'
+
+  let { label = '', status = 'grey', dot = false }: TagStatusProps = $props()
+
+  let tagStyles = $derived(
+    clsx({
+      'bg-positive-100 text-positive-500': status === 'green',
+      'border border-positive-200': status === 'green' && dot,
+      'bg-yellow-100 text-yellow-500': status === 'yellow',
+      'border border-yellow-200': status === 'yellow' && dot,
+      'bg-danger-100 text-danger-500': status === 'red',
+      'border border-danger-200': status === 'red' && dot,
+      'bg-warning-100 text-warning-500': status === 'orange',
+      'border border-warning-200': status === 'orange' && dot,
+      'bg-blue-100 text-blue-500': status === 'blue',
+      'border border-blue-200': status === 'blue' && dot,
+      'bg-purple-100 text-purple-500': status === 'purple',
+      'border border-purple-200': status === 'purple' && dot,
+      'border border-dashed border-neutral-200 text-neutral-400': status === 'empty',
+      'bg-neutral-100 text-neutral-500': status === 'grey',
+      'border border-neutral-200': status === 'grey' && dot,
+      'pl-1.5 pr-[5px] py-0.5': dot && label,
+      'p-0.5': dot && !label,
+      'px-1 py-0.5': !dot
+    })
+  )
+
+  let dotStyles = $derived(
+    clsx({
+      'bg-positive-500': status === 'green',
+      'bg-yellow-500': status === 'yellow',
+      'bg-danger-500': status === 'red',
+      'bg-warning-500': status === 'orange',
+      'bg-blue-500': status === 'blue',
+      'bg-purple-500': status === 'purple',
+      'bg-neutral-300': status === 'empty',
+      'bg-neutral-500': status === 'grey'
+    })
+  )
 </script>
 
 <span
@@ -41,7 +46,7 @@ $:
   class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1 box-border"
 >
   {#if dot}
-    <span class="{dotStyles} w-2 h-2 rounded-sm" />
+    <span class="{dotStyles} w-2 h-2 rounded-sm"></span>
   {/if}
   {#if label}
     <span>{label}</span>

package/dist/TagStatus.svelte.d.ts

@@ -1,19 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { StatusType } from './types.ts';
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        status?: StatusType | undefined;
-        dot?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TagStatusProps = typeof __propDef.props;
-export type TagStatusEvents = typeof __propDef.events;
-export type TagStatusSlots = typeof __propDef.slots;
-export default class TagStatus extends SvelteComponent<TagStatusProps, TagStatusEvents, TagStatusSlots> {
-}
-export {};
+import type { TagStatusProps } from './types.ts';
+declare const TagStatus: import("svelte").Component<TagStatusProps, {}, "">;
+type TagStatus = ReturnType<typeof TagStatus>;
+export default TagStatus;

package/dist/TitleMain.svelte

@@ -1,6 +1,13 @@
-<script>export let title = "";
+<script lang="ts">
+  import type { TitleMainProps } from './types'
+
+  let { title = '', children }: TitleMainProps = $props()
 </script>
 
 <h1 class="text-neutral-800 font-medium text-lg font-sans tracking-tightest">
-  <slot>{title}</slot>
+  {#if children}
+    {@render children()}
+  {:else}
+    {title}
+  {/if}
 </h1>

package/dist/TitleMain.svelte.d.ts

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

package/dist/TitleSection.svelte

@@ -1,6 +1,13 @@
-<script>export let title = "";
+<script lang="ts">
+  import type { TitleSectionProps } from './types'
+
+  let { title = '', children }: TitleSectionProps = $props()
 </script>
 
 <h1 class="text-neutral-800 font-medium text-lg font-sans tracking-tighter">
-  <slot>{title}</slot>
+  {#if children}
+    {@render children()}
+  {:else}
+    {title}
+  {/if}
 </h1>

package/dist/TitleSection.svelte.d.ts

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

package/dist/UuidCopy.svelte

@@ -1,57 +1,70 @@
-<script>import { Duplicate, ExternalLink } from "@invopop/ui-icons";
-import { Icon } from "@steeze-ui/svelte-icon";
-import clsx from "clsx";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let uuid = "";
-export let small = false;
-export let dark = false;
-export let rightAlign = false;
-export let prefixLength = 4;
-export let suffixLength = 4;
-export let full = false;
-export let compact = false;
-export let link = false;
-function shortenString(inputString, prefixLength2, suffixLength2) {
-  if (inputString.length <= prefixLength2 + suffixLength2) {
-    return inputString;
+<script lang="ts">
+  import { Duplicate, ExternalLink } from '@invopop/ui-icons'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import clsx from 'clsx'
+  import type { UuidCopyProps } from './types'
+
+  let {
+    uuid = '',
+    small = false,
+    dark = false,
+    rightAlign = false,
+    prefixLength = 4,
+    suffixLength = 4,
+    full = false,
+    compact = false,
+    link = false,
+    onCopied,
+    onLinkClick
+  }: UuidCopyProps = $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
+  }
+
+  let formattedUuid = $derived(full ? uuid : shortenString(uuid, prefixLength, suffixLength))
+  let styles = $derived(
+    clsx({
+      'justify-end': rightAlign,
+      'text-sm': small,
+      'text-base': !small,
+      'text-neutral-800': dark,
+      'text-neutral-500': !dark,
+      'justify-between': !compact,
+      'w-full': full,
+      'border border-neutral-800/10 rounded-md pl-2.5 pr-2 py-[5px]': !full
+    })
+  )
+
+  async function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    await navigator.clipboard.writeText(uuid)
+    onCopied?.(uuid)
+  }
+
+  async function handleIconClick(event: MouseEvent) {
+    event.stopPropagation()
+    await navigator.clipboard.writeText(uuid)
+    if (link) {
+      onLinkClick?.(uuid)
+    } else {
+      onCopied?.(uuid)
+    }
   }
-  const prefix = inputString.substring(0, prefixLength2);
-  const suffix = inputString.substring(inputString.length - suffixLength2);
-  return prefix + "..." + suffix;
-}
-$:
-  formattedUuid = full ? uuid : shortenString(uuid, prefixLength, suffixLength);
-$:
-  styles = clsx({
-    "justify-end": rightAlign,
-    "text-sm": small,
-    "text-base": !small,
-    "text-neutral-800": dark,
-    "text-neutral-500": !dark,
-    "justify-between": !compact,
-    "w-full": full,
-    "border border-neutral-800/10 rounded-md pl-2.5 pr-2 py-[5px]": !full
-  });
 </script>
 
 <div class="{styles} relative inline-flex items-center space-x-1 text-left whitespace-nowrap">
-  <button
-    class="tracking-wide font-mono text-base"
-    on:click|stopPropagation={async () => {
-      await navigator.clipboard.writeText(uuid)
-      dispatch('copied', uuid)
-    }}
-  >
+  <button class="tracking-wide font-mono text-base cursor-pointer" onclick={handleClick}>
     {formattedUuid}
   </button>
-  <button
-    class="p-1"
-    on:click|stopPropagation={async () => {
-      await navigator.clipboard.writeText(uuid)
-      dispatch(link ? 'link' : 'copied', uuid)
-    }}
-  >
+  <button class="p-1 cursor-pointer" onclick={handleIconClick}>
     <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-neutral-500" />
   </button>
 </div>

package/dist/UuidCopy.svelte.d.ts

@@ -1,26 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        uuid?: string | undefined;
-        small?: boolean | undefined;
-        dark?: boolean | undefined;
-        rightAlign?: boolean | undefined;
-        prefixLength?: number | undefined;
-        suffixLength?: number | undefined;
-        full?: boolean | undefined;
-        compact?: boolean | undefined;
-        link?: boolean | undefined;
-    };
-    events: {
-        copied: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type UuidCopyProps = typeof __propDef.props;
-export type UuidCopyEvents = typeof __propDef.events;
-export type UuidCopySlots = typeof __propDef.slots;
-export default class UuidCopy extends SvelteComponent<UuidCopyProps, UuidCopyEvents, UuidCopySlots> {
-}
-export {};
+import type { UuidCopyProps } from './types';
+declare const UuidCopy: import("svelte").Component<UuidCopyProps, {}, "">;
+type UuidCopy = ReturnType<typeof UuidCopy>;
+export default UuidCopy;

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -1,21 +1,21 @@
-<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import { buttonVariants } from "../button/index.js";
-import { cn } from "../utils.js";
-let className = void 0;
-let destructive = false;
-let el = void 0;
-export { className as class, destructive, el };
-$:
-  variant = destructive ? "destructive" : "primary";
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+  import { buttonVariants, type ButtonVariant } from '../button/index.js'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    destructive = false,
+    children
+  }: AlertDialogPrimitive.ActionProps & { destructive: boolean } = $props()
+
+  let variant = $derived((destructive ? 'destructive' : 'primary') as ButtonVariant)
 </script>
 
 <AlertDialogPrimitive.Action
-  bind:el
+  bind:ref
+  data-slot="alert-dialog-action"
   class={cn(buttonVariants({ variant }), className)}
-  {...$$restProps}
-  on:click
-  on:keydown
-  let:builder
 >
-  <slot {builder} />
+  {@render children?.()}
 </AlertDialogPrimitive.Action>

package/dist/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -1,28 +1,7 @@
-import { SvelteComponent } from "svelte";
 import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-declare const __propDef: {
-    props: {
-        asChild?: boolean | undefined;
-        el?: HTMLButtonElement | undefined;
-    } & import("svelte/elements").HTMLButtonAttributes & {
-        destructive: boolean;
-    };
-    slots: {
-        default: {
-            builder: {
-                readonly type: "button";
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown">;
-            };
-        };
-    };
-    events: AlertDialogPrimitive.ActionEvents;
+type $$ComponentProps = AlertDialogPrimitive.ActionProps & {
+    destructive: boolean;
 };
-export type AlertDialogActionProps = typeof __propDef.props;
-export type AlertDialogActionEvents = typeof __propDef.events;
-export type AlertDialogActionSlots = typeof __propDef.slots;
-export default class AlertDialogAction extends SvelteComponent<AlertDialogActionProps, AlertDialogActionEvents, AlertDialogActionSlots> {
-}
-export {};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -1,16 +1,19 @@
-<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import { buttonVariants } from "../button/index.js";
-import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+  import { buttonVariants } from '../button/index.js'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: AlertDialogPrimitive.CancelProps = $props()
 </script>
 
 <AlertDialogPrimitive.Cancel
+  bind:ref
+  data-slot="alert-dialog-cancel"
   class={cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', className)}
-  {...$$restProps}
-  on:click
-  on:keydown
-  let:builder
+  {onkeydown}
 >
-  <slot {builder} />
+  {@render children?.()}
 </AlertDialogPrimitive.Cancel>

package/dist/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -1,23 +1,4 @@
-import { SvelteComponent } from "svelte";
 import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-declare const __propDef: {
-    props: AlertDialogPrimitive.CancelProps;
-    slots: {
-        default: {
-            builder: {
-                readonly type: "button";
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown">;
-            };
-        };
-    };
-    events: AlertDialogPrimitive.CancelEvents;
-};
-export type AlertDialogCancelProps = typeof __propDef.props;
-export type AlertDialogCancelEvents = typeof __propDef.events;
-export type AlertDialogCancelSlots = typeof __propDef.slots;
-export default class AlertDialogCancel extends SvelteComponent<AlertDialogCancelProps, AlertDialogCancelEvents, AlertDialogCancelSlots> {
-}
-export {};
+declare const AlertDialogCancel: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;