@adriansyah/heroui-svelte 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,39 @@
-# Temporary Holding Version
+# HeroUI Svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Svelte 5 wrapper for [HeroUI](https://heroui.com), bringing HeroUI's styling and component experience to Svelte applications.
+
+## Installation
+
+```sh
+bun add github:adriansyah-kadir/heroui-svelte#release @heroui/styles
+```
+
+## Setup
+
+Import Tailwind CSS and HeroUI styles in your main CSS file:
+
+```css
+@import "tailwindcss";
+@import "@heroui/styles";
+
+@source "../../node_modules/heroui-svelte/dist";
+```
+
+Adjust the `@source` path to match your project structure.
+
+## Usage
+
+Import components from `heroui-svelte` and use them in your Svelte 5 components.
+
+```svelte
+<script lang="ts">
+  import { Button } from "heroui-svelte";
+</script>
+
+<Button>Get started</Button>
+```
+
+## Documentation
+
+* [HeroUI](https://heroui.com) — Original design system and component reference.
+* [Storybook](https://adriansyah-kadir.github.io/heroui-svelte/) — Explore this library's Svelte components and examples.

package/dist/components/autocomplete/autocomplete-clear-button.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { CloseIcon, CloseButton, AutocompleteContext } from "../../index.js";
+  import { autocompleteVariants } from "@heroui/styles";
+  import type { ComponentProps } from "svelte";
+
+  const props: ComponentProps<typeof CloseButton> = $props();
+  const autocomplete = AutocompleteContext.get();
+  const list = autocomplete.listboxCtx;
+</script>
+
+<button
+  {...props}
+  disabled={list.noSelected}
+  data-empty={list.noSelected}
+  onclick={(ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    props.onclick?.(ev);
+    list.selected = [];
+  }}
+  class={autocompleteVariants().clearButton({ class: props.class?.toString() })}
+>
+  <CloseIcon />
+</button>

package/dist/components/autocomplete/autocomplete-clear-button.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AutocompleteClearButton: import("svelte").Component<import("svelte/elements").HTMLButtonAttributes, {}, "">;
+type AutocompleteClearButton = ReturnType<typeof AutocompleteClearButton>;
+export default AutocompleteClearButton;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import FilterProvider from "../filter/filter-provider.svelte";
+  import { PopoverContext } from "../popover";
+
+  let { query = $bindable(""), ...props }: ComponentProps<typeof FilterProvider> =
+    $props();
+  const popover = PopoverContext.get();
+
+  $effect(() => {
+    if (popover.open) return;
+    query = "";
+  });
+</script>
+
+<FilterProvider bind:query {...props} />

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

@@ -0,0 +1,6 @@
+declare const AutocompleteFilter: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+    query?: string;
+} & import("../filter").FilterOpts, {}, "query">;
+type AutocompleteFilter = ReturnType<typeof AutocompleteFilter>;
+export default AutocompleteFilter;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { autocompleteVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { ChevronDownIcon } from "../../index.js";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+  };
+
+  const { children, open, ...props }: Props = $props();
+</script>
+
+<div
+  {...props}
+  data-open={open}
+  class={autocompleteVariants().indicator({
+    class: props.class?.toString(),
+  })}
+>
+  <ChevronDownIcon />
+</div>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "svelte/elements";
+type Props = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+};
+declare const AutocompleteIndicator: import("svelte").Component<Props, {}, "">;
+type AutocompleteIndicator = ReturnType<typeof AutocompleteIndicator>;
+export default AutocompleteIndicator;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { autocompleteVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { PopoverContent, AutocompleteContext } from "../../index.js";
+
+  const props: HTMLAttributes<HTMLDivElement> = $props();
+  const autocomplete = AutocompleteContext.get();
+</script>
+
+<PopoverContent popover="manual">
+  <div
+    {...props}
+    class={autocompleteVariants(autocomplete.heroui).popover({
+      class: props.class?.toString(),
+    })}
+  >
+    {@render props.children?.()}
+  </div>
+</PopoverContent>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const AutocompletePopover: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type AutocompletePopover = ReturnType<typeof AutocompletePopover>;
+export default AutocompletePopover;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { PopoverContext } from "../../index.js";
+  import { autocompleteVariants } from "@heroui/styles";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+  const { children, ...props }: Props = $props();
+  const { popover } = PopoverContext.get();
+</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>

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const AutocompleteTrigger: import("svelte").Component<Props, {}, "">;
+type AutocompleteTrigger = ReturnType<typeof AutocompleteTrigger>;
+export default AutocompleteTrigger;

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { autocompleteVariants, tagVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { CloseIcon, ListBoxContext, AutocompleteContext } from "../../index.js";
+  import type { Snippet } from "svelte";
+
+  const {
+    children,
+    placeholder,
+    ...props
+  }: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    children?: Snippet<[string[]]>;
+    placeholder?: string;
+  } = $props();
+  const autocomplete = AutocompleteContext.get();
+  const listBox = ListBoxContext.get();
+  const first = $derived(listBox.selected.at(0));
+  const tag = $derived(
+    tagVariants({
+      size: "sm",
+      variant:
+        autocomplete.heroui.variant === "secondary" ? "surface" : "default",
+    }),
+  );
+</script>
+
+<div
+  class={autocompleteVariants().value({
+    class: props.class?.toString(),
+  })}
+>
+  {#if children}
+    {@render children(autocomplete.listboxCtx.selected)}
+  {:else}
+    {@render DefaultChildren()}
+  {/if}
+</div>
+
+{#snippet DefaultChildren()}
+  {#if listBox.opts.multiple && first !== undefined}
+    <div class="tag-group">
+      <ul class="tag-group__list">
+        {#each listBox.selected as value}
+          <span class={tag.base()}>
+            {value}
+            <button
+              class={tag.removeButton()}
+              onclick={(ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                listBox.setSelected(value, !listBox.isSelected(value));
+              }}
+            >
+              <CloseIcon />
+            </button>
+          </span>
+        {/each}
+      </ul>
+    </div>
+  {:else if first}
+    {first}
+  {:else}
+    {placeholder ?? "-"}
+  {/if}
+{/snippet}

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    children?: Snippet<[string[]]>;
+    placeholder?: string;
+};
+declare const AutocompleteValue: import("svelte").Component<$$ComponentProps, {}, "">;
+type AutocompleteValue = ReturnType<typeof AutocompleteValue>;
+export default AutocompleteValue;

package/dist/components/autocomplete/autocomplete.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    Popover,
+    AutocompleteContext,
+    type AutocompleteOpts,
+  } from "../../index.js";
+  import { box } from "svelte-utils";
+
+  type Props = HTMLAttributes<HTMLElement> &
+    Partial<AutocompleteOpts> & {
+      onSelected?: (keys: string[]) => any;
+      selected?: string[];
+    };
+
+  let {
+    selected = $bindable(),
+    disabled,
+    multiple,
+    required,
+    name,
+    fullWidth,
+    variant,
+    invalid,
+    onSelected,
+    offset = 8,
+    placement = "bottom",
+    ...props
+  }: Props = $props();
+
+  new AutocompleteContext(
+    () => ({
+      offset,
+      placement,
+      disabled,
+      fullWidth,
+      invalid,
+      multiple,
+      name,
+      required,
+      variant,
+    }),
+    box(
+      () => selected ?? [],
+      (v) => (selected = v),
+    ),
+  );
+</script>
+
+<Popover {offset} {placement}>
+  {@render props.children?.()}
+</Popover>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type AutocompleteOpts } from "../../index.js";
+type Props = HTMLAttributes<HTMLElement> & Partial<AutocompleteOpts> & {
+    onSelected?: (keys: string[]) => any;
+    selected?: string[];
+};
+declare const Autocomplete: import("svelte").Component<Props, {}, "selected">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

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

@@ -0,0 +1,8 @@
+export { default as AutocompleteClearButton } from "./autocomplete-clear-button.svelte";
+export { default as AutocompleteIndicator } from "./autocomplete-indicator.svelte";
+export { default as AutocompletePopover } from "./autocomplete-popover.svelte";
+export { default as AutocompleteTrigger } from "./autocomplete-trigger.svelte";
+export { default as AutocompleteValue } from "./autocomplete-value.svelte";
+export { default as AutocompleteFilter } from "./autocomplete-filter.svelte";
+export { default as Autocomplete } from "./autocomplete.svelte";
+export * from "./index.svelte.js";

package/dist/components/autocomplete/index.js

@@ -0,0 +1,8 @@
+export { default as AutocompleteClearButton } from "./autocomplete-clear-button.svelte";
+export { default as AutocompleteIndicator } from "./autocomplete-indicator.svelte";
+export { default as AutocompletePopover } from "./autocomplete-popover.svelte";
+export { default as AutocompleteTrigger } from "./autocomplete-trigger.svelte";
+export { default as AutocompleteValue } from "./autocomplete-value.svelte";
+export { default as AutocompleteFilter } from "./autocomplete-filter.svelte";
+export { default as Autocomplete } from "./autocomplete.svelte";
+export * from "./index.svelte.js";

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

@@ -0,0 +1,26 @@
+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";
+export type AutocompleteOpts = ListBoxOpts & AutocompleteVariants & PopoverContextOpts & {
+    invalid?: boolean;
+};
+export declare class AutocompleteContext extends Context {
+    opts: AutocompleteOpts;
+    popoverCtx: PopoverContext;
+    listboxCtx: ListBoxContext;
+    constructor(opts: Getter<AutocompleteOpts>, selected: Box<string[]>);
+    autoCloseOnFocusLost(): () => void;
+    autoCloseOnSingleSelect(): void;
+    close(): void;
+    open(source?: HTMLElement): void;
+    toggle(source?: HTMLElement): void;
+    get props(): {
+        "data-disabled": boolean | undefined;
+        "data-required": boolean | undefined;
+        "data-invalid": boolean | undefined;
+    };
+    get heroui(): {
+        variant: "primary" | "secondary" | undefined;
+        fullWidth: boolean | undefined;
+    };
+}

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

@@ -0,0 +1,69 @@
+import { Context, isEventTargetInAny, watch } from "svelte-utils";
+import { ListBoxContext, PopoverContext } from "../../index.js";
+export class AutocompleteContext extends Context {
+    opts;
+    popoverCtx;
+    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"))
+                return;
+            if (isEventTargetInAny(ev, this.popoverCtx.popover.anchor, this.popoverCtx.popover.node)) {
+                return;
+            }
+            this.close();
+        };
+        const handleEscapeKey = (ev) => {
+            const focused = this.popoverCtx.popover.node?.matches(":focus-within") || this.popoverCtx.popover.anchor?.matches(":focus-within");
+            if (ev.code !== "Escape" || !focused)
+                return;
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+            this.close();
+            this.popoverCtx.popover.anchor?.focus();
+        };
+        window.addEventListener("click", handleWindowClick);
+        window.addEventListener("keydown", handleEscapeKey);
+        return () => {
+            window.removeEventListener("click", handleWindowClick);
+            window.removeEventListener("keydown", handleEscapeKey);
+        };
+    }
+    autoCloseOnSingleSelect() {
+        watch(() => this.listboxCtx.selected, () => {
+            if (this.opts.multiple)
+                return;
+            this.close();
+        });
+    }
+    close() {
+        this.popoverCtx.popover.hide();
+    }
+    open(source) {
+        this.popoverCtx.popover.node?.showPopover({ source });
+    }
+    toggle(source) {
+        this.popoverCtx.popover.node?.togglePopover({ source });
+    }
+    get props() {
+        return {
+            "data-disabled": this.opts.disabled,
+            "data-required": this.opts.required,
+            "data-invalid": this.opts.invalid
+        };
+    }
+    get heroui() {
+        return {
+            variant: this.opts.variant,
+            fullWidth: this.opts.fullWidth
+        };
+    }
+}

