@invopop/popui 0.0.103 → 0.1.1

package/dist/AlertDialog.svelte

@@ -1,84 +1,109 @@
-<script>import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogCancel,
-  AlertDialogAction
-} from "./alert-dialog";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let open = false;
-export let destructive = false;
-export let title = "";
-export let description = "";
-export let cancelText = "Cancel";
-export let actionText = "OK";
-export let cancelActionEl = void 0;
-export let okActionEl = void 0;
-let recentAction = false;
-function cancel() {
-  recentAction = true;
-  dispatch("cancel");
-  setTimeout(() => {
-    recentAction = false;
-  }, 10);
-}
-function confirm() {
-  recentAction = true;
-  dispatch("confirm");
-  setTimeout(() => {
-    recentAction = false;
-  }, 10);
-}
-$:
-  if (!open) {
-    cancelByEsc();
+<script lang="ts">
+  import {
+    AlertDialog,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogCancel,
+    AlertDialogAction
+  } from './alert-dialog'
+  import type { AlertDialogProps } from './types'
+
+  let {
+    open = $bindable(false),
+    destructive = false,
+    title = '',
+    descriptionText = '',
+    cancelText = 'Cancel',
+    actionText = 'OK',
+    cancelActionEl = $bindable(null),
+    okActionEl = $bindable(null),
+    oncancel,
+    onconfirm,
+    description,
+    children
+  }: AlertDialogProps = $props()
+
+  let recentAction = $state(false)
+
+  function cancel() {
+    recentAction = true
+    oncancel?.()
+    setTimeout(() => {
+      recentAction = false
+    }, 10)
+  }
+
+  function confirm() {
+    recentAction = true
+    onconfirm?.()
+    setTimeout(() => {
+      recentAction = false
+    }, 10)
+  }
+
+  $effect(() => {
+    if (!open) {
+      cancelByEsc()
+    }
+  })
+
+  function cancelByEsc() {
+    if (recentAction) return
+
+    oncancel?.()
+  }
+
+  function handleOpen(value: boolean) {
+    if (value) {
+      const focusEl = document.querySelector(
+        '[data-alert-dialog-action]:nth-of-type(2)'
+      ) as HTMLElement
+      focusEl?.focus()
+    }
   }
-function cancelByEsc() {
-  if (recentAction)
-    return;
-  dispatch("cancel");
-}
 </script>
 
-<AlertDialog openFocus="[data-alert-dialog-action]:nth-of-type(2)" bind:open>
-  <AlertDialogTrigger class={$$slots.default ? '' : 'hidden'}>
-    <slot />
+<AlertDialog onOpenChange={handleOpen} bind:open>
+  <AlertDialogTrigger class={children ? '' : 'hidden'}>
+    {@render children?.()}
   </AlertDialogTrigger>
   <AlertDialogContent>
     <AlertDialogHeader>
       <AlertDialogTitle>{title}</AlertDialogTitle>
       <AlertDialogDescription>
-        <slot name="description" />
-        {#if !$$slots.description}
-          {description}
+        {#if description}
+          {@render description()}
+        {:else}
+          {descriptionText}
         {/if}
       </AlertDialogDescription>
     </AlertDialogHeader>
     <AlertDialogFooter>
       <AlertDialogCancel
-        bind:el={cancelActionEl}
-        on:click={() => {
+        bind:ref={cancelActionEl}
+        onclick={() => {
           cancel()
         }}
-        on:keydown={(e) => {
-          if (e.detail.originalEvent.key === 'Enter') {
+        onkeydown={(e) => {
+          if (e.key === 'Enter') {
             cancel()
           }
-        }}>{cancelText}</AlertDialogCancel
+        }}
       >
+        {cancelText}
+      </AlertDialogCancel>
       <AlertDialogAction
-        bind:el={okActionEl}
+        bind:ref={okActionEl}
         {destructive}
-        on:click={() => {
+        onclick={() => {
           confirm()
         }}
-        on:keydown={(e) => {
-          if (e.detail.originalEvent.key === 'Enter') {
+        onkeydown={(e) => {
+          if (e.key === 'Enter') {
             confirm()
           }
         }}

package/dist/AlertDialog.svelte.d.ts

@@ -1,29 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        destructive?: boolean | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
-        cancelText?: string | undefined;
-        actionText?: string | undefined;
-        cancelActionEl?: HTMLButtonElement | undefined;
-        okActionEl?: HTMLButtonElement | undefined;
-    };
-    events: {
-        cancel: CustomEvent<any>;
-        confirm: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        description: {};
-    };
-};
-export type AlertDialogProps = typeof __propDef.props;
-export type AlertDialogEvents = typeof __propDef.events;
-export type AlertDialogSlots = typeof __propDef.slots;
-export default class AlertDialog extends SvelteComponent<AlertDialogProps, AlertDialogEvents, AlertDialogSlots> {
-}
-export {};
+import { AlertDialog } from './alert-dialog';
+import type { AlertDialogProps } from './types';
+declare const AlertDialog: import("svelte").Component<AlertDialogProps, {}, "open" | "cancelActionEl" | "okActionEl">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/BaseButton.svelte

@@ -1,119 +1,124 @@
-<script>import clsx from "clsx";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { createEventDispatcher } from "svelte";
-import { dispatchWcEvent } from "./wcdispatch.js";
-import { resolveIcon } from "./helpers.js";
-import ShortcutWrapper from "./ShortcutWrapper.svelte";
-const dispatch = createEventDispatcher();
-export let icon = void 0;
-export let iconTheme = "default";
-export let iconPosition = "left";
-export let type = "button";
-export let variant = "default";
-export let disabled = false;
-export let small = false;
-export let big = false;
-export let dangerIcon = false;
-export let shortcut = false;
-export let fullwidth = false;
-export let notification = false;
-let resolvedIcon;
-$: {
-  resolveIcon(icon).then((icon2) => {
-    resolvedIcon = icon2;
-  });
-}
-$:
-  buttonStyles = clsx(
-    { "w-full": fullwidth },
-    { "opacity-30 pointer-events-none": disabled },
-    { "flex-row-reverse space-x-reverse": iconPosition === "right" },
-    { "bg-white": variant === "default" },
-    { "bg-workspace-accent": variant === "primary" },
-    { "bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300": variant === "secondary" },
-    { "bg-danger-500": variant === "danger" },
-    { "bg-warning-500": variant === "warning" },
-    { "text-sm rounded": small },
-    { "text-base rounded-md": !small },
-    { "p-1": small && !$$slots.default },
-    { "p-1.5": !small && !big && !$$slots.default },
-    { "p-2": big && !$$slots.default },
-    { "px-3": big && $$slots.default && !icon },
-    { "px-2": !big && $$slots.default && !icon },
-    { "pl-2 pr-2.5": big && $$slots.default && icon && iconPosition === "left" },
-    { "pl-2.5 pr-2": big && $$slots.default && icon && iconPosition === "right" },
-    { "pl-1.5 pr-2": !small && !big && $$slots.default && icon && iconPosition === "left" },
-    { "pl-2 pr-1.5": !small && !big && $$slots.default && icon && iconPosition === "right" },
-    { "py-1.5": big && $$slots.default },
-    { "py-1": !big && $$slots.default },
-    { "text-white": ["primary", "danger", "dark", "warning"].includes(variant) },
-    { "text-neutral-800": ["default", "secondary", "outline"].includes(variant) },
-    { "border border-white-10 hover:border-white-20 active:border-white-40": variant === "dark" },
-    {
-      "border border-neutral-200 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-200": variant === "default"
-    },
-    {
-      "border border-neutral-800/10 hover:bg-neutral-800/5 active:border-neutral-800/20 active:bg-neutral-800/10": variant === "outline"
-    },
-    { "gap-1": icon && $$slots.default }
-  );
-$:
-  iconStyles = clsx(
-    {
-      "text-neutral-500": ["default", "secondary"].includes(variant) && $$slots.default && !dangerIcon
-    },
-    {
-      "text-neutral-800": ["default", "secondary"].includes(variant) && !$$slots.default && !dangerIcon
-    },
-    {
-      "text-white-70": !["default", "secondary"].includes(variant) && $$slots.default && !dangerIcon
-    },
-    {
-      "text-white": !["default", "secondary"].includes(variant) && !$$slots.default && !dangerIcon
-    },
-    { "text-danger-500": dangerIcon }
-  );
-$:
-  overlayClasses = clsx({
-    "rounded-md": !small,
-    rounded: small,
-    "group-hover:bg-black/[.16] group-active:bg-black/[.32]": [
-      "primary",
-      "danger",
-      "warning"
-    ].includes(variant)
-  });
-function handleClick(event) {
-  if (event instanceof CustomEvent)
-    return;
-  dispatch("click");
-  dispatchWcEvent(event.target, "click");
-}
+<script lang="ts">
+  import clsx from 'clsx'
+  import type { BaseButtonProps } from './types.ts'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import ShortcutWrapper from './ShortcutWrapper.svelte'
+
+  let {
+    icon,
+    iconTheme = 'default',
+    iconPosition = 'left',
+    type = 'button',
+    variant = 'default',
+    disabled = false,
+    small = false,
+    big = false,
+    dangerIcon = false,
+    shortcut = false,
+    fullwidth = false,
+    notification = false,
+    children,
+    onclick,
+    ...rest
+  }: BaseButtonProps = $props()
+
+  let buttonStyles = $derived(
+    clsx(
+      { 'w-full': fullwidth },
+      { 'opacity-30 pointer-events-none': disabled },
+      { 'flex-row-reverse space-x-reverse': iconPosition === 'right' },
+      { 'bg-white': variant === 'default' },
+      { 'bg-workspace-accent': variant === 'primary' },
+      { 'bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300': variant === 'secondary' },
+      { 'bg-danger-500': variant === 'danger' },
+      { 'bg-warning-500': variant === 'warning' },
+      { 'text-sm rounded': small },
+      { 'text-base rounded-md': !small },
+      { 'p-1': small && !children },
+      { 'p-1.5': !small && !big && !children },
+      { 'p-2': big && !children },
+      { 'px-3': big && children && !icon },
+      { 'px-2': !big && children && !icon },
+      { 'pl-2 pr-2.5': big && children && icon && iconPosition === 'left' },
+      { 'pl-2.5 pr-2': big && children && icon && iconPosition === 'right' },
+      { 'pl-1.5 pr-2': !small && !big && children && icon && iconPosition === 'left' },
+      { 'pl-2 pr-1.5': !small && !big && children && icon && iconPosition === 'right' },
+      { 'py-1.5': big && children },
+      { 'py-1': !big && children },
+      { 'text-white': ['primary', 'danger', 'dark', 'warning'].includes(variant) },
+      { 'text-neutral-800': ['default', 'secondary', 'outline'].includes(variant) },
+      { 'border border-white-10 hover:border-white-20 active:border-white-40': variant === 'dark' },
+      {
+        'border border-neutral-200 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-200':
+          variant === 'default'
+      },
+      {
+        'border border-neutral-800/10 hover:bg-neutral-800/5 active:border-neutral-800/20 active:bg-neutral-800/10':
+          variant === 'outline'
+      },
+      { 'gap-1': icon && children }
+    )
+  )
+
+  let iconStyles = $derived(
+    clsx(
+      {
+        'text-neutral-500': ['default', 'secondary'].includes(variant) && children && !dangerIcon
+      },
+      {
+        'text-neutral-800': ['default', 'secondary'].includes(variant) && !children && !dangerIcon
+      },
+      {
+        'text-white-70': !['default', 'secondary'].includes(variant) && children && !dangerIcon
+      },
+      {
+        'text-white': !['default', 'secondary'].includes(variant) && !children && !dangerIcon
+      },
+      { 'text-danger-500': dangerIcon }
+    )
+  )
+
+  let overlayClasses = $derived(
+    clsx({
+      'rounded-md': !small,
+      rounded: small,
+      'group-hover:bg-black/[.16] group-active:bg-black/[.32]': [
+        'primary',
+        'danger',
+        'warning'
+      ].includes(variant)
+    })
+  )
+
+  function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    onclick?.(event)
+  }
 </script>
 
 <button
   {type}
   {disabled}
-  class="{buttonStyles} flex items-center justify-center font-medium font-sans relative group tracking-tight"
-  {...$$restProps}
-  on:click|stopPropagation={handleClick}
+  class="{buttonStyles} flex items-center justify-center font-medium font-sans relative group tracking-tight cursor-pointer"
+  {...rest}
+  onclick={handleClick}
 >
-  <span class="{overlayClasses} absolute inset-0" />
-  {#if resolvedIcon}
+  <span class="{overlayClasses} absolute inset-0"></span>
+  {#if icon}
     <div class="relative">
       {#if shortcut}
         <ShortcutWrapper>
-          <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-3 w-3 z-10" />
+          <Icon src={icon} theme={iconTheme} class="{iconStyles} h-3 w-3 z-10" />
         </ShortcutWrapper>
       {:else}
-        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 z-10" />
+        <Icon src={icon} theme={iconTheme} class="{iconStyles} h-4 w-4 z-10" />
       {/if}
       {#if notification}
-        <span class="absolute top-0 right-0 w-1.5 h-1.5 bg-danger-500 rounded-full z-20" />
+        <span class="absolute top-0 right-0 w-1.5 h-1.5 bg-danger-500 rounded-full z-20"></span>
       {/if}
     </div>
   {/if}
-  {#if $$slots.default}
-    <span class="z-10"><slot /></span>
+  {#if children}
+    <span class="z-10">{@render children?.()}</span>
   {/if}
 </button>

package/dist/BaseButton.svelte.d.ts

@@ -1,34 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { ButtonVariant, IconPosition, IconTheme } from './types.ts';
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        icon?: IconSource | string | undefined;
-        iconTheme?: IconTheme | undefined;
-        iconPosition?: IconPosition | undefined;
-        type?: 'button' | 'submit' | 'reset' | null | undefined;
-        variant?: ButtonVariant | undefined;
-        disabled?: boolean | undefined;
-        small?: boolean | undefined;
-        big?: boolean | undefined;
-        dangerIcon?: boolean | undefined;
-        shortcut?: boolean | undefined;
-        fullwidth?: boolean | undefined;
-        notification?: boolean | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BaseButtonProps = typeof __propDef.props;
-export type BaseButtonEvents = typeof __propDef.events;
-export type BaseButtonSlots = typeof __propDef.slots;
-export default class BaseButton extends SvelteComponent<BaseButtonProps, BaseButtonEvents, BaseButtonSlots> {
-}
-export {};
+import type { BaseButtonProps } from './types.ts';
+declare const BaseButton: import("svelte").Component<BaseButtonProps, {}, "">;
+type BaseButton = ReturnType<typeof BaseButton>;
+export default BaseButton;

package/dist/BaseCard.svelte

@@ -1,17 +1,25 @@
-<script>import TagBeta from "./TagBeta.svelte";
-export let imageUrl = "";
-export let imageAlt = "";
-export let title = "";
-export let description = "";
-export let type = "default";
-export let enabled = false;
+<script lang="ts">
+  import TagBeta from './TagBeta.svelte'
+  import type { BaseCardProps } from './types'
+
+  let {
+    imageUrl = '',
+    imageAlt = '',
+    title = '',
+    description = '',
+    type = 'default',
+    enabled = false,
+    footer,
+    onclick,
+    ...rest
+  }: BaseCardProps = $props()
 </script>
 
 <button
   class="rounded-lg bg-white hover:bg-neutral-100 focus:bg-neutral-200 disabled:bg-neutral-50 disabled:pointer-events-none border border-neutral-100 p-3 flex flex-col min-w-[298px] min-h-[126px] text-left"
   disabled={type === 'soon'}
-  {...$$restProps}
-  on:click
+  {...rest}
+  {onclick}
 >
   <div class="flex flex-col items-start justify-center space-y-2 w-full">
     <div class="flex items-center justify-between w-full">
@@ -23,7 +31,7 @@ export let enabled = false;
           <div
             class="flex items-center space-x-1 rounded bg-neutral-50 border border-neutral-100 py-0.5 pl-1.5 pr-[5px] text-sm text-neutral-500 font-medium"
           >
-            <div class="bg-positive-500 h-2 w-2 rounded-full" />
+            <div class="bg-positive-500 h-2 w-2 rounded-full"></div>
             <span>Enabled</span>
           </div>
         {/if}
@@ -43,9 +51,9 @@ export let enabled = false;
   <p class="flex mt-0.5 text-base text-neutral-500 tracking-normal flex-1">
     {description}
   </p>
-  {#if $$slots.footer}
+  {#if footer}
     <div class="mt-5">
-      <slot name="footer" />
+      {@render footer?.()}
     </div>
   {/if}
 </button>

package/dist/BaseCard.svelte.d.ts

@@ -1,26 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        imageUrl?: string | undefined;
-        imageAlt?: string | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
-        type?: "default" | "soon" | "beta" | undefined;
-        enabled?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        footer: {};
-    };
-};
-export type BaseCardProps = typeof __propDef.props;
-export type BaseCardEvents = typeof __propDef.events;
-export type BaseCardSlots = typeof __propDef.slots;
-export default class BaseCard extends SvelteComponent<BaseCardProps, BaseCardEvents, BaseCardSlots> {
-}
-export {};
+import type { BaseCardProps } from './types';
+declare const BaseCard: import("svelte").Component<BaseCardProps, {}, "">;
+type BaseCard = ReturnType<typeof BaseCard>;
+export default BaseCard;

package/dist/BaseCounter.svelte

@@ -1,12 +1,16 @@
-<script>import clsx from "clsx";
-export let content;
-export let variant = "default";
-$:
-  styles = clsx(
-    { "bg-neutral-100": variant === "light" },
-    { "bg-neutral-200": variant === "default" },
-    { "bg-neutral-300": variant === "dark" }
-  );
+<script lang="ts">
+  import clsx from 'clsx'
+  import type { BaseCounterProps } from './types'
+
+  let { content, variant = 'default' }: BaseCounterProps = $props()
+
+  let styles = $derived(
+    clsx(
+      { 'bg-neutral-100': variant === 'light' },
+      { 'bg-neutral-200': variant === 'default' },
+      { 'bg-neutral-300': variant === 'dark' }
+    )
+  )
 </script>
 
 <div

package/dist/BaseCounter.svelte.d.ts

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