@sprawlify/svelte 0.0.74 → 0.0.76

package/dist/components/anatomy.d.ts

@@ -1,6 +1,7 @@
 export * from '@sprawlify/primitives/anatomy';
 export { accordionAnatomy } from './accordion/accordion-anatomy';
 export { angleSliderAnatomy } from './angle-slider/angle-slider-anatomy';
+export { aspectRatioAnatomy } from './aspect-ratio/aspect-ratio-anatomy';
 export { avatarAnatomy } from './avatar/avatar-anatomy';
 export { bottomSheetAnatomy } from './bottom-sheet/bottom-sheet-anatomy';
 export { carouselAnatomy } from './carousel/carousel-anatomy';
@@ -34,6 +35,7 @@ export { ratingGroupAnatomy } from './rating-group/rating-group-anatomy';
 export { scrollAreaAnatomy } from './scroll-area/scroll-area-anatomy';
 export { segmentGroupAnatomy } from './segment-group/segment-group-anatomy';
 export { selectAnatomy } from './select/select-anatomy';
+export { separatorAnatomy } from './separator/separator-anatomy';
 export { signaturePadAnatomy } from './signature-pad/signature-pad-anatomy';
 export { sliderAnatomy } from './slider/slider-anatomy';
 export { splitterAnatomy } from './splitter/splitter-anatomy';

package/dist/components/anatomy.js

@@ -1,6 +1,7 @@
 export * from '@sprawlify/primitives/anatomy';
 export { accordionAnatomy } from './accordion/accordion-anatomy';
 export { angleSliderAnatomy } from './angle-slider/angle-slider-anatomy';
+export { aspectRatioAnatomy } from './aspect-ratio/aspect-ratio-anatomy';
 export { avatarAnatomy } from './avatar/avatar-anatomy';
 export { bottomSheetAnatomy } from './bottom-sheet/bottom-sheet-anatomy';
 export { carouselAnatomy } from './carousel/carousel-anatomy';
@@ -34,6 +35,7 @@ export { ratingGroupAnatomy } from './rating-group/rating-group-anatomy';
 export { scrollAreaAnatomy } from './scroll-area/scroll-area-anatomy';
 export { segmentGroupAnatomy } from './segment-group/segment-group-anatomy';
 export { selectAnatomy } from './select/select-anatomy';
+export { separatorAnatomy } from './separator/separator-anatomy';
 export { signaturePadAnatomy } from './signature-pad/signature-pad-anatomy';
 export { sliderAnatomy } from './slider/slider-anatomy';
 export { splitterAnatomy } from './splitter/splitter-anatomy';

package/dist/components/aspect-ratio/aspect-ratio-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as aspectRatioAnatomy } from '@sprawlify/primitives/machines/aspect-ratio';

package/dist/components/aspect-ratio/aspect-ratio-anatomy.js

@@ -0,0 +1 @@
+export { anatomy as aspectRatioAnatomy } from '@sprawlify/primitives/machines/aspect-ratio';

