@isbatak/ark-wheel-picker 0.0.0

package/dist/solid/wheel-picker.jsx

@@ -0,0 +1,49 @@
+// src/solid/wheel-picker.ts
+import { WheelPickerContext } from "./wheel-picker-context.jsx";
+import {
+  WheelPickerControl
+} from "./wheel-picker-control.jsx";
+import {
+  WheelPickerHiddenSelect
+} from "./wheel-picker-hidden-select.jsx";
+import {
+  WheelPickerHighlight
+} from "./wheel-picker-highlight.jsx";
+import {
+  WheelPickerHighlightItem
+} from "./wheel-picker-highlight-item.jsx";
+import {
+  WheelPickerHighlightItemGroup
+} from "./wheel-picker-highlight-item-group.jsx";
+import {
+  WheelPickerItem
+} from "./wheel-picker-item.jsx";
+import {
+  WheelPickerItemGroup
+} from "./wheel-picker-item-group.jsx";
+import {
+  WheelPickerLabel
+} from "./wheel-picker-label.jsx";
+import {
+  WheelPickerRoot
+} from "./wheel-picker-root.jsx";
+import {
+  WheelPickerRootProvider
+} from "./wheel-picker-root-provider.jsx";
+import {
+  WheelPickerViewport
+} from "./wheel-picker-viewport.jsx";
+export {
+  WheelPickerContext as Context,
+  WheelPickerControl as Control,
+  WheelPickerHiddenSelect as HiddenSelect,
+  WheelPickerHighlight as Highlight,
+  WheelPickerHighlightItem as HighlightItem,
+  WheelPickerHighlightItemGroup as HighlightItemGroup,
+  WheelPickerItem as Item,
+  WheelPickerItemGroup as ItemGroup,
+  WheelPickerLabel as Label,
+  WheelPickerRoot as Root,
+  WheelPickerRootProvider as RootProvider,
+  WheelPickerViewport as Viewport
+};

package/dist/svelte/index.d.ts

@@ -0,0 +1,5 @@
+export { anatomy as wheelPickerAnatomy, collection as createWheelPickerCollection } from "@isbatak/zag-wheel-picker";
+export type { CollectionItem as WheelPickerCollectionItem, ScrollChangeDetails as WheelPickerScrollChangeDetails, ValueChangeDetails as WheelPickerValueChangeDetails, } from "@isbatak/zag-wheel-picker";
+export { useWheelPicker, type UseWheelPickerProps, type UseWheelPickerReturn } from "./use-wheel-picker.svelte.js";
+export { useWheelPickerContext, WheelPickerProvider, type UseWheelPickerContext } from "./use-wheel-picker-context.js";
+export * as WheelPicker from "./wheel-picker.js";

package/dist/svelte/index.js

@@ -0,0 +1,4 @@
+export { anatomy as wheelPickerAnatomy, collection as createWheelPickerCollection } from "@isbatak/zag-wheel-picker";
+export { useWheelPicker } from "./use-wheel-picker.svelte.js";
+export { useWheelPickerContext, WheelPickerProvider } from "./use-wheel-picker-context.js";
+export * as WheelPicker from "./wheel-picker.js";

package/dist/svelte/types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, SvelteHTMLElements } from "svelte/elements";
+export type HTMLTag = keyof SvelteHTMLElements;
+export type HTMLProps<T extends HTMLTag> = SvelteHTMLElements[T];
+export type PropsFn<T extends HTMLTag> = (props?: HTMLProps<T>) => HTMLAttributes<HTMLElement>;
+export interface PolymorphicProps<T extends HTMLTag> {
+    children?: Snippet;
+    asChild?: Snippet<[PropsFn<T>]>;
+}
+export interface RefAttribute<T extends Element = Element> {
+    ref?: T | null | undefined;
+}

package/dist/svelte/types.js

@@ -0,0 +1 @@
+export {};

package/dist/svelte/use-wheel-picker-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseWheelPickerReturn } from "./use-wheel-picker.svelte.js";
+export interface UseWheelPickerContext extends UseWheelPickerReturn {
+}
+export declare const WheelPickerProvider: (opts: UseWheelPickerContext) => void, useWheelPickerContext: (fallback?: UseWheelPickerContext | undefined) => UseWheelPickerContext;

package/dist/svelte/use-wheel-picker-context.js

@@ -0,0 +1,4 @@
+import { createContext } from "@ark-ui/svelte";
+export const [WheelPickerProvider, useWheelPickerContext] = createContext({
+    name: "WheelPickerContext",
+});

package/dist/svelte/use-wheel-picker.svelte.d.ts

@@ -0,0 +1,8 @@
+import * as wheelPicker from "@isbatak/zag-wheel-picker";
+import { type PropTypes } from "@zag-js/svelte";
+export interface UseWheelPickerProps<T extends wheelPicker.CollectionItem = wheelPicker.CollectionItem> extends Omit<wheelPicker.Props<T>, "dir" | "getRootNode"> {
+}
+export interface UseWheelPickerReturn<T extends wheelPicker.CollectionItem = wheelPicker.CollectionItem> {
+    (): wheelPicker.Api<PropTypes, T>;
+}
+export declare const useWheelPicker: <T extends wheelPicker.CollectionItem>(props: UseWheelPickerProps<T> | (() => UseWheelPickerProps<T>)) => UseWheelPickerReturn<T>;

package/dist/svelte/use-wheel-picker.svelte.js

@@ -0,0 +1,15 @@
+import { useEnvironmentContext, useLocaleContext } from "@ark-ui/svelte";
+import * as wheelPicker from "@isbatak/zag-wheel-picker";
+import { normalizeProps, useMachine } from "@zag-js/svelte";
+export const useWheelPicker = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => ({
+        dir: locale().dir,
+        getRootNode: env().getRootNode,
+        ...(typeof props === "function" ? props() : props),
+    }));
+    const service = useMachine(wheelPicker.machine, () => machineProps);
+    const api = $derived(wheelPicker.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/svelte/wheel-picker-context.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte"
+  import type { UseWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  export interface WheelPickerContextProps {
+    render?: Snippet<[UseWheelPickerContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  const { render }: WheelPickerContextProps = $props()
+  const api = useWheelPickerContext()
+</script>
+
+{@render render?.(api)}

package/dist/svelte/wheel-picker-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { UseWheelPickerContext } from "./use-wheel-picker-context.js";
+export interface WheelPickerContextProps {
+    render?: Snippet<[UseWheelPickerContext]>;
+}
+declare const WheelPickerContext: import("svelte").Component<WheelPickerContextProps, {}, "">;
+type WheelPickerContext = ReturnType<typeof WheelPickerContext>;
+export default WheelPickerContext;

package/dist/svelte/wheel-picker-control.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerControlBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface WheelPickerControlProps extends HTMLProps<"div">, WheelPickerControlBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerControlProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getControlProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-control.svelte.d.ts

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

package/dist/svelte/wheel-picker-hidden-select.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign } from "../types.js"
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerHiddenSelectBaseProps extends PolymorphicProps<"select">, RefAttribute {}
+  export interface WheelPickerHiddenSelectProps extends Assign<HTMLProps<"select">, WheelPickerHiddenSelectBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerHiddenSelectProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getHiddenSelectProps(), props))
+</script>
+
+<Ark as="select" bind:ref {...mergedProps}>
+  {#each api().collection.items as item (api().collection.getItemValue(item))}
+    <option value={api().collection.getItemValue(item) ?? ""} disabled={api().collection.getItemDisabled(item)}>
+      {api().collection.stringifyItem(item)}
+    </option>
+  {/each}
+</Ark>

package/dist/svelte/wheel-picker-hidden-select.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign } from "../types.js";
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+export interface WheelPickerHiddenSelectBaseProps extends PolymorphicProps<"select">, RefAttribute {
+}
+export interface WheelPickerHiddenSelectProps extends Assign<HTMLProps<"select">, WheelPickerHiddenSelectBaseProps> {
+}
+declare const WheelPickerHiddenSelect: import("svelte").Component<WheelPickerHiddenSelectProps, {}, "ref">;
+type WheelPickerHiddenSelect = ReturnType<typeof WheelPickerHiddenSelect>;
+export default WheelPickerHiddenSelect;

package/dist/svelte/wheel-picker-highlight-item-group.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerHighlightItemGroupBaseProps extends PolymorphicProps<"ul">, RefAttribute {}
+  export interface WheelPickerHighlightItemGroupProps extends HTMLProps<"ul">, WheelPickerHighlightItemGroupBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerHighlightItemGroupProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getHighlightItemGroupProps(), props))
+</script>
+
+<Ark as="ul" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-highlight-item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+export interface WheelPickerHighlightItemGroupBaseProps extends PolymorphicProps<"ul">, RefAttribute {
+}
+export interface WheelPickerHighlightItemGroupProps extends HTMLProps<"ul">, WheelPickerHighlightItemGroupBaseProps {
+}
+declare const WheelPickerHighlightItemGroup: import("svelte").Component<WheelPickerHighlightItemGroupProps, {}, "ref">;
+type WheelPickerHighlightItemGroup = ReturnType<typeof WheelPickerHighlightItemGroup>;
+export default WheelPickerHighlightItemGroup;

package/dist/svelte/wheel-picker-highlight-item.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { ItemProps } from "@isbatak/zag-wheel-picker"
+  import type { Assign } from "../types.js"
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerHighlightItemBaseProps extends ItemProps, PolymorphicProps<"li">, RefAttribute {}
+  export interface WheelPickerHighlightItemProps extends Assign<HTMLProps<"li">, WheelPickerHighlightItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import * as wheelPicker from "@isbatak/zag-wheel-picker"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerHighlightItemProps = $props()
+  const [itemProps, localProps] = $derived(wheelPicker.splitItemProps(props))
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getHighlightItemProps(itemProps), localProps))
+</script>
+
+<Ark as="li" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-highlight-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ItemProps } from "@isbatak/zag-wheel-picker";
+import type { Assign } from "../types.js";
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+export interface WheelPickerHighlightItemBaseProps extends ItemProps, PolymorphicProps<"li">, RefAttribute {
+}
+export interface WheelPickerHighlightItemProps extends Assign<HTMLProps<"li">, WheelPickerHighlightItemBaseProps> {
+}
+declare const WheelPickerHighlightItem: import("svelte").Component<WheelPickerHighlightItemProps, {}, "ref">;
+type WheelPickerHighlightItem = ReturnType<typeof WheelPickerHighlightItem>;
+export default WheelPickerHighlightItem;

package/dist/svelte/wheel-picker-highlight.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerHighlightBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface WheelPickerHighlightProps extends HTMLProps<"div">, WheelPickerHighlightBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerHighlightProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getHighlightProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-highlight.svelte.d.ts

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

package/dist/svelte/wheel-picker-item-group.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerItemGroupBaseProps extends PolymorphicProps<"ul">, RefAttribute {}
+  export interface WheelPickerItemGroupProps extends HTMLProps<"ul">, WheelPickerItemGroupBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerItemGroupProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getItemGroupProps(), props))
+</script>
+
+<Ark as="ul" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+export interface WheelPickerItemGroupBaseProps extends PolymorphicProps<"ul">, RefAttribute {
+}
+export interface WheelPickerItemGroupProps extends HTMLProps<"ul">, WheelPickerItemGroupBaseProps {
+}
+declare const WheelPickerItemGroup: import("svelte").Component<WheelPickerItemGroupProps, {}, "ref">;
+type WheelPickerItemGroup = ReturnType<typeof WheelPickerItemGroup>;
+export default WheelPickerItemGroup;

package/dist/svelte/wheel-picker-item.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { ItemProps } from "@isbatak/zag-wheel-picker"
+  import type { Assign } from "../types.js"
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerItemBaseProps extends ItemProps, PolymorphicProps<"li">, RefAttribute {}
+  export interface WheelPickerItemProps extends Assign<HTMLProps<"li">, WheelPickerItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import * as wheelPicker from "@isbatak/zag-wheel-picker"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerItemProps = $props()
+  const [itemProps, localProps] = $derived(wheelPicker.splitItemProps(props))
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getItemProps(itemProps), localProps))
+</script>
+
+<Ark as="li" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ItemProps } from "@isbatak/zag-wheel-picker";
+import type { Assign } from "../types.js";
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+export interface WheelPickerItemBaseProps extends ItemProps, PolymorphicProps<"li">, RefAttribute {
+}
+export interface WheelPickerItemProps extends Assign<HTMLProps<"li">, WheelPickerItemBaseProps> {
+}
+declare const WheelPickerItem: import("svelte").Component<WheelPickerItemProps, {}, "ref">;
+type WheelPickerItem = ReturnType<typeof WheelPickerItem>;
+export default WheelPickerItem;

package/dist/svelte/wheel-picker-label.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerLabelBaseProps extends PolymorphicProps<"label">, RefAttribute {}
+  export interface WheelPickerLabelProps extends HTMLProps<"label">, WheelPickerLabelBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerLabelProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getLabelProps(), props))
+</script>
+
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+export interface WheelPickerLabelBaseProps extends PolymorphicProps<"label">, RefAttribute {
+}
+export interface WheelPickerLabelProps extends HTMLProps<"label">, WheelPickerLabelBaseProps {
+}
+declare const WheelPickerLabel: import("svelte").Component<WheelPickerLabelProps, {}, "ref">;
+type WheelPickerLabel = ReturnType<typeof WheelPickerLabel>;
+export default WheelPickerLabel;

package/dist/svelte/wheel-picker-root-provider.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign } from "../types.js"
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+  import type { UseWheelPickerReturn } from "./use-wheel-picker.svelte.js"
+
+  interface RootProviderProps {
+    value: UseWheelPickerReturn
+  }
+
+  export interface WheelPickerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface WheelPickerRootProviderProps extends Assign<HTMLProps<"div">, WheelPickerRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { WheelPickerProvider } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), value: api, ...localProps }: WheelPickerRootProviderProps = $props()
+  const mergedProps = $derived(mergeProps(api().getRootProps(), localProps))
+
+  WheelPickerProvider(() => api())
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-root-provider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Assign } from "../types.js";
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+import type { UseWheelPickerReturn } from "./use-wheel-picker.svelte.js";
+interface RootProviderProps {
+    value: UseWheelPickerReturn;
+}
+export interface WheelPickerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface WheelPickerRootProviderProps extends Assign<HTMLProps<"div">, WheelPickerRootProviderBaseProps> {
+}
+declare const WheelPickerRootProvider: import("svelte").Component<WheelPickerRootProviderProps, {}, "ref">;
+type WheelPickerRootProvider = ReturnType<typeof WheelPickerRootProvider>;
+export default WheelPickerRootProvider;

package/dist/svelte/wheel-picker-root.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import type { CollectionItem } from "@isbatak/zag-wheel-picker"
+  import type { Assign, Optional } from "../types.js"
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+  import type { UseWheelPickerProps } from "./use-wheel-picker.svelte.js"
+
+  export interface WheelPickerRootBaseProps<T extends CollectionItem = CollectionItem>
+    extends Optional<UseWheelPickerProps<T>, "id">,
+      PolymorphicProps<"div">,
+      RefAttribute {}
+  export interface WheelPickerRootProps<T extends CollectionItem = CollectionItem>
+    extends Assign<HTMLProps<"div">, WheelPickerRootBaseProps<T>> {}
+</script>
+
+<script lang="ts" generics="T extends CollectionItem">
+  import { Ark } from "@ark-ui/svelte"
+  import * as wheelPicker from "@isbatak/zag-wheel-picker"
+  import { mergeProps } from "@zag-js/svelte"
+  import { WheelPickerProvider } from "./use-wheel-picker-context.js"
+  import { useWheelPicker } from "./use-wheel-picker.svelte.js"
+
+  let { ref = $bindable(null), value = $bindable(), ...props }: WheelPickerRootProps<T> = $props()
+  const providedId = $props.id()
+
+  const [useWheelPickerProps, localProps] = $derived(wheelPicker.splitProps(props as Omit<typeof props, "dir">))
+
+  const resolvedProps = $derived({
+    ...useWheelPickerProps,
+    id: useWheelPickerProps.id ?? providedId,
+    value,
+    onValueChange(details: wheelPicker.ValueChangeDetails<T>) {
+      useWheelPickerProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  } as UseWheelPickerProps<T>)
+
+  const api = useWheelPicker(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(api().getRootProps(), localProps))
+
+  WheelPickerProvider(api as never)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-root.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { CollectionItem } from "@isbatak/zag-wheel-picker";
+import type { Assign, Optional } from "../types.js";
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js";
+import type { UseWheelPickerProps } from "./use-wheel-picker.svelte.js";
+export interface WheelPickerRootBaseProps<T extends CollectionItem = CollectionItem> extends Optional<UseWheelPickerProps<T>, "id">, PolymorphicProps<"div">, RefAttribute {
+}
+export interface WheelPickerRootProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<"div">, WheelPickerRootBaseProps<T>> {
+}
+declare function $$render<T extends CollectionItem>(): {
+    props: WheelPickerRootProps<T>;
+    exports: {};
+    bindings: "value" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends CollectionItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends CollectionItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends CollectionItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const WheelPickerRoot: $$IsomorphicComponent;
+type WheelPickerRoot<T extends CollectionItem> = InstanceType<typeof WheelPickerRoot<T>>;
+export default WheelPickerRoot;

package/dist/svelte/wheel-picker-viewport.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "./types.js"
+
+  export interface WheelPickerViewportBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface WheelPickerViewportProps extends HTMLProps<"div">, WheelPickerViewportBaseProps {}
+</script>
+
+<script lang="ts">
+  import { Ark } from "@ark-ui/svelte"
+  import { mergeProps } from "@zag-js/svelte"
+  import { useWheelPickerContext } from "./use-wheel-picker-context.js"
+
+  let { ref = $bindable(null), ...props }: WheelPickerViewportProps = $props()
+  const api = useWheelPickerContext()
+  const mergedProps = $derived(mergeProps(api().getViewportProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/svelte/wheel-picker-viewport.svelte.d.ts

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

package/dist/svelte/wheel-picker.d.ts

@@ -0,0 +1,13 @@
+export type { CollectionItem, ScrollChangeDetails, ValueChangeDetails } from "@isbatak/zag-wheel-picker";
+export { default as Context, type WheelPickerContextProps as ContextProps } from "./wheel-picker-context.svelte";
+export { default as Control, type WheelPickerControlBaseProps as ControlBaseProps, type WheelPickerControlProps as ControlProps, } from "./wheel-picker-control.svelte";
+export { default as HiddenSelect, type WheelPickerHiddenSelectBaseProps as HiddenSelectBaseProps, type WheelPickerHiddenSelectProps as HiddenSelectProps, } from "./wheel-picker-hidden-select.svelte";
+export { default as Highlight, type WheelPickerHighlightBaseProps as HighlightBaseProps, type WheelPickerHighlightProps as HighlightProps, } from "./wheel-picker-highlight.svelte";
+export { default as HighlightItem, type WheelPickerHighlightItemBaseProps as HighlightItemBaseProps, type WheelPickerHighlightItemProps as HighlightItemProps, } from "./wheel-picker-highlight-item.svelte";
+export { default as HighlightItemGroup, type WheelPickerHighlightItemGroupBaseProps as HighlightItemGroupBaseProps, type WheelPickerHighlightItemGroupProps as HighlightItemGroupProps, } from "./wheel-picker-highlight-item-group.svelte";
+export { default as Item, type WheelPickerItemBaseProps as ItemBaseProps, type WheelPickerItemProps as ItemProps, } from "./wheel-picker-item.svelte";
+export { default as ItemGroup, type WheelPickerItemGroupBaseProps as ItemGroupBaseProps, type WheelPickerItemGroupProps as ItemGroupProps, } from "./wheel-picker-item-group.svelte";
+export { default as Label, type WheelPickerLabelBaseProps as LabelBaseProps, type WheelPickerLabelProps as LabelProps, } from "./wheel-picker-label.svelte";
+export { default as Root, type WheelPickerRootBaseProps as RootBaseProps, type WheelPickerRootProps as RootProps, } from "./wheel-picker-root.svelte";
+export { default as RootProvider, type WheelPickerRootProviderBaseProps as RootProviderBaseProps, type WheelPickerRootProviderProps as RootProviderProps, } from "./wheel-picker-root-provider.svelte";
+export { default as Viewport, type WheelPickerViewportBaseProps as ViewportBaseProps, type WheelPickerViewportProps as ViewportProps, } from "./wheel-picker-viewport.svelte";

package/dist/svelte/wheel-picker.js

@@ -0,0 +1,12 @@
+export { default as Context } from "./wheel-picker-context.svelte";
+export { default as Control, } from "./wheel-picker-control.svelte";
+export { default as HiddenSelect, } from "./wheel-picker-hidden-select.svelte";
+export { default as Highlight, } from "./wheel-picker-highlight.svelte";
+export { default as HighlightItem, } from "./wheel-picker-highlight-item.svelte";
+export { default as HighlightItemGroup, } from "./wheel-picker-highlight-item-group.svelte";
+export { default as Item, } from "./wheel-picker-item.svelte";
+export { default as ItemGroup, } from "./wheel-picker-item-group.svelte";
+export { default as Label, } from "./wheel-picker-label.svelte";
+export { default as Root, } from "./wheel-picker-root.svelte";
+export { default as RootProvider, } from "./wheel-picker-root-provider.svelte";
+export { default as Viewport, } from "./wheel-picker-viewport.svelte";

package/dist/types.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/types.d.cts

@@ -0,0 +1,4 @@
+type Assign<T, U> = Omit<T, keyof U> & U;
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type { Assign, Optional };

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+type Assign<T, U> = Omit<T, keyof U> & U;
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type { Assign, Optional };