@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/accordion/accordion-context.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+
+  export interface AccordionContextProps {
+    render: Snippet<[UseAccordionContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useAccordionContext, type UseAccordionContext } from './use-accordion-context'
+
+  const { render }: AccordionContextProps = $props()
+
+  const accordion = useAccordionContext()
+</script>
+
+{@render render(accordion)}

package/dist/components/accordion/accordion-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AccordionContextProps {
+    render: Snippet<[UseAccordionContext]>;
+}
+import { type UseAccordionContext } from './use-accordion-context';
+declare const AccordionContext: import("svelte").Component<AccordionContextProps, {}, "">;
+type AccordionContext = ReturnType<typeof AccordionContext>;
+export default AccordionContext;

package/dist/components/accordion/accordion-item-content.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface AccordionItemContentBaseProps extends PolymorphicProps<'div'> {}
+  export interface AccordionItemContentProps extends Assign<HTMLProps<'div'>, AccordionItemContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { omit } from '@zag-js/utils'
+  import { CollapsibleContent } from '../collapsible'
+  import { useAccordionContext } from './use-accordion-context'
+  import { useAccordionItemPropsContext } from './use-accordion-item-props-context'
+
+  const props: AccordionItemContentProps = $props()
+
+  const accordion = useAccordionContext()
+  const itemProps = useAccordionItemPropsContext()
+
+  const contentProps = $derived(accordion().getItemContentProps(itemProps()))
+  const itemContentProps = $derived(omit(contentProps, ['hidden', 'data-state']))
+
+  const mergedProps = $derived(mergeProps(itemContentProps, props))
+</script>
+
+<CollapsibleContent {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface AccordionItemContentBaseProps extends PolymorphicProps<'div'> {
+}
+export interface AccordionItemContentProps extends Assign<HTMLProps<'div'>, AccordionItemContentBaseProps> {
+}
+declare const AccordionItemContent: import("svelte").Component<AccordionItemContentProps, {}, "">;
+type AccordionItemContent = ReturnType<typeof AccordionItemContent>;
+export default AccordionItemContent;

package/dist/components/accordion/accordion-item-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+
+  export interface AccordionItemContextProps {
+    render: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { AccordionItemProvider, useAccordionItemContext } from './use-accordion-item-context'
+
+  const { render }: AccordionItemContextProps = $props()
+
+  const itemState = useAccordionItemContext()
+  AccordionItemProvider(itemState)
+</script>
+
+{@render render()}

package/dist/components/accordion/accordion-item-context.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+export interface AccordionItemContextProps {
+    render: Snippet;
+}
+declare const AccordionItemContext: import("svelte").Component<AccordionItemContextProps, {}, "">;
+type AccordionItemContext = ReturnType<typeof AccordionItemContext>;
+export default AccordionItemContext;

package/dist/components/accordion/accordion-item-indicator.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface AccordionItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface AccordionItemIndicatorProps extends Assign<HTMLProps<'div'>, AccordionItemIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAccordionContext } from './use-accordion-context'
+  import { useAccordionItemPropsContext } from './use-accordion-item-props-context'
+
+  const props: AccordionItemIndicatorProps = $props()
+
+  const accordion = useAccordionContext()
+  const itemProps = useAccordionItemPropsContext()
+
+  const mergedProps = $derived(mergeProps(accordion().getItemIndicatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface AccordionItemIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface AccordionItemIndicatorProps extends Assign<HTMLProps<'div'>, AccordionItemIndicatorBaseProps> {
+}
+declare const AccordionItemIndicator: import("svelte").Component<AccordionItemIndicatorProps, {}, "">;
+type AccordionItemIndicator = ReturnType<typeof AccordionItemIndicator>;
+export default AccordionItemIndicator;

package/dist/components/accordion/accordion-item-trigger.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface AccordionItemTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface AccordionItemTriggerProps extends Assign<HTMLProps<'button'>, AccordionItemTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { useCollapsibleContext } from '../collapsible'
+  import { Ark } from '../factory'
+  import { useAccordionContext } from './use-accordion-context'
+  import { useAccordionItemPropsContext } from './use-accordion-item-props-context'
+
+  const props: AccordionItemTriggerProps = $props()
+
+  const accordion = useAccordionContext()
+  const itemProps = useAccordionItemPropsContext()
+
+  const collapsible = useCollapsibleContext()
+  const triggerProps = $derived(accordion().getItemTriggerProps(itemProps()))
+
+  const mergedProps = $derived(
+    mergeProps(
+      {
+        ...triggerProps,
+        'aria-controls': collapsible().isUnmounted ? undefined : triggerProps['aria-controls'],
+      },
+      props,
+    ),
+  )
+</script>
+
+<Ark as="button" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface AccordionItemTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface AccordionItemTriggerProps extends Assign<HTMLProps<'button'>, AccordionItemTriggerBaseProps> {
+}
+declare const AccordionItemTrigger: import("svelte").Component<AccordionItemTriggerProps, {}, "">;
+type AccordionItemTrigger = ReturnType<typeof AccordionItemTrigger>;
+export default AccordionItemTrigger;

package/dist/components/accordion/accordion-item.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ItemProps } from '@zag-js/accordion'
+
+  export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface AccordionItemProps extends Assign<HTMLProps<'div'>, AccordionItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { CollapsibleRoot } from '../collapsible'
+  import { useAccordionContext } from './use-accordion-context'
+  import { AccordionItemProvider } from './use-accordion-item-context'
+  import { AccordionItemPropsProvider } from './use-accordion-item-props-context'
+
+  const props: AccordionItemProps = $props()
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['value', 'disabled']))
+
+  const accordion = useAccordionContext()
+  const renderStrategy = useRenderStrategyPropsContext()
+
+  const itemState = $derived(accordion().getItemState(itemProps))
+  const mergedProps = $derived(mergeProps(accordion().getItemProps(itemProps), localProps))
+
+  const itemContentProps = $derived(accordion().getItemContentProps(itemProps))
+
+  AccordionItemPropsProvider(() => itemProps)
+  AccordionItemProvider(() => itemState)
+</script>
+
+<CollapsibleRoot
+  open={itemState.expanded}
+  ids={{ content: itemContentProps.id ?? undefined }}
+  {...renderStrategy()}
+  {...mergedProps}
+/>

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ItemProps } from '@zag-js/accordion';
+export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+}
+export interface AccordionItemProps extends Assign<HTMLProps<'div'>, AccordionItemBaseProps> {
+}
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/accordion/accordion-root-provider.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseAccordionReturn } from './use-accordion.svelte'
+
+  export interface AccordionRootProviderBaseProps extends PolymorphicProps<'div'>, RenderStrategyProps {
+    value: UseAccordionReturn
+  }
+  export interface AccordionRootProviderProps extends Assign<HTMLProps<'div'>, AccordionRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import {
+    type RenderStrategyProps,
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+  } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { AccordionProvider } from './use-accordion-context'
+
+  let { value, ...props }: AccordionRootProviderProps = $props()
+
+  const [renderStrategyProps, localProps] = $derived(splitRenderStrategyProps(props))
+  const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
+
+  AccordionProvider(value)
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/accordion/accordion-root-provider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseAccordionReturn } from './use-accordion.svelte';
+export interface AccordionRootProviderBaseProps extends PolymorphicProps<'div'>, RenderStrategyProps {
+    value: UseAccordionReturn;
+}
+export interface AccordionRootProviderProps extends Assign<HTMLProps<'div'>, AccordionRootProviderBaseProps> {
+}
+import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare const AccordionRootProvider: import("svelte").Component<AccordionRootProviderProps, {}, "">;
+type AccordionRootProvider = ReturnType<typeof AccordionRootProvider>;
+export default AccordionRootProvider;

