@adriansyah/heroui-svelte 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,28 @@
+import { coalesce, Context } from "svelte-utils";
+import { ButtonGroupContext } from "../button-group/context.svelte";
+export class ButtonContext extends Context {
+    opts;
+    constructor(opts) {
+        super();
+        const group = ButtonGroupContext.getOr();
+        this.opts = $derived.by(() => coalesce(group?.opts, opts()));
+    }
+    get props() {
+        return {
+            "data-disabled": this.opts.disabled,
+            "data-focused": this.opts.focused,
+            "data-pressed": this.opts.pressed,
+            "data-focus-visible": this.opts.focused,
+            "data-hovered": this.opts.hovered,
+            ...(this.opts.pending ? { "data-pending": true } : {})
+        };
+    }
+    get heroui() {
+        return {
+            fullWidth: this.opts.fullWidth,
+            isIconOnly: this.opts.isIconOnly,
+            size: this.opts.size,
+            variant: this.opts.variant
+        };
+    }
+}

package/dist/components/button-group/button-group-separator.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { ButtonGroupContext } from "./context.svelte";
+  import { buttonGroupVariants } from "@heroui/styles";
+
+  type Props = HTMLAttributes<HTMLSpanElement>;
+  const props: Props = $props();
+
+  const ctx = ButtonGroupContext.get();
+</script>
+
+<span
+  {...props}
+  aria-hidden="true"
+  data-slot="button-group-separator"
+  class={buttonGroupVariants().separator({
+    ...ctx.opts,
+    class: props.class?.toString(),
+  })}
+></span>

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { default as ButtonGroup } from "./button-group.svelte";
+export { default as ButtonGroupSeparator } from "./button-group-separator.svelte";
+export * from "./context.svelte";

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

@@ -0,0 +1,3 @@
+export { default as ButtonGroup } from "./button-group.svelte";
+export { default as ButtonGroupSeparator } from "./button-group-separator.svelte";
+export * from "./context.svelte";

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

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

package/dist/components/card/card-content.svelte.d.ts

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

