ui-ingredients 0.0.6 → 0.0.8

package/dist/popover/close-trigger.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.getCloseTriggerProps()));
-</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 PopoverCloseTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverCloseTriggerProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getCloseTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/popover/content.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.getContentProps()));
-</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 PopoverContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverContentProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/popover/description.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.getDescriptionProps()));
-</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 PopoverDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverDescriptionProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/popover/positioner.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.getPositionerProps()));
-</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 PopoverPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverPositionerProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/popover/root.svelte

@@ -1,10 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { createPopoverContext, setPopoverContext } from "./context.svelte.js";
-let { id = uuid(), children, ...props } = $props();
-let context = createPopoverContext({ id, ...props });
-setPopoverContext(context);
-</script>
-
-{@render children?.(context)}
+<script lang="ts" context="module">
+  import type {OptionalId} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreatePopoverContextProps, CreatePopoverContextReturn} from './context.svelte.js';
+
+  export interface PopoverProps extends OptionalId<CreatePopoverContextProps> {
+    children?: Snippet<[CreatePopoverContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {createPopoverContext, setPopoverContext} from './context.svelte.js';
+
+  let {id = uuid(), children, ...props}: PopoverProps = $props();
+
+  let context = createPopoverContext({id, ...props});
+
+  setPopoverContext(context);
+</script>
+
+{@render children?.(context)}

package/dist/popover/title.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.getTitleProps()));
-</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 PopoverTitleProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverTitleProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/popover/trigger.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.getTriggerProps()));
-</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 PopoverTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {usePopoverContext} from './context.svelte.js';
+
+  let {children, ...props}: PopoverTriggerProps = $props();
+
+  let context = usePopoverContext();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/portal/root.svelte

@@ -1,10 +1,20 @@
-<script context="module" lang="ts">import {} from "svelte";
-</script>
-
-<script lang="ts">import { portal } from "@zag-js/svelte";
-let { children, ...props } = $props();
-</script>
-
-<div use:portal={props} data-portal>
-  {@render children?.()}
-</div>
+<script context="module" lang="ts">
+  import {type Snippet} from 'svelte';
+
+  export interface PortalProps {
+    container?: HTMLElement;
+    disabled?: boolean;
+    getRootNode?: () => ShadowRoot | Document | Node;
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {portal} from '@zag-js/svelte';
+
+  let {children, ...props}: PortalProps = $props();
+</script>
+
+<div use:portal={props} data-portal>
+  {@render children?.()}
+</div>

package/dist/presence/root.svelte

@@ -1,27 +1,39 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import * as presence from "@zag-js/presence";
-import { normalizeProps, useMachine } from "@zag-js/svelte";
-let { present, immediate, onExitComplete, children, ...props } = $props();
-let [machineState, send] = useMachine(
-  presence.machine({
-    present,
-    immediate,
-    onExitComplete
-  })
-);
-let api = $derived(presence.connect(machineState, send, normalizeProps));
-let node = $state(null);
-$effect(() => {
-  api.setNode(node);
-});
-</script>
-
-<div
-  bind:this={node}
-  hidden={!api.present}
-  data-state={api.skip ? undefined : present ? 'open' : 'closed'}
-  {...props}
->
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {Context} from '@zag-js/presence';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface PresenceProps extends Assign<SvelteHTMLElements['div'], Context> {}
+</script>
+
+<script lang="ts">
+  import * as presence from '@zag-js/presence';
+  import {normalizeProps, useMachine} from '@zag-js/svelte';
+
+  let {present, immediate, onExitComplete, children, ...props}: PresenceProps = $props();
+
+  let [machineState, send] = useMachine(
+    presence.machine({
+      present,
+      immediate,
+      onExitComplete,
+    }),
+  );
+
+  let api = $derived(presence.connect(machineState, send, normalizeProps));
+
+  let node: HTMLElement | null = $state(null);
+
+  $effect(() => {
+    api.setNode(node);
+  });
+</script>
+
+<div
+  bind:this={node}
+  hidden={!api.present}
+  data-state={api.skip ? undefined : present ? 'open' : 'closed'}
+  {...props}
+>
+  {@render children?.()}
+</div>

package/dist/progress/circle-range.svelte

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

package/dist/progress/circle-track.svelte

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

package/dist/progress/circle.svelte

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

package/dist/progress/label.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useProgressContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useProgressContext();
-let attrs = $derived(mergeProps(props, context.getLabelProps()));
-</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 ProgressLabelProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useProgressContext} from './context.svelte.js';
+
+  let {children, ...props}: ProgressLabelProps = $props();
+
+  let context = useProgressContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/progress/range.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useProgressContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useProgressContext();
-let attrs = $derived(mergeProps(props, context.getRangeProps()));
-</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 ProgressRangeProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useProgressContext} from './context.svelte.js';
+
+  let {children, ...props}: ProgressRangeProps = $props();
+
+  let context = useProgressContext();
+
+  let attrs = $derived(mergeProps(props, context.getRangeProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/progress/root.svelte

@@ -1,36 +1,54 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createProgressContext, setProgressContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  max,
-  min,
-  value,
-  orientation,
-  translations,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createProgressContext({
-  id,
-  ids,
-  dir,
-  max,
-  min,
-  value: $state.snapshot(value),
-  orientation,
-  translations,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setProgressContext(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 {CreateProgressContextProps, CreateProgressContextReturn} from './context.svelte.js';
+
+  export interface ProgressProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateProgressContextProps>
+    > {
+    children?: Snippet<[CreateProgressContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createProgressContext, setProgressContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    max,
+    min,
+    value,
+    orientation,
+    translations,
+    getRootNode,
+    children,
+    ...props
+  }: ProgressProps = $props();
+
+  let context = createProgressContext({
+    id,
+    ids,
+    dir,
+    max,
+    min,
+    value: $state.snapshot(value),
+    orientation,
+    translations,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setProgressContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/progress/track.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useProgressContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useProgressContext();
-let attrs = $derived(mergeProps(props, context.getTrackProps()));
-</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 ProgressTrackProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useProgressContext} from './context.svelte.js';
+
+  let {children, ...props}: ProgressTrackProps = $props();
+
+  let context = useProgressContext();
+
+  let attrs = $derived(mergeProps(props, context.getTrackProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>