feat(react): add component input

packages/components/react/index.ts

@@ -19,3 +19,4 @@ export * from './separator'
 
 export * from './checkbox'
 export * from './dialog'
+export * from './input'

packages/components/react/input/index.ts

@@ -0,0 +1,4 @@
+import Input from './input'
+
+export type { Comp as InputComponent, Props as InputProps } from './input'
+export { Input }

packages/components/react/input/input.tsx

@@ -0,0 +1,21 @@
+import { cn, input } from '@openui-org/theme'
+import * as React from 'react'
+
+export interface Comp extends HTMLInputElement {}
+export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<Comp, Props>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(input(), className)}
+      ref={ref}
+      {...props}
+    />
+  )
+},
+)
+
+Input.displayName = 'Input'
+
+export default Input

packages/theme/src/components/index.ts

@@ -17,3 +17,4 @@ export * from './separator'
 
 export * from './checkbox'
 export * from './dialog'
+export * from './input'

packages/theme/src/components/input.ts

@@ -0,0 +1,11 @@
+import { cva } from 'class-variance-authority'
+
+/**
+ * Input wrapper **Class Variants** component
+ *
+ * const styles = input({})
+ *
+ * @example
+ * <Input className={styles())} />
+ */
+export const input = cva('flex h-10 w-full rounded-medium px-3 py-2 text-small file:border-0 file:bg-transparent file:text-small file:font-medium disabled:cursor-not-allowed disabled:opacity-50')