@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/pagination/pagination.js

@@ -0,0 +1,7 @@
+export { default as Context } from './pagination-context.svelte';
+export { default as Ellipsis, } from './pagination-ellipsis.svelte';
+export { default as Item, } from './pagination-item.svelte';
+export { default as NextTrigger, } from './pagination-next-trigger.svelte';
+export { default as PrevTrigger, } from './pagination-prev-trigger.svelte';
+export { default as Root, } from './pagination-root.svelte';
+export { default as RootProvider, } from './pagination-root-provider.svelte';

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

@@ -0,0 +1,4 @@
+import type { UsePaginationReturn } from './use-pagination.svelte';
+export interface UsePaginationContext extends UsePaginationReturn {
+}
+export declare const PaginationProvider: (opts: UsePaginationContext) => void, usePaginationContext: (fallback?: UsePaginationContext | undefined) => UsePaginationContext;

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { runIfFn } from '../../utils/run-if-fn';
+import * as pagination from '@zag-js/pagination';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const usePagination = (props = {}) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const resolvedProps = $derived.by(() => {
+        const localProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...localProps,
+        };
+    });
+    const service = useMachine(pagination.machine, () => resolvedProps);
+    const api = $derived(pagination.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/password-input/index.d.ts

@@ -0,0 +1,13 @@
+export type { VisibilityChangeDetails as PasswordInputVisibilityChangeDetails } from '@zag-js/password-input';
+export { default as PasswordInputContext, type PasswordInputContextProps } from './password-input-context.svelte';
+export { default as PasswordInputControl, type PasswordInputControlBaseProps, type PasswordInputControlProps, } from './password-input-control.svelte';
+export { default as PasswordInputIndicator, type PasswordInputIndicatorBaseProps, type PasswordInputIndicatorProps, } from './password-input-indicator.svelte';
+export { default as PasswordInputInput, type PasswordInputInputBaseProps, type PasswordInputInputProps, } from './password-input-input.svelte';
+export { default as PasswordInputLabel, type PasswordInputLabelBaseProps, type PasswordInputLabelProps, } from './password-input-label.svelte';
+export { default as PasswordInputRoot, type PasswordInputRootBaseProps, type PasswordInputRootProps, } from './password-input-root.svelte';
+export { default as PasswordInputRootProvider, type PasswordInputRootProviderBaseProps, type PasswordInputRootProviderProps, } from './password-input-root-provider.svelte';
+export { default as PasswordInputVisibilityTrigger, type PasswordInputVisibilityTriggerBaseProps, type PasswordInputVisibilityTriggerProps, } from './password-input-visibility-trigger.svelte';
+export { passwordInputAnatomy } from './password-input.anatomy';
+export { usePasswordInputContext, type UsePasswordInputContext } from './use-password-input-context';
+export { usePasswordInput, type UsePasswordInputProps, type UsePasswordInputReturn } from './use-password-input.svelte';
+export * as PasswordInput from './password-input';

package/dist/components/password-input/index.js

@@ -0,0 +1,12 @@
+export { default as PasswordInputContext } from './password-input-context.svelte';
+export { default as PasswordInputControl, } from './password-input-control.svelte';
+export { default as PasswordInputIndicator, } from './password-input-indicator.svelte';
+export { default as PasswordInputInput, } from './password-input-input.svelte';
+export { default as PasswordInputLabel, } from './password-input-label.svelte';
+export { default as PasswordInputRoot, } from './password-input-root.svelte';
+export { default as PasswordInputRootProvider, } from './password-input-root-provider.svelte';
+export { default as PasswordInputVisibilityTrigger, } from './password-input-visibility-trigger.svelte';
+export { passwordInputAnatomy } from './password-input.anatomy';
+export { usePasswordInputContext } from './use-password-input-context';
+export { usePasswordInput } from './use-password-input.svelte';
+export * as PasswordInput from './password-input';

package/dist/components/password-input/password-input-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePasswordInputContext } from './use-password-input-context'
+
+  export interface PasswordInputContextProps {
+    render?: Snippet<[UsePasswordInputContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  const { render }: PasswordInputContextProps = $props()
+
+  const context = usePasswordInputContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/password-input/password-input-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UsePasswordInputContext } from './use-password-input-context';
+export interface PasswordInputContextProps {
+    render?: Snippet<[UsePasswordInputContext]>;
+}
+declare const PasswordInputContext: import("svelte").Component<PasswordInputContextProps, {}, "">;
+type PasswordInputContext = ReturnType<typeof PasswordInputContext>;
+export default PasswordInputContext;

package/dist/components/password-input/password-input-control.svelte

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

package/dist/components/password-input/password-input-control.svelte.d.ts

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

package/dist/components/password-input/password-input-indicator.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'> {
+    /**
+     * The fallback content to display when the password is not visible.
+     */
+    fallback?: Snippet
+  }
+  export interface PasswordInputIndicatorProps extends Assign<HTMLProps<'span'>, PasswordInputIndicatorBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  const { fallback, children, ...props }: PasswordInputIndicatorProps = $props()
+  const passwordInput = usePasswordInputContext()
+  const mergedProps = $derived(mergeProps(passwordInput().getIndicatorProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps}>
+  {#if passwordInput().visible}
+    {@render children?.()}
+  {:else}
+    {@render fallback?.()}
+  {/if}
+</Ark>

package/dist/components/password-input/password-input-indicator.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'> {
+    /**
+     * The fallback content to display when the password is not visible.
+     */
+    fallback?: Snippet;
+}
+export interface PasswordInputIndicatorProps extends Assign<HTMLProps<'span'>, PasswordInputIndicatorBaseProps> {
+    children?: Snippet;
+}
+declare const PasswordInputIndicator: import("svelte").Component<PasswordInputIndicatorProps, {}, "">;
+type PasswordInputIndicator = ReturnType<typeof PasswordInputIndicator>;
+export default PasswordInputIndicator;

package/dist/components/password-input/password-input-input.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PasswordInputInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface PasswordInputInputProps extends Assign<HTMLProps<'input'>, PasswordInputInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  const props: PasswordInputInputProps = $props()
+  const passwordInput = usePasswordInputContext()
+  const mergedProps = $derived(mergeProps(passwordInput().getInputProps(), props))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/password-input/password-input-input.svelte.d.ts

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

package/dist/components/password-input/password-input-label.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PasswordInputLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface PasswordInputLabelProps extends Assign<HTMLProps<'label'>, PasswordInputLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  const props: PasswordInputLabelProps = $props()
+  const passwordInput = usePasswordInputContext()
+  const mergedProps = $derived(mergeProps(passwordInput().getLabelProps(), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/password-input/password-input-label.svelte.d.ts

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

package/dist/components/password-input/password-input-root-provider.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePasswordInputReturn } from './use-password-input.svelte'
+
+  interface RootProviderProps {
+    value: UsePasswordInputReturn
+  }
+
+  export interface PasswordInputRootProviderBaseProps extends RootProviderProps {}
+  export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { PasswordInputProvider } from './use-password-input-context'
+
+  const props: PasswordInputRootProviderProps = $props()
+
+  PasswordInputProvider(() => props.value())
+</script>
+
+{@render props.children?.()}

package/dist/components/password-input/password-input-root-provider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { UsePasswordInputReturn } from './use-password-input.svelte';
+interface RootProviderProps {
+    value: UsePasswordInputReturn;
+}
+export interface PasswordInputRootProviderBaseProps extends RootProviderProps {
+}
+export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const PasswordInputRootProvider: import("svelte").Component<PasswordInputRootProviderProps, {}, "">;
+type PasswordInputRootProvider = ReturnType<typeof PasswordInputRootProvider>;
+export default PasswordInputRootProvider;

package/dist/components/password-input/password-input-root.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UsePasswordInputProps } from './use-password-input.svelte'
+
+  export interface PasswordInputRootBaseProps extends UsePasswordInputProps, PolymorphicProps<'div'> {}
+  export interface PasswordInputRootProps extends Assign<HTMLProps<'div'>, PasswordInputRootBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { PasswordInputProvider } from './use-password-input-context'
+  import { usePasswordInput } from './use-password-input.svelte'
+
+  let { visible = $bindable(), ...props }: PasswordInputRootProps = $props()
+  const providedId = $props.id()
+
+  const [usePasswordInputProps, localProps] = $derived(
+    createSplitProps<UsePasswordInputProps>()(props, [
+      'autoComplete',
+      'defaultVisible',
+      'disabled',
+      'id',
+      'ids',
+      'ignorePasswordManagers',
+      'invalid',
+      'name',
+      'onVisibilityChange',
+      'readOnly',
+      'required',
+      'translations',
+      'visible',
+    ]),
+  )
+
+  const resolvedProps = $derived<UsePasswordInputProps>({
+    ...usePasswordInputProps,
+    id: usePasswordInputProps.id ?? providedId,
+    visible,
+    onVisibilityChange(details) {
+      usePasswordInputProps.onVisibilityChange?.(details)
+      visible = details.visible
+    },
+  })
+
+  const passwordInput = usePasswordInput(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(passwordInput().getRootProps(), localProps))
+
+  PasswordInputProvider(passwordInput)
+</script>
+
+<Ark as="div" {...mergedProps}>
+  {@render props.children?.()}
+</Ark>

package/dist/components/password-input/password-input-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UsePasswordInputProps } from './use-password-input.svelte';
+export interface PasswordInputRootBaseProps extends UsePasswordInputProps, PolymorphicProps<'div'> {
+}
+export interface PasswordInputRootProps extends Assign<HTMLProps<'div'>, PasswordInputRootBaseProps> {
+    children?: Snippet;
+}
+declare const PasswordInputRoot: import("svelte").Component<PasswordInputRootProps, {}, "visible">;
+type PasswordInputRoot = ReturnType<typeof PasswordInputRoot>;
+export default PasswordInputRoot;

package/dist/components/password-input/password-input-visibility-trigger.svelte

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

package/dist/components/password-input/password-input-visibility-trigger.svelte.d.ts

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

package/dist/components/password-input/password-input.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as passwordInputAnatomy } from '@zag-js/password-input';

package/dist/components/password-input/password-input.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as passwordInputAnatomy } from '@zag-js/password-input';

package/dist/components/password-input/password-input.d.ts

@@ -0,0 +1,9 @@
+export type { VisibilityChangeDetails } from '@zag-js/password-input';
+export { default as Context, type PasswordInputContextProps as ContextProps } from './password-input-context.svelte';
+export { default as Control, type PasswordInputControlBaseProps as ControlBaseProps, type PasswordInputControlProps as ControlProps, } from './password-input-control.svelte';
+export { default as Indicator, type PasswordInputIndicatorBaseProps as IndicatorBaseProps, type PasswordInputIndicatorProps as IndicatorProps, } from './password-input-indicator.svelte';
+export { default as Input, type PasswordInputInputBaseProps as InputBaseProps, type PasswordInputInputProps as InputProps, } from './password-input-input.svelte';
+export { default as Label, type PasswordInputLabelBaseProps as LabelBaseProps, type PasswordInputLabelProps as LabelProps, } from './password-input-label.svelte';
+export { default as Root, type PasswordInputRootBaseProps as RootBaseProps, type PasswordInputRootProps as RootProps, } from './password-input-root.svelte';
+export { default as RootProvider, type PasswordInputRootProviderBaseProps as RootProviderBaseProps, type PasswordInputRootProviderProps as RootProviderProps, } from './password-input-root-provider.svelte';
+export { default as VisibilityTrigger, type PasswordInputVisibilityTriggerBaseProps as VisibilityTriggerBaseProps, type PasswordInputVisibilityTriggerProps as VisibilityTriggerProps, } from './password-input-visibility-trigger.svelte';

