@adriansyah/heroui-svelte 0.0.2 → 0.0.4

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 { box } from "svelte-utils";
+  import { Popover, AutocompleteContext, type AutocompleteOpts } from "../../index.js";
+  import { box } from "@adriansyah/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 "@adriansyah/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 "@adriansyah/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/avatar/context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { AvatarVariants } from "@heroui/styles";
-import { Context, type Getter } from "svelte-utils";
+import { Context, type Getter } from "@adriansyah/svelte-utils";
 export type AvatarOpts = AvatarVariants;
 export declare class AvatarContext extends Context {
     readonly opts: AvatarOpts;

package/dist/components/avatar/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from "svelte-utils";
+import { Context } from "@adriansyah/svelte-utils";
 export class AvatarContext extends Context {
     opts;
     constructor(opts) {

package/dist/components/button/button.svelte

@@ -2,7 +2,7 @@
   import { buttonVariants } from "@heroui/styles";
   import type { HTMLButtonAttributes } from "svelte/elements";
   import { type ButtonOpts, ButtonContext, Spinner } from "../../index.js";
-  import { useRipples } from "svelte-utils";
+  import { useRipples } from "@adriansyah/svelte-utils";
 
   const {
     focused,

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

@@ -1,5 +1,5 @@
 import type { ButtonVariants } from "@heroui/styles";
-import { Context, type Getter } from "svelte-utils";
+import { Context, type Getter } from "@adriansyah/svelte-utils";
 export type ButtonOpts = {
     focused?: boolean;
     hovered?: boolean;

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

@@ -1,4 +1,4 @@
-import { coalesce, Context } from "svelte-utils";
+import { coalesce, Context } from "@adriansyah/svelte-utils";
 import { ButtonGroupContext } from "../button-group/context.svelte";
 export class ButtonContext extends Context {
     opts;

package/dist/components/button-group/context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonVariants } from "@heroui/styles";
-import { Context, type Getter } from "svelte-utils";
+import { Context, type Getter } from "@adriansyah/svelte-utils";
 export type ButtonGroupOpts = ButtonVariants;
 export declare class ButtonGroupContext extends Context {
     readonly opts: ButtonGroupOpts;

package/dist/components/button-group/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from "svelte-utils";
+import { Context } from "@adriansyah/svelte-utils";
 export class ButtonGroupContext extends Context {
     opts;
     constructor(opts) {

package/dist/components/card/context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CardVariants } from "@heroui/styles";
-import { Context, type Getter } from "svelte-utils";
+import { Context, type Getter } from "@adriansyah/svelte-utils";
 export declare class CardContext extends Context {
     opts: CardVariants;
     constructor(opts: Getter<CardVariants>);

package/dist/components/card/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from "svelte-utils";
+import { Context } from "@adriansyah/svelte-utils";
 export class CardContext extends Context {
     opts;
     constructor(opts) {

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

@@ -2,7 +2,8 @@
   import { checkboxVariants } from "@heroui/styles";
   import type { HTMLAttributes } from "svelte/elements";
   import { type InputOpts, InputContext } from "../../index.js";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/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/collection/collection.svelte

@@ -5,7 +5,7 @@
     useResource,
     type Fn,
     type MaybePromise,
-  } from "svelte-utils";
+  } from "@adriansyah/svelte-utils";
   import type { Attachment } from "svelte/attachments";
 
   type ChildProps = {

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

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import { type Fn, type MaybePromise } from "svelte-utils";
+import { type Fn, type MaybePromise } from "@adriansyah/svelte-utils";
 import type { Attachment } from "svelte/attachments";
 declare function $$render<T>(): {
     props: {

package/dist/components/filter/filter-provider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { FilterContext, type FilterOpts } from "./index.svelte";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/svelte-utils";
 
   type Props = {
     children?: Snippet;

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

@@ -1,7 +1,7 @@
-import { Context, type Box, type Fn, type Getter } from "svelte-utils";
+import { Context, type Box, type Fn, type Getter } from "@adriansyah/svelte-utils";
 export type FilterOpts = {
     caseSensitive?: boolean;
-    filter?: Fn<boolean, [string, string]>;
+    filter?: Fn<[string, string], boolean>;
 };
 export declare class FilterContext extends Context {
     #private;
@@ -13,5 +13,5 @@ export declare class FilterContext extends Context {
     matches: (text: string) => boolean;
     filter: (query: string, text: string) => boolean;
     constructor(opts: Getter<FilterOpts>, query?: Box<string>);
-    sync(box: Box<string>): void;
+    sync(value: Box<string>): void;
 }

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

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { box, Context } from "svelte-utils";
+import { box, Context } from "@adriansyah/svelte-utils";
 export class FilterContext extends Context {
     #opts;
     #query;
@@ -31,22 +31,7 @@ export class FilterContext extends Context {
         this.#opts = $derived.by(opts);
         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;
-            });
-        });
+    sync(value) {
+        box.link(value, this.#query);
     }
 }

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

@@ -1,5 +1,5 @@
 import type { InputVariants } from "@heroui/styles";
-import { Context, type Box, type Getter } from "svelte-utils";
+import { Context, type Box, type Getter } from "@adriansyah/svelte-utils";
 export type InputValue = string | number | undefined;
 export type InputOpts = InputVariants & {
     disabled?: boolean;

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

@@ -1,4 +1,4 @@
-import { box, boxLink, coalesce, Context } from "svelte-utils";
+import { box, coalesce, Context } from "@adriansyah/svelte-utils";
 export class InputContext extends Context {
     opts;
     #value;
@@ -23,8 +23,8 @@ export class InputContext extends Context {
         this.#checked = checked;
         if (!parent)
             return;
-        boxLink(parent.#value, value);
-        boxLink(parent.#checked, checked);
+        box.link(parent.#value, value);
+        box.link(parent.#checked, checked);
     }
     get props() {
         return {

package/dist/components/input/input.svelte

@@ -2,7 +2,7 @@
   import { inputVariants } from "@heroui/styles";
   import type { HTMLInputAttributes } from "svelte/elements";
   import { type InputOpts, InputContext } from "../../index.js";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/svelte-utils";
 
   type Props = {
     headless?: boolean;

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

@@ -2,7 +2,7 @@
   import { inputGroupVariants } from "@heroui/styles";
   import type { ComponentProps } from "svelte";
   import { Input, InputContext } from "../../index.js";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/svelte-utils";
 
   let {
     value = $bindable(),

package/dist/components/input-group/input-group-textarea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { inputGroupVariants } from "@heroui/styles";
   import { InputContext, type InputOpts } from "../../index.js";
-  import { box, coalesce } from "svelte-utils";
+  import { box, coalesce } from "@adriansyah/svelte-utils";
   import type { HTMLAttributes } from "svelte/elements";
 
   let {

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

@@ -2,7 +2,7 @@
   import { inputGroupVariants } from "@heroui/styles";
   import type { HTMLAttributes } from "svelte/elements";
   import { type InputOpts, type InputValue, InputContext } from "../../index.js";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/svelte-utils";
 
   type Props = InputOpts &
     HTMLAttributes<HTMLDivElement> & {

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

@@ -1,4 +1,6 @@
-import { Context, type Box, type Getter } from "svelte-utils";
+import { Context, type Box, type Getter } from "@adriansyah/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,9 +1,11 @@
-import { box, boxArray, Context } from "svelte-utils";
+import { box, Context } from "@adriansyah/svelte-utils";
+import { FilterContext } from "../filter";
+import { onDestroy } from "svelte";
 export class ListBoxContext extends Context {
     #opts;
     get opts() { return this.#opts; }
     #selected;
-    get selected() { return boxArray(this.#selected); }
+    get selected() { return box.array(this.#selected); }
     set selected(values) { this.#selected.current = values; }
     get noSelected() { return this.selected.length === 0; }
     isSelected(value) {
@@ -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);
+        });
+        box.link(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();
+        }
+    }
+}