package/dist/components/accordion/accordion-root.svelte

@@ -0,0 +1,55 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseAccordionProps } from './use-accordion.svelte'
+
+  export interface AccordionRootBaseProps extends UseAccordionProps, RenderStrategyProps, PolymorphicProps<'div'> {}
+  export interface AccordionRootProps extends Assign<HTMLProps<'div'>, AccordionRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import {
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+    type RenderStrategyProps,
+  } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { AccordionProvider } from './use-accordion-context'
+  import { useAccordion } from './use-accordion.svelte'
+
+  let { value = $bindable(), ...props }: AccordionRootProps = $props()
+  const providedId = $props.id()
+
+  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props)
+  const [useAccordionProps, localProps] = createSplitProps<UseAccordionProps>()(accordionProps, [
+    'collapsible',
+    'defaultValue',
+    'disabled',
+    'id',
+    'ids',
+    'multiple',
+    'onFocusChange',
+    'onValueChange',
+    'orientation',
+    'value',
+  ])
+
+  const resolvedProps = $derived<UseAccordionProps>({
+    ...useAccordionProps,
+    id: useAccordionProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      useAccordionProps.onValueChange?.(details)
+      value = details.value
+    },
+  })
+
+  const accordion = useAccordion(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(accordion().getRootProps(), localProps))
+
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+  AccordionProvider(accordion)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseAccordionProps } from './use-accordion.svelte';
+export interface AccordionRootBaseProps extends UseAccordionProps, RenderStrategyProps, PolymorphicProps<'div'> {
+}
+export interface AccordionRootProps extends Assign<HTMLProps<'div'>, AccordionRootBaseProps> {
+}
+import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "value">;
+type AccordionRoot = ReturnType<typeof AccordionRoot>;
+export default AccordionRoot;

