@adriansyah/heroui-svelte 0.0.1 → 0.0.3

package/README.md

@@ -5,7 +5,7 @@ A Svelte 5 wrapper for [HeroUI](https://heroui.com), bringing HeroUI's styling a
 ## Installation
 
 ```sh
-bun add github:adriansyah-kadir/heroui-svelte#release @heroui/styles
+bun add @adriansyah/heroui-svelte @heroui/styles
 ```
 
 ## Setup
@@ -16,7 +16,7 @@ Import Tailwind CSS and HeroUI styles in your main CSS file:
 @import "tailwindcss";
 @import "@heroui/styles";
 
-@source "../../node_modules/heroui-svelte/dist";
+@source "../../node_modules/@adriansyah/heroui-svelte/dist";
 ```
 
 Adjust the `@source` path to match your project structure.
@@ -27,7 +27,7 @@ Import components from `heroui-svelte` and use them in your Svelte 5 components.
 
 ```svelte
 <script lang="ts">
-  import { Button } from "heroui-svelte";
+  import { Button } from "@adriansyah/heroui-svelte";
 </script>
 
 <Button>Get started</Button>

package/dist/components/autocomplete/autocomplete-popover.svelte

@@ -7,7 +7,7 @@
   const autocomplete = AutocompleteContext.get();
 </script>
 
-<PopoverContent popover="manual">
+<PopoverContent {@attach autocomplete.popover.attach()} popover="manual">
   <div
     {...props}
     class={autocompleteVariants(autocomplete.heroui).popover({

package/dist/components/autocomplete/autocomplete-trigger.svelte

@@ -1,28 +1,52 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  import { PopoverContext } from "../../index.js";
+  import { AutocompleteContext } from "../../index.js";
   import { autocompleteVariants } from "@heroui/styles";
+  import AutocompleteClearButton from "./autocomplete-clear-button.svelte";
+  import AutocompleteIndicator from "./autocomplete-indicator.svelte";
+  import AutocompleteValue from "./autocomplete-value.svelte";
+  import type { Snippet } from "svelte";
 
-  interface Props extends HTMLAttributes<HTMLDivElement> {}
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    child?: Snippet<[{ props: HTMLAttributes<any>; ctx: AutocompleteContext }]>;
+  };
 
-  const { children, ...props }: Props = $props();
-  const { popover } = PopoverContext.get();
+  const { children, child, ...props }: Props = $props();
+  const ctx = AutocompleteContext.get();
+  const popover = ctx.popover;
+  const merged: HTMLAttributes<any> = $derived({
+    ...props,
+    tabindex: 0,
+    role: "button",
+    "data-open": popover.open,
+    "data-popover": popover.node?.popover,
+    onclick: (ev) => {
+      props.onclick?.(ev);
+      popover.toggle(undefined, ev.currentTarget);
+    },
+  });
 </script>
 
-<div
-  {...props}
-  role="button"
-  tabindex="0"
-  data-slot="autocomplete-trigger"
-  data-open={popover.open}
-  data-popover={popover.node?.popover}
-  class={autocompleteVariants().trigger({
-    class: [
-      props?.class?.toString(),
-      "data-[open=true]:[[data-popover=''],[data-popover='auto']]:pointer-events-none",
-    ],
-  })}
-  onclick={(ev) => popover.toggle(undefined, ev.currentTarget)}
->
-  {@render children?.()}
-</div>
+{#if child}
+  {@render child({ props: merged, ctx })}
+{:else}
+  <div
+    {...merged}
+    data-slot="autocomplete-trigger"
+    class={autocompleteVariants().trigger({
+      ...ctx.heroui,
+      class: [
+        props?.class?.toString(),
+        "data-[open=true]:[[data-popover=''],[data-popover='auto']]:pointer-events-none",
+      ],
+    })}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      <AutocompleteValue placeholder={props.placeholder ?? undefined} />
+      <AutocompleteIndicator />
+      <AutocompleteClearButton />
+    {/if}
+  </div>
+{/if}

package/dist/components/autocomplete/autocomplete-trigger.svelte.d.ts

@@ -1,6 +1,12 @@
 import type { HTMLAttributes } from "svelte/elements";
-interface Props extends HTMLAttributes<HTMLDivElement> {
-}
+import { AutocompleteContext } from "../../index.js";
+import type { Snippet } from "svelte";
+type Props = HTMLAttributes<HTMLDivElement> & {
+    child?: Snippet<[{
+        props: HTMLAttributes<any>;
+        ctx: AutocompleteContext;
+    }]>;
+};
 declare const AutocompleteTrigger: import("svelte").Component<Props, {}, "">;
 type AutocompleteTrigger = ReturnType<typeof AutocompleteTrigger>;
 export default AutocompleteTrigger;

package/dist/components/autocomplete/autocomplete.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  import {
-    Popover,
-    AutocompleteContext,
-    type AutocompleteOpts,
-  } from "../../index.js";
+  import { Popover, AutocompleteContext, type AutocompleteOpts } from "../../index.js";
   import { box } from "svelte-utils";
+  import { autocompleteVariants } from "@heroui/styles";
 
   type Props = HTMLAttributes<HTMLElement> &
     Partial<AutocompleteOpts> & {
@@ -48,5 +45,14 @@
 </script>
 
 <Popover {offset} {placement}>
-  {@render props.children?.()}
+  <div
+    {...props}
+    class={autocompleteVariants().base({
+      fullWidth,
+      variant,
+      class: props.class?.toString(),
+    })}
+  >
+    {@render props.children?.()}
+  </div>
 </Popover>

package/dist/components/autocomplete/index.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { AutocompleteVariants } from "@heroui/styles";
-import { Context, type Box, type Getter } from "svelte-utils";
-import { ListBoxContext, PopoverContext, type ListBoxOpts, type PopoverContextOpts } from "../../index.js";
+import { Context, type Box, type Getter, PopoverState } from "svelte-utils";
+import { ListBoxContext, type ListBoxOpts, type PopoverContextOpts } from "../../index.js";
 export type AutocompleteOpts = ListBoxOpts & AutocompleteVariants & PopoverContextOpts & {
     invalid?: boolean;
 };
 export declare class AutocompleteContext extends Context {
     opts: AutocompleteOpts;
-    popoverCtx: PopoverContext;
+    popover: PopoverState;
     listboxCtx: ListBoxContext;
     constructor(opts: Getter<AutocompleteOpts>, selected: Box<string[]>);
     autoCloseOnFocusLost(): () => void;

package/dist/components/autocomplete/index.svelte.js

@@ -1,34 +1,33 @@
-import { Context, isEventTargetInAny, watch } from "svelte-utils";
-import { ListBoxContext, PopoverContext } from "../../index.js";
+import { Context, isEventTargetInAny, watch, PopoverState } from "svelte-utils";
+import { ListBoxContext } from "../../index.js";
 export class AutocompleteContext extends Context {
     opts;
-    popoverCtx;
+    popover = new PopoverState();
     listboxCtx;
     constructor(opts, selected) {
         super();
         this.opts = $derived.by(opts);
-        this.popoverCtx = new PopoverContext(opts);
         this.listboxCtx = new ListBoxContext(opts, selected);
         this.autoCloseOnFocusLost();
         this.autoCloseOnSingleSelect();
     }
     autoCloseOnFocusLost() {
         const handleWindowClick = (ev) => {
-            if (!this.popoverCtx.popover.node?.matches(":popover-open"))
+            if (!this.popover.node?.matches(":popover-open"))
                 return;
-            if (isEventTargetInAny(ev, this.popoverCtx.popover.anchor, this.popoverCtx.popover.node)) {
+            if (isEventTargetInAny(ev, this.popover.anchor, this.popover.node)) {
                 return;
             }
             this.close();
         };
         const handleEscapeKey = (ev) => {
-            const focused = this.popoverCtx.popover.node?.matches(":focus-within") || this.popoverCtx.popover.anchor?.matches(":focus-within");
+            const focused = this.popover.node?.matches(":focus-within") || this.popover.anchor?.matches(":focus-within");
             if (ev.code !== "Escape" || !focused)
                 return;
             ev.preventDefault();
             ev.stopImmediatePropagation();
             this.close();
-            this.popoverCtx.popover.anchor?.focus();
+            this.popover.anchor?.focus();
         };
         window.addEventListener("click", handleWindowClick);
         window.addEventListener("keydown", handleEscapeKey);
@@ -45,13 +44,13 @@ export class AutocompleteContext extends Context {
         });
     }
     close() {
-        this.popoverCtx.popover.hide();
+        this.popover.hide();
     }
     open(source) {
-        this.popoverCtx.popover.node?.showPopover({ source });
+        this.popover.node?.showPopover({ source });
     }
     toggle(source) {
-        this.popoverCtx.popover.node?.togglePopover({ source });
+        this.popover.node?.togglePopover({ source });
     }
     get props() {
         return {

package/dist/components/checkbox/checkbox-content.svelte

@@ -2,6 +2,7 @@
   import { checkboxVariants } from "@heroui/styles";
   import type { HTMLLabelAttributes } from "svelte/elements";
   import { InputContext, Input } from "../../index.js";
+  import CheckboxControl from "./checkbox-control.svelte";
 
   type Props = HTMLLabelAttributes;
 
@@ -16,11 +17,11 @@
   );
 </script>
 
-<label
-  {...props}
-  data-slot="checkbox-content"
-  class={contentClass}
->
+<label {...props} data-slot="checkbox-content" class={contentClass}>
   <Input headless hidden type="checkbox" />
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    <CheckboxControl />
+  {/if}
 </label>

package/dist/components/checkbox/checkbox-control.svelte

@@ -2,6 +2,7 @@
   import { checkboxVariants } from "@heroui/styles";
   import type { HTMLAttributes } from "svelte/elements";
   import { InputContext } from "../../index.js";
+  import CheckboxIndicator from "./checkbox-indicator.svelte";
 
   type Props = HTMLAttributes<HTMLSpanElement>;
 
@@ -16,10 +17,10 @@
   );
 </script>
 
-<span
-  {...props}
-  data-slot="checkbox-control"
-  class={controlClass}
->
-  {@render props.children?.()}
+<span {...props} data-slot="checkbox-control" class={controlClass}>
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    <CheckboxIndicator />
+  {/if}
 </span>

package/dist/components/checkbox/checkbox.svelte

@@ -3,6 +3,7 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { type InputOpts, InputContext } from "../../index.js";
   import { box } from "svelte-utils";
+  import CheckboxContent from "./checkbox-content.svelte";
 
   type Props = InputOpts &
     HTMLAttributes<HTMLDivElement> & {
@@ -56,5 +57,9 @@
   data-indeterminate={indeterminate}
   class={checkboxClass}
 >
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    <CheckboxContent />
+  {/if}
 </div>

package/dist/components/filter/index.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { box, Context } from "svelte-utils";
+import { box, boxLink, Context } from "svelte-utils";
 export class FilterContext extends Context {
     #opts;
     #query;
@@ -32,21 +32,6 @@ export class FilterContext extends Context {
         this.#query = query;
     }
     sync(box) {
-        $effect(() => {
-            box.current;
-            untrack(() => {
-                if (box.current === this.query)
-                    return;
-                this.query = box.current;
-            });
-        });
-        $effect(() => {
-            this.query;
-            untrack(() => {
-                if (box.current === this.query)
-                    return;
-                box.current = this.query;
-            });
-        });
+        boxLink(box, this.#query);
     }
 }

package/dist/components/list-box/index.svelte.d.ts

@@ -1,4 +1,6 @@
 import { Context, type Box, type Getter } from "svelte-utils";
+import { FilterContext } from "../filter";
+import type { HTMLAttributes } from "svelte/elements";
 export type ListBoxOpts = {
     disabled?: boolean;
     multiple?: boolean;
@@ -15,3 +17,21 @@ export declare class ListBoxContext extends Context {
     setSelected(value: string, checked: boolean): void;
     constructor(opts: Getter<ListBoxOpts>, selected?: Box<string[]>);
 }
+export type ListBoxItemOpts = {
+    value: string;
+    disabled?: boolean;
+};
+export declare class ListBoxItemContext extends Context {
+    #private;
+    readonly listbox: ListBoxContext;
+    readonly opts: ListBoxItemOpts;
+    readonly filter?: FilterContext;
+    get selected(): boolean;
+    set selected(value: boolean);
+    get value(): string;
+    constructor(opts: Getter<ListBoxItemOpts>, selected?: Box<boolean>);
+    toggle: () => void;
+    get visible(): boolean;
+    get disabled(): boolean | undefined;
+    props: (props?: HTMLAttributes<HTMLDivElement>) => HTMLAttributes<HTMLDivElement>;
+}

package/dist/components/list-box/index.svelte.js

@@ -1,4 +1,6 @@
-import { box, boxArray, Context } from "svelte-utils";
+import { box, boxArray, boxLink, Context } from "svelte-utils";
+import { FilterContext } from "../filter";
+import { onDestroy } from "svelte";
 export class ListBoxContext extends Context {
     #opts;
     get opts() { return this.#opts; }
@@ -23,3 +25,55 @@ export class ListBoxContext extends Context {
         this.#selected = selected;
     }
 }
+export class ListBoxItemContext extends Context {
+    listbox;
+    opts;
+    filter;
+    #selected;
+    get selected() { return this.#selected.current; }
+    set selected(value) { this.#selected.current = value; }
+    get value() { return this.opts.value; }
+    constructor(opts, selected = box(false)) {
+        super();
+        this.listbox = ListBoxContext.get();
+        this.filter = FilterContext.getOr();
+        this.opts = $derived.by(opts);
+        this.#selected = selected;
+        $effect(() => this.filter?.register(this.value));
+        onDestroy(() => {
+            this.listbox.setSelected(this.value, false);
+        });
+        boxLink(box(() => this.listbox.isSelected(this.value), v => this.listbox.setSelected(this.value, v)), selected);
+    }
+    toggle = () => {
+        this.selected = !this.selected;
+    };
+    get visible() {
+        return this.filter === undefined || this.filter.matches(this.value);
+    }
+    get disabled() {
+        return this.opts.disabled || this.listbox.opts.disabled;
+    }
+    props = (props) => {
+        return {
+            onkeydown: ev => {
+                this.#onKeyDown(ev);
+                props?.onkeydown?.(ev);
+            },
+            onclick: ev => {
+                this.toggle();
+                props?.onclick?.(ev);
+            },
+            "data-disabled": this.disabled,
+            "aria-disabled": this.disabled,
+            tabindex: 0,
+            role: "checkbox"
+        };
+    };
+    #onKeyDown(ev) {
+        if (ev.code === "Space" ||
+            (ev.code === "Enter" && ev.target === ev.currentTarget)) {
+            this.toggle();
+        }
+    }
+}

package/dist/components/list-box/list-box-item-indicator.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import { listboxItemVariants } from "@heroui/styles";
-  import { ListBoxContext } from "./index.svelte";
+  import { ListBoxItemContext } from "./index.svelte";
 
   let { ...props }: HTMLAttributes<HTMLDivElement> = $props();
 
-  let node = $state<HTMLElement>();
-  const ctx = ListBoxContext.get();
-  const value = $derived(
-    node?.closest(".list-box-item")?.getAttribute("data-value"),
-  );
-  const selected = $derived(value && ctx.isSelected(value));
+  const ctx = ListBoxItemContext.get();
 </script>
 
 <div
   {...props}
-  bind:this={node}
   data-slot="list-box-item-indicator"
   class={listboxItemVariants().indicator({ class: props.class?.toString() })}
 >
@@ -26,7 +20,7 @@
     role="presentation"
     stroke="currentColor"
     stroke-dasharray={22}
-    stroke-dashoffset={selected ? 44 : 66}
+    stroke-dashoffset={ctx.selected ? 44 : 66}
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width={2}

package/dist/components/list-box/list-box-item.svelte

@@ -1,78 +1,53 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import { listboxItemVariants } from "@heroui/styles";
-  import { ListBoxContext } from "../../index.js";
-  import { FilterContext } from "../filter/index.svelte";
-  import { watch } from "svelte-utils";
+  import { ListBoxItemContext } from "../../index.js";
+  import { box } from "svelte-utils";
+  import type { Snippet } from "svelte";
 
   let {
-    value,
+    value = crypto.randomUUID(),
     disabled,
     selected = $bindable(),
+    child,
     ...props
   }: HTMLAttributes<HTMLDivElement> & {
-    value: string;
+    value?: string;
     selected?: boolean;
     disabled?: boolean;
+    child?: Snippet<[ListBoxItemContext]>;
   } = $props();
 
-  const filter = FilterContext.getOr();
-  const ctx = ListBoxContext.get();
-  const hidden = $derived(filter && !filter.matches(value));
-
-  watch(
-    () => selected,
-    (curr) => {
-      if (curr === ctx.isSelected(value)) return;
-      ctx.setSelected(value, curr ?? ctx.isSelected(value));
-    },
-  );
-
-  watch(
-    () => ctx.isSelected(value),
-    (curr) => {
-      if (curr === selected) return;
-      selected = curr;
-    },
+  const ctx = new ListBoxItemContext(
+    () => ({ value, disabled }),
+    box(
+      () => !!selected,
+      (v) => (selected = v),
+    ),
   );
-
-  $effect(() => () => ctx.setSelected(value, false));
-  $effect(() => filter?.register(value));
 </script>
 
-{#if !hidden}
+{#if child}
+  {@render child(ctx)}
+{:else if ctx.visible}
   <div
-    {...props}
-    onkeydown={(ev) => {
-      if (
-        ev.code === "Space" ||
-        (ev.code === "Enter" && ev.target === ev.currentTarget)
-      ) {
-        ev.preventDefault();
-        ctx.setSelected(value, !selected);
-      }
-    }}
-    onclick={() => ctx.setSelected(value, !selected)}
-    role="checkbox"
-    tabindex="0"
-    data-value={value}
-    data-disabled={ctx.opts.disabled ?? disabled}
+    {...ctx.props(props)}
     data-slot="list-box-item"
     class={listboxItemVariants().item({ class: props.class?.toString() })}
   >
-    {#if ctx.opts.name}
+    {#if ctx.listbox.opts.name}
       <input
         {@attach (node) => {
           const form = node.form;
           if (!form) return;
-          const reset = () => ctx.setSelected(value, false);
+          const reset = () => (ctx.selected = false);
           form.addEventListener("reset", reset);
           return () => form.removeEventListener("reset", reset);
         }}
-        checked={ctx.isSelected(value)}
-        disabled={ctx.opts.disabled ?? disabled}
-        required={ctx.opts.required}
-        name={ctx.opts.name}
+        checked={ctx.selected}
+        disabled={ctx.disabled}
+        required={ctx.listbox.opts.required}
+        name={ctx.listbox.opts.name}
         type={"checkbox"}
         {value}
         hidden

package/dist/components/list-box/list-box-item.svelte.d.ts

@@ -1,8 +1,11 @@
 import type { HTMLAttributes } from "svelte/elements";
+import { ListBoxItemContext } from "../../index.js";
+import type { Snippet } from "svelte";
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
-    value: string;
+    value?: string;
     selected?: boolean;
     disabled?: boolean;
+    child?: Snippet<[ListBoxItemContext]>;
 };
 declare const ListBoxItem: import("svelte").Component<$$ComponentProps, {}, "selected">;
 type ListBoxItem = ReturnType<typeof ListBoxItem>;

package/dist/components/list-box/list-box.svelte

@@ -9,11 +9,10 @@
       selected?: string[];
     };
 
-  const id = $props.id();
   let {
     multiple,
     selected = $bindable([]),
-    name = id,
+    name,
     disabled,
     required,
     ...props

package/dist/components/modal/modal-trigger.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import Button from "../button/button.svelte";
   import { ModalContext } from "./index.svelte";
-  import type { ComponentProps } from "svelte";
+  import type { ComponentProps, Snippet } from "svelte";
 
   const {
     action = "show",
+    child,
     ...props
   }: ComponentProps<typeof Button> & {
     action?: "show" | "close";
+    child?: Snippet<[{ props: HTMLAttributes<any> }]>;
   } = $props();
 
   const ctx = ModalContext.get();
+  const merged: HTMLAttributes<any> = $derived({
+    ...props,
+    onclick: (ev) => {
+      ctx.dialog.toggle?.();
+      props.onclick?.(ev);
+    },
+  });
 </script>
 
-<Button
-  {...props}
-  type="button"
-  command={action === "show" ? "show-modal" : "close"}
-  commandfor={ctx.dialog.nodeId}
->
-  {@render props.children?.()}
-</Button>
+{#if child}
+  {@render child({ props: merged })}
+{:else}
+  <Button {...merged} type="button">
+    {@render props.children?.()}
+  </Button>
+{/if}

package/dist/components/modal/modal-trigger.svelte.d.ts

@@ -1,7 +1,11 @@
+import type { HTMLAttributes } from "svelte/elements";
 import Button from "../button/button.svelte";
-import type { ComponentProps } from "svelte";
+import type { ComponentProps, Snippet } from "svelte";
 type $$ComponentProps = ComponentProps<typeof Button> & {
     action?: "show" | "close";
+    child?: Snippet<[{
+        props: HTMLAttributes<any>;
+    }]>;
 };
 declare const ModalTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
 type ModalTrigger = ReturnType<typeof ModalTrigger>;

package/dist/components/pagination/pagination-content.svelte

@@ -2,6 +2,10 @@
   import type { HTMLAttributes } from "svelte/elements";
   import PaginationState from "./index.svelte";
   import { paginationVariants } from "@heroui/styles";
+  import PaginationItem from "./pagination-item.svelte";
+  import PaginationPrevious from "./pagination-previous.svelte";
+  import PaginationNext from "./pagination-next.svelte";
+  import PaginationLink from "./pagination-link.svelte";
 
   const props: HTMLAttributes<HTMLUListElement> = $props();
   const pagination = PaginationState.get();
@@ -13,5 +17,17 @@
     class: props.class?.toString(),
   })}
 >
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    <PaginationItem>
+      <PaginationPrevious />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink disabled={pagination.total === 0} page={pagination.page} />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext />
+    </PaginationItem>
+  {/if}
 </ul>

package/dist/components/pagination/pagination-link.svelte

@@ -22,5 +22,9 @@
     class: props.class?.toString(),
   })}
 >
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    {page}
+  {/if}
 </button>

package/dist/components/pagination/pagination-next.svelte

@@ -2,6 +2,7 @@
   import type { HTMLButtonAttributes } from "svelte/elements";
   import PaginationState from "./index.svelte";
   import { paginationVariants } from "@heroui/styles";
+  import { PaginationNextIcon } from ".";
 
   const props: HTMLButtonAttributes = $props();
   const pagination = PaginationState.get();
@@ -19,5 +20,10 @@
     class: ["pagination__link--nav"],
   })}
 >
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    Next
+    <PaginationNextIcon />
+  {/if}
 </button>

package/dist/components/pagination/pagination-previous.svelte

@@ -2,6 +2,7 @@
   import type { HTMLButtonAttributes } from "svelte/elements";
   import PaginationState from "./index.svelte";
   import { paginationVariants } from "@heroui/styles";
+  import PaginationPreviousIcon from "./pagination-previous-icon.svelte";
 
   const props: HTMLButtonAttributes = $props();
   const pagination = PaginationState.get();
@@ -19,5 +20,10 @@
     class: ["pagination__link--nav"],
   })}
 >
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    <PaginationPreviousIcon />
+    Prev
+  {/if}
 </button>

package/dist/components/pagination/pagination-summary.svelte

@@ -19,5 +19,11 @@
     class: props.class?.toString(),
   })}
 >
-  {@render children?.(pagination)}
+  {#if children}
+    {@render children(pagination)}
+  {:else if pagination.total === 0}
+    Showing empty
+  {:else}
+    Showing {pagination.start} ~ {pagination.end} of {pagination.total}
+  {/if}
 </div>

package/dist/components/pagination/pagination.svelte

@@ -4,6 +4,8 @@
   import type { HTMLAttributes } from "svelte/elements";
   import PaginationState from "./index.svelte";
   import { box } from "svelte-utils";
+  import PaginationSummary from "./pagination-summary.svelte";
+  import PaginationContent from "./pagination-content.svelte";
 
   let {
     page = $bindable(1),
@@ -36,5 +38,10 @@
     class: props.class?.toString(),
   })}
 >
-  {@render props.children?.()}
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    <PaginationSummary />
+    <PaginationContent />
+  {/if}
 </div>

package/dist/components/popover/index.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Context, PopoverState, type Box, type Getter } from "svelte-utils";
+import { Context, PopoverState, type Box, type Getter } from "@adriansyah/svelte-utils";
 export type PopoverContextOpts = {
     placement?: "bottom" | "top" | "left" | "right";
     offset?: number;

package/dist/components/popover/index.svelte.js

@@ -1,4 +1,4 @@
-import { Context, getPopoverArea, PopoverState } from "svelte-utils";
+import { Context, getPopoverArea, PopoverState } from "@adriansyah/svelte-utils";
 export class PopoverContext extends Context {
     get open() { return this.popover.open; }
     set open(open) { this.popover.open = open; }

package/dist/components/popover/popover-trigger.svelte

@@ -1,17 +1,34 @@
 <script lang="ts">
-  import type { ComponentProps } from "svelte";
+  import type { ComponentProps, Snippet } from "svelte";
   import Button from "../button/button.svelte";
   import { PopoverContext } from "./index.svelte";
+  import type { PopoverState } from "@adriansyah/svelte-utils";
 
-  const props: ComponentProps<typeof Button> = $props();
+  type Props = ComponentProps<typeof Button> & {
+    child?: Snippet<
+      [{ props: ComponentProps<typeof Button>; popover: PopoverState }]
+    >;
+  };
+
+  const { child, ...props }: Props = $props();
 
   const ctx = PopoverContext.get();
+  const merged: ComponentProps<typeof Button> = $derived({
+    ...props,
+    ...{
+      type: "button",
+      command: "toggle-popover",
+      commandfor: ctx.popover.nodeId,
+      pressed: ctx.popover.open,
+    },
+  });
 </script>
 
-<Button
-  {...props}
-  type="button"
-  command="toggle-popover"
-  commandfor={ctx.popover.nodeId}
-  pressed={ctx.popover.open}
-/>
+{#if child}
+  {@render child({
+    props: merged,
+    popover: ctx.popover,
+  })}
+{:else}
+  <Button {...merged} />
+{/if}

package/dist/components/popover/popover-trigger.svelte.d.ts

@@ -1,9 +1,14 @@
-declare const PopoverTrigger: import("svelte").Component<{
-    focused?: boolean;
-    hovered?: boolean;
-    pending?: boolean;
-    pressed?: boolean;
-    disabled?: boolean;
-} & import("@heroui/styles").ButtonVariants & import("svelte/elements").HTMLButtonAttributes, {}, "">;
+import type { ComponentProps, Snippet } from "svelte";
+import Button from "../button/button.svelte";
+import type { PopoverState } from "@adriansyah/svelte-utils";
+type Props = ComponentProps<typeof Button> & {
+    child?: Snippet<[
+        {
+            props: ComponentProps<typeof Button>;
+            popover: PopoverState;
+        }
+    ]>;
+};
+declare const PopoverTrigger: import("svelte").Component<Props, {}, "">;
 type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
 export default PopoverTrigger;

package/dist/components/popover/popover.svelte

@@ -17,7 +17,7 @@
     children,
   }: Partial<Props> = $props();
 
-  export const context = PopoverContext.getOr([
+  new PopoverContext(
     () => ({
       fallbackAnchor,
       offset,
@@ -27,7 +27,7 @@
       () => open,
       (v) => (open = v),
     ),
-  ]);
+  );
 </script>
 
 {@render children?.()}

package/dist/components/popover/popover.svelte.d.ts

@@ -1,11 +1,9 @@
-import { PopoverContext, type PopoverContextOpts } from "./index.svelte";
+import { type PopoverContextOpts } from "./index.svelte";
 import type { Snippet } from "svelte";
 declare const Popover: import("svelte").Component<Partial<Omit<PopoverContextOpts, "open" | "fallbackAnchor"> & {
     open?: boolean;
     fallbackAnchor?: HTMLElement;
     children?: Snippet;
-}>, {
-    context: PopoverContext;
-}, "open">;
+}>, {}, "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/search-input/search-input.svelte

@@ -34,7 +34,7 @@
 
   const filter = FilterContext.getOr();
   const empty = $derived(value === undefined || value === "");
-  InputContext.getOr([
+  new InputContext(
     () => ({
       disabled,
       fullWidth,
@@ -48,13 +48,14 @@
       () => value,
       (v) => (value = v),
     ),
-  ]);
+  );
 
   watch(
     () => value ?? "",
     (currentValue) => {
+      if (currentValue === value) return;
       const timeout = setTimeout(
-        () => (debounced = currentValue),
+        () => (debounced = String(currentValue)),
         Math.max(0, debounce),
       );
       return () => clearTimeout(timeout);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adriansyah/heroui-svelte",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"devDependencies": {
 		"@chromatic-com/storybook": "latest",
 		"@heroui/styles": "^3.2.6",
@@ -66,6 +66,6 @@
 	"type": "module",
 	"types": "./dist/index.d.ts",
 	"dependencies": {
-		"svelte-utils": "github:adriansyah-kadir/svelte-utils#release"
+		"@adriansyah/svelte-utils": "^0.0.1"
 	}
 }