package/dist/components/avatar/avatar-fallback.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { AvatarContext, type AvatarOpts } from "./context.svelte";
+  import { avatarVariants } from "@heroui/styles";
+
+  type Props = AvatarOpts & HTMLAttributes<HTMLDivElement>;
+
+  const props: Props = $props();
+  const ctx = AvatarContext.get();
+</script>
+
+<div
+  class={avatarVariants().fallback({
+    ...ctx.opts,
+    class: props.class?.toString(),
+  })}
+>
+  {@render props.children?.()}
+</div>

package/dist/components/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type AvatarOpts } from "./context.svelte";
+type Props = AvatarOpts & HTMLAttributes<HTMLDivElement>;
+declare const AvatarFallback: import("svelte").Component<Props, {}, "">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

package/dist/components/avatar/avatar-image.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from "svelte/elements";
+  import { AvatarContext } from "./context.svelte";
+  import { avatarVariants } from "@heroui/styles";
+
+  type Props = HTMLImgAttributes;
+
+  const props: Props = $props();
+  const ctx = AvatarContext.get();
+</script>
+
+<img
+  {...props}
+  class={avatarVariants().image({
+    ...ctx.opts,
+    class: props.class?.toString(),
+  })}
+/>

package/dist/components/avatar/avatar-image.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLImgAttributes } from "svelte/elements";
+declare const AvatarImage: import("svelte").Component<HTMLImgAttributes, {}, "">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