package/dist/components/card/card-description.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cardVariants } from "@heroui/styles";
+  import { CardContext } from "./context.svelte";
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  const props: Props = $props();
+
+  const ctx = CardContext.get();
+</script>
+
+<p
+  {...props}
+  data-slot="card-description"
+  class={cardVariants().description({ ...ctx.opts, class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</p>

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

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

package/dist/components/card/card-footer.svelte

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

package/dist/components/card/card-footer.svelte.d.ts

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

package/dist/components/card/card-header.svelte

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

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

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

package/dist/components/card/card-title.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cardVariants } from "@heroui/styles";
+  import { CardContext } from "./context.svelte";
+
+  type Props = HTMLAttributes<HTMLElement>;
+
+  const props: Props = $props();
+
+  const ctx = CardContext.get();
+</script>
+
+<h3
+  {...props}
+  data-slot="card-title"
+  class={cardVariants().title({ ...ctx.opts, class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</h3>

package/dist/components/card/card-title.svelte.d.ts

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

package/dist/components/card/card.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    cardVariants,
+    type CardVariants,
+  } from "@heroui/styles";
+  import { CardContext } from "./context.svelte";
+
+  type Props = HTMLAttributes<HTMLDivElement> & CardVariants;
+
+  const props: Props = $props();
+
+  new CardContext(() => props);
+</script>
+
+<div
+  {...props}
+  data-slot="label"
+  class={cardVariants().base({ ...props, class: props.class?.toString() })}
+>
+  {@render props.children?.()}
+</div>

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+export { default as Card } from "./card.svelte";
+export { default as CardHeader } from "./card-header.svelte";
+export { default as CardContent } from "./card-content.svelte";
+export { default as CardFooter } from "./card-footer.svelte";
+export { default as CardTitle } from "./card-title.svelte";
+export { default as CardDescription } from "./card-description.svelte";
+export * from "./context.svelte";

package/dist/components/card/index.js

@@ -0,0 +1,7 @@
+export { default as Card } from "./card.svelte";
+export { default as CardHeader } from "./card-header.svelte";
+export { default as CardContent } from "./card-content.svelte";
+export { default as CardFooter } from "./card-footer.svelte";
+export { default as CardTitle } from "./card-title.svelte";
+export { default as CardDescription } from "./card-description.svelte";
+export * from "./context.svelte";

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { checkboxVariants } from "@heroui/styles";
+  import type { HTMLLabelAttributes } from "svelte/elements";
+  import { InputContext, Input } from "../../index.js";
+
+  type Props = HTMLLabelAttributes;
+
+  const props: Props = $props();
+
+  const input = InputContext.get();
+  const contentClass = $derived(
+    checkboxVariants().content({
+      variant: input.heroui.variant,
+      class: props.class?.toString(),
+    }),
+  );
+</script>
+
+<label
+  {...props}
+  data-slot="checkbox-content"
+  class={contentClass}
+>
+  <Input headless hidden type="checkbox" />
+  {@render props.children?.()}
+</label>

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

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

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { checkboxVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { InputContext } from "../../index.js";
+
+  type Props = HTMLAttributes<HTMLSpanElement>;
+
+  const props: Props = $props();
+
+  const input = InputContext.get();
+  const controlClass = $derived(
+    checkboxVariants().control({
+      variant: input.heroui.variant,
+      class: props.class?.toString(),
+    }),
+  );
+</script>
+
+<span
+  {...props}
+  data-slot="checkbox-control"
+  class={controlClass}
+>
+  {@render props.children?.()}
+</span>

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

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

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { checkboxVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { InputContext } from "../../index.js";
+
+  type Props = HTMLAttributes<HTMLSpanElement>;
+
+  const { ...props }: Props = $props();
+  const input = InputContext.get();
+  const indicatorClass = $derived(
+    checkboxVariants().indicator({
+      variant: input.heroui.variant,
+      class: props.class?.toString(),
+    }),
+  );
+</script>
+
+<span
+  {...props}
+  data-slot="checkbox-indicator"
+  aria-hidden="true"
+  class={indicatorClass}
+>
+  {#if input.opts.indeterminate}
+    <svg
+      aria-hidden="true"
+      data-slot="checkbox-default-indicator--indeterminate"
+      fill="none"
+      role="presentation"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-width={3}
+      viewBox="0 0 24 24"
+    >
+      <line x1="21" x2="3" y1="12" y2="12" />
+    </svg>
+  {:else}
+    <svg
+      aria-hidden="true"
+      data-slot="checkbox-default-indicator--checkmark"
+      fill="none"
+      role="presentation"
+      stroke="currentColor"
+      stroke-dasharray={22}
+      stroke-dashoffset={input.checked ? 44 : 66}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width={2}
+      viewBox="0 0 17 18"
+    >
+      <polyline points="1 9 7 14 15 4" />
+    </svg>
+  {/if}
+</span>

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

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

package/dist/components/checkbox/checkbox.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { checkboxVariants } from "@heroui/styles";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { type InputOpts, InputContext } from "../../index.js";
+  import { box } from "svelte-utils";
+
+  type Props = InputOpts &
+    HTMLAttributes<HTMLDivElement> & {
+      checked?: boolean;
+    };
+
+  let {
+    checked = $bindable(false),
+    indeterminate,
+    invalid,
+    disabled,
+    required,
+    name,
+    fullWidth,
+    variant,
+    ...props
+  }: Props = $props();
+
+  new InputContext(
+    () => ({
+      disabled,
+      fullWidth,
+      invalid,
+      name,
+      required,
+      variant,
+      indeterminate,
+    }),
+    undefined,
+    box(
+      () => checked,
+      (v) => (checked = v),
+    ),
+  );
+
+  const checkboxClass = $derived(
+    checkboxVariants().base({
+      variant,
+      class: props.class?.toString(),
+    }),
+  );
+</script>
+
+<div
+  {...props}
+  data-slot="checkbox"
+  data-selected={checked}
+  data-invalid={invalid}
+  data-disabled={disabled}
+  data-required={required}
+  data-indeterminate={indeterminate}
+  class={checkboxClass}
+>
+  {@render props.children?.()}
+</div>

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

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

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

@@ -0,0 +1,4 @@
+export { default as CheckboxContent } from "./checkbox-content.svelte";
+export { default as CheckboxControl } from "./checkbox-control.svelte";
+export { default as CheckboxIndicator } from "./checkbox-indicator.svelte";
+export { default as Checkbox } from "./checkbox.svelte";

package/dist/components/checkbox/index.js

@@ -0,0 +1,4 @@
+export { default as CheckboxContent } from "./checkbox-content.svelte";
+export { default as CheckboxControl } from "./checkbox-control.svelte";
+export { default as CheckboxIndicator } from "./checkbox-indicator.svelte";
+export { default as Checkbox } from "./checkbox.svelte";

package/dist/components/close-button/close-button.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { closeButtonVariants } from "@heroui/styles";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import CloseIcon from "../../icons/close-icon.svelte";
+
+  const props: HTMLButtonAttributes = $props();
+</script>
+
+<button
+  {...props}
+  type={props.type ?? "button"}
+  class={closeButtonVariants({
+    class: props.class?.toString(),
+  })}
+>
+  <CloseIcon />
+</button>

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

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

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

@@ -0,0 +1 @@
+export { default as CloseButton } from "./close-button.svelte";

package/dist/components/close-button/index.js

@@ -0,0 +1 @@
+export { default as CloseButton } from "./close-button.svelte";

package/dist/components/collection/collection.svelte

@@ -0,0 +1,77 @@
+<script lang="ts" generics="T">
+  import type { Snippet } from "svelte";
+  import {
+    onView,
+    useResource,
+    type Fn,
+    type MaybePromise,
+  } from "svelte-utils";
+  import type { Attachment } from "svelte/attachments";
+
+  type ChildProps = {
+    item: T;
+    isLast: boolean;
+    loadMore: Fn;
+    loadingMore: boolean;
+    index: number;
+    key: string;
+  };
+
+  type LoaderProps = {
+    attach: Attachment<HTMLElement>;
+    loadingMore: boolean;
+    loadMore: Fn;
+  };
+
+  type Props = {
+    items: T[];
+    key?: (item: T) => string;
+    loadMore?: Fn<MaybePromise<T[]>, [{ offset: number }]>;
+    child: Snippet<[ChildProps]>;
+    sentinel?: Snippet<[LoaderProps]>;
+    empty?: Snippet;
+  };
+
+  let {
+    items = $bindable(),
+    key = String,
+    loadMore,
+    child,
+    sentinel,
+    empty,
+  }: Props = $props();
+
+  let hasMore = $state(true);
+  const more = useResource(async () => {
+    if (!loadMore || more.fetching) return;
+    const offset = items.length;
+    const values = await loadMore({ offset });
+    hasMore = values.length > 0;
+    items = [...items, ...values];
+  });
+</script>
+
+{#each items as item, index (key(item))}
+  {@const isLast = index === items.length - 1}
+  {@render child({
+    item,
+    isLast,
+    loadMore: more.refetch,
+    loadingMore: more.fetching,
+    index,
+    key: key(item),
+  })}
+{:else}
+  {@render empty?.()}
+{/each}
+
+{#if hasMore && loadMore}
+  {@render sentinel?.({
+    loadMore: more.refetch,
+    loadingMore: more.fetching,
+    attach: onView(({ isIntersecting }) => isIntersecting && more.refetch(), {
+      enabled:
+        !more.fetching && loadMore !== undefined && hasMore && !more.failed(),
+    }),
+  })}
+{/if}