ui-ingredients 0.0.8 → 0.0.9

package/README.md

@@ -45,7 +45,7 @@ npm install ui-ingredients
 - 🟢 Combobox
 - 🟡 DatePicker
 - 🟢 Dialog
-- 🟡 Editable
+- 🟢 Editable
 - ⚪ FileUpload
 - 🟢 HoverCard
 - 🟡 Menu
@@ -58,7 +58,7 @@ npm install ui-ingredients
 - 🟢 Progress
 - 🟢 QRCode
 - 🟢 RadioGroup
-- ⚪ RatingGroup
+- 🟢 RatingGroup
 - 🟢 Select
 - ⚪ SignaturePad
 - 🟢 Slider

package/dist/accordion/index.d.ts

@@ -1,5 +1,5 @@
-export { default as ItemContent, type AccordionItemContentProps } from './item-content.svelte';
-export { default as ItemIndicator, type AccordionIndicatorProps } from './item-indicator.svelte';
-export { default as ItemTrigger, type AccordionItemTriggerProps } from './item-trigger.svelte';
+export { default as ItemContent, type AccordionItemContentProps, } from './item-content.svelte';
+export { default as ItemIndicator, type AccordionIndicatorProps, } from './item-indicator.svelte';
+export { default as ItemTrigger, type AccordionItemTriggerProps, } from './item-trigger.svelte';
 export { default as Item, type AccordionItemProps } from './item.svelte';
 export { default as Root, type AccordionProps } from './root.svelte';

package/dist/accordion/index.js

@@ -1,5 +1,5 @@
-export { default as ItemContent } from './item-content.svelte';
-export { default as ItemIndicator } from './item-indicator.svelte';
-export { default as ItemTrigger } from './item-trigger.svelte';
+export { default as ItemContent, } from './item-content.svelte';
+export { default as ItemIndicator, } from './item-indicator.svelte';
+export { default as ItemTrigger, } from './item-trigger.svelte';
 export { default as Item } from './item.svelte';
 export { default as Root } from './root.svelte';

package/dist/accordion/item-content.svelte

@@ -1,20 +1,24 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface AccordionItemContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface AccordionItemContentProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useAccordionContext, useAccordionItemContext} from './context.svelte.js';
+  import {
+    useAccordionContext,
+    useAccordionItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: AccordionItemContentProps = $props();
 
   let context = useAccordionContext();
   let itemContext = useAccordionItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemContentProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemContentProps(itemContext)),
+  );
 </script>
 
 <div {...attrs}>

package/dist/accordion/item-content.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface AccordionItemContentProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface AccordionItemContentProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/accordion/item-indicator.svelte

@@ -1,20 +1,24 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface AccordionIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface AccordionIndicatorProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useAccordionContext, useAccordionItemContext} from './context.svelte.js';
+  import {
+    useAccordionContext,
+    useAccordionItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: AccordionIndicatorProps = $props();
 
   let context = useAccordionContext();
   let itemContext = useAccordionItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemIndicatorProps(itemContext)),
+  );
 </script>
 
 <span {...attrs}>

package/dist/accordion/item-indicator.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface AccordionIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface AccordionIndicatorProps extends SvelteHtmlProps<'span'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/accordion/item-trigger.svelte

@@ -1,20 +1,25 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface AccordionItemTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface AccordionItemTriggerProps
+    extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useAccordionContext, useAccordionItemContext} from './context.svelte.js';
+  import {
+    useAccordionContext,
+    useAccordionItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: AccordionItemTriggerProps = $props();
 
   let context = useAccordionContext();
   let itemContext = useAccordionItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemTriggerProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemTriggerProps(itemContext)),
+  );
 </script>
 
 <button type="button" {...attrs}>

package/dist/accordion/item-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface AccordionItemTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface AccordionItemTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/accordion/item.svelte

@@ -1,19 +1,32 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/accordion';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/accordion';
+  import type {Snippet} from 'svelte';
 
-  export interface AccordionItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+  export interface AccordionItemProps
+    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {setAccordionItemContext, useAccordionContext} from './context.svelte.js';
+  import {
+    setAccordionItemContext,
+    useAccordionContext,
+  } from './context.svelte.js';
 
   let {value, disabled, children, ...props}: AccordionItemProps = $props();
 
   let context = useAccordionContext();
 
+  let state = $derived(
+    context.getItemState({
+      value,
+      disabled,
+    }),
+  );
+
   let attrs = $derived(
     mergeProps(
       props,
@@ -31,5 +44,5 @@
 </script>
 
 <div {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </div>

package/dist/accordion/item.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/accordion';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface AccordionItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/accordion';
+import type { Snippet } from 'svelte';
+export interface AccordionItemProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/accordion/root.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import type {
     CreateAccordionContextProps,
     CreateAccordionContextReturn,
@@ -9,20 +8,23 @@
 
   export interface AccordionProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateAccordionContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateAccordionContextProps, 'id'>
     > {
-    children?: Snippet<[CreateAccordionContextReturn]>;
+    children?: Snippet<[context: CreateAccordionContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createAccordionContext, setAccordionContext} from './context.svelte.js';
+  import {
+    createAccordionContext,
+    setAccordionContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     value,
@@ -38,7 +40,7 @@
   }: AccordionProps = $props();
 
   let context = createAccordionContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     value: $state.snapshot(value),

package/dist/accordion/root.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateAccordionContextProps, CreateAccordionContextReturn } from './context.svelte.js';
-export interface AccordionProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateAccordionContextProps>> {
-    children?: Snippet<[CreateAccordionContextReturn]>;
+export interface AccordionProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateAccordionContextProps, 'id'>> {
+    children?: Snippet<[context: CreateAccordionContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/avatar/fallback.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface AvatarFallbackProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface AvatarFallbackProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/avatar/fallback.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface AvatarFallbackProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface AvatarFallbackProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/avatar/image.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface AvatarImageProps extends Assign<SvelteHTMLElements['img'], {}> {}
+  export interface AvatarImageProps extends SvelteHtmlProps<'img'> {}
 </script>
 
 <script lang="ts">

package/dist/avatar/image.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface AvatarImageProps extends Assign<SvelteHTMLElements['img'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface AvatarImageProps extends SvelteHtmlProps<'img'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/avatar/root.svelte

@@ -1,15 +1,17 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import {type CreateAvatarContextProps, type CreateAvatarContextReturn} from './context.svelte.js';
+  import {
+    type CreateAvatarContextProps,
+    type CreateAvatarContextReturn,
+  } from './context.svelte.js';
 
   export interface AvatarProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateAvatarContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateAvatarContextProps, 'id'>
     > {
-    children?: Snippet<[CreateAvatarContextReturn]>;
+    children?: Snippet<[context: CreateAvatarContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createAvatarContext, setAvatarContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     getRootNode,
@@ -29,7 +31,7 @@
   }: AvatarProps = $props();
 
   let context = createAvatarContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     getRootNode,

package/dist/avatar/root.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import { type CreateAvatarContextProps, type CreateAvatarContextReturn } from './context.svelte.js';
-export interface AvatarProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateAvatarContextProps>> {
-    children?: Snippet<[CreateAvatarContextReturn]>;
+export interface AvatarProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateAvatarContextProps, 'id'>> {
+    children?: Snippet<[context: CreateAvatarContextReturn]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/index.d.ts

@@ -1,8 +1,8 @@
 export { default as IndicatorGroup, type CarouselIndicatorGroupProps, } from './indicator-group.svelte';
-export { default as Indicator, type CarouselIndicatorProps } from './indicator.svelte';
-export { default as ItemGroup, type CarouselItemGroupProps } from './item-group.svelte';
+export { default as Indicator, type CarouselIndicatorProps, } from './indicator.svelte';
+export { default as ItemGroup, type CarouselItemGroupProps, } from './item-group.svelte';
 export { default as Item, type CarouselItemProps } from './item.svelte';
-export { default as NextTrigger, type CarouselNextTriggerProps } from './next-trigger.svelte';
-export { default as PrevTrigger, type CarouselPrevTriggerProps } from './prev-trigger.svelte';
+export { default as NextTrigger, type CarouselNextTriggerProps, } from './next-trigger.svelte';
+export { default as PrevTrigger, type CarouselPrevTriggerProps, } from './prev-trigger.svelte';
 export { default as Root, type CarouselProps } from './root.svelte';
-export { default as Viewport, type CarouselViewportProps } from './viewport.svelte';
+export { default as Viewport, type CarouselViewportProps, } from './viewport.svelte';

package/dist/carousel/index.js

@@ -1,8 +1,8 @@
 export { default as IndicatorGroup, } from './indicator-group.svelte';
-export { default as Indicator } from './indicator.svelte';
-export { default as ItemGroup } from './item-group.svelte';
+export { default as Indicator, } from './indicator.svelte';
+export { default as ItemGroup, } from './item-group.svelte';
 export { default as Item } from './item.svelte';
-export { default as NextTrigger } from './next-trigger.svelte';
-export { default as PrevTrigger } from './prev-trigger.svelte';
+export { default as NextTrigger, } from './next-trigger.svelte';
+export { default as PrevTrigger, } from './prev-trigger.svelte';
 export { default as Root } from './root.svelte';
-export { default as Viewport } from './viewport.svelte';
+export { default as Viewport, } from './viewport.svelte';

package/dist/carousel/indicator-group.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface CarouselIndicatorGroupProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface CarouselIndicatorGroupProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/indicator-group.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselIndicatorGroupProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CarouselIndicatorGroupProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/indicator.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/carousel';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface CarouselIndicatorProps
-    extends Assign<SvelteHTMLElements['button'], IndicatorProps> {}
+    extends Assign<SvelteHtmlProps<'button'>, IndicatorProps> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/indicator.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Assign } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { IndicatorProps } from '@zag-js/carousel';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselIndicatorProps extends Assign<SvelteHTMLElements['button'], IndicatorProps> {
+export interface CarouselIndicatorProps extends Assign<SvelteHtmlProps<'button'>, IndicatorProps> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/item-group.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface CarouselItemGroupProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface CarouselItemGroupProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/item-group.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselItemGroupProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CarouselItemGroupProps extends SvelteHtmlProps<'div'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/item.svelte

@@ -1,9 +1,12 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/carousel';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/carousel';
+  import type {Snippet} from 'svelte';
 
-  export interface CarouselItemProps extends Assign<SvelteHTMLElements['button'], ItemProps> {}
+  export interface CarouselItemProps
+    extends Assign<Omit<SvelteHtmlProps<'button'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
@@ -14,9 +17,11 @@
 
   let context = useCarouselContext();
 
+  let state = $derived(context.getItemState({index}));
+
   let attrs = $derived(mergeProps(props, context.getItemProps({index})));
 </script>
 
 <button type="button" {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </button>

package/dist/carousel/item.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/carousel';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselItemProps extends Assign<SvelteHTMLElements['button'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/carousel';
+import type { Snippet } from 'svelte';
+export interface CarouselItemProps extends Assign<Omit<SvelteHtmlProps<'button'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/next-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface CarouselNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface CarouselNextTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/next-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CarouselNextTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/prev-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface CarouselPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface CarouselPrevTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/prev-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface CarouselPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface CarouselPrevTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/carousel/root.svelte

@@ -1,13 +1,15 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import type {CreateCarouselContextProps, CreateCarouselContextReturn} from './context.svelte.js';
+  import type {
+    CreateCarouselContextProps,
+    CreateCarouselContextReturn,
+  } from './context.svelte.js';
 
   export interface CarouselProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateCarouselContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateCarouselContextProps, 'id'>
     > {
     children?: Snippet<[context: CreateCarouselContextReturn]>;
   }
@@ -19,7 +21,7 @@
   import {createCarouselContext, setCarouselContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     loop,
@@ -35,7 +37,7 @@
   }: CarouselProps = $props();
 
   let context = createCarouselContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     loop,