package/dist/components/avatar/avatar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { AvatarContext, type AvatarOpts } from "./context.svelte";
+  import { avatarVariants } from "@heroui/styles";
+
+  type Props = AvatarOpts & HTMLAttributes<HTMLDivElement>;
+
+  const props: Props = $props();
+  const ctx = new AvatarContext(() => props);
+</script>
+
+<div
+  class={avatarVariants().base({ ...ctx.opts, class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</div>

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type AvatarOpts } from "./context.svelte";
+type Props = AvatarOpts & HTMLAttributes<HTMLDivElement>;
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,7 @@
+import type { AvatarVariants } from "@heroui/styles";
+import { Context, type Getter } from "svelte-utils";
+export type AvatarOpts = AvatarVariants;
+export declare class AvatarContext extends Context {
+    readonly opts: AvatarOpts;
+    constructor(opts: Getter<AvatarOpts>);
+}

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

@@ -0,0 +1,8 @@
+import { Context } from "svelte-utils";
+export class AvatarContext extends Context {
+    opts;
+    constructor(opts) {
+        super();
+        this.opts = $derived.by(opts);
+    }
+}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Avatar } from "./avatar.svelte";
+export { default as AvatarImage } from "./avatar-image.svelte";
+export { default as AvatarFallback } from "./avatar-fallback.svelte";
+export * from "./context.svelte";

package/dist/components/avatar/index.js

@@ -0,0 +1,4 @@
+export { default as Avatar } from "./avatar.svelte";
+export { default as AvatarImage } from "./avatar-image.svelte";
+export { default as AvatarFallback } from "./avatar-fallback.svelte";
+export * from "./context.svelte";

package/dist/components/button/button.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { buttonVariants } from "@heroui/styles";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { type ButtonOpts, ButtonContext, Spinner } from "../../index.js";
+  import { useRipples } from "svelte-utils";
+
+  const {
+    focused,
+    hovered,
+    pending,
+    pressed,
+    disabled,
+    isIconOnly,
+    fullWidth,
+    size,
+    variant,
+    ...props
+  }: ButtonOpts & HTMLButtonAttributes = $props();
+
+  const btn = new ButtonContext(() => ({
+    disabled,
+    focused,
+    fullWidth,
+    hovered,
+    isIconOnly,
+    pending,
+    pressed,
+    size,
+    variant,
+  }));
+</script>
+
+<button
+  {...props}
+  {...btn.props}
+  {@attach useRipples()}
+  disabled={disabled ?? pending}
+  class={buttonVariants({
+    ...btn.heroui,
+    class: props.class?.toString(),
+  })}
+>
+  {@render Children()}
+</button>
+
+{#snippet Children()}
+  {#if pending}
+    <Spinner color="current" size="sm" />
+  {/if}
+  {@render props.children?.()}
+{/snippet}

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

@@ -0,0 +1,6 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { type ButtonOpts } from "../../index.js";
+type $$ComponentProps = ButtonOpts & HTMLButtonAttributes;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,2 @@
+export { default as Button } from "./button.svelte";
+export * from "./index.svelte";

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from "./button.svelte";
+export * from "./index.svelte";

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

@@ -0,0 +1,27 @@
+import type { ButtonVariants } from "@heroui/styles";
+import { Context, type Getter } from "svelte-utils";
+export type ButtonOpts = {
+    focused?: boolean;
+    hovered?: boolean;
+    pending?: boolean;
+    pressed?: boolean;
+    disabled?: boolean;
+} & ButtonVariants;
+export declare class ButtonContext extends Context {
+    readonly opts: ButtonOpts;
+    constructor(opts: Getter<ButtonOpts>);
+    get props(): {
+        "data-pending"?: boolean | undefined;
+        "data-disabled": boolean | undefined;
+        "data-focused": boolean | undefined;
+        "data-pressed": boolean | undefined;
+        "data-focus-visible": boolean | undefined;
+        "data-hovered": boolean | undefined;
+    };
+    get heroui(): {
+        fullWidth: boolean | undefined;
+        isIconOnly: boolean | undefined;
+        size: "lg" | "md" | "sm" | undefined;
+        variant: "primary" | "secondary" | "danger" | "danger-soft" | "ghost" | "outline" | "tertiary" | undefined;
+    };
+}