package/dist/components/accordion/accordion.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/components/accordion/accordion.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,9 @@
+export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/accordion';
+export { default as Context, type AccordionContextProps as ContextProps } from './accordion-context.svelte';
+export { default as Item, type AccordionItemBaseProps as ItemBaseProps, type AccordionItemProps as ItemProps, } from './accordion-item.svelte';
+export { default as ItemContent, type AccordionItemContentBaseProps as ItemContentBaseProps, type AccordionItemContentProps as ItemContentProps, } from './accordion-item-content.svelte';
+export { default as ItemContext, type AccordionItemContextProps as ItemContextProps, } from './accordion-item-context.svelte';
+export { default as ItemIndicator, type AccordionItemIndicatorBaseProps as ItemIndicatorBaseProps, type AccordionItemIndicatorProps as ItemIndicatorProps, } from './accordion-item-indicator.svelte';
+export { default as ItemTrigger, type AccordionItemTriggerBaseProps as ItemTriggerBaseProps, type AccordionItemTriggerProps as ItemTriggerProps, } from './accordion-item-trigger.svelte';
+export { default as Root, type AccordionRootBaseProps as RootBaseProps, type AccordionRootProps as RootProps, } from './accordion-root.svelte';
+export { default as RootProvider, type AccordionRootProviderBaseProps as RootProviderBaseProps, type AccordionRootProviderProps as RootProviderProps, } from './accordion-root-provider.svelte';

package/dist/components/accordion/accordion.js

@@ -0,0 +1,8 @@
+export { default as Context } from './accordion-context.svelte';
+export { default as Item, } from './accordion-item.svelte';
+export { default as ItemContent, } from './accordion-item-content.svelte';
+export { default as ItemContext, } from './accordion-item-context.svelte';
+export { default as ItemIndicator, } from './accordion-item-indicator.svelte';
+export { default as ItemTrigger, } from './accordion-item-trigger.svelte';
+export { default as Root, } from './accordion-root.svelte';
+export { default as RootProvider, } from './accordion-root-provider.svelte';

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,14 @@
+export type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails, } from '@zag-js/accordion';
+export { default as AccordionContext, type AccordionContextProps } from './accordion-context.svelte';
+export { default as AccordionItem, type AccordionItemBaseProps, type AccordionItemProps } from './accordion-item.svelte';
+export { default as AccordionItemContent, type AccordionItemContentBaseProps, type AccordionItemContentProps, } from './accordion-item-content.svelte';
+export { default as AccordionItemContext, type AccordionItemContextProps } from './accordion-item-context.svelte';
+export { default as AccordionItemIndicator, type AccordionItemIndicatorBaseProps, type AccordionItemIndicatorProps, } from './accordion-item-indicator.svelte';
+export { default as AccordionItemTrigger, type AccordionItemTriggerBaseProps, type AccordionItemTriggerProps, } from './accordion-item-trigger.svelte';
+export { default as AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps } from './accordion-root.svelte';
+export { default as AccordionRootProvider, type AccordionRootProviderBaseProps, type AccordionRootProviderProps, } from './accordion-root-provider.svelte';
+export { accordionAnatomy } from './accordion.anatomy';
+export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion.svelte';
+export { useAccordionContext, type UseAccordionContext } from './use-accordion-context';
+export { useAccordionItemContext, type UseAccordionItemContext } from './use-accordion-item-context';
+export * as Accordion from './accordion';