package/dist/components/password-input/password-input.js

@@ -0,0 +1,8 @@
+export { default as Context } from './password-input-context.svelte';
+export { default as Control, } from './password-input-control.svelte';
+export { default as Indicator, } from './password-input-indicator.svelte';
+export { default as Input, } from './password-input-input.svelte';
+export { default as Label, } from './password-input-label.svelte';
+export { default as Root, } from './password-input-root.svelte';
+export { default as RootProvider, } from './password-input-root-provider.svelte';
+export { default as VisibilityTrigger, } from './password-input-visibility-trigger.svelte';

package/dist/components/password-input/use-password-input-context.d.ts

@@ -0,0 +1,4 @@
+import type { UsePasswordInputReturn } from './use-password-input.svelte';
+export interface UsePasswordInputContext extends UsePasswordInputReturn {
+}
+export declare const PasswordInputProvider: (opts: UsePasswordInputContext) => void, usePasswordInputContext: (fallback?: UsePasswordInputContext | undefined) => UsePasswordInputContext;

package/dist/components/password-input/use-password-input-context.js

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

package/dist/components/password-input/use-password-input.svelte.d.ts

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

package/dist/components/password-input/use-password-input.svelte.js

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

package/dist/components/pin-input/index.d.ts

@@ -0,0 +1,12 @@
+export type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails, } from '@zag-js/pin-input';
+export { default as PinInputContext, type PinInputContextProps } from './pin-input-context.svelte';
+export { default as PinInputControl, type PinInputControlBaseProps, type PinInputControlProps, } from './pin-input-control.svelte';
+export { default as PinInputHiddenInput, type PinInputHiddenInputBaseProps, type PinInputHiddenInputProps, } from './pin-input-hidden-input.svelte';
+export { default as PinInputInput, type PinInputInputBaseProps, type PinInputInputProps, } from './pin-input-input.svelte';
+export { default as PinInputLabel, type PinInputLabelBaseProps, type PinInputLabelProps, } from './pin-input-label.svelte';
+export { default as PinInputRoot, type PinInputRootBaseProps, type PinInputRootProps } from './pin-input-root.svelte';
+export { default as PinInputRootProvider, type PinInputRootProviderBaseProps, type PinInputRootProviderProps, } from './pin-input-root-provider.svelte';
+export { pinInputAnatomy } from './pin-input.anatomy';
+export { usePinInputContext, type UsePinInputContext } from './use-pin-input-context';
+export { usePinInput, type UsePinInputProps, type UsePinInputReturn } from './use-pin-input.svelte';
+export * as PinInput from './pin-input';

