docs: correcting and improvements in docs

Author: LuckySharma014

apps/docs/app/docs/components/dialog/page.md

@@ -63,7 +63,7 @@ Pass `isBarebone` prop to remove all style in dialog.
 
 ## ShowCloseButton
 
-The showCloseButton prop exists in DialogContent subcomponent and it is used to show/hide default close button in dialog.
+The showCloseButton prop exists in DialogContent subcomponent and it is used to show/hide default close button in dialog. Its default value is true.
 
 {% example name="dialog:closebutton" /%}
 

apps/docs/app/docs/components/drawer/page.md

@@ -24,16 +24,14 @@ import {
   DrawerDescription,
 } from "@rafty/ui";
 
-() => (
-  <Drawer>
-    <DrawerOverlay />
-    <DrawerContent>
-      <DrawerTitle />
-      <DrawerDescription />
-      <DrawerClose />
-    </DrawerContent>
-  </Drawer>
-);
+<Drawer>
+  <DrawerOverlay />
+  <DrawerContent>
+    <DrawerTitle />
+    <DrawerDescription />
+    <DrawerClose />
+  </DrawerContent>
+</Drawer>;
 ```
 
 ## Usage

apps/docs/app/docs/components/field-control/page.md

@@ -50,7 +50,7 @@ There are 3 `orientation` options in field control: `row` (default), `col` & `ro
 
 `isReadOnly` prop is used to change field state to read only.
 
-{% example name="field-control:orientation" /%}
+{% example name="field-control:readonly" /%}
 
 ## IsInvalid
 

apps/docs/components/Examples/dialog.tsx

@@ -6,6 +6,7 @@ import {
   DialogOverlay,
   DialogTrigger,
   DialogDescription,
+  DialogClose,
 } from "@rafty/ui";
 
 export const dialog_examples = {
@@ -49,7 +50,9 @@ export const dialog_examples = {
           Make changes to your profile here. Click save when you're done.
         </DialogDescription>
         <div className="flex items-center justify-end pt-5">
-          <Button>Save Change</Button>
+          <DialogClose asChild>
+            <Button>Save Change</Button>
+          </DialogClose>
         </div>
       </DialogContent>
     </Dialog>

apps/docs/components/Examples/field-control.tsx

@@ -1,53 +1,54 @@
-import { ErrorMessage, FieldControl, InputField, Label, Text } from "@rafty/ui";
+import { ErrorMessage, FieldControl, InputField, Label } from "@rafty/ui";
 
 export const field_control_examples = {
   "field-control:usage": (
     <FieldControl name="name">
-      <Label>Name</Label>
+      <Label>Label</Label>
       <InputField />
-      <Text>Sample </Text>
+      <ErrorMessage>Error message will be displayed here</ErrorMessage>
     </FieldControl>
   ),
   "field-control:orientation": (
-    <FieldControl name="name" orientation="col">
+    <FieldControl name="name" orientation="row">
       <Label>Name</Label>
       <InputField />
-      <Text>Sample </Text>
     </FieldControl>
   ),
   "field-control:required": (
     <FieldControl name="name" isRequired>
       <Label>Name</Label>
       <InputField />
-      <Text>Sample </Text>
     </FieldControl>
   ),
   "field-control:disabled": (
     <FieldControl name="name" isDisabled>
       <Label>Name</Label>
       <InputField />
-      <Text>Sample </Text>
+    </FieldControl>
+  ),
+  "field-control:readonly": (
+    <FieldControl name="name" isReadOnly>
+      <Label>Name</Label>
+      <InputField defaultValue="This is a sample default text" />
     </FieldControl>
   ),
   "field-control:loading": (
     <FieldControl name="name" isLoading>
       <Label>Name</Label>
       <InputField />
-      <Text>Sample </Text>
     </FieldControl>
   ),
   "field-control:invalid": (
     <FieldControl name="name" isInvalid>
       <Label>Name</Label>
       <InputField />
-      <Text></Text>
     </FieldControl>
   ),
   "field-control:errormessage": (
     <FieldControl name="name">
       <Label>Name</Label>
       <InputField />
-      <ErrorMessage>Sample error message</ErrorMessage>
+      <ErrorMessage>Error message will be displayed here</ErrorMessage>
     </FieldControl>
   ),
 };

apps/docs/components/Examples/index.tsx

@@ -112,9 +112,7 @@ export function Examples({
         {Component}
       </div>
       {children || (
-        <Fence language="jsx" className="!-mt-2">
-          {reactElementToJSXString(Component)}
-        </Fence>
+        <Fence language="jsx">{reactElementToJSXString(Component)}</Fence>
       )}
     </div>
   );

apps/docs/components/Fence.tsx

@@ -29,7 +29,10 @@ export function Fence({
     <div className="relative">
       <Highlight code={content} language={language} theme={themes.dracula}>
         {({ className, style, tokens, getTokenProps }) => (
-          <pre className={classNames(className, _className)} style={style}>
+          <pre
+            className={classNames(className, _className, "!-mt-2")}
+            style={style}
+          >
             <Button
               onClick={handleCopyClick}
               className="absolute right-1 top-1 "