package/dist/components/aspect-ratio/aspect-ratio-content.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AspectRatioContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface AspectRatioContentProps extends HTMLProps<'div'>, AspectRatioContentBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Sprawlify } from '../factory'
+  import { mergeProps } from '../../core'
+  import { useAspectRatioContext } from './use-aspect-ratio-context'
+
+  let { ref = $bindable(null), ...props }: AspectRatioContentProps = $props()
+  const aspectRatio = useAspectRatioContext()
+  const mergedProps = $derived(mergeProps(aspectRatio().getContentProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/aspect-ratio/aspect-ratio-content.svelte.d.ts

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

package/dist/components/aspect-ratio/aspect-ratio-context.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseAspectRatioContext } from './use-aspect-ratio-context'
+
+  export interface AspectRatioContextProps {
+    children: Snippet<[UseAspectRatioContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useAspectRatioContext } from './use-aspect-ratio-context'
+
+  let { children }: AspectRatioContextProps = $props()
+  const context = useAspectRatioContext()
+</script>
+
+{@render children(context)}

package/dist/components/aspect-ratio/aspect-ratio-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseAspectRatioContext } from './use-aspect-ratio-context';
+export interface AspectRatioContextProps {
+    children: Snippet<[UseAspectRatioContext]>;
+}
+declare const AspectRatioContext: import("svelte").Component<AspectRatioContextProps, {}, "">;
+type AspectRatioContext = ReturnType<typeof AspectRatioContext>;
+export default AspectRatioContext;

package/dist/components/aspect-ratio/aspect-ratio-root-provider.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseAspectRatioReturn } from './use-aspect-ratio.svelte'
+
+  interface RootProviderProps {
+    value: UseAspectRatioReturn
+  }
+
+  export interface AspectRatioRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface AspectRatioRootProviderProps extends HTMLProps<'div'>, AspectRatioRootProviderBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { AspectRatioProvider } from './use-aspect-ratio-context'
+
+  let { ref = $bindable(null), ...props }: AspectRatioRootProviderProps = $props()
+
+  const [{ value: aspectRatio }, localProps] = $derived(
+    createSplitProps<RootProviderProps>()(props, ['value']),
+  )
+
+  const mergedProps = $derived(mergeProps(aspectRatio().getRootProps(), localProps))
+  AspectRatioProvider(aspectRatio)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/aspect-ratio/aspect-ratio-root-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseAspectRatioReturn } from './use-aspect-ratio.svelte';
+interface RootProviderProps {
+    value: UseAspectRatioReturn;
+}
+export interface AspectRatioRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface AspectRatioRootProviderProps extends HTMLProps<'div'>, AspectRatioRootProviderBaseProps {
+}
+declare const AspectRatioRootProvider: import("svelte").Component<AspectRatioRootProviderProps, {}, "ref">;
+type AspectRatioRootProvider = ReturnType<typeof AspectRatioRootProvider>;
+export default AspectRatioRootProvider;

package/dist/components/aspect-ratio/aspect-ratio-root.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseAspectRatioProps } from './use-aspect-ratio.svelte'
+
+  export interface AspectRatioRootBaseProps extends Optional<UseAspectRatioProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
+  export interface AspectRatioRootProps extends Assign<HTMLProps<'div'>, AspectRatioRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { AspectRatioProvider } from './use-aspect-ratio-context'
+  import { useAspectRatio } from './use-aspect-ratio.svelte'
+
+  let { ref = $bindable(null), ...props }: AspectRatioRootProps = $props()
+  const providedId = $props.id()
+
+  const [useAspectRatioProps, localProps] = $derived(
+    createSplitProps<Optional<UseAspectRatioProps, 'id'>>()(props, ['id', 'ids', 'ratio']),
+  )
+
+  const resolvedProps = $derived({
+    ...useAspectRatioProps,
+    id: providedId,
+  })
+
+  const aspectRatio = useAspectRatio(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(aspectRatio().getRootProps(), localProps))
+  AspectRatioProvider(aspectRatio)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/aspect-ratio/aspect-ratio-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseAspectRatioProps } from './use-aspect-ratio.svelte';
+export interface AspectRatioRootBaseProps extends Optional<UseAspectRatioProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface AspectRatioRootProps extends Assign<HTMLProps<'div'>, AspectRatioRootBaseProps> {
+}
+declare const AspectRatioRoot: import("svelte").Component<AspectRatioRootProps, {}, "ref">;
+type AspectRatioRoot = ReturnType<typeof AspectRatioRoot>;
+export default AspectRatioRoot;

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,4 @@
+export { default as Context, type AspectRatioContextProps as ContextProps } from './aspect-ratio-context.svelte';
+export { default as Content, type AspectRatioContentBaseProps as ContentBaseProps, type AspectRatioContentProps as ContentProps } from './aspect-ratio-content.svelte';
+export { default as Root, type AspectRatioRootBaseProps as RootBaseProps, type AspectRatioRootProps as RootProps } from './aspect-ratio-root.svelte';
+export { default as RootProvider, type AspectRatioRootProviderBaseProps as RootProviderBaseProps, type AspectRatioRootProviderProps as RootProviderProps } from './aspect-ratio-root-provider.svelte';

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,4 @@
+export { default as Context } from './aspect-ratio-context.svelte';
+export { default as Content } from './aspect-ratio-content.svelte';
+export { default as Root } from './aspect-ratio-root.svelte';
+export { default as RootProvider } from './aspect-ratio-root-provider.svelte';

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,7 @@
+export { default as AspectRatioContext, type AspectRatioContextProps } from './aspect-ratio-context.svelte';
+export { default as AspectRatioContent, type AspectRatioContentBaseProps, type AspectRatioContentProps } from './aspect-ratio-content.svelte';
+export { default as AspectRatioRoot, type AspectRatioRootBaseProps, type AspectRatioRootProps } from './aspect-ratio-root.svelte';
+export { default as AspectRatioRootProvider, type AspectRatioRootProviderBaseProps, type AspectRatioRootProviderProps } from './aspect-ratio-root-provider.svelte';
+export { useAspectRatio, type UseAspectRatioProps, type UseAspectRatioReturn } from './use-aspect-ratio.svelte';
+export { useAspectRatioContext, type UseAspectRatioContext } from './use-aspect-ratio-context';
+export * as AspectRatio from './aspect-ratio';

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1,7 @@
+export { default as AspectRatioContext } from './aspect-ratio-context.svelte';
+export { default as AspectRatioContent } from './aspect-ratio-content.svelte';
+export { default as AspectRatioRoot } from './aspect-ratio-root.svelte';
+export { default as AspectRatioRootProvider } from './aspect-ratio-root-provider.svelte';
+export { useAspectRatio } from './use-aspect-ratio.svelte';
+export { useAspectRatioContext } from './use-aspect-ratio-context';
+export * as AspectRatio from './aspect-ratio';

