ui-ingredients 0.0.6 → 0.0.8

package/dist/number-input/scrubber.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useNumberInputContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useNumberInputContext();
-let attrs = $derived(mergeProps(props, context.getScrubberProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface NumberInputScrubberProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useNumberInputContext} from './context.svelte.js';
+
+  let {children, ...props}: NumberInputScrubberProps = $props();
+
+  let context = useNumberInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getScrubberProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/pagination/ellipsis.svelte

@@ -1,12 +1,23 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePaginationContext } from "./context.svelte.js";
-let { index, children, ...props } = $props();
-let context = usePaginationContext();
-let attrs = $derived(mergeProps(props, context.getEllipsisProps({ index })));
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {EllipsisProps} from '@zag-js/pagination';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PaginationEllipsisProps
+    extends Assign<SvelteHTMLElements['span'], EllipsisProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePaginationContext} from './context.svelte.js';
+
+  let {index, children, ...props}: PaginationEllipsisProps = $props();
+
+  let context = usePaginationContext();
+
+  let attrs = $derived(mergeProps(props, context.getEllipsisProps({index})));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/pagination/item.svelte

@@ -1,20 +1,31 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePaginationContext } from "./context.svelte.js";
-let { value, children, ...props } = $props();
-let context = usePaginationContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getItemProps({
-      type: "page",
-      value
-    })
-  )
-);
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ItemProps} from '@zag-js/pagination';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PaginationItemProps
+    extends Assign<SvelteHTMLElements['button'], Omit<ItemProps, 'type'>> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePaginationContext} from './context.svelte.js';
+
+  let {value, children, ...props}: PaginationItemProps = $props();
+
+  let context = usePaginationContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        type: 'page',
+        value,
+      }),
+    ),
+  );
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/pagination/next-trigger.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePaginationContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = usePaginationContext();
-let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PaginationNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePaginationContext} from './context.svelte.js';
+
+  let {children, ...props}: PaginationNextTriggerProps = $props();
+
+  let context = usePaginationContext();
+
+  let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/pagination/prev-trigger.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePaginationContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = usePaginationContext();
-let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PaginationPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePaginationContext} from './context.svelte.js';
+
+  let {children, ...props}: PaginationPrevTriggerProps = $props();
+
+  let context = usePaginationContext();
+
+  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/pagination/root.svelte

@@ -1,42 +1,63 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createPaginationContext, setPaginationContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  type,
-  page,
-  pageSize,
-  count,
-  siblingCount,
-  translations,
-  onPageChange,
-  onPageSizeChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createPaginationContext({
-  id,
-  ids,
-  dir,
-  type,
-  page,
-  pageSize,
-  count,
-  siblingCount,
-  translations,
-  onPageChange,
-  onPageSizeChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setPaginationContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {
+    CreatePaginationContextProps,
+    CreatePaginationContextReturn,
+  } from './context.svelte.js';
+
+  export interface PaginationProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreatePaginationContextProps>
+    > {
+    children?: Snippet<[CreatePaginationContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createPaginationContext, setPaginationContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    type,
+    page,
+    pageSize,
+    count,
+    siblingCount,
+    translations,
+    onPageChange,
+    onPageSizeChange,
+    getRootNode,
+    children,
+    ...props
+  }: PaginationProps = $props();
+
+  let context = createPaginationContext({
+    id,
+    ids,
+    dir,
+    type,
+    page,
+    pageSize,
+    count,
+    siblingCount,
+    translations,
+    onPageChange,
+    onPageSizeChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setPaginationContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/pin-input/clear-trigger.svelte

@@ -1,17 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { usePinInputContext } from "./context.svelte.js";
-let { children, onclick, ...props } = $props();
-let context = usePinInputContext();
-</script>
-
-<button
-  type="button"
-  onclick={(e) => {
-    onclick?.(e);
-    context.clearValue();
-  }}
-  {...props}
->
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PinInputClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {usePinInputContext} from './context.svelte.js';
+
+  let {children, onclick, ...props}: PinInputClearTriggerProps = $props();
+
+  let context = usePinInputContext();
+</script>
+
+<button
+  type="button"
+  onclick={(e) => {
+    onclick?.(e);
+    context.clearValue();
+  }}
+  {...props}
+>
+  {@render children?.()}
+</button>

package/dist/pin-input/hidden-input.svelte

@@ -1,10 +1,19 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePinInputContext } from "./context.svelte.js";
-let { ...props } = $props();
-let context = usePinInputContext();
-let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PinInputHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePinInputContext} from './context.svelte.js';
+
+  let {...props}: PinInputHiddenInputProps = $props();
+
+  let context = usePinInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

package/dist/pin-input/input.svelte

@@ -1,10 +1,20 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePinInputContext } from "./context.svelte.js";
-let { index, ...props } = $props();
-let context = usePinInputContext();
-let attrs = $derived(mergeProps(props, context.getInputProps({ index })));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {InputProps} from '@zag-js/pin-input';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PinInputInputProps extends Assign<SvelteHTMLElements['input'], InputProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePinInputContext} from './context.svelte.js';
+
+  let {index, ...props}: PinInputInputProps = $props();
+
+  let context = usePinInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getInputProps({index})));
+</script>
+
+<input {...attrs} />

package/dist/pin-input/label.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePinInputContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = usePinInputContext();
-let attrs = $derived(mergeProps(props, context.getLabelProps()));
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PinInputLabelProps extends Assign<SvelteHTMLElements['label'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePinInputContext} from './context.svelte.js';
+
+  let {children, ...props}: PinInputLabelProps = $props();
+
+  let context = usePinInputContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/pin-input/root.svelte

@@ -1,64 +1,82 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createPinInputContext, setPinInputContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  otp,
-  form,
-  mask,
-  name,
-  type,
-  value,
-  pattern,
-  invalid,
-  disabled,
-  readOnly,
-  required,
-  autoFocus,
-  placeholder,
-  translations,
-  selectOnFocus,
-  blurOnComplete,
-  onValueChange,
-  onValueInvalid,
-  onValueComplete,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createPinInputContext({
-  id,
-  ids,
-  dir,
-  otp,
-  form,
-  mask,
-  name,
-  type,
-  value: $state.snapshot(value),
-  pattern,
-  invalid,
-  disabled,
-  readOnly,
-  required,
-  autoFocus,
-  placeholder,
-  translations,
-  selectOnFocus,
-  blurOnComplete,
-  onValueChange,
-  onValueInvalid,
-  onValueComplete,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setPinInputContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {CreatePinInputContextProps, CreatePinInputContextReturn} from './context.svelte.js';
+
+  export interface PinInputProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreatePinInputContextProps>
+    > {
+    children?: Snippet<[CreatePinInputContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createPinInputContext, setPinInputContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    otp,
+    form,
+    mask,
+    name,
+    type,
+    value,
+    pattern,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    autoFocus,
+    placeholder,
+    translations,
+    selectOnFocus,
+    blurOnComplete,
+    onValueChange,
+    onValueInvalid,
+    onValueComplete,
+    getRootNode,
+    children,
+    ...props
+  }: PinInputProps = $props();
+
+  let context = createPinInputContext({
+    id,
+    ids,
+    dir,
+    otp,
+    form,
+    mask,
+    name,
+    type,
+    value: $state.snapshot(value),
+    pattern,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    autoFocus,
+    placeholder,
+    translations,
+    selectOnFocus,
+    blurOnComplete,
+    onValueChange,
+    onValueInvalid,
+    onValueComplete,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setPinInputContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/popover/arrow-tip.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePopoverContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = usePopoverContext();
-let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PopoverArrowTipProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverArrowTipProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/popover/arrow.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { usePopoverContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = usePopoverContext();
-let attrs = $derived(mergeProps(props, context.getArrowProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PopoverArrowProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverArrowProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>