package/dist/components/accordion/index.js

@@ -0,0 +1,13 @@
+export { default as AccordionContext } from './accordion-context.svelte';
+export { default as AccordionItem } from './accordion-item.svelte';
+export { default as AccordionItemContent, } from './accordion-item-content.svelte';
+export { default as AccordionItemContext } from './accordion-item-context.svelte';
+export { default as AccordionItemIndicator, } from './accordion-item-indicator.svelte';
+export { default as AccordionItemTrigger, } from './accordion-item-trigger.svelte';
+export { default as AccordionRoot } from './accordion-root.svelte';
+export { default as AccordionRootProvider, } from './accordion-root-provider.svelte';
+export { accordionAnatomy } from './accordion.anatomy';
+export { useAccordion } from './use-accordion.svelte';
+export { useAccordionContext } from './use-accordion-context';
+export { useAccordionItemContext } from './use-accordion-item-context';
+export * as Accordion from './accordion';

package/dist/components/accordion/use-accordion-context.d.ts

@@ -0,0 +1,6 @@
+import type { Accessor } from '../../types';
+import type { Api } from '@zag-js/accordion';
+import type { PropTypes } from '@zag-js/svelte';
+export interface UseAccordionContext extends Accessor<Api<PropTypes>> {
+}
+export declare const AccordionProvider: (opts: UseAccordionContext) => void, useAccordionContext: (fallback?: UseAccordionContext | undefined) => UseAccordionContext;

package/dist/components/accordion/use-accordion-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [AccordionProvider, useAccordionContext] = createContext({
+    name: 'AccordionContext',
+    hookName: 'useAccordionContext',
+    providerName: '<AccordionProvider />',
+});

package/dist/components/accordion/use-accordion-item-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ItemState } from '@zag-js/accordion';
+export interface UseAccordionItemContext extends Accessor<ItemState> {
+}
+export declare const AccordionItemProvider: (opts: UseAccordionItemContext) => void, useAccordionItemContext: (fallback?: UseAccordionItemContext | undefined) => UseAccordionItemContext;

package/dist/components/accordion/use-accordion-item-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [AccordionItemProvider, useAccordionItemContext] = createContext({
+    name: 'AccordionItemContext',
+    hookName: 'useAccordionItemContext',
+    providerName: '<AccordionItemProvider />',
+});

package/dist/components/accordion/use-accordion-item-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types';
+import type { ItemProps } from '@zag-js/accordion';
+export interface UseAccordionItemPropsContext extends Accessor<ItemProps> {
+}
+export declare const AccordionItemPropsProvider: (opts: UseAccordionItemPropsContext) => void, useAccordionItemPropsContext: (fallback?: UseAccordionItemPropsContext | undefined) => UseAccordionItemPropsContext;

package/dist/components/accordion/use-accordion-item-props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({
+    name: 'AccordionItemPropsContext',
+    hookName: 'useAccordionItemPropsContext',
+    providerName: '<AccordionItemPropsProvider />',
+});

package/dist/components/accordion/use-accordion.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import * as accordion from '@zag-js/accordion';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseAccordionProps extends Optional<Omit<accordion.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseAccordionReturn extends Accessor<accordion.Api<PropTypes>> {
+}
+export declare const useAccordion: (props?: MaybeFunction<UseAccordionProps>) => UseAccordionReturn;

