feat: Input improvements

apps/www/src/app/examples/page.tsx

@@ -28,7 +28,7 @@ import {
   Flex,
   IconButton,
   Indicator,
-  InputField,
+  Input,
   Menu,
   Navbar,
   Popover,
@@ -516,7 +516,7 @@ const Page = () => {
                 <Button variant='outline' color='accent' size='small' loading>
                   Search
                 </Button>
-                <InputField size='small' />
+                <Input size='small' />
               </Flex>
 
               {/* Button Examples */}
@@ -1663,7 +1663,7 @@ const Page = () => {
                             </Flex>
                           </Popover.Content>
                         </Popover>
-                        <InputField
+                        <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
                           width='100%'
@@ -1832,7 +1832,7 @@ const Page = () => {
                             </Flex>
                           </Popover.Content>
                         </Popover>
-                        <InputField
+                        <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
                           width='100%'

apps/www/src/components/demo/demo-controls.tsx

@@ -8,7 +8,7 @@ import {
 import {
   Flex,
   IconButton,
-  InputField,
+  Input,
   Select,
   Switch,
   Text
@@ -152,7 +152,7 @@ export default function DemoControls({
         // For text and number types
         return (
           <div key={prop} className={styles.controlField}>
-            <InputField
+            <Input
               size='small'
               label={propLabel}
               value={

apps/www/src/components/playground/field-examples.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Field, Flex, InputField, TextArea } from '@raystack/apsara';
+import { Field, Flex, Input, TextArea } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function FieldExamples() {
@@ -9,13 +9,13 @@ export function FieldExamples() {
       <Flex gap='large' wrap='wrap'>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
           <Field label='Name' required description='Enter your full name'>
-            <InputField placeholder='John Doe' />
+            <Input placeholder='John Doe' />
           </Field>
           <Field label='Email' error='Please enter a valid email'>
-            <InputField type='email' placeholder='Enter email' />
+            <Input type='email' placeholder='Enter email' />
           </Field>
           <Field label='Phone' required={false}>
-            <InputField placeholder='Enter phone' />
+            <Input placeholder='Enter phone' />
           </Field>
         </Flex>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
@@ -27,7 +27,7 @@ export function FieldExamples() {
             <TextArea placeholder='Write something...' />
           </Field>
           <Field label='Disabled' disabled>
-            <InputField placeholder='Cannot edit' />
+            <Input placeholder='Cannot edit' />
           </Field>
         </Flex>
       </Flex>

apps/www/src/components/playground/fieldset-examples.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Field, Fieldset, Flex, InputField } from '@raystack/apsara';
+import { Field, Fieldset, Flex, Input } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function FieldsetExamples() {
@@ -9,15 +9,15 @@ export function FieldsetExamples() {
       <Flex gap='large' direction='column' style={{ maxWidth: 400 }}>
         <Fieldset legend='Contact Details'>
           <Field label='Phone' required>
-            <InputField type='tel' placeholder='+1 (555) 000-0000' />
+            <Input type='tel' placeholder='+1 (555) 000-0000' />
           </Field>
           <Field label='Address' required={false}>
-            <InputField placeholder='123 Main St' />
+            <Input placeholder='123 Main St' />
           </Field>
         </Fieldset>
         <Fieldset legend='Disabled Section' disabled>
           <Field label='Read Only'>
-            <InputField placeholder='Cannot edit' />
+            <Input placeholder='Cannot edit' />
           </Field>
         </Fieldset>
       </Flex>

apps/www/src/components/playground/form-examples.tsx

@@ -5,7 +5,7 @@ import {
   Field,
   Fieldset,
   Form,
-  InputField,
+  Input,
   TextArea
 } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
@@ -22,14 +22,14 @@ export function FormExamples() {
       >
         <Fieldset legend='Personal Information'>
           <Field label='First Name' required>
-            <InputField placeholder='John' />
+            <Input placeholder='John' />
           </Field>
           <Field label='Last Name' required>
-            <InputField placeholder='Doe' />
+            <Input placeholder='Doe' />
           </Field>
         </Fieldset>
         <Field label='Email' required description="We'll send a confirmation">
-          <InputField type='email' placeholder='john@example.com' />
+          <Input type='email' placeholder='john@example.com' />
         </Field>
         <Field label='Message' required={false}>
           <TextArea placeholder='Tell us more...' />

apps/www/src/components/playground/index.ts

@@ -29,7 +29,7 @@ export * from './headline-examples';
 export * from './icon-button-examples';
 export * from './image-examples';
 export * from './indicator-examples';
-export * from './input-field-examples';
+export * from './input-examples';
 export * from './label-examples';
 export * from './link-examples';
 export * from './list-examples';

apps/www/src/components/playground/input-field-examples.tsx → apps/www/src/components/playground/input-examples.tsx

@@ -1,32 +1,32 @@
 'use client';
 
-import { Field, Flex, InputField } from '@raystack/apsara';
+import { Field, Flex, Input } from '@raystack/apsara';
 import { Home, Info } from 'lucide-react';
 import PlaygroundLayout from './playground-layout';
 
-export function InputFieldExamples() {
+export function InputExamples() {
   return (
-    <PlaygroundLayout title='InputField'>
+    <PlaygroundLayout title='Input'>
       <Flex gap='large' wrap='wrap'>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
           <Field label='Default'>
-            <InputField placeholder='Enter text' />
+            <Input placeholder='Enter text' />
           </Field>
           <Field label='With Description' description='This is a description'>
-            <InputField placeholder='Enter text' />
+            <Input placeholder='Enter text' />
           </Field>
           <Field label='With Error' error='This field is required'>
-            <InputField placeholder='Enter text' />
+            <Input placeholder='Enter text' />
           </Field>
         </Flex>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
-          <InputField placeholder='0.00' prefix='$' suffix='USD' />
-          <InputField
+          <Input placeholder='0.00' prefix='$' suffix='USD' />
+          <Input
             placeholder='Enter text'
             leadingIcon={<Home size={16} />}
             trailingIcon={<Info size={16} />}
           />
-          <InputField placeholder='Enter text' disabled />
+          <Input placeholder='Enter text' disabled />
         </Flex>
       </Flex>
     </PlaygroundLayout>

apps/www/src/content/docs/(overview)/index.mdx

@@ -24,7 +24,7 @@ Apsara provides over 50 components organized by function:
 | **Layout** | Flex, Grid, Container, Separator |
 | **Navigation** | Navbar, Sidebar, Breadcrumb, Tabs, Link |
 | **Data Display** | DataTable, Table, List, Avatar, Badge, Chip, Indicator |
-| **Forms** | Button, InputField, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar |
+| **Forms** | Button, Input, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar |
 | **Feedback** | Dialog, Drawer, Popover, Tooltip, Toast, Callout, EmptyState, Skeleton, Spinner |
 | **Utilities** | Command, Search, CopyButton, CodeBlock, ScrollArea |
 

apps/www/src/content/docs/components/calendar/props.ts

@@ -1,4 +1,4 @@
-import { InputFieldProps } from '../input-field/props';
+import { InputProps } from '../input/props';
 import { PopoverContentProps } from '../popover/props';
 
 export interface CalendarProps {
@@ -68,10 +68,10 @@ export interface RangePickerProps {
   /** Props for customizing the calendar */
   calendarProps?: CalendarProps;
 
-  /** Props for customizing the input fields */
-  inputFieldsProps?: {
-    startDate?: InputFieldProps;
-    endDate?: InputFieldProps;
+  /** Props for customizing the inputs */
+  inputsProps?: {
+    startDate?: InputProps;
+    endDate?: InputProps;
   };
 
   /** Render prop for custom trigger */
@@ -108,8 +108,8 @@ export interface DatePickerProps {
    */
   dateFormat?: string;
 
-  /** Props for customizing the input field */
-  inputFieldProps?: InputFieldProps;
+  /** Props for customizing the input */
+  inputProps?: InputProps;
 
   /** Initial date value */
   value?: Date;

apps/www/src/content/docs/components/command/index.mdx

@@ -55,7 +55,7 @@ The root element owns the input value, the list of items, and the context used b
 
 ### Input
 
-Text input that drives the search. Accepts the same props as `InputField` and defaults to a magnifying-glass leading icon.
+Text input that drives the search. Accepts the same props as `Input` and defaults to a magnifying-glass leading icon.
 
 <auto-type-table path="./props.ts" name="CommandInputProps" />
 

apps/www/src/content/docs/components/field/demo.ts

@@ -10,7 +10,7 @@ export const getCode = (props: any) => {
   if (error) fieldProps.error = error;
   if (required !== undefined) fieldProps.required = required;
   return `<Field${getPropsString(fieldProps)}>
-  <InputField${getPropsString(rest)} placeholder="Enter text" />
+  <Input${getPropsString(rest)} placeholder="Enter text" />
 </Field>`;
 };
 
@@ -29,35 +29,35 @@ export const playground = {
 export const simpleDemo = {
   type: 'code',
   code: `<Field label="Name" description="Enter your full name">
-  <InputField placeholder="John Doe" />
+  <Input placeholder="John Doe" />
 </Field>`
 };
 
 export const errorDemo = {
   type: 'code',
   code: `<Field label="Email" error="Please enter a valid email address">
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>`
 };
 
 export const descriptionDemo = {
   type: 'code',
   code: `<Field label="Password" description="Must be at least 8 characters">
-  <InputField type="password" placeholder="Enter password" />
+  <Input type="password" placeholder="Enter password" />
 </Field>`
 };
 
 export const requiredDemo = {
   type: 'code',
   code: `<Field label="Username" required>
-  <InputField placeholder="Enter username" />
+  <Input placeholder="Enter username" />
 </Field>`
 };
 
 export const optionalDemo = {
   type: 'code',
   code: `<Field label="Phone Number" required={false} description="We may use this for verification">
-  <InputField placeholder="Enter phone number" />
+  <Input placeholder="Enter phone number" />
 </Field>`
 };
 
@@ -99,10 +99,10 @@ export const customValidateDemo = {
 </Field>`
 };
 
-export const withInputFieldDemo = {
+export const withInputDemo = {
   type: 'code',
   code: `<Field label="Full Name" required description="As it appears on your ID">
-  <InputField placeholder="John Doe" />
+  <Input placeholder="John Doe" />
 </Field>`
 };
 

apps/www/src/content/docs/components/field/index.mdx

@@ -15,7 +15,7 @@ import {
   subComponentDemo,
   constraintErrorsDemo,
   customValidateDemo,
-  withInputFieldDemo,
+  withInputDemo,
   withTextAreaDemo,
   withSelectDemo,
 } from "./demo.ts";
@@ -31,10 +31,10 @@ Field supports two APIs: a **simple props API** for common use cases and a **sub
 Use `label`, `description`, and `error` props for quick forms or when validation is handled externally (e.g., React Hook Form).
 
 ```tsx
-import { Field, InputField } from "@raystack/apsara";
+import { Field, Input } from "@raystack/apsara";
 
 <Field label="Email" description="We won't share it" error={errors.email?.message}>
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>
 ```
 
@@ -101,11 +101,11 @@ Provides field validity state to a render function. Use for custom validity-base
 
 ## Examples
 
-### With InputField
+### With Input
 
-Use Field to add label, description, and error to an InputField.
+Use Field to add label, description, and error to an Input.
 
-<Demo data={withInputFieldDemo} />
+<Demo data={withInputDemo} />
 
 ### With TextArea