Park UI

Usage

Name

size: md

import { Stack } from 'styled-system/jsx'
import { FormLabel } from '~/components/ui/form-label'
import { Input, type InputProps } from '~/components/ui/input'

export const Demo = (props: InputProps) => {
  return (
    <Stack gap="1.5" width="2xs">
      <FormLabel htmlFor="name">Name</FormLabel>
      <Input id="name" placeholder="Your Name" {...props} />
    </Stack>
  )
}

Installation

Insert code snippet into your project. Update import paths as needed.

import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
import { forwardRef } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'

export interface InputProps extends InputVariantProps, Omit<HTMLArkProps<'input'>, 'size'> {}

export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  const { size, className, ...rest } = props
  return <ark.input className={styles({ size, className })} ref={ref} {...rest} />
})

Input.displayName = 'Input'

type InputVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'input',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        '2xs': 'input--size_2xs',
        xs: 'input--size_xs',
        sm: 'input--size_sm',
        md: 'input--size_md',
        lg: 'input--size_lg',
        xl: 'input--size_xl',
        '2xl': 'input--size_2xl',
      },
    },
  },
  { twMerge: false },
)

import { type HTMLArkProps, ark } from '@ark-ui/solid'
import { splitProps } from 'solid-js'
import { type VariantProps, tv } from 'tailwind-variants'

export interface InputProps extends Omit<HTMLArkProps<'input'>, 'size'>, InputVariantProps {}

export const Input = (props: InputProps) => {
  const [variantProps, inputProps] = splitProps(props, ['class', 'size'])
  return <ark.input class={styles(variantProps)} {...inputProps} />
}

type InputVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'input',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        '2xs': 'input--size_2xs',
        xs: 'input--size_xs',
        sm: 'input--size_sm',
        md: 'input--size_md',
        lg: 'input--size_lg',
        xl: 'input--size_xl',
        '2xl': 'input--size_2xl',
      },
    },
  },
  { twMerge: false },
)

Not yet available