Add New Features And Bug Fix

packages/docs/src/Pages/Documentation/DataDisplay/Progressbar/Progressbar.mdx

@@ -4,37 +4,33 @@ export const frontMatter = {
   route: "/documentation/data-display/progressbar",
 };
 
-import {
-  List,
-  Button,
-  CircularProgressbar,
-  LinearProgressbar,
-} from "@re-flex/ui";
-
-# Progressbar
-
-## Circular Progressbar
-
-```js live=true
-<>
-  <CircularProgressbar value={50}></CircularProgressbar>
-  <CircularProgressbar indeterminate></CircularProgressbar>
-</>
-```
-
-### Properties
-
-<Props of={CircularProgressbar} />
-
-### Linear Progressbar
-
-```js live=true
-<>
-  <LinearProgressbar value={50}></LinearProgressbar>
-  <LinearProgressbar indeterminate></LinearProgressbar>
-</>
-```
-
-### Properties
-
-<Props of={LinearProgressbar} />
+import { List, Button } from "@re-flex/ui";
+
+import BasicCircular from "./Examples/JS/BasicCircular.jsx";
+import BasicLinear from "./Examples/JS/BasicLinear.jsx";
+
+# Introduction
+
+## dataDisplay.progressbar.titles.basicCircular
+
+<Playground
+  description="dataDisplay.progressbar.descriptions.basicCircular"
+  jsFile={import("./Examples/JS/BasicCircular.jsx?raw")}
+  tsFile={import("./Examples/TS/BasicCircular.tsx?raw")}
+>
+  <div style={{ display: "flex", justifyContent: "center" }}>
+    <BasicCircular />
+  </div>
+</Playground>
+
+## dataDisplay.progressbar.titles.basicLinear
+
+<Playground
+  description="dataDisplay.progressbar.descriptions.basicLinear"
+  jsFile={import("./Examples/JS/BasicLinear.jsx?raw")}
+  tsFile={import("./Examples/TS/BasicLinear.tsx?raw")}
+>
+  <div style={{ display: "flex", justifyContent: "center" }}>
+    <BasicLinear />
+  </div>
+</Playground>

packages/docs/src/Pages/Documentation/DataDisplay/Table/index.mdx

@@ -5,12 +5,28 @@ export const frontMatter = {
 };
 
 import { Table } from "@re-flex/ui";
-import TableExample from "./";
+import DataTableExample from "./";
+import TableSample from "./Examples/JS/Sample";
+import SampleDatatable from "./Examples/JS/SampleDatatable";
 
-# Table
+# Introduction
 
-<TableExample />
+## dataDisplay.tables.titles.sample
 
-## Properties
+<Playground
+  description="dataDisplay.tables.descriptions.sample"
+  jsFile={import("./Examples/JS/Sample.jsx?raw")}
+  tsFile={import("./Examples/TS/Sample.tsx?raw")}
+>
+  <TableSample />
+</Playground>
 
-<Props of={Table} />
+## dataDisplay.tables.titles.sampleDatatable
+
+<Playground
+  description="dataDisplay.tables.descriptions.sampleDatatable"
+  jsFile={import("./Examples/JS/sampleDatatable.jsx?raw")}
+  tsFile={import("./Examples/TS/sampleDatatable.tsx?raw")}
+>
+  <SampleDatatable />
+</Playground>

packages/docs/src/Pages/Documentation/Inputs/Button/Buttons.mdx

@@ -5,7 +5,7 @@ export const frontMatter = {
 };
 
 import { Box, Button, ButtonBase } from "@re-flex/ui";
-import { GenerateButton, GenerateButtonCodes } from "./Variants";
+import ButtonVariantAndColors from "./Examples/JS/VariantsAndColors";
 import BasicButton from "./Examples/JS/Basic";
 
 ## dataDisplay.buttons.titles.basic
@@ -22,7 +22,7 @@ import BasicButton from "./Examples/JS/Basic";
 
 ### Example Usage
 
-```js live=true
+```js live=true column=true
 <>
   <ButtonBase
     p={[12, 24]}
@@ -57,7 +57,7 @@ import BasicButton from "./Examples/JS/Basic";
 
 ### Example Usage
 
-```js live=true
+```js live=true column=true
 <>
   <Button variant="contained" color="primary" size={1}>
     Primary 10px
@@ -73,49 +73,47 @@ import BasicButton from "./Examples/JS/Basic";
 </>
 ```
 
-# Variants
+## Colors
 
-> default value = "text"
-
-> Options => "text" | "contained" | "outlined"
-
-## Contained Buttons
-
-<br />
-
-### Example Contained Buttons
-
-<Box m={[16, 0]} p={32} bgColor="paper" radius={6}>
-  <GenerateButton variant="contained" />
+<Box
+  m={[16, 0]}
+  p={32}
+  bgColor="background.paper"
+  radius={6}
+  sx={{ display: "flex", gap: 16, overflow: "hidden" }}
+>
+  <div>
+    <ButtonVariantAndColors variant="text" />
+  </div>
+  <div>
+    <ButtonVariantAndColors variant="outlined" />
+  </div>
+  <div>
+    <ButtonVariantAndColors variant="contained" />
+  </div>
 </Box>
 
-### Example Usage
+## Variants
+
+### Contained Buttons
 
-```js live=true
+```js live=true column=true
 <>
   <Button variant="contained" color="primary">
     Primary
   </Button>
-
   <Button variant="contained" color="#dc3545">
     Custom Color
   </Button>
+  <Button variant="contained" color="warning">
+    Warning
+  </Button>
 </>
 ```
 
 ## Outlined Buttons
 
-<br />
-
-### Example Outlined Buttons
-
-<Box m={[16, 0]} p={32} bgColor="paper" radius={6}>
-  <GenerateButton variant="outlined" />
-</Box>
-
-### Example Usage
-
-```js live=true
+```js live=true column=true
 <>
   <Button variant="outlined" color="primary">
     Primary
@@ -124,22 +122,15 @@ import BasicButton from "./Examples/JS/Basic";
   <Button variant="outlined" color="#dc3545">
     Custom Color
   </Button>
+  <Button variant="outlined" color="warning">
+    Warning
+  </Button>
 </>
 ```
 
 ## Text Buttons
 
-<br />
-
-### Example Text Buttons
-
-<Box m={[16, 0]} p={32} bgColor="paper" radius={6}>
-  <GenerateButton variant="text" />
-</Box>
-
-### Example Usage
-
-```js live=true
+```js live=true column=true
 <>
   <Button variant="text" color="primary">
     Primary
@@ -149,7 +140,7 @@ import BasicButton from "./Examples/JS/Basic";
     Custom Color
   </Button>
 
-  <Button color="primary">(OR WithOut Variant)</Button>
+  <Button color="warning">(OR WithOut Variant)</Button>
 </>
 ```