package/dist/components/pin-input/index.js

@@ -0,0 +1,11 @@
+export { default as PinInputContext } from './pin-input-context.svelte';
+export { default as PinInputControl, } from './pin-input-control.svelte';
+export { default as PinInputHiddenInput, } from './pin-input-hidden-input.svelte';
+export { default as PinInputInput, } from './pin-input-input.svelte';
+export { default as PinInputLabel, } from './pin-input-label.svelte';
+export { default as PinInputRoot } from './pin-input-root.svelte';
+export { default as PinInputRootProvider, } from './pin-input-root-provider.svelte';
+export { pinInputAnatomy } from './pin-input.anatomy';
+export { usePinInputContext } from './use-pin-input-context';
+export { usePinInput } from './use-pin-input.svelte';
+export * as PinInput from './pin-input';

package/dist/components/pin-input/pin-input-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UsePinInputContext } from './use-pin-input-context'
+
+  export interface PinInputContextProps {
+    render?: Snippet<[UsePinInputContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { usePinInputContext } from './use-pin-input-context'
+
+  const { render }: PinInputContextProps = $props()
+
+  const context = usePinInputContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/pin-input/pin-input-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UsePinInputContext } from './use-pin-input-context';
+export interface PinInputContextProps {
+    render?: Snippet<[UsePinInputContext]>;
+}
+declare const PinInputContext: import("svelte").Component<PinInputContextProps, {}, "">;
+type PinInputContext = ReturnType<typeof PinInputContext>;
+export default PinInputContext;

package/dist/components/pin-input/pin-input-control.svelte

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

package/dist/components/pin-input/pin-input-control.svelte.d.ts

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

package/dist/components/pin-input/pin-input-hidden-input.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PinInputHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface PinInputHiddenInputProps extends Assign<HTMLProps<'input'>, PinInputHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  const props: PinInputHiddenInputProps = $props()
+  const pinInput = usePinInputContext()
+  const mergedProps = $derived(mergeProps(pinInput().getHiddenInputProps(), props))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/pin-input/pin-input-hidden-input.svelte.d.ts

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

package/dist/components/pin-input/pin-input-input.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { InputProps } from '@zag-js/pin-input'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'> {}
+  export interface PinInputInputProps extends Assign<HTMLProps<'input'>, PinInputInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  const props: PinInputInputProps = $props()
+  const pinInput = usePinInputContext()
+
+  const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['index']))
+
+  const mergedProps = $derived(mergeProps(pinInput().getInputProps(inputProps), localProps))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/pin-input/pin-input-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { InputProps } from '@zag-js/pin-input';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'> {
+}
+export interface PinInputInputProps extends Assign<HTMLProps<'input'>, PinInputInputBaseProps> {
+}
+declare const PinInputInput: import("svelte").Component<PinInputInputProps, {}, "">;
+type PinInputInput = ReturnType<typeof PinInputInput>;
+export default PinInputInput;