ui-ingredients 0.0.6 → 0.0.8

package/dist/select/root.svelte

@@ -1,78 +1,96 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts" generics="T">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createSelectContext, setSelectContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  form,
-  name,
-  open,
-  "open.controlled": openControlled,
-  value,
-  items,
-  invalid,
-  multiple,
-  disabled,
-  readOnly,
-  required,
-  loopFocus,
-  composite,
-  positioning,
-  closeOnSelect,
-  highlightedValue,
-  itemToValue,
-  itemToString,
-  isItemDisabled,
-  onOpenChange,
-  onValueChange,
-  onFocusOutside,
-  onHighlightChange,
-  onInteractOutside,
-  onPointerDownOutside,
-  scrollToIndexFn,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createSelectContext({
-  id,
-  ids,
-  dir,
-  form,
-  name,
-  open,
-  "open.controlled": openControlled,
-  value: $state.snapshot(value),
-  items,
-  invalid,
-  multiple,
-  disabled,
-  readOnly,
-  required,
-  loopFocus,
-  composite,
-  positioning,
-  closeOnSelect,
-  highlightedValue,
-  itemToValue,
-  itemToString,
-  isItemDisabled,
-  onOpenChange,
-  onValueChange,
-  onFocusOutside,
-  onHighlightChange,
-  onInteractOutside,
-  onPointerDownOutside,
-  scrollToIndexFn,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setSelectContext(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 {CreateSelectContextProps, CreateSelectContextReturn} from './context.svelte.js';
+
+  export interface SelectProps<T>
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateSelectContextProps<T>>
+    > {
+    children?: Snippet<[CreateSelectContextReturn]>;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createSelectContext, setSelectContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    form,
+    name,
+    open,
+    'open.controlled': openControlled,
+    value,
+    items,
+    invalid,
+    multiple,
+    disabled,
+    readOnly,
+    required,
+    loopFocus,
+    composite,
+    positioning,
+    closeOnSelect,
+    highlightedValue,
+    itemToValue,
+    itemToString,
+    isItemDisabled,
+    onOpenChange,
+    onValueChange,
+    onFocusOutside,
+    onHighlightChange,
+    onInteractOutside,
+    onPointerDownOutside,
+    scrollToIndexFn,
+    getRootNode,
+    children,
+    ...props
+  }: SelectProps<T> = $props();
+
+  let context = createSelectContext({
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    open,
+    'open.controlled': openControlled,
+    value: $state.snapshot(value),
+    items,
+    invalid,
+    multiple,
+    disabled,
+    readOnly,
+    required,
+    loopFocus,
+    composite,
+    positioning,
+    closeOnSelect,
+    highlightedValue,
+    itemToValue,
+    itemToString,
+    isItemDisabled,
+    onOpenChange,
+    onValueChange,
+    onFocusOutside,
+    onHighlightChange,
+    onInteractOutside,
+    onPointerDownOutside,
+    scrollToIndexFn,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setSelectContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/select/trigger.svelte

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

package/dist/select/value-text.svelte

@@ -1,18 +1,27 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useSelectContext } from "./context.svelte.js";
-let { children, placeholder, ...props } = $props();
-let context = useSelectContext();
-let attrs = $derived(mergeProps(props, context.getValueTextProps()));
-</script>
-
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else if context.value.length}
-    {context.valueAsString}
-  {:else}
-    {placeholder}
-  {/if}
-</span>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface SelectValueTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSelectContext} from './context.svelte.js';
+
+  let {children, placeholder, ...props}: SelectValueTextProps = $props();
+
+  let context = useSelectContext();
+
+  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else if context.value.length}
+    {context.valueAsString}
+  {:else}
+    {placeholder}
+  {/if}
+</span>

package/dist/slider/control.svelte

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

package/dist/slider/hidden-input.svelte

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

package/dist/slider/label.svelte

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

package/dist/slider/marker-group.svelte

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

package/dist/slider/marker.svelte

@@ -1,19 +1,29 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useSliderContext } from "./context.svelte.js";
-let { value, children, ...props } = $props();
-let context = useSliderContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getMarkerProps({
-      value
-    })
-  )
-);
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {MarkerProps} from '@zag-js/slider';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface SliderMarkerProps extends Assign<SvelteHTMLElements['span'], MarkerProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {value, children, ...props}: SliderMarkerProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getMarkerProps({
+        value,
+      }),
+    ),
+  );
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/slider/range.svelte

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

package/dist/slider/root.svelte

@@ -1,66 +1,84 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createSliderContext, setSliderContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  max,
-  min,
-  step,
-  form,
-  name,
-  value,
-  origin,
-  invalid,
-  readOnly,
-  disabled,
-  orientation,
-  thumbAlignment,
-  thumbSize,
-  minStepsBetweenThumbs,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  onFocusChange,
-  onValueChange,
-  onValueChangeEnd,
-  getAriaValueText,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createSliderContext({
-  id,
-  ids,
-  dir,
-  max,
-  min,
-  step,
-  form,
-  name,
-  value: $state.snapshot(value),
-  origin,
-  invalid,
-  readOnly,
-  disabled,
-  orientation,
-  thumbAlignment,
-  thumbSize,
-  minStepsBetweenThumbs,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  onFocusChange,
-  onValueChange,
-  onValueChangeEnd,
-  getAriaValueText,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setSliderContext(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 {CreateSliderContextProps, CreateSliderContextReturn} from './context.svelte.js';
+
+  export interface SliderProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateSliderContextProps>
+    > {
+    children?: Snippet<[CreateSliderContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createSliderContext, setSliderContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    max,
+    min,
+    step,
+    form,
+    name,
+    value,
+    origin,
+    invalid,
+    readOnly,
+    disabled,
+    orientation,
+    thumbAlignment,
+    thumbSize,
+    minStepsBetweenThumbs,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    onFocusChange,
+    onValueChange,
+    onValueChangeEnd,
+    getAriaValueText,
+    getRootNode,
+    children,
+    ...props
+  }: SliderProps = $props();
+
+  let context = createSliderContext({
+    id,
+    ids,
+    dir,
+    max,
+    min,
+    step,
+    form,
+    name,
+    value: $state.snapshot(value),
+    origin,
+    invalid,
+    readOnly,
+    disabled,
+    orientation,
+    thumbAlignment,
+    thumbSize,
+    minStepsBetweenThumbs,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    onFocusChange,
+    onValueChange,
+    onValueChangeEnd,
+    getAriaValueText,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setSliderContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>