@sprawlify/svelte 0.0.75 → 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';

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';

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

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

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

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" | "content" | "positioner" | "trigger" | "valueText" | "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" | "item" | "itemGroup" | "root" | "control" | "content" | "positioner" | "trigger" | "itemGroupLabel" | "itemIndicator" | "itemText" | "list" | "clearTrigger" | "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" | "prevTrigger" | "nextTrigger" | "content" | "positioner" | "trigger" | "valueText" | "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" | "item" | "itemGroup" | "root" | "content" | "valueText" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const listboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "item" | "itemGroup" | "content" | "valueText" | "itemIndicator" | "itemText" | "itemGroupLabel" | "empty">;

package/dist/components/segment-group/segment-group-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const segmentGroupAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"label" | "indicator" | "item" | "root" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "indicator" | "item" | "root" | "itemText" | "itemControl", import("@sprawlify/primitives/anatomy").AnatomyPart>;
+export declare const segmentGroupAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", import("@sprawlify/primitives/anatomy").AnatomyPart>;

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

@@ -1 +1 @@
-export declare const toggleAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"indicator" | "root">;
+export declare const toggleAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"root" | "indicator">;

package/dist/components/toggle-group/toggle-group-anatomy.d.ts

@@ -1 +1 @@
-export declare const toggleGroupAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"item" | "root">;
+export declare const toggleGroupAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"root" | "item">;

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" | "arrow" | "arrowTip" | "actionTrigger" | "closeTrigger" | "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.75",
+  "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",
@@ -330,7 +335,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.75"
+    "@sprawlify/primitives": "0.0.76"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"