@ark-ui/svelte 5.10.0 → 5.11.0

package/dist/components/anatomy.d.ts

@@ -2,6 +2,7 @@ export * from '@zag-js/anatomy';
 export { accordionAnatomy } from './accordion/accordion.anatomy';
 export { angleSliderAnatomy } from './angle-slider/angle-slider.anatomy';
 export { avatarAnatomy } from './avatar/avatar.anatomy';
+export { bottomSheetAnatomy } from './bottom-sheet/bottom-sheet.anatomy';
 export { carouselAnatomy } from './carousel/carousel.anatomy';
 export { checkboxAnatomy } from './checkbox/checkbox.anatomy';
 export { clipboardAnatomy } from './clipboard/clipboard.anatomy';

package/dist/components/anatomy.js

@@ -2,6 +2,7 @@ export * from '@zag-js/anatomy';
 export { accordionAnatomy } from './accordion/accordion.anatomy';
 export { angleSliderAnatomy } from './angle-slider/angle-slider.anatomy';
 export { avatarAnatomy } from './avatar/avatar.anatomy';
+export { bottomSheetAnatomy } from './bottom-sheet/bottom-sheet.anatomy';
 export { carouselAnatomy } from './carousel/carousel.anatomy';
 export { checkboxAnatomy } from './checkbox/checkbox.anatomy';
 export { clipboardAnatomy } from './clipboard/clipboard.anatomy';

package/dist/components/angle-slider/use-angle-slider.svelte.d.ts

@@ -6,4 +6,4 @@ export interface UseAngleSliderProps extends Omit<angleSlider.Props, 'dir' | 'ge
 }
 export interface UseAngleSliderReturn extends Accessor<angleSlider.Api<PropTypes>> {
 }
-export declare const useAngleSlider: (props: MaybeFunction<UseAngleSliderProps>) => () => angleSlider.Api<import("@zag-js/types").PropTypes>;
+export declare const useAngleSlider: (props: MaybeFunction<UseAngleSliderProps>) => () => angleSlider.Api<PropTypes>;

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

@@ -6,4 +6,4 @@ export interface UseAvatarProps extends Omit<avatar.Props, 'dir' | 'getRootNode'
 }
 export interface UseAvatarReturn extends Accessor<avatar.Api<PropTypes>> {
 }
-export declare const useAvatar: (props: MaybeFunction<UseAvatarProps>) => () => avatar.Api<import("@zag-js/types").PropTypes>;
+export declare const useAvatar: (props: MaybeFunction<UseAvatarProps>) => () => avatar.Api<PropTypes>;

package/dist/components/bottom-sheet/bottom-sheet-backdrop.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface BottomSheetBackdropBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    ref?: Element | null
+  }
+  export interface BottomSheetBackdropProps extends Assign<HTMLProps<'div'>, BottomSheetBackdropBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresence } from '../presence'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetBackdropProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+  const renderStrategyProps = useRenderStrategyPropsContext()
+
+  const presence = usePresence(() => ({ ...renderStrategyProps, present: bottomSheet().open }))
+  const mergedProps = $derived(mergeProps(bottomSheet().getBackdropProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/bottom-sheet/bottom-sheet-backdrop.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface BottomSheetBackdropBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    ref?: Element | null;
+}
+export interface BottomSheetBackdropProps extends Assign<HTMLProps<'div'>, BottomSheetBackdropBaseProps> {
+}
+declare const BottomSheetBackdrop: import("svelte").Component<BottomSheetBackdropProps, {}, "ref">;
+type BottomSheetBackdrop = ReturnType<typeof BottomSheetBackdrop>;
+export default BottomSheetBackdrop;

package/dist/components/bottom-sheet/bottom-sheet-close-trigger.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface BottomSheetCloseTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface BottomSheetCloseTriggerProps extends Assign<HTMLProps<'button'>, BottomSheetCloseTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetCloseTriggerProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+  const mergedProps = $derived(mergeProps(bottomSheet().getCloseTriggerProps(), props))
+</script>
+
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/bottom-sheet/bottom-sheet-close-trigger.svelte.d.ts

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

package/dist/components/bottom-sheet/bottom-sheet-content.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { ContentProps } from '@zag-js/bottom-sheet'
+
+  export interface BottomSheetContentBaseProps extends PolymorphicProps<'div'>, ContentProps, RefAttribute {
+    ref?: Element | null
+  }
+  export interface BottomSheetContentProps
+    extends Assign<Omit<HTMLProps<'div'>, 'draggable'>, BottomSheetContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetContentProps = $props()
+
+  const [contentProps, localProps] = $derived(createSplitProps<ContentProps>()(props, ['draggable']))
+  const bottomSheet = useBottomSheetContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(
+    mergeProps(
+      bottomSheet().getContentProps({ draggable: true, ...contentProps }),
+      presence().getPresenceProps(),
+      localProps,
+    ),
+  )
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/bottom-sheet/bottom-sheet-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { ContentProps } from '@zag-js/bottom-sheet';
+export interface BottomSheetContentBaseProps extends PolymorphicProps<'div'>, ContentProps, RefAttribute {
+    ref?: Element | null;
+}
+export interface BottomSheetContentProps extends Assign<Omit<HTMLProps<'div'>, 'draggable'>, BottomSheetContentBaseProps> {
+}
+declare const BottomSheetContent: import("svelte").Component<BottomSheetContentProps, {}, "ref">;
+type BottomSheetContent = ReturnType<typeof BottomSheetContent>;
+export default BottomSheetContent;

package/dist/components/bottom-sheet/bottom-sheet-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseBottomSheetContext } from './use-bottom-sheet-context'
+
+  export interface BottomSheetContextProps {
+    children: Snippet<[UseBottomSheetContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  const { children }: BottomSheetContextProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+</script>
+
+{@render children(bottomSheet)}

package/dist/components/bottom-sheet/bottom-sheet-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseBottomSheetContext } from './use-bottom-sheet-context';
+export interface BottomSheetContextProps {
+    children: Snippet<[UseBottomSheetContext]>;
+}
+declare const BottomSheetContext: import("svelte").Component<BottomSheetContextProps, {}, "">;
+type BottomSheetContext = ReturnType<typeof BottomSheetContext>;
+export default BottomSheetContext;

package/dist/components/bottom-sheet/bottom-sheet-grabber-indicator.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface BottomSheetGrabberIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface BottomSheetGrabberIndicatorProps
+    extends Assign<HTMLProps<'div'>, BottomSheetGrabberIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetGrabberIndicatorProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+  const mergedProps = $derived(mergeProps(bottomSheet().getGrabberIndicatorProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/bottom-sheet/bottom-sheet-grabber-indicator.svelte.d.ts

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

package/dist/components/bottom-sheet/bottom-sheet-grabber.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface BottomSheetGrabberBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface BottomSheetGrabberProps extends Assign<HTMLProps<'div'>, BottomSheetGrabberBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetGrabberProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+  const mergedProps = $derived(mergeProps(bottomSheet().getGrabberProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/bottom-sheet/bottom-sheet-grabber.svelte.d.ts

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

package/dist/components/bottom-sheet/bottom-sheet-root-provider.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseBottomSheetReturn } from './use-bottom-sheet.svelte'
+
+  export interface BottomSheetRootProviderBaseProps {
+    value: UseBottomSheetReturn
+  }
+  export interface BottomSheetRootProviderProps extends BottomSheetRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { RenderStrategyPropsProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+  import { PresenceProvider, usePresence } from '../presence'
+  import { splitPresenceProps } from '../presence/split-presence-props.svelte'
+  import { BottomSheetProvider } from './use-bottom-sheet-context'
+
+  let { value, children, ...props }: BottomSheetRootProviderProps = $props()
+
+  const [presenceProps] = $derived(splitPresenceProps(props))
+  const [renderStrategyProps] = $derived(splitRenderStrategyProps(presenceProps))
+
+  const presenceMachineProps = $derived.by(() => ({
+    ...presenceProps,
+    present: value().open,
+  }))
+
+  const presence = usePresence(() => presenceMachineProps)
+
+  BottomSheetProvider(value)
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+  PresenceProvider(presence)
+</script>
+
+{@render children?.()}

package/dist/components/bottom-sheet/bottom-sheet-root-provider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { UseBottomSheetReturn } from './use-bottom-sheet.svelte';
+export interface BottomSheetRootProviderBaseProps {
+    value: UseBottomSheetReturn;
+}
+export interface BottomSheetRootProviderProps extends BottomSheetRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const BottomSheetRootProvider: import("svelte").Component<BottomSheetRootProviderProps, {}, "">;
+type BottomSheetRootProvider = ReturnType<typeof BottomSheetRootProvider>;
+export default BottomSheetRootProvider;

package/dist/components/bottom-sheet/bottom-sheet-root.svelte

@@ -0,0 +1,52 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseBottomSheetProps } from './use-bottom-sheet.svelte'
+
+  export interface BottomSheetRootBaseProps extends UseBottomSheetProps, UsePresenceProps {}
+  export interface BottomSheetRootProps extends BottomSheetRootBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { PresenceProvider, usePresence } from '../presence'
+  import { splitPresenceProps } from '../presence/split-presence-props.svelte'
+  import { RenderStrategyPropsProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+  import { BottomSheetProvider } from './use-bottom-sheet-context'
+  import { useBottomSheet } from './use-bottom-sheet.svelte'
+
+  let { open = $bindable(), children, ...props }: BottomSheetRootProps = $props()
+
+  const providedId = $props.id()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+  const [renderStrategyProps] = $derived(splitRenderStrategyProps(presenceProps))
+
+  const machineProps = $derived.by<UseBottomSheetProps>(() => {
+    return {
+      ...localProps,
+      id: localProps.id ?? providedId,
+      open,
+      onOpenChange(details) {
+        localProps.onOpenChange?.(details)
+        if (open !== undefined) open = details.open
+      },
+    }
+  })
+
+  const bottomSheet = useBottomSheet(() => machineProps)
+
+  const presenceMachineProps = $derived.by<UsePresenceProps>(() => ({
+    ...presenceProps,
+    present: bottomSheet().open,
+  }))
+
+  const presence = usePresence(() => presenceMachineProps)
+
+  BottomSheetProvider(bottomSheet)
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+  PresenceProvider(presence)
+</script>
+
+{@render children?.()}

package/dist/components/bottom-sheet/bottom-sheet-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { UsePresenceProps } from '../presence';
+import type { UseBottomSheetProps } from './use-bottom-sheet.svelte';
+export interface BottomSheetRootBaseProps extends UseBottomSheetProps, UsePresenceProps {
+}
+export interface BottomSheetRootProps extends BottomSheetRootBaseProps {
+    children?: Snippet;
+}
+declare const BottomSheetRoot: import("svelte").Component<BottomSheetRootProps, {}, "open">;
+type BottomSheetRoot = ReturnType<typeof BottomSheetRoot>;
+export default BottomSheetRoot;

package/dist/components/bottom-sheet/bottom-sheet-title.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface BottomSheetTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {}
+  export interface BottomSheetTitleProps extends Assign<HTMLProps<'h2'>, BottomSheetTitleBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetTitleProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+  const mergedProps = $derived(mergeProps(bottomSheet().getTitleProps(), props))
+</script>
+
+<Ark as="h2" bind:ref {...mergedProps} />

package/dist/components/bottom-sheet/bottom-sheet-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface BottomSheetTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {
+}
+export interface BottomSheetTitleProps extends Assign<HTMLProps<'h2'>, BottomSheetTitleBaseProps> {
+}
+declare const BottomSheetTitle: import("svelte").Component<BottomSheetTitleProps, {}, "ref">;
+type BottomSheetTitle = ReturnType<typeof BottomSheetTitle>;
+export default BottomSheetTitle;

package/dist/components/bottom-sheet/bottom-sheet-trigger.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface BottomSheetTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface BottomSheetTriggerProps extends Assign<HTMLProps<'button'>, BottomSheetTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useBottomSheetContext } from './use-bottom-sheet-context'
+
+  let { ref = $bindable(null), ...props }: BottomSheetTriggerProps = $props()
+
+  const bottomSheet = useBottomSheetContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(
+    mergeProps(
+      {
+        ...bottomSheet().getTriggerProps(),
+        'aria-controls': presence().unmounted ? undefined : bottomSheet().getTriggerProps()['aria-controls'],
+      },
+      props,
+    ),
+  )
+</script>
+
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/bottom-sheet/bottom-sheet-trigger.svelte.d.ts

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

package/dist/components/bottom-sheet/bottom-sheet.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as bottomSheetAnatomy } from '@zag-js/bottom-sheet';

package/dist/components/bottom-sheet/bottom-sheet.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as bottomSheetAnatomy } from '@zag-js/bottom-sheet';

package/dist/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,11 @@
+export type { OpenChangeDetails } from '@zag-js/bottom-sheet';
+export { default as Backdrop, type BottomSheetBackdropBaseProps as BackdropBaseProps, type BottomSheetBackdropProps as BackdropProps, } from './bottom-sheet-backdrop.svelte';
+export { default as CloseTrigger, type BottomSheetCloseTriggerBaseProps as CloseTriggerBaseProps, type BottomSheetCloseTriggerProps as CloseTriggerProps, } from './bottom-sheet-close-trigger.svelte';
+export { default as Content, type BottomSheetContentBaseProps as ContentBaseProps, type BottomSheetContentProps as ContentProps, } from './bottom-sheet-content.svelte';
+export { default as Context, type BottomSheetContextProps as ContextProps } from './bottom-sheet-context.svelte';
+export { default as Grabber, type BottomSheetGrabberBaseProps as GrabberBaseProps, type BottomSheetGrabberProps as GrabberProps, } from './bottom-sheet-grabber.svelte';
+export { default as GrabberIndicator, type BottomSheetGrabberIndicatorBaseProps as GrabberIndicatorBaseProps, type BottomSheetGrabberIndicatorProps as GrabberIndicatorProps, } from './bottom-sheet-grabber-indicator.svelte';
+export { default as Root, type BottomSheetRootBaseProps as RootBaseProps, type BottomSheetRootProps as RootProps, } from './bottom-sheet-root.svelte';
+export { default as RootProvider, type BottomSheetRootProviderBaseProps as RootProviderBaseProps, type BottomSheetRootProviderProps as RootProviderProps, } from './bottom-sheet-root-provider.svelte';
+export { default as Title, type BottomSheetTitleBaseProps as TitleBaseProps, type BottomSheetTitleProps as TitleProps, } from './bottom-sheet-title.svelte';
+export { default as Trigger, type BottomSheetTriggerBaseProps as TriggerBaseProps, type BottomSheetTriggerProps as TriggerProps, } from './bottom-sheet-trigger.svelte';

package/dist/components/bottom-sheet/bottom-sheet.js

@@ -0,0 +1,10 @@
+export { default as Backdrop, } from './bottom-sheet-backdrop.svelte';
+export { default as CloseTrigger, } from './bottom-sheet-close-trigger.svelte';
+export { default as Content, } from './bottom-sheet-content.svelte';
+export { default as Context } from './bottom-sheet-context.svelte';
+export { default as Grabber, } from './bottom-sheet-grabber.svelte';
+export { default as GrabberIndicator, } from './bottom-sheet-grabber-indicator.svelte';
+export { default as Root, } from './bottom-sheet-root.svelte';
+export { default as RootProvider, } from './bottom-sheet-root-provider.svelte';
+export { default as Title, } from './bottom-sheet-title.svelte';
+export { default as Trigger, } from './bottom-sheet-trigger.svelte';

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,15 @@
+export type { OpenChangeDetails as BottomSheetOpenChangeDetails } from '@zag-js/bottom-sheet';
+export { default as BottomSheetBackdrop, type BottomSheetBackdropBaseProps, type BottomSheetBackdropProps, } from './bottom-sheet-backdrop.svelte';
+export { default as BottomSheetCloseTrigger, type BottomSheetCloseTriggerBaseProps, type BottomSheetCloseTriggerProps, } from './bottom-sheet-close-trigger.svelte';
+export { default as BottomSheetContent, type BottomSheetContentBaseProps, type BottomSheetContentProps, } from './bottom-sheet-content.svelte';
+export { default as BottomSheetContext, type BottomSheetContextProps } from './bottom-sheet-context.svelte';
+export { default as BottomSheetGrabber, type BottomSheetGrabberBaseProps, type BottomSheetGrabberProps, } from './bottom-sheet-grabber.svelte';
+export { default as BottomSheetGrabberIndicator, type BottomSheetGrabberIndicatorBaseProps, type BottomSheetGrabberIndicatorProps, } from './bottom-sheet-grabber-indicator.svelte';
+export { default as BottomSheetRoot, type BottomSheetRootBaseProps, type BottomSheetRootProps, } from './bottom-sheet-root.svelte';
+export { default as BottomSheetRootProvider, type BottomSheetRootProviderBaseProps, type BottomSheetRootProviderProps, } from './bottom-sheet-root-provider.svelte';
+export { default as BottomSheetTitle, type BottomSheetTitleBaseProps, type BottomSheetTitleProps, } from './bottom-sheet-title.svelte';
+export { default as BottomSheetTrigger, type BottomSheetTriggerBaseProps, type BottomSheetTriggerProps, } from './bottom-sheet-trigger.svelte';
+export { bottomSheetAnatomy } from './bottom-sheet.anatomy';
+export { useBottomSheetContext, type UseBottomSheetContext } from './use-bottom-sheet-context';
+export { useBottomSheet, type UseBottomSheetProps, type UseBottomSheetReturn } from './use-bottom-sheet.svelte';
+export * as BottomSheet from './bottom-sheet';

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1,14 @@
+export { default as BottomSheetBackdrop, } from './bottom-sheet-backdrop.svelte';
+export { default as BottomSheetCloseTrigger, } from './bottom-sheet-close-trigger.svelte';
+export { default as BottomSheetContent, } from './bottom-sheet-content.svelte';
+export { default as BottomSheetContext } from './bottom-sheet-context.svelte';
+export { default as BottomSheetGrabber, } from './bottom-sheet-grabber.svelte';
+export { default as BottomSheetGrabberIndicator, } from './bottom-sheet-grabber-indicator.svelte';
+export { default as BottomSheetRoot, } from './bottom-sheet-root.svelte';
+export { default as BottomSheetRootProvider, } from './bottom-sheet-root-provider.svelte';
+export { default as BottomSheetTitle, } from './bottom-sheet-title.svelte';
+export { default as BottomSheetTrigger, } from './bottom-sheet-trigger.svelte';
+export { bottomSheetAnatomy } from './bottom-sheet.anatomy';
+export { useBottomSheetContext } from './use-bottom-sheet-context';
+export { useBottomSheet } from './use-bottom-sheet.svelte';
+export * as BottomSheet from './bottom-sheet';

package/dist/components/bottom-sheet/use-bottom-sheet-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseBottomSheetReturn } from './use-bottom-sheet.svelte';
+export interface UseBottomSheetContext extends UseBottomSheetReturn {
+}
+export declare const BottomSheetProvider: (opts: UseBottomSheetContext) => void, useBottomSheetContext: (fallback?: UseBottomSheetContext | undefined) => UseBottomSheetContext;

package/dist/components/bottom-sheet/use-bottom-sheet-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [BottomSheetProvider, useBottomSheetContext] = createContext({
+    name: 'BottomSheetContext',
+});

package/dist/components/bottom-sheet/use-bottom-sheet.svelte.d.ts

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

package/dist/components/bottom-sheet/use-bottom-sheet.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as bottomSheet from '@zag-js/bottom-sheet';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useBottomSheet = (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(bottomSheet.machine, () => machineProps);
+    const api = $derived(bottomSheet.connect(service, normalizeProps));
+    return () => api;
+};

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

@@ -6,4 +6,4 @@ export interface UseCarouselProps extends Optional<Omit<carousel.Props, 'dir' |
 }
 export interface UseCarouselReturn extends Accessor<carousel.Api<PropTypes>> {
 }
-export declare const useCarousel: (props?: MaybeFunction<UseCarouselProps>) => () => carousel.Api<import("@zag-js/types").PropTypes>;
+export declare const useCarousel: (props?: MaybeFunction<UseCarouselProps>) => () => carousel.Api<PropTypes>;

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

@@ -1 +1 @@
-export declare const checkboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"label" | "group" | "root" | "control" | "indicator">;
+export declare const checkboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"label" | "root" | "group" | "control" | "indicator">;

package/dist/components/collapsible/split-collapsible-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseCollapsibleProps } from './use-collapsible.svelte';
-export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "lazyMount" | "unmountOnExit" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "disabled" | "id">];
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "lazyMount" | "unmountOnExit" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "disabled" | "collapsedHeight" | "collapsedWidth" | "id">];

package/dist/components/collapsible/split-collapsible-props.svelte.js

@@ -1,6 +1,8 @@
 import { createSplitProps } from '../../utils/create-split-props';
 const splitFn = createSplitProps();
 export const splitCollapsibleProps = (props) => splitFn(props, [
+    'collapsedHeight',
+    'collapsedWidth',
     'defaultOpen',
     'disabled',
     'id',

package/dist/components/color-picker/color-picker.anatomy.d.ts

@@ -1 +1 @@
-export declare const colorPickerAnatomy: import("@zag-js/anatomy").AnatomyInstance<"area" | "label" | "view" | "root" | "content" | "trigger" | "control" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;
+export declare const colorPickerAnatomy: import("@zag-js/anatomy").AnatomyInstance<"area" | "label" | "view" | "root" | "content" | "trigger" | "control" | "valueText" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;

package/dist/components/color-picker/split-color-picker-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseColorPickerProps } from './use-color-picker.svelte';
-export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "inline" | "onValueChange" | "onValueChangeEnd" | "readOnly" | "invalid" | "required" | "positioning" | "initialFocusEl" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+export declare const splitColorPickerProps: <T extends UseColorPickerProps>(props: T) => [UseColorPickerProps, Omit<T, "name" | "defaultValue" | "value" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "disabled" | "id" | "inline" | "onValueChange" | "onValueChangeEnd" | "readOnly" | "invalid" | "required" | "initialFocusEl" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "positioning" | "format" | "defaultFormat" | "onFormatChange" | "closeOnSelect" | "openAutoFocus">];

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

@@ -14,8 +14,10 @@
   export interface ComboboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {}
 
+  export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ComboboxRootProps<T>, P>
+
   export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
-    props: Assign<ComboboxRootProps<T>, P>,
+    props: ComboboxRootComponentProps<T, P>,
   ) => Snippet
 </script>
 

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

@@ -7,7 +7,8 @@ export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComb
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {
 }
-export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ComboboxRootProps<T>, P>) => Snippet;
+export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ComboboxRootProps<T>, P>;
+export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(props: ComboboxRootComponentProps<T, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ComboboxRootProps<T>;
     exports: {};

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

@@ -1 +1 @@
-export declare const comboboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "list" | "root" | "content" | "trigger" | "control" | "positioner" | "clearTrigger" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const comboboxAnatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "root" | "content" | "trigger" | "list" | "item" | "control" | "itemGroup" | "positioner" | "clearTrigger" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;