package/dist/components/aspect-ratio/use-aspect-ratio-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseAspectRatioReturn } from './use-aspect-ratio.svelte';
+export interface UseAspectRatioContext extends UseAspectRatioReturn {
+}
+export declare const AspectRatioProvider: (opts: UseAspectRatioContext) => void, useAspectRatioContext: (fallback?: UseAspectRatioContext | undefined) => UseAspectRatioContext;

package/dist/components/aspect-ratio/use-aspect-ratio-context.js

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

package/dist/components/aspect-ratio/use-aspect-ratio.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor } from '../../types';
+import * as aspectRatio from '@sprawlify/primitives/machines/aspect-ratio';
+import { type PropTypes } from '../../core';
+import { type MaybeFunction } from '@sprawlify/primitives/utils';
+export interface UseAspectRatioProps extends Omit<aspectRatio.Props, 'getRootNode'> {
+}
+export interface UseAspectRatioReturn extends Accessor<aspectRatio.Api<PropTypes>> {
+}
+export declare const useAspectRatio: (props: MaybeFunction<UseAspectRatioProps>) => () => aspectRatio.Api<PropTypes>;

package/dist/components/aspect-ratio/use-aspect-ratio.svelte.js

@@ -0,0 +1,17 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import * as aspectRatio from '@sprawlify/primitives/machines/aspect-ratio';
+import { normalizeProps, useMachine } from '../../core';
+import { runIfFn } from '@sprawlify/primitives/utils';
+export const useAspectRatio = (props) => {
+    const env = useEnvironmentContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(aspectRatio.machine, () => machineProps);
+    const api = $derived(aspectRatio.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/carousel/carousel-anatomy.d.ts

@@ -1 +1 @@
-export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "control" | "item" | "indicator" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;
+export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "control" | "item" | "indicator" | "nextTrigger" | "prevTrigger" | "progressText" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "autoplayIndicator">;

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

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

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

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

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

@@ -1 +1 @@
-export declare const datePickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "table" | "view" | "root" | "control" | "nextTrigger" | "prevTrigger" | "valueText" | "trigger" | "content" | "positioner" | "clearTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
+export declare const datePickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "table" | "view" | "root" | "control" | "nextTrigger" | "prevTrigger" | "trigger" | "positioner" | "content" | "valueText" | "clearTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;

package/dist/components/listbox/listbox-anatomy.d.ts

@@ -1 +1 @@
-export declare const listboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "item" | "itemGroup" | "valueText" | "content" | "itemText" | "itemIndicator" | "itemGroupLabel" | "empty">;
+export declare const listboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "item" | "itemGroup" | "content" | "valueText" | "itemIndicator" | "itemText" | "itemGroupLabel" | "empty">;

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

@@ -0,0 +1,7 @@
+export { default as SeparatorContext } from './separator-context.svelte';
+export { default as SeparatorRootProvider, type SeparatorRootProviderBaseProps, type SeparatorRootProviderProps, } from './separator-root-provider.svelte';
+export { default as SeparatorRoot, type SeparatorRootBaseProps, type SeparatorRootProps } from './separator-root.svelte';
+export { separatorAnatomy } from './separator-anatomy';
+export { useSeparatorContext, type UseSeparatorContext } from './use-separator-context';
+export { useSeparator, type UseSeparatorProps, type UseSeparatorReturn } from './use-separator.svelte';
+export * as Separator from './separator';

package/dist/components/separator/index.js

@@ -0,0 +1,7 @@
+export { default as SeparatorContext } from './separator-context.svelte';
+export { default as SeparatorRootProvider, } from './separator-root-provider.svelte';
+export { default as SeparatorRoot } from './separator-root.svelte';
+export { separatorAnatomy } from './separator-anatomy';
+export { useSeparatorContext } from './use-separator-context';
+export { useSeparator } from './use-separator.svelte';
+export * as Separator from './separator';

package/dist/components/separator/separator-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as separatorAnatomy } from '@sprawlify/primitives/machines/separator';

package/dist/components/separator/separator-anatomy.js

@@ -0,0 +1 @@
+export { anatomy as separatorAnatomy } from '@sprawlify/primitives/machines/separator';

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

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseSeparatorContext } from './use-separator-context'
+
+  export interface SeparatorContextProps {
+    api?: Snippet<[UseSeparatorContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useSeparatorContext } from './use-separator-context'
+
+  const { api }: SeparatorContextProps = $props()
+  const separator = useSeparatorContext()
+</script>
+
+{@render api?.(separator)}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseSeparatorContext } from './use-separator-context';
+export interface SeparatorContextProps {
+    api?: Snippet<[UseSeparatorContext]>;
+}
+declare const SeparatorContext: import("svelte").Component<SeparatorContextProps, {}, "">;
+type SeparatorContext = ReturnType<typeof SeparatorContext>;
+export default SeparatorContext;

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

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, RefAttribute } from '../../types'
+  import type { UseSeparatorReturn } from './use-separator.svelte'
+
+  interface RootProviderProps {
+    value: UseSeparatorReturn
+  }
+
+  export interface SeparatorRootProviderBaseProps extends RootProviderProps, RefAttribute {}
+  export interface SeparatorRootProviderProps extends Assign<HTMLProps<'div'>, SeparatorRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { SeparatorProvider } from './use-separator-context'
+
+  let { ref = $bindable(null), ...props }: SeparatorRootProviderProps = $props()
+  const { value: separator, ...localProps } = props
+  const mergedProps = $derived(mergeProps(separator().getRootProps(), localProps))
+
+  SeparatorProvider(separator)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
+import type { UseSeparatorReturn } from './use-separator.svelte';
+interface RootProviderProps {
+    value: UseSeparatorReturn;
+}
+export interface SeparatorRootProviderBaseProps extends RootProviderProps, RefAttribute {
+}
+export interface SeparatorRootProviderProps extends Assign<HTMLProps<'div'>, SeparatorRootProviderBaseProps> {
+}
+declare const SeparatorRootProvider: import("svelte").Component<SeparatorRootProviderProps, {}, "ref">;
+type SeparatorRootProvider = ReturnType<typeof SeparatorRootProvider>;
+export default SeparatorRootProvider;

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

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseSeparatorProps } from './use-separator.svelte'
+
+  export interface SeparatorRootBaseProps extends Optional<UseSeparatorProps, 'id'>, PolymorphicProps<'hr'>, RefAttribute {}
+  export interface SeparatorRootProps extends Assign<HTMLProps<'hr'>, SeparatorRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { SeparatorProvider } from './use-separator-context'
+  import { useSeparator } from './use-separator.svelte'
+
+  let { ref = $bindable(null), ...props }: SeparatorRootProps = $props()
+  const providedId = $props.id()
+
+  const [useSeparatorProps, localProps] = $derived(
+    createSplitProps<Optional<UseSeparatorProps, 'id'>>()(props, ['id', 'ids', 'decorative', 'orientation']),
+  )
+
+  const resolvedProps = $derived({
+    ...useSeparatorProps,
+    id: providedId,
+  })
+
+  const separator = useSeparator(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(separator().getRootProps(), localProps))
+  SeparatorProvider(separator)
+</script>
+
+<Sprawlify as="hr" bind:ref {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseSeparatorProps } from './use-separator.svelte';
+export interface SeparatorRootBaseProps extends Optional<UseSeparatorProps, 'id'>, PolymorphicProps<'hr'>, RefAttribute {
+}
+export interface SeparatorRootProps extends Assign<HTMLProps<'hr'>, SeparatorRootBaseProps> {
+}
+declare const SeparatorRoot: import("svelte").Component<SeparatorRootProps, {}, "ref">;
+type SeparatorRoot = ReturnType<typeof SeparatorRoot>;
+export default SeparatorRoot;

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,3 @@
+export { default as Context, type SeparatorContextProps as ContextProps } from './separator-context.svelte';
+export { default as RootProvider, type SeparatorRootProviderBaseProps as RootProviderBaseProps, type SeparatorRootProviderProps as RootProviderProps, } from './separator-root-provider.svelte';
+export { default as Root, type SeparatorRootBaseProps as RootBaseProps, type SeparatorRootProps as RootProps, } from './separator-root.svelte';

package/dist/components/separator/separator.js

@@ -0,0 +1,3 @@
+export { default as Context } from './separator-context.svelte';
+export { default as RootProvider, } from './separator-root-provider.svelte';
+export { default as Root, } from './separator-root.svelte';

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

@@ -0,0 +1,4 @@
+import type { UseSeparatorReturn } from './use-separator.svelte';
+export interface UseSeparatorContext extends UseSeparatorReturn {
+}
+export declare const SeparatorProvider: (opts: UseSeparatorContext) => void, useSeparatorContext: (fallback?: UseSeparatorContext | undefined) => UseSeparatorContext;

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

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

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

@@ -0,0 +1,9 @@
+import type { Accessor } from '../../types';
+import * as separator from '@sprawlify/primitives/machines/separator';
+import { type PropTypes } from '../../core';
+import { type MaybeFunction } from '@sprawlify/primitives/utils';
+export interface UseSeparatorProps extends Omit<separator.Props, 'dir' | 'getRootNode'> {
+}
+export interface UseSeparatorReturn extends Accessor<separator.Api<PropTypes>> {
+}
+export declare const useSeparator: (props: MaybeFunction<UseSeparatorProps>) => () => separator.Api<PropTypes>;

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

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as separator from '@sprawlify/primitives/machines/separator';
+import { normalizeProps, useMachine } from '../../core';
+import { runIfFn } from '@sprawlify/primitives/utils';
+export const useSeparator = (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(separator.machine, () => machineProps);
+    const api = $derived(separator.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/tour/tour-anatomy.d.ts

@@ -1 +1 @@
-export declare const tourAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"description" | "title" | "control" | "progressText" | "content" | "positioner" | "actionTrigger" | "closeTrigger" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"description" | "title" | "control" | "progressText" | "positioner" | "content" | "arrow" | "arrowTip" | "actionTrigger" | "closeTrigger" | "backdrop" | "spotlight">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/svelte",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "type": "module",
   "description": "Svelte wrapper for primitives.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -27,6 +27,11 @@
       "svelte": "./dist/components/angle-slider/index.js",
       "default": "./dist/components/angle-slider/index.js"
     },
+    "./aspect-ratio": {
+      "types": "./dist/components/aspect-ratio/index.d.ts",
+      "svelte": "./dist/components/aspect-ratio/index.js",
+      "default": "./dist/components/aspect-ratio/index.js"
+    },
     "./avatar": {
       "types": "./dist/components/avatar/index.d.ts",
       "svelte": "./dist/components/avatar/index.js",
@@ -247,6 +252,11 @@
       "svelte": "./dist/components/select/index.js",
       "default": "./dist/components/select/index.js"
     },
+    "./separator": {
+      "types": "./dist/components/separator/index.d.ts",
+      "svelte": "./dist/components/separator/index.js",
+      "default": "./dist/components/separator/index.js"
+    },
     "./signature-pad": {
       "types": "./dist/components/signature-pad/index.d.ts",
       "svelte": "./dist/components/signature-pad/index.js",
@@ -325,7 +335,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.74"
+    "@sprawlify/primitives": "0.0.76"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"