@adriansyah/heroui-svelte 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,47 @@
+import type { Snippet } from "svelte";
+import { type Fn, type MaybePromise } from "svelte-utils";
+import type { Attachment } from "svelte/attachments";
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        key?: (item: T) => string;
+        loadMore?: Fn<MaybePromise<T[]>, [{
+            offset: number;
+        }]>;
+        child: Snippet<[{
+            item: T;
+            isLast: boolean;
+            loadMore: Fn;
+            loadingMore: boolean;
+            index: number;
+            key: string;
+        }]>;
+        sentinel?: Snippet<[{
+            attach: Attachment<HTMLElement>;
+            loadingMore: boolean;
+            loadMore: Fn;
+        }]>;
+        empty?: Snippet;
+    };
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Collection: $$IsomorphicComponent;
+type Collection<T> = InstanceType<typeof Collection<T>>;
+export default Collection;

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

@@ -0,0 +1 @@
+export { default as Collection } from "./collection.svelte";

package/dist/components/collection/index.js

@@ -0,0 +1 @@
+export { default as Collection } from "./collection.svelte";

package/dist/components/description/description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { descriptionVariants } from "@heroui/styles";
+
+  interface Props extends HTMLAttributes<HTMLParagraphElement> {}
+
+  const { ...props }: Props = $props();
+</script>
+
+<p
+  {...props}
+  data-slot="description"
+  class={descriptionVariants({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</p>

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

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

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

@@ -0,0 +1 @@
+export { default as Description } from "./description.svelte";

package/dist/components/description/index.js

@@ -0,0 +1 @@
+export { default as Description } from "./description.svelte";

package/dist/components/empty-state/empty-state.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { emptyStateVariants } from "@heroui/styles";
+
+  interface Props extends HTMLAttributes<HTMLElement> {}
+
+  const { ...props }: Props = $props();
+</script>
+
+<div
+  {...props}
+  data-slot="empty-state"
+  class={emptyStateVariants({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</div>

package/dist/components/empty-state/empty-state.svelte.d.ts

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

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from "./empty-state.svelte";

package/dist/components/empty-state/index.js

@@ -0,0 +1 @@
+export { default as EmptyState } from "./empty-state.svelte";

package/dist/components/field-error/field-error.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { fieldErrorVariants } from "@heroui/styles";
+  import { InputContext } from "../../index.js";
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  const {
+    visible,
+    ...props
+  }: Props & {
+    visible?: boolean;
+  } = $props();
+  const input = InputContext.getOr([() => ({})]);
+  const show = $derived(visible ?? input.opts.invalid);
+</script>
+
+<div
+  {...props}
+  {...show
+    ? {
+        "data-visible": true,
+      }
+    : {}}
+  data-slot="field-error"
+  class={fieldErrorVariants({ class: ["duration-0", props.class?.toString()] })}
+>
+  {@render props.children?.()}
+</div>

package/dist/components/field-error/field-error.svelte.d.ts

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

package/dist/components/field-error/index.d.ts

@@ -0,0 +1 @@
+export { default as FieldError } from "./field-error.svelte";

package/dist/components/field-error/index.js

@@ -0,0 +1 @@
+export { default as FieldError } from "./field-error.svelte";

package/dist/components/fieldset/fieldset-actions.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { fieldsetVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  const props: Props = $props();
+</script>
+
+<div
+  {...props}
+  data-slot="fieldset-actions"
+  class={fieldsetVariants().actions({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</div>

package/dist/components/fieldset/fieldset-actions.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { fieldsetVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  const props: Props = $props();
+</script>
+
+<div
+  {...props}
+  data-slot="fieldset-field-group"
+  class={fieldsetVariants().fieldGroup({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</div>

package/dist/components/fieldset/fieldset-group.svelte.d.ts

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

package/dist/components/fieldset/fieldset-legend.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { fieldsetVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Props = HTMLAttributes<HTMLElement>;
+
+  const props: Props = $props();
+</script>
+
+<legend
+  {...props}
+  data-slot="fieldset-legend"
+  class={fieldsetVariants().legend({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</legend>

package/dist/components/fieldset/fieldset-legend.svelte.d.ts

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

package/dist/components/fieldset/fieldset.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { fieldsetVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Props = HTMLAttributes<HTMLFieldSetElement>;
+
+  const props: Props = $props();
+</script>
+
+<fieldset
+  {...props}
+  data-slot="fieldset"
+  class={fieldsetVariants().base({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</fieldset>

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

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

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

@@ -0,0 +1,4 @@
+export { default as FieldsetActions } from "./fieldset-actions.svelte";
+export { default as FieldsetGroup } from "./fieldset-group.svelte";
+export { default as FieldsetLegend } from "./fieldset-legend.svelte";
+export { default as Fieldset } from "./fieldset.svelte";

package/dist/components/fieldset/index.js

@@ -0,0 +1,4 @@
+export { default as FieldsetActions } from "./fieldset-actions.svelte";
+export { default as FieldsetGroup } from "./fieldset-group.svelte";
+export { default as FieldsetLegend } from "./fieldset-legend.svelte";
+export { default as Fieldset } from "./fieldset.svelte";

package/dist/components/filter/filter-not-found.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { FilterContext } from "./index.svelte";
+
+  const ctx = FilterContext.get();
+
+  const { children } = $props();
+</script>
+
+{#if ctx.visible === 0 && ctx.total > 0}
+  {@render children?.()}
+{/if}

package/dist/components/filter/filter-not-found.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const FilterNotFound: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type FilterNotFound = ReturnType<typeof FilterNotFound>;
+export default FilterNotFound;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { FilterContext, type FilterOpts } from "./index.svelte";
+  import { box } from "svelte-utils";
+
+  type Props = {
+    children?: Snippet;
+    query?: string;
+  } & FilterOpts;
+
+  let { children, query = $bindable(""), ...props }: Props = $props();
+
+  new FilterContext(
+    () => props,
+    box(
+      () => query,
+      (v) => (query = v),
+    ),
+  );
+</script>
+
+{@render children?.()}

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

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

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

@@ -0,0 +1,3 @@
+export { default as FilterProvider } from "./filter-provider.svelte";
+export { default as FilterNotFound } from "./filter-not-found.svelte";
+export * from "./index.svelte";

package/dist/components/filter/index.js

@@ -0,0 +1,3 @@
+export { default as FilterProvider } from "./filter-provider.svelte";
+export { default as FilterNotFound } from "./filter-not-found.svelte";
+export * from "./index.svelte";

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

@@ -0,0 +1,17 @@
+import { Context, type Box, type Fn, type Getter } from "svelte-utils";
+export type FilterOpts = {
+    caseSensitive?: boolean;
+    filter?: Fn<boolean, [string, string]>;
+};
+export declare class FilterContext extends Context {
+    #private;
+    get query(): string;
+    set query(value: string);
+    get total(): number;
+    get visible(): number;
+    register: (item: string) => () => void;
+    matches: (text: string) => boolean;
+    filter: (query: string, text: string) => boolean;
+    constructor(opts: Getter<FilterOpts>, query?: Box<string>);
+    sync(box: Box<string>): void;
+}

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

@@ -0,0 +1,52 @@
+import { untrack } from "svelte";
+import { box, Context } from "svelte-utils";
+export class FilterContext extends Context {
+    #opts;
+    #query;
+    get query() { return this.#query.current; }
+    set query(value) { this.#query.current = value; }
+    #items = $state([]);
+    get total() { return this.#items.length; }
+    get visible() { return this.#items.filter(this.matches).length; }
+    register = (item) => {
+        return untrack(() => {
+            this.#items.push(item);
+            return () => {
+                this.#items.splice(this.#items.indexOf(item), 1);
+            };
+        });
+    };
+    matches = (text) => {
+        const q = this.#opts.caseSensitive ? this.query : this.query.toLowerCase();
+        const t = this.#opts.caseSensitive ? text : text.toLowerCase();
+        return this.filter(q, t);
+    };
+    filter = (query, text) => {
+        if (this.#opts.filter)
+            return this.#opts.filter(query, text);
+        return text.includes(query);
+    };
+    constructor(opts, query = box("")) {
+        super();
+        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;
+            });
+        });
+    }
+}

package/dist/components/header/header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { headerVariants } from "@heroui/styles";
+
+  interface Props extends HTMLAttributes<HTMLElement> {}
+
+  const { ...props }: Props = $props();
+</script>
+
+<header
+  {...props}
+  data-slot="label"
+  class={headerVariants({ class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</header>

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

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

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

@@ -0,0 +1 @@
+export { default as Header } from "./header.svelte";

package/dist/components/header/index.js

@@ -0,0 +1 @@
+export { default as Header } from "./header.svelte";

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

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

package/dist/components/input/index.js

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

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

@@ -0,0 +1,32 @@
+import type { InputVariants } from "@heroui/styles";
+import { Context, type Box, type Getter } from "svelte-utils";
+export type InputValue = string | number | undefined;
+export type InputOpts = InputVariants & {
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    name?: string;
+    indeterminate?: boolean;
+};
+export declare class InputContext extends Context {
+    #private;
+    readonly opts: InputOpts;
+    get value(): string | number | undefined;
+    set value(value: string | number | undefined);
+    get checked(): boolean;
+    set checked(checked: boolean);
+    constructor(opts: Getter<InputOpts>, value?: Box<InputValue>, checked?: Box<boolean>);
+    get props(): {
+        indeterminate: boolean | undefined;
+        disabled: boolean | undefined;
+        required: boolean | undefined;
+        "data-invalid": boolean | undefined;
+        "data-empty": boolean;
+        name: string | undefined;
+    };
+    get heroui(): {
+        variant: "primary" | "secondary" | undefined;
+        fullWidth: boolean | undefined;
+    };
+    get empty(): boolean;
+}

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

@@ -0,0 +1,48 @@
+import { box, boxLink, coalesce, Context } from "svelte-utils";
+export class InputContext extends Context {
+    opts;
+    #value;
+    #checked;
+    get value() {
+        return this.#value.current;
+    }
+    set value(value) {
+        this.#value.current = value;
+    }
+    get checked() {
+        return this.#checked.current;
+    }
+    set checked(checked) {
+        this.#checked.current = checked;
+    }
+    constructor(opts, value = box(""), checked = box(false)) {
+        const parent = InputContext.getOr();
+        super();
+        this.opts = $derived.by(() => coalesce(parent?.opts, opts()));
+        this.#value = value;
+        this.#checked = checked;
+        if (!parent)
+            return;
+        boxLink(parent.#value, value);
+        boxLink(parent.#checked, checked);
+    }
+    get props() {
+        return {
+            indeterminate: this.opts.indeterminate,
+            disabled: this.opts.disabled,
+            required: this.opts.required,
+            "data-invalid": this.opts.invalid,
+            "data-empty": this.empty,
+            name: this.opts.name,
+        };
+    }
+    get heroui() {
+        return {
+            variant: this.opts.variant,
+            fullWidth: this.opts.fullWidth,
+        };
+    }
+    get empty() {
+        return this.value === undefined || this.value === "";
+    }
+}

package/dist/components/input/input.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { inputVariants } from "@heroui/styles";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { type InputOpts, InputContext } from "../../index.js";
+  import { box } from "svelte-utils";
+
+  type Props = {
+    headless?: boolean;
+  } & InputOpts &
+    HTMLInputAttributes;
+
+  let {
+    value = $bindable(),
+    checked = $bindable(),
+    invalid = $bindable(),
+    fullWidth,
+    variant,
+    disabled,
+    required,
+    name,
+    headless,
+    indeterminate,
+    ...props
+  }: Props = $props();
+
+  const input = new InputContext(
+    () => ({
+      disabled,
+      fullWidth,
+      indeterminate,
+      invalid,
+      name,
+      required,
+      variant,
+    }),
+    box(
+      () => value,
+      (v) => (value = v),
+    ),
+    box(
+      () => !!checked,
+      (v) => (checked = v),
+    ),
+  );
+
+  const className = $derived.by(() => {
+    if (headless) return props.class;
+
+    return inputVariants({
+      ...input.heroui,
+      class: props.class?.toString(),
+    });
+  });
+
+  const mergedProps = $derived({
+    ...props,
+    ...input.props,
+    class: className,
+  });
+</script>
+
+{#if props.type === "checkbox"}
+  <input {...mergedProps} bind:checked={input.checked} type="checkbox" />
+{:else}
+  <input {...mergedProps} bind:value={input.value} />
+{/if}

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

@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import { type InputOpts } from "../../index.js";
+type Props = {
+    headless?: boolean;
+} & InputOpts & HTMLInputAttributes;
+declare const Input: import("svelte").Component<Props, {}, "invalid" | "checked" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,5 @@
+export { default as InputGroupInput } from "./input-group-input.svelte";
+export { default as InputGroupTextarea } from "./input-group-textarea.svelte";
+export { default as InputGroupPrefix } from "./input-group-prefix.svelte";
+export { default as InputGroupSuffix } from "./input-group-suffix.svelte";
+export { default as InputGroup } from "./input-group.svelte";

package/dist/components/input-group/index.js

@@ -0,0 +1,5 @@
+export { default as InputGroupInput } from "./input-group-input.svelte";
+export { default as InputGroupTextarea } from "./input-group-textarea.svelte";
+export { default as InputGroupPrefix } from "./input-group-prefix.svelte";
+export { default as InputGroupSuffix } from "./input-group-suffix.svelte";
+export { default as InputGroup } from "./input-group.svelte";

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { inputGroupVariants } from "@heroui/styles";
+  import type { ComponentProps } from "svelte";
+  import { Input, InputContext } from "../../index.js";
+  import { box } from "svelte-utils";
+
+  let {
+    value = $bindable(),
+    checked = $bindable(),
+    ...props
+  }: ComponentProps<typeof Input> = $props();
+
+  const input = new InputContext(
+    () => props,
+    box(
+      () => value,
+      (v) => (value = v),
+    ),
+    box(
+      () => !!checked,
+      (v) => (checked = v),
+    ),
+  );
+
+  const className = $derived(
+    inputGroupVariants(input.heroui).input({
+      class: props.class?.toString(),
+    }),
+  );
+</script>
+
+<Input {...props} headless data-slot="input-group-input" class={className} />