@adriansyah/heroui-svelte 0.0.2 → 0.0.4

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 "@adriansyah/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

@@ -2,18 +2,17 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { listboxVariants } from "@heroui/styles";
   import { type ListBoxOpts, ListBoxContext } from "../../index.js";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/svelte-utils";
 
   type Props = HTMLAttributes<HTMLDivElement> &
     Partial<ListBoxOpts> & {
       selected?: string[];
     };
 
-  const id = $props.id();
   let {
     multiple,
     selected = $bindable([]),
-    name = id,
+    name,
     disabled,
     required,
     ...props

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

@@ -1,5 +1,5 @@
 import type { ModalVariants } from "@heroui/styles";
-import { Context, DialogState, type Getter } from "svelte-utils";
+import { Context, DialogState, type Getter } from "@adriansyah/svelte-utils";
 export type ModalOpts = ModalVariants & {
     placement?: "top" | "bottom" | "center" | "auto";
 };

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

@@ -1,4 +1,4 @@
-import { Context, DialogState } from "svelte-utils";
+import { Context, DialogState } from "@adriansyah/svelte-utils";
 export class ModalContext extends Context {
     opts;
     dialog = new DialogState();

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

@@ -2,7 +2,7 @@
   import type { HTMLDialogAttributes } from "svelte/elements";
   import { modalVariants } from "@heroui/styles";
   import { ModalContext } from "../../index.js";
-  import { getViewport } from "svelte-utils";
+  import { getViewport } from "@adriansyah/svelte-utils";
 
   type Props = HTMLDialogAttributes;
 

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/index.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type PaginationVariants } from "@heroui/styles";
-import { Context, type Box, type Getter } from "svelte-utils";
+import { Context, type Box, type Getter } from "@adriansyah/svelte-utils";
 export type PaginationProps = {
     total?: number;
     pageSize?: number;

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

@@ -1,5 +1,5 @@
 import {} from "@heroui/styles";
-import { box, Context } from "svelte-utils";
+import { box, Context } from "@adriansyah/svelte-utils";
 export default class PaginationState extends Context {
     opts;
     #page;

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

@@ -3,7 +3,9 @@
   import type { PaginationProps } from "./index.svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import PaginationState from "./index.svelte";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/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/@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/@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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { PopoverContext, type PopoverContextOpts } from "./index.svelte";
-  import { box } from "svelte-utils";
+  import { box } from "@adriansyah/svelte-utils";
   import type { Snippet } from "svelte";
 
   type Props = Omit<PopoverContextOpts, "open" | "fallbackAnchor"> & {
@@ -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

@@ -9,7 +9,7 @@
     InputContext,
   } from "../../index.js";
   import type { ComponentProps } from "svelte";
-  import { box, watch } from "svelte-utils";
+  import { box, watch } from "@adriansyah/svelte-utils";
   import { FilterContext } from "../filter/index.svelte";
 
   type Props = ComponentProps<typeof InputGroup> & {
@@ -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/dist/components/table/index.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { TableVariants } from "@heroui/styles";
-import { Context, type Getter } from "svelte-utils";
+import { Context, type Getter } from "@adriansyah/svelte-utils";
 export type TableOpts = TableVariants;
 export default class TableContext extends Context {
     readonly opts: TableOpts;

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

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

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

@@ -2,7 +2,7 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { textFieldVariants } from "@heroui/styles";
   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/textarea/textarea.svelte

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

package/package.json

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