feat: form components

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

@@ -0,0 +1,32 @@
+'use client';
+
+import { Field, Flex, InputField, TextArea } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function FieldExamples() {
+  return (
+    <PlaygroundLayout title='Field'>
+      <Flex gap='large' wrap='wrap'>
+        <Flex gap='large' direction='column' style={{ width: 300 }}>
+          <Field label='Name' required helperText='Enter your full name'>
+            <InputField placeholder='John Doe' />
+          </Field>
+          <Field label='Email' error='Please enter a valid email'>
+            <InputField type='email' placeholder='Enter email' />
+          </Field>
+          <Field label='Phone' optional>
+            <InputField placeholder='Enter phone' />
+          </Field>
+        </Flex>
+        <Flex gap='large' direction='column' style={{ width: 300 }}>
+          <Field label='Bio' optional helperText='Tell us about yourself'>
+            <TextArea placeholder='Write something...' />
+          </Field>
+          <Field label='Disabled' disabled>
+            <InputField placeholder='Cannot edit' />
+          </Field>
+        </Flex>
+      </Flex>
+    </PlaygroundLayout>
+  );
+}

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

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

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

@@ -0,0 +1,41 @@
+'use client';
+
+import {
+  Button,
+  Field,
+  Fieldset,
+  Form,
+  InputField,
+  TextArea
+} from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function FormExamples() {
+  return (
+    <PlaygroundLayout title='Form'>
+      <Form
+        onSubmit={e => {
+          e.preventDefault();
+          alert('Form submitted!');
+        }}
+        style={{ maxWidth: 400 }}
+      >
+        <Fieldset legend='Personal Information'>
+          <Field label='First Name' required>
+            <InputField placeholder='John' />
+          </Field>
+          <Field label='Last Name' required>
+            <InputField placeholder='Doe' />
+          </Field>
+        </Fieldset>
+        <Field label='Email' required helperText="We'll send a confirmation">
+          <InputField type='email' placeholder='john@example.com' />
+        </Field>
+        <Field label='Message' optional>
+          <TextArea placeholder='Tell us more...' />
+        </Field>
+        <Button type='submit'>Submit</Button>
+      </Form>
+    </PlaygroundLayout>
+  );
+}

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

@@ -19,8 +19,11 @@ export * from './data-table-examples';
 export * from './dialog-examples';
 export * from './drawer-examples';
 export * from './empty-state-examples';
+export * from './field-examples';
+export * from './fieldset-examples';
 export * from './filter-chip-examples';
 export * from './flex-examples';
+export * from './form-examples';
 export * from './headline-examples';
 export * from './icon-button-examples';
 export * from './image-examples';

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

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

apps/www/src/components/playground/text-area-examples.tsx

@@ -1,24 +1,19 @@
 'use client';
 
-import { Flex, TextArea } from '@raystack/apsara';
+import { Field, Flex, TextArea } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function TextAreaExamples() {
   return (
     <PlaygroundLayout title='TextArea'>
       <Flex gap='large' wrap='wrap'>
-        <TextArea label='Basic TextArea' placeholder='Enter your text here' />
-        <TextArea
-          label='Basic TextArea'
-          placeholder='Enter your text here'
-          helperText='This is a helper text'
-        />
-        <TextArea
-          label='Error TextArea'
-          error={true}
-          helperText='This field has an error'
-          placeholder='Enter your text here'
-        />
+        <Field label='Basic TextArea' helperText='This is a helper text'>
+          <TextArea placeholder='Enter your text here' />
+        </Field>
+        <Field label='Error TextArea' error='This field has an error'>
+          <TextArea placeholder='Enter your text here' />
+        </Field>
+        <TextArea placeholder='Without Field wrapper' width='300px' />
       </Flex>
     </PlaygroundLayout>
   );

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { getPropsString } from '@/lib/utils';
+
+export const getCode = (props: any) => {
+  const { label, helperText, error, required, optional, ...rest } = props;
+  const fieldProps: Record<string, unknown> = {};
+  if (label) fieldProps.label = label;
+  if (helperText) fieldProps.helperText = helperText;
+  if (error) fieldProps.error = error;
+  if (required) fieldProps.required = required;
+  if (optional) fieldProps.optional = optional;
+  return `<Field${getPropsString(fieldProps)}>
+  <InputField${getPropsString(rest)} placeholder="Enter text" />
+</Field>`;
+};
+
+export const playground = {
+  type: 'playground',
+  controls: {
+    label: { type: 'text', initialValue: 'Email' },
+    helperText: { type: 'text', initialValue: "We won't share your email" },
+    error: { type: 'text', initialValue: '' },
+    required: { type: 'checkbox', initialValue: false, defaultValue: false },
+    optional: { type: 'checkbox', initialValue: false, defaultValue: false },
+    disabled: { type: 'checkbox', initialValue: false, defaultValue: false }
+  },
+  getCode
+};
+
+export const simpleDemo = {
+  type: 'code',
+  code: `<Field label="Name" helperText="Enter your full name">
+  <InputField placeholder="John Doe" />
+</Field>`
+};
+
+export const errorDemo = {
+  type: 'code',
+  code: `<Field label="Email" error="Please enter a valid email address">
+  <InputField placeholder="Enter email" />
+</Field>`
+};
+
+export const helperTextDemo = {
+  type: 'code',
+  code: `<Field label="Password" helperText="Must be at least 8 characters">
+  <InputField type="password" placeholder="Enter password" />
+</Field>`
+};
+
+export const requiredDemo = {
+  type: 'code',
+  code: `<Field label="Username" required>
+  <InputField placeholder="Enter username" />
+</Field>`
+};
+
+export const optionalDemo = {
+  type: 'code',
+  code: `<Field label="Phone Number" optional helperText="We may use this for verification">
+  <InputField placeholder="Enter phone number" />
+</Field>`
+};
+
+export const subComponentDemo = {
+  type: 'code',
+  code: `<Field name="email">
+  <Field.Label>Email</Field.Label>
+  <Field.Control required type="email" placeholder="Enter email" />
+  <Field.Error match="valueMissing">Email is required</Field.Error>
+  <Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
+  <Field.Description>We'll send a verification link</Field.Description>
+</Field>`
+};
+
+export const withInputFieldDemo = {
+  type: 'code',
+  code: `<Field label="Full Name" required helperText="As it appears on your ID">
+  <InputField placeholder="John Doe" />
+</Field>`
+};
+
+export const withTextAreaDemo = {
+  type: 'code',
+  code: `<Field label="Bio" optional helperText="Tell us about yourself">
+  <TextArea placeholder="Write something..." />
+</Field>`
+};
+
+export const withSelectDemo = {
+  type: 'code',
+  code: `<Field label="Country" required>
+  <Select>
+    <Select.Trigger />
+    <Select.Content>
+      <Select.Item value="us">United States</Select.Item>
+      <Select.Item value="uk">United Kingdom</Select.Item>
+      <Select.Item value="ca">Canada</Select.Item>
+    </Select.Content>
+  </Select>
+</Field>`
+};