feat: structure

src/components/text-field/index.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { cx } from '../utils';
+
+export const TextField = forwardRef<HTMLInputElement, ComponentPropsWithoutRef<'input'>>(
+  ({ className, ...props }, ref) => (
+    <input ref={ref} className={cx('modern-sk-field', className)} {...props} />
+  ),
+);
+TextField.displayName = 'TextField';
+
+export const TextArea = forwardRef<HTMLTextAreaElement, ComponentPropsWithoutRef<'textarea'>>(
+  ({ className, ...props }, ref) => (
+    <textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
+  ),
+);
+TextArea.displayName = 'TextArea';
+
+export const SearchField = ({
+  icon,
+  ...props
+}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
+  <div className="modern-sk-search">
+    <span className="ph">{icon}</span>
+    <TextField {...props} />
+  </div>
+);