@sprawlify/svelte 0.0.46 → 0.0.48

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

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

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

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    fallback?: Snippet
+  }
+  export interface PasswordInputIndicatorProps extends Assign<HTMLProps<'span'>, PasswordInputIndicatorBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  let { ref = $bindable(null), fallback, children, ...props }: PasswordInputIndicatorProps = $props()
+  const passwordInput = usePasswordInputContext()
+  const mergedProps = $derived(mergeProps(passwordInput().getIndicatorProps(), props))
+</script>
+
+<Sprawlify as="span" bind:ref {...mergedProps}>
+  {#if passwordInput().visible}
+    {@render children?.()}
+  {:else}
+    {@render fallback?.()}
+  {/if}
+</Sprawlify>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PasswordInputIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    fallback?: Snippet;
+}
+export interface PasswordInputIndicatorProps extends Assign<HTMLProps<'span'>, PasswordInputIndicatorBaseProps> {
+    children?: Snippet;
+}
+declare const PasswordInputIndicator: import("svelte").Component<PasswordInputIndicatorProps, {}, "ref">;
+type PasswordInputIndicator = ReturnType<typeof PasswordInputIndicator>;
+export default PasswordInputIndicator;

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

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface PasswordInputInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
+  export interface PasswordInputInputProps extends Assign<HTMLProps<'input'>, PasswordInputInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  let { ref = $bindable(null), value = $bindable(), ...props }: PasswordInputInputProps = $props()
+
+  const passwordInput = usePasswordInputContext()
+
+  const nativeInputProps: HTMLProps<'input'> = $derived({
+    value,
+    oninput(e) {
+      value = e.currentTarget.value
+    },
+  })
+
+  const mergedProps = $derived(mergeProps(passwordInput().getInputProps(), nativeInputProps, props))
+</script>
+
+<Sprawlify as="input" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PasswordInputInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {
+}
+export interface PasswordInputInputProps extends Assign<HTMLProps<'input'>, PasswordInputInputBaseProps> {
+}
+declare const PasswordInputInput: import("svelte").Component<PasswordInputInputProps, {}, "value" | "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PasswordInputLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
+  export interface PasswordInputLabelProps extends Assign<HTMLProps<'label'>, PasswordInputLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  let { ref = $bindable(null), ...props }: PasswordInputLabelProps = $props()
+  const passwordInput = usePasswordInputContext()
+  const mergedProps = $derived(mergeProps(passwordInput().getLabelProps(), props))
+</script>
+
+<Sprawlify as="label" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { RefAttribute } from '../../types'
+  import type { UsePasswordInputReturn } from './use-password-input.svelte'
+
+  interface RootProviderProps {
+    value: UsePasswordInputReturn
+  }
+
+  export interface PasswordInputRootProviderBaseProps extends RootProviderProps, RefAttribute {}
+  export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { PasswordInputProvider } from './use-password-input-context'
+
+  let { ref = $bindable(null), ...props }: PasswordInputRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(props.value().getRootProps(), props))
+
+  PasswordInputProvider(() => props.value())
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps}>
+  {@render props.children?.()}
+</Sprawlify>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { RefAttribute } from '../../types';
+import type { UsePasswordInputReturn } from './use-password-input.svelte';
+interface RootProviderProps {
+    value: UsePasswordInputReturn;
+}
+export interface PasswordInputRootProviderBaseProps extends RootProviderProps, RefAttribute {
+}
+export interface PasswordInputRootProviderProps extends PasswordInputRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const PasswordInputRootProvider: import("svelte").Component<PasswordInputRootProviderProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+  import type { UsePasswordInputProps } from './use-password-input.svelte'
+
+  export interface PasswordInputRootBaseProps extends UsePasswordInputProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface PasswordInputRootProps extends Assign<HTMLProps<'div'>, PasswordInputRootBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { PasswordInputProvider } from './use-password-input-context'
+  import { usePasswordInput } from './use-password-input.svelte'
+
+  let { ref = $bindable(null), 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)
+      if (visible !== undefined) visible = details.visible
+    },
+  })
+
+  const passwordInput = usePasswordInput(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(passwordInput().getRootProps(), localProps))
+
+  PasswordInputProvider(passwordInput)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps}>
+  {@render props.children?.()}
+</Sprawlify>

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, RefAttribute } from '../../types';
+import type { UsePasswordInputProps } from './use-password-input.svelte';
+export interface PasswordInputRootBaseProps extends UsePasswordInputProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PasswordInputRootProps extends Assign<HTMLProps<'div'>, PasswordInputRootBaseProps> {
+    children?: Snippet;
+}
+declare const PasswordInputRoot: import("svelte").Component<PasswordInputRootProps, {}, "ref" | "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, RefAttribute } from '../../types'
+
+  export interface PasswordInputVisibilityTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface PasswordInputVisibilityTriggerProps
+    extends Assign<HTMLProps<'button'>, PasswordInputVisibilityTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePasswordInputContext } from './use-password-input-context'
+
+  let { ref = $bindable(null), ...props }: PasswordInputVisibilityTriggerProps = $props()
+  const passwordInput = usePasswordInputContext()
+  const mergedProps = $derived(mergeProps(passwordInput().getVisibilityTriggerProps(), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,9 @@
+export type { VisibilityChangeDetails } from '@sprawlify/primitives/machines/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 '@sprawlify/primitives/machines/password-input';
+import { type PropTypes } from '../../core';
+import { type MaybeFunction } from '@sprawlify/primitives/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 '@sprawlify/primitives/machines/password-input';
+import { normalizeProps, useMachine } from '../../core';
+import { runIfFn } from '@sprawlify/primitives/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 '@sprawlify/primitives/machines/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-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as pinInputAnatomy } from '@sprawlify/primitives/machines/pin-input';

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

@@ -0,0 +1 @@
+export { anatomy as pinInputAnatomy } from '@sprawlify/primitives/machines/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, RefAttribute } from '../../types'
+
+  export interface PinInputControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface PinInputControlProps extends Assign<HTMLProps<'div'>, PinInputControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  let { ref = $bindable(null), ...props }: PinInputControlProps = $props()
+  const pinInput = usePinInputContext()
+  const mergedProps = $derived(mergeProps(pinInput().getControlProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PinInputControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PinInputControlProps extends Assign<HTMLProps<'div'>, PinInputControlBaseProps> {
+}
+declare const PinInputControl: import("svelte").Component<PinInputControlProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface PinInputHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
+  export interface PinInputHiddenInputProps extends Assign<HTMLProps<'input'>, PinInputHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  let { ref = $bindable(null), ...props }: PinInputHiddenInputProps = $props()
+  const pinInput = usePinInputContext()
+  const mergedProps = $derived(mergeProps(pinInput().getHiddenInputProps(), props))
+</script>
+
+<Sprawlify as="input" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface PinInputHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {
+}
+export interface PinInputHiddenInputProps extends Assign<HTMLProps<'input'>, PinInputHiddenInputBaseProps> {
+}
+declare const PinInputHiddenInput: import("svelte").Component<PinInputHiddenInputProps, {}, "ref">;
+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 '@sprawlify/primitives/machines/pin-input'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface PinInputInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {}
+  export interface PinInputInputProps extends Assign<HTMLProps<'input'>, PinInputInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  let { ref = $bindable(null), ...props }: PinInputInputProps = $props()
+  const pinInput = usePinInputContext()
+
+  const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['index']))
+
+  const mergedProps = $derived(mergeProps(pinInput().getInputProps(inputProps), localProps))
+</script>
+
+<Sprawlify as="input" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface PinInputLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
+  export interface PinInputLabelProps extends Assign<HTMLProps<'label'>, PinInputLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePinInputContext } from './use-pin-input-context'
+
+  let { ref = $bindable(null), ...props }: PinInputLabelProps = $props()
+  const pinInput = usePinInputContext()
+  const mergedProps = $derived(mergeProps(pinInput().getLabelProps(), props))
+</script>
+
+<Sprawlify as="label" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { PolymorphicProps, RefAttribute } from '../../types'
+  import type { UsePinInputReturn } from './use-pin-input.svelte'
+
+  interface RootProviderProps {
+    value: UsePinInputReturn
+  }
+
+  export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { PinInputProvider } from './use-pin-input-context'
+  import { Sprawlify } from '../factory'
+
+  let { ref = $bindable(null), value, ...props }: PinInputRootProviderProps = $props()
+
+  PinInputProvider(value)
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { PolymorphicProps, RefAttribute } from '../../types';
+import type { UsePinInputReturn } from './use-pin-input.svelte';
+interface RootProviderProps {
+    value: UsePinInputReturn;
+}
+export interface PinInputRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface PinInputRootProviderProps extends PinInputRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const PinInputRootProvider: import("svelte").Component<PinInputRootProviderProps, {}, "ref">;
+type PinInputRootProvider = ReturnType<typeof PinInputRootProvider>;
+export default PinInputRootProvider;

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

@@ -0,0 +1,66 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UsePinInputProps } from './use-pin-input.svelte'
+
+  export interface PinInputRootBaseProps extends UsePinInputProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface PinInputRootProps extends Assign<HTMLProps<'div'>, PinInputRootBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { PinInputProvider } from './use-pin-input-context'
+  import { usePinInput } from './use-pin-input.svelte'
+
+  let { ref = $bindable(null), value = $bindable(), ...props }: PinInputRootProps = $props()
+  const providedId = $props.id()
+
+  const [usePinInputProps, localProps] = $derived(
+    createSplitProps<UsePinInputProps>()(props, [
+      'autoFocus',
+      'blurOnComplete',
+      'count',
+      'defaultValue',
+      'disabled',
+      'form',
+      'id',
+      'ids',
+      'invalid',
+      'mask',
+      'name',
+      'onValueChange',
+      'onValueComplete',
+      'onValueInvalid',
+      'otp',
+      'pattern',
+      'placeholder',
+      'readOnly',
+      'required',
+      'selectOnFocus',
+      'translations',
+      'type',
+      'value',
+    ]),
+  )
+
+  const resolvedProps = $derived<UsePinInputProps>({
+    ...usePinInputProps,
+    id: usePinInputProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      usePinInputProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  })
+
+  const pinInput = usePinInput(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(pinInput().getRootProps(), localProps))
+
+  PinInputProvider(pinInput)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />