@invopop/popui 0.0.104 → 0.1.1

package/dist/MenuItemCollapsible.svelte

@@ -1,19 +1,27 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-import clsx from "clsx";
-export let collapsed = false;
-export let title = "";
-export let subtitle = "";
-export let active = false;
-export let bold = false;
-export let icon = void 0;
-$:
-  styles = clsx(
-    { "p-1": collapsed },
-    { "space-x-2 w-full p-[7px]": !collapsed },
-    { "border-white-30 bg-white-10": active },
-    { "border-transparent hover:bg-white-5": !active },
-    { "font-semibold": bold }
-  );
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import clsx from 'clsx'
+  import type { MenuItemCollapsibleProps } from './types'
+
+  let {
+    collapsed = false,
+    title = '',
+    subtitle = '',
+    active = false,
+    bold = false,
+    icon = undefined,
+    children
+  }: MenuItemCollapsibleProps = $props()
+
+  let styles = $derived(
+    clsx(
+      { 'p-1': collapsed },
+      { 'space-x-2 w-full p-[7px]': !collapsed },
+      { 'border-white-30 bg-white-10': active },
+      { 'border-transparent hover:bg-white-5': !active },
+      { 'font-semibold': bold }
+    )
+  )
 </script>
 
 <span
@@ -21,10 +29,10 @@ $:
   class="{styles} text-white text-base flex items-center justify-between border rounded"
 >
   <span class:space-x-2={!collapsed} class="flex items-center">
-    <slot />
+    {@render children?.()}
     {#if !collapsed}
       <div>
-        <div class="whitespace-nowrap max-w-[118px] truncate tracking-tight">{title}</div>
+        <div class="whitespace-nowrap max-w-[140px] truncate tracking-tight">{title}</div>
         {#if subtitle}
           <div class="text-sm font-medium text-yellow-600">{subtitle}</div>
         {/if}

package/dist/MenuItemCollapsible.svelte.d.ts

@@ -1,24 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        collapsed?: boolean | undefined;
-        title?: string | undefined;
-        subtitle?: string | undefined;
-        active?: boolean | undefined;
-        bold?: boolean | undefined;
-        icon?: IconSource | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type MenuItemCollapsibleProps = typeof __propDef.props;
-export type MenuItemCollapsibleEvents = typeof __propDef.events;
-export type MenuItemCollapsibleSlots = typeof __propDef.slots;
-export default class MenuItemCollapsible extends SvelteComponent<MenuItemCollapsibleProps, MenuItemCollapsibleEvents, MenuItemCollapsibleSlots> {
-}
-export {};
+import type { MenuItemCollapsibleProps } from './types';
+declare const MenuItemCollapsible: import("svelte").Component<MenuItemCollapsibleProps, {}, "">;
+type MenuItemCollapsible = ReturnType<typeof MenuItemCollapsible>;
+export default MenuItemCollapsible;

package/dist/Notification.svelte

@@ -1,34 +1,38 @@
-<script>import clsx from "clsx";
-import { Alert, Failure, Success } from "@invopop/ui-icons";
-import { Icon } from "@steeze-ui/svelte-icon";
-export let message = "";
-export let type = "success";
-$:
-  icon = getIcon(type);
-$:
-  styles = clsx(
-    { "bg-positive-50": type === "success" },
-    { "bg-danger-50": type === "error" },
-    { "bg-yellow-50": type === "warning" }
-  );
-$:
-  textStyles = clsx(
-    { "text-positive-500": type === "success" },
-    { "text-danger-500": type === "error" },
-    { "text-yellow-500": type === "warning" }
-  );
-function getIcon(type2) {
-  switch (type2) {
-    case "success":
-      return Success;
-    case "error":
-      return Failure;
-    case "warning":
-      return Alert;
-    default:
-      return null;
+<script lang="ts">
+  import clsx from 'clsx'
+  import { Alert, Failure, Success } from '@invopop/ui-icons'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { NotificationProps, Status } from './types'
+
+  let { message = '', type = 'success', children }: NotificationProps = $props()
+
+  function getIcon(type: Status) {
+    switch (type) {
+      case 'success':
+        return Success
+      case 'error':
+        return Failure
+      case 'warning':
+        return Alert
+      default:
+        return null
+    }
   }
-}
+  let icon = $derived(getIcon(type))
+  let styles = $derived(
+    clsx(
+      { 'bg-positive-50': type === 'success' },
+      { 'bg-danger-50': type === 'error' },
+      { 'bg-yellow-50': type === 'warning' }
+    )
+  )
+  let textStyles = $derived(
+    clsx(
+      { 'text-positive-500': type === 'success' },
+      { 'text-danger-500': type === 'error' },
+      { 'text-yellow-500': type === 'warning' }
+    )
+  )
 </script>
 
 <div class="{styles} pl-3 pr-2 py-2 text-base font-medium rounded-lg flex items-center space-x-1">
@@ -36,5 +40,5 @@ function getIcon(type2) {
     <Icon src={icon} class="h-4 w-4" />
   {/if}
   <span class="{textStyles} flex-1">{message}</span>
-  <slot />
+  {@render children?.()}
 </div>

package/dist/Notification.svelte.d.ts

@@ -1,20 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { Status } from './types';
-declare const __propDef: {
-    props: {
-        message?: string | undefined;
-        type?: Status | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type NotificationProps = typeof __propDef.props;
-export type NotificationEvents = typeof __propDef.events;
-export type NotificationSlots = typeof __propDef.slots;
-export default class Notification extends SvelteComponent<NotificationProps, NotificationEvents, NotificationSlots> {
-}
-export {};
+import type { NotificationProps } from './types';
+declare const Notification: import("svelte").Component<NotificationProps, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

package/dist/ProfileAvatar.svelte

@@ -1,21 +1,28 @@
-<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 lang="ts">
+  import clsx from 'clsx'
+  import BaseFlag from './BaseFlag.svelte'
+  import type { ProfileAvatarProps } from './types'
+
+  let {
+    name = '',
+    small = false,
+    large = false,
+    dark = false,
+    picture = $bindable(''),
+    country = ''
+  }: ProfileAvatarProps = $props()
+
+  let avatarStyles = $derived(
+    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">
@@ -24,7 +31,7 @@ $:
       class="h-full w-full rounded object-cover"
       src={picture}
       alt={name}
-      on:error={() => {
+      onerror={() => {
         picture = ''
       }}
     />

package/dist/ProfileAvatar.svelte.d.ts

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

package/dist/ProfileSelector.svelte

@@ -1,24 +1,32 @@
-<script>import clsx from "clsx";
-import ProfileAvatar from "./ProfileAvatar.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { ChevronUp } from "@invopop/ui-icons";
-export let name = "";
-export let orgName = "";
-export let picture = "";
-export let collapsed = false;
-export let isOpen = false;
-$:
-  styles = clsx(
-    { "p-[5px]": collapsed },
-    { "w-full pl-1.5 pr-2 py-[7px]": !collapsed },
-    { "border-white-30 bg-white-10": isOpen },
-    { "border-transparent hover:bg-white-5": !isOpen }
-  );
+<script lang="ts">
+  import clsx from 'clsx'
+  import ProfileAvatar from './ProfileAvatar.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronUp } from '@invopop/ui-icons'
+  import type { ProfileSelectorProps } from './types'
+
+  let {
+    name = '',
+    orgName = '',
+    picture = '',
+    collapsed = false,
+    isOpen = false,
+    onclick
+  }: ProfileSelectorProps = $props()
+
+  let styles = $derived(
+    clsx(
+      { 'p-[5px]': collapsed },
+      { 'w-full pl-1.5 pr-2 py-[7px]': !collapsed },
+      { 'border-white-30 bg-white-10': isOpen },
+      { 'border-transparent hover:bg-white-5': !isOpen }
+    )
+  )
 </script>
 
 <button
   class="{styles} text-white border border-transparent text-base flex items-center justify-between space-x-1 rounded text-left"
-  on:click
+  {onclick}
 >
   <span class="flex items-center justify-between w-full space-x-2">
     <ProfileAvatar {name} {picture} dark large />

package/dist/ProfileSelector.svelte.d.ts

@@ -1,22 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        name?: string | undefined;
-        orgName?: string | undefined;
-        picture?: string | undefined;
-        collapsed?: boolean | undefined;
-        isOpen?: 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 {};
+import type { ProfileSelectorProps } from './types';
+declare const ProfileSelector: import("svelte").Component<ProfileSelectorProps, {}, "">;
+type ProfileSelector = ReturnType<typeof ProfileSelector>;
+export default ProfileSelector;

package/dist/SectionLayout.svelte

@@ -1,10 +1,13 @@
-<script>import TitleSection from "./TitleSection.svelte";
-export let title = "";
+<script lang="ts">
+  import TitleSection from './TitleSection.svelte'
+  import type { SectionLayoutProps } from './types'
+
+  let { title = '', children }: SectionLayoutProps = $props()
 </script>
 
 <div class="py-5">
   <TitleSection {title} />
   <div class="mt-3">
-    <slot />
+    {@render children?.()}
   </div>
 </div>

package/dist/SectionLayout.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 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 {};
+import type { SectionLayoutProps } from './types';
+declare const SectionLayout: import("svelte").Component<SectionLayoutProps, {}, "">;
+type SectionLayout = ReturnType<typeof SectionLayout>;
+export default SectionLayout;

package/dist/SeparatorHorizontal.svelte

@@ -1,4 +1,4 @@
-<div class="border-b border-transparent hr-separator" />
+<div class="border-b border-transparent hr-separator"></div>
 
 <style>
   .hr-separator {

package/dist/SeparatorHorizontal.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  SeparatorHorizontalProps */
-/** @typedef {typeof __propDef.events}  SeparatorHorizontalEvents */
-/** @typedef {typeof __propDef.slots}  SeparatorHorizontalSlots */
-export default class SeparatorHorizontal extends SvelteComponent<{
+export default SeparatorHorizontal;
+type SeparatorHorizontal = 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: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const SeparatorHorizontal: $$__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/ShortcutWrapper.svelte

@@ -1,6 +1,12 @@
+<script lang="ts">
+  import type { ShortcutWrapperProps } from './types'
+
+  let { children }: ShortcutWrapperProps = $props()
+</script>
+
 <div
   class="h-4 w-4 bg-white-5 rounded border border-white-20 inline-flex items-center justify-center"
   style="box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);"
 >
-  <slot />
+  {@render children?.()}
 </div>

package/dist/ShortcutWrapper.svelte.d.ts

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

package/dist/StatusLabel.svelte

@@ -1,15 +1,19 @@
-<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 lang="ts">
+  import clsx from 'clsx'
+  import FeedIconStatus from './FeedIconStatus.svelte'
+  import type { StatusLabelProps } from './types.js'
+
+  let { status, label = '' }: StatusLabelProps = $props()
+
+  let styles = $derived(
+    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">

package/dist/StatusLabel.svelte.d.ts

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

package/dist/StepIconList.svelte

@@ -1,45 +1,48 @@
-<script>import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-export let icons = [];
-$:
-  maxItems = icons.length > 6 ? 5 : 6;
-$:
-  mainIcons = icons.slice(0, maxItems);
-$:
-  restIcons = icons.slice(maxItems, icons.length);
+<script lang="ts">
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from './tooltip'
+  import type { StepIconListProps } from './types.js'
+
+  let { icons = [] }: StepIconListProps = $props()
+
+  let maxItems = $derived(icons.length > 6 ? 5 : 6)
+  let mainIcons = $derived(icons.slice(0, maxItems))
+  let restIcons = $derived(icons.slice(maxItems, icons.length))
 </script>
 
-<div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
-  {#each mainIcons as icon, i (i)}
-    <Tooltip>
-      <TooltipTrigger class="flex-shrink-0">
-        <div
-          class="p-1.5 border rounded-md border-neutral-200 flex items-center space-x-1 bg-white text-neutral-800"
-        >
-          <img src={icon.url} alt={icon.name} class="w-4 h-4" />
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>{icon.name}</TooltipContent>
-    </Tooltip>
+<TooltipProvider>
+  <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
+    {#each mainIcons as icon, i (i)}
+      <Tooltip>
+        <TooltipTrigger class="flex-shrink-0">
+          <div
+            class="p-1.5 border rounded-md border-neutral-200 flex items-center space-x-1 bg-white text-neutral-800"
+          >
+            <img src={icon.url} alt={icon.name} class="w-4 h-4" />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>{icon.name}</TooltipContent>
+      </Tooltip>
 
-    {#if i < mainIcons.length - 1}
-      <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0" />
+      {#if i < mainIcons.length - 1}
+        <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0"></div>
+      {/if}
+    {/each}
+    {#if restIcons.length}
+      <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0"></div>
+      <Tooltip>
+        <TooltipTrigger class="flex-shrink-0">
+          <div
+            class="flex items-center justify-center text-neutral-500 font-medium text-base h-7 w-7"
+          >
+            +{restIcons.length}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          {#each restIcons as restIcon}
+            <div>{restIcon.name}</div>
+          {/each}
+        </TooltipContent>
+      </Tooltip>
     {/if}
-  {/each}
-  {#if restIcons.length}
-    <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0" />
-    <Tooltip>
-      <TooltipTrigger class="flex-shrink-0">
-        <div
-          class="flex items-center justify-center text-neutral-500 font-medium text-base h-7 w-7"
-        >
-          +{restIcons.length}
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        {#each restIcons as restIcon}
-          <div>{restIcon.name}</div>
-        {/each}
-      </TooltipContent>
-    </Tooltip>
-  {/if}
-</div>
+  </div>
+</TooltipProvider>