Pin Input

'use client'
import type { Assign } from '@ark-ui/react'
import { PinInput } from '@ark-ui/react/pin-input'
import { type PinInputVariantProps, pinInput } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(pinInput)

export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootProviderBaseProps>, PinInputVariantProps>
>(PinInput.RootProvider, 'root')

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootBaseProps>, PinInputVariantProps>
>(PinInput.Root, 'root')

export const Control = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, PinInput.ControlBaseProps>
>(PinInput.Control, 'control')

export const Input = withContext<
  HTMLInputElement,
  Assign<HTMLStyledProps<'input'>, PinInput.InputBaseProps>
>(PinInput.Input, 'input')

export const Label = withContext<
  HTMLLabelElement,
  Assign<HTMLStyledProps<'label'>, PinInput.LabelBaseProps>
>(PinInput.Label, 'label')

export {
  PinInputContext as Context,
  PinInputHiddenInput as HiddenInput,
} from '@ark-ui/react/pin-input'

import { type Assign, PinInput } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type PinInputVariantProps, pinInput } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(pinInput)

export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootProviderBaseProps>, PinInputVariantProps>
>(PinInput.RootProvider, 'root')

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootBaseProps>, PinInputVariantProps>
>(PinInput.Root, 'root')

export const Control = withContext<Assign<HTMLStyledProps<'div'>, PinInput.ControlBaseProps>>(
  PinInput.Control,
  'control',
)

export const Input = withContext<Assign<HTMLStyledProps<'input'>, PinInput.InputBaseProps>>(
  PinInput.Input,
  'input',
)

export const Label = withContext<Assign<HTMLStyledProps<'label'>, PinInput.LabelBaseProps>>(
  PinInput.Label,
  'label',
)

export {
  PinInputContext as Context,
  PinInputHiddenInput as HiddenInput,
} from '@ark-ui/solid'

No snippet found

import { forwardRef } from 'react'
import { PinInput as ArkPinInput } from '~/components/ui/primitives'
import { Input } from '~/components/ui/primitives'

export interface PinInputProps extends ArkPinInput.RootProps {
  /**
   * The number of inputs to render.
   * @default 4
   */
  length?: number
}

export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) => {
  const { children, length = 4, ...rootProps } = props

  return (
    <ArkPinInput.Root ref={ref} {...rootProps}>
      {children && <ArkPinInput.Label>{children}</ArkPinInput.Label>}
      <ArkPinInput.Control>
        {Array.from({ length }, (_, index) => index).map((id, index) => (
          <ArkPinInput.Input key={id} index={index} asChild>
            <Input size={rootProps.size} />
          </ArkPinInput.Input>
        ))}
      </ArkPinInput.Control>
      <ArkPinInput.HiddenInput />
    </ArkPinInput.Root>
  )
})

PinInput.displayName = 'PinInput'

import { Index, Show, children } from 'solid-js'
import { PinInput as ArkPinInput, Input } from '~/components/ui/primitives'

export interface PinInputProps extends ArkPinInput.RootProps {
  /**
   * The number of inputs to render.
   * @default 4
   */
  length?: number
}

export const PinInput = (props: PinInputProps) => {
  const getChildren = children(() => props.children)

  return (
    <ArkPinInput.Root {...props}>
      <Show when={getChildren()}>
        <ArkPinInput.Label>{getChildren()}</ArkPinInput.Label>
      </Show>
      <ArkPinInput.Control>
        <Index each={Array.from({ length: props.length ?? 4 }, (_, index) => index)}>
          {(index) => (
            <ArkPinInput.Input
              index={index()}
              asChild={(inputProps) => <Input {...inputProps()} size={props.size} />}
            />
          )}
        </Index>
      </ArkPinInput.Control>
      <ArkPinInput.HiddenInput />
    </ArkPinInput.Root>
  )
}