package/dist/components/accordion/use-accordion.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as accordion from '@zag-js/accordion';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useAccordion = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(accordion.machine, () => machineProps);
+    const api = $derived(accordion.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/avatar/avatar-root.svelte

@@ -7,17 +7,17 @@
 </script>
 
 <script lang="ts">
-  import { mergeProps, reflect } from '@zag-js/svelte'
+  import { mergeProps } from '@zag-js/svelte'
   import { createSplitProps } from '../../utils/create-split-props'
   import { Ark } from '../factory'
   import { AvatarProvider } from './use-avatar-context'
   import { useAvatar } from './use-avatar.svelte'
 
-  const _props: AvatarRootProps = $props()
+  const props: AvatarRootProps = $props()
   const providedId = $props.id()
 
   const [useAvatarProps, localProps] = $derived(
-    createSplitProps<Optional<UseAvatarProps, 'id'>>()(_props, ['id', 'ids', 'onStatusChange']),
+    createSplitProps<Optional<UseAvatarProps, 'id'>>()(props, ['id', 'ids', 'onStatusChange']),
   )
 
   const resolvedProps = $derived({
@@ -25,7 +25,7 @@
     id: providedId,
   })
 
-  const avatar = useAvatar(reflect(() => resolvedProps))
+  const avatar = useAvatar(() => resolvedProps)
   const mergedProps = $derived(mergeProps(avatar().getRootProps(), localProps))
 
   AvatarProvider(avatar)

package/dist/components/avatar/use-avatar-context.js

@@ -1,4 +1,4 @@
 import { createContext } from '../../utils/create-context';
 export const [AvatarProvider, useAvatarContext] = createContext({
-    key: 'AvatarContext',
+    name: 'AvatarContext',
 });

package/dist/components/avatar/use-avatar.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Accessor } from '../../types';
 import * as avatar from '@zag-js/avatar';
 import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
 export interface UseAvatarProps extends Omit<avatar.Props, 'dir' | 'getRootNode'> {
 }
 export interface UseAvatarReturn extends Accessor<avatar.Api<PropTypes>> {
 }
-export declare const useAvatar: (props: UseAvatarProps) => () => avatar.Api<import("@zag-js/types").PropTypes>;
+export declare const useAvatar: (props: MaybeFunction<UseAvatarProps>) => () => avatar.Api<import("@zag-js/types").PropTypes>;

package/dist/components/avatar/use-avatar.svelte.js

@@ -2,15 +2,19 @@ import { useEnvironmentContext } from '../../providers/environment';
 import { useLocaleContext } from '../../providers/locale';
 import * as avatar from '@zag-js/avatar';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
 export const useAvatar = (props) => {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
-    const machineProps = $derived({
-        dir: locale.dir,
-        getRootNode: env.getRootNode,
-        ...props,
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
     });
     const service = useMachine(avatar.machine, () => machineProps);
-    const api = $derived(() => avatar.connect(service, normalizeProps));
-    return api;
+    const api = $derived(avatar.connect(service, normalizeProps));
+    return () => api;
 };

package/dist/components/carousel/carousel-autoplay-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CarouselAutoplayTriggerProps extends Assign<HTMLProps<'button'>, CarouselAutoplayTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselAutoplayTriggerProps = $props()
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getAutoplayTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/carousel/carousel-autoplay-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface CarouselAutoplayTriggerProps extends Assign<HTMLProps<'button'>, CarouselAutoplayTriggerBaseProps> {
+}
+declare const CarouselAutoplayTrigger: import("svelte").Component<CarouselAutoplayTriggerProps, {}, "">;
+type CarouselAutoplayTrigger = ReturnType<typeof CarouselAutoplayTrigger>;
+export default CarouselAutoplayTrigger;

package/dist/components/carousel/carousel-context.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+
+  export interface CarouselContextProps {
+    render: Snippet<[UseCarouselContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useCarouselContext, type UseCarouselContext } from './use-carousel-context'
+
+  let { render }: CarouselContextProps = $props()
+
+  const carousel = useCarouselContext()
+</script>
+
+{@render render(carousel)}

package/dist/components/carousel/carousel-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface CarouselContextProps {
+    render: Snippet<[UseCarouselContext]>;
+}
+import { type UseCarouselContext } from './use-carousel-context';
+declare const CarouselContext: import("svelte").Component<CarouselContextProps, {}, "">;
+type CarouselContext = ReturnType<typeof CarouselContext>;
+export default CarouselContext;

package/dist/components/carousel/carousel-control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface CarouselControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface CarouselControlProps extends Assign<HTMLProps<'div'>, CarouselControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const props: CarouselControlProps = $props()
+
+  const carousel = useCarouselContext()
+  const mergedProps = $derived(mergeProps(carousel().getControlProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />