@app-studio/web 0.9.41 → 0.9.43

package/docs/components/Switch.mdx

@@ -23,7 +23,7 @@ A toggle switch for user interactions like turning settings on or off.
 ### **Default**
 ```tsx
 import React from 'react';
-import { Switch } from '../../../Form/Switch/Switch';
+import { Switch } from '@app-studio/web';
 
 export const DefaultSwitch = () => <Switch id="check" name="checkbox" />;
 
@@ -35,7 +35,7 @@ Defines the color theme for the switch component.
 ```tsx
 import React from 'react';
 
-import { Switch } from '../Switch';
+import { Switch } from '@app-studio/web';
 
 export const ColorSwitch = () => (
   <Switch name="name" colorScheme="theme.primary" isChecked />
@@ -48,7 +48,7 @@ Defines the shadow appearance of the switch using predefined Shadow or Elevation
 
 ```tsx
 import React from 'react';
-import { Switch } from '../../../Form/Switch/Switch';
+import { Switch } from '@app-studio/web';
 
 export const ShadowSwitch = () => (
   <Switch

package/docs/components/Table.mdx

@@ -1,35 +1,22 @@
 # Table
 
-Renders a customizable data table with optional footer and caption.
-
-## Props
-
-| Prop      | Type          | Description                                                                                                                               | Default |
-| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| columns          | array        | Array of column objects, each defining a title and field.                                                                                                     |         |
-| data             | array         | Array of data objects to be displayed in the table rows.                                                                                                    |         |
-| footer           | array         | Optional array of footer cells to add at the bottom of the table.                                                                                             |         |
-| caption          | ReactNode     | Optional table caption as a React node.                                                                                                   |         |
-| styles           | CSSProperties | Optional custom styles to apply to the table and its elements.                                                                                              |         |
-| className        | string        | Optional className for the table.                                                                                                         |         |
+Renders a tabular display for presenting structured data with customizable styles.
 
 ### **Import**
-  ```tsx
-  import { Table } from '@app-studio/web';
-  ```
+```tsx
+import { Table } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import {
-  TableContainer,
+import { TableContainer,
   TableCaption,
   TableHead,
   TableRow,
   TableHeadCell,
   TableBody,
-  TableCell,
-} from '../Table/Table.view';
+  TableCell, } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   interface DataRow {
@@ -113,15 +100,18 @@ export const DefaultDemo = () => {
     </TableContainer>
   );
 };
-
 ```
 
 ### **data**
-Array of data objects to be displayed in the table rows.
+An array of data objects to be displayed in the table rows.
+
+- **Type:** `any[]`
+- **Default:** `None`
+- **Possible Values:** `any[]`
 
 ```tsx
 import React from 'react';
-import { Table } from '../Table';
+import { Table } from '@app-studio/web';
 
 export const DataDemo = () => {
   const cols = [
@@ -176,15 +166,18 @@ export const DataDemo = () => {
   ];
   return <Table.Template columns={cols} data={invoices} />;
 };
-
 ```
 
 ### **footer**
-Optional array of footer cells to add at the bottom of the table.
+An optional array of footer cells to display at the bottom of the table.
+
+- **Type:** `FooterCell[]`
+- **Default:** `None`
+- **Possible Values:** `Array<{ value: string; props?: ViewProps; }>`
 
 ```tsx
 import React from 'react';
-import { Table } from '../Table';
+import { Table } from '@app-studio/web';
 
 export const FooterDemo = () => {
   const cols = [
@@ -252,7 +245,7 @@ export const FooterDemo = () => {
         footer={[
           {
             value: 'Total Amount',
-            props: { colspan: 3, style: { fontWeight: 'bold' } },
+            props: { colSpan: 3, style: { fontWeight: 'bold' } },
           },
           { value: '$2,500.00' },
         ]}
@@ -260,15 +253,18 @@ export const FooterDemo = () => {
     </Table>
   );
 };
-
 ```
 
 ### **caption**
-Optional table caption as a React node.
+An optional caption for the table, providing a brief title or explanation.
+
+- **Type:** `React.ReactNode`
+- **Default:** `None`
+- **Possible Values:** `React.ReactNode`
 
 ```tsx
 import React from 'react';
-import { Table } from '../Table';
+import { Table } from '@app-studio/web';
 
 export const CaptionDemo = () => {
   const cols = [
@@ -329,81 +325,5 @@ export const CaptionDemo = () => {
     />
   );
 };
-
 ```
 
-### **styles**
-Optional custom styles to apply to the table and its elements.
-
-```tsx
-import React from 'react';
-import { Table } from '../Table';
-
-export const StylesDemo = () => {
-  const cols = [
-    { title: 'Invoice', field: 'invoice' },
-    { title: 'Payment Status', field: 'paymentStatus' },
-    { title: 'Total Amount', field: 'totalAmount' },
-    { title: 'Payment Method', field: 'paymentMethod' },
-  ];
-  const invoices = [
-    {
-      invoice: 'INV001',
-      paymentStatus: 'Paid',
-      totalAmount: '$250.00',
-      paymentMethod: 'Credit Card',
-    },
-    {
-      invoice: 'INV002',
-      paymentStatus: 'Pending',
-      totalAmount: '$150.00',
-      paymentMethod: 'PayPal',
-    },
-    {
-      invoice: 'INV003',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$350.00',
-      paymentMethod: 'Bank Transfer',
-    },
-    {
-      invoice: 'INV004',
-      paymentStatus: 'Paid',
-      totalAmount: '$450.00',
-      paymentMethod: 'Credit Card',
-    },
-    {
-      invoice: 'INV005',
-      paymentStatus: 'Paid',
-      totalAmount: '$550.00',
-      paymentMethod: 'PayPal',
-    },
-    {
-      invoice: 'INV006',
-      paymentStatus: 'Pending',
-      totalAmount: '$200.00',
-      paymentMethod: 'Bank Transfer',
-    },
-    {
-      invoice: 'INV007',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$300.00',
-      paymentMethod: 'Credit Card',
-    },
-  ];
-  return (
-    <Table
-      views={{
-        table: {
-          boxShadow:
-            ' 0 4px 6px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1)',
-
-          borderRadius: '1em',
-        },
-      }}
-    >
-      <Table.Template columns={cols} data={invoices} />
-    </Table>
-  );
-};
-
-```

package/docs/components/Tabs.mdx

@@ -1,39 +1,35 @@
 # Tabs
 
-Provides an interactive tab interface for content organization
-
-## Props
-
-| Prop      | Type          | Description                                                                                                                               | Default |
-| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| tabs             | {title: string; value: string; content: ReactNode;}[] | An array of tab objects, each defining a title, value, and content.                                                                                                     |         |
-| styles           | TabsStyles    | Allows for optional styling to be applied to the tabs via a TabsStyles object.                                                                                              |         |
-| className        | string        | Optional className for the tabs.                                                                                                          |         |
+A versatile component for organizing and displaying content in separate, selectable sections.
 
 ### **Import**
-  ```tsx
-  import { Tabs } from '@app-studio/web';
-  ```
+```tsx
+import { Tabs } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Tabs, View, Text } from '../..';
+import { MoonIcon,
+  ShareIcon,
+  PanelIcon,
+  SaveIcon,
+  PauseIcon, } from '@app-studio/web'; // Assuming components are exported from index
+import { Text, View } from 'app-studio';
+import { Tabs } from '@app-studio/web';
 
+// Example demonstrating basic usage of the Tabs component.
 export const Default = () => (
   <Tabs
+    // Add a unique 'value' to each tab
     tabs={[
       {
         title: 'Product',
-        value: 'product',
+        icon: <MoonIcon />,
         content: (
-          <View
-            backgroundColor={'purple'}
-            borderRadius={10}
-            padding="20px 20px 0"
-          >
+          <View backgroundColor={'purple'} padding="20px 20px 0">
             <Text heading="h5" color="white">
-              Product Tab
+              Product Tab Content
             </Text>
             <DummyContent />
           </View>
@@ -41,15 +37,11 @@ export const Default = () => (
       },
       {
         title: 'Services',
-        value: 'services',
+        icon: <ShareIcon />,
         content: (
-          <View
-            backgroundColor={'purple'}
-            borderRadius={10}
-            padding="20px 20px 0"
-          >
+          <View backgroundColor={'purple'} padding="20px 20px 0">
             <Text heading="h5" color="white">
-              Services tab
+              Services Tab Content
             </Text>
             <DummyContent />
           </View>
@@ -57,15 +49,11 @@ export const Default = () => (
       },
       {
         title: 'Playground',
-        value: 'playground',
+        icon: <PanelIcon />,
         content: (
-          <View
-            backgroundColor={'purple'}
-            borderRadius={10}
-            padding="20px 20px 0"
-          >
+          <View backgroundColor={'purple'} padding="20px 20px 0">
             <Text heading="h5" color="white">
-              Playground tab
+              Playground Tab Content
             </Text>
             <DummyContent />
           </View>
@@ -73,15 +61,11 @@ export const Default = () => (
       },
       {
         title: 'Content',
-        value: 'content',
+        icon: <SaveIcon />,
         content: (
-          <View
-            backgroundColor={'purple'}
-            borderRadius={10}
-            padding="20px 20px 0"
-          >
+          <View backgroundColor={'purple'} padding="20px 20px 0">
             <Text heading="h5" color="white">
-              Content tab
+              Content Tab Content
             </Text>
             <DummyContent />
           </View>
@@ -89,24 +73,25 @@ export const Default = () => (
       },
       {
         title: 'Random',
-        value: 'random',
+        icon: <PauseIcon />,
         content: (
-          <View
-            backgroundColor={'purple'}
-            borderRadius={10}
-            padding="20px 20px 0"
-          >
+          <View backgroundColor={'purple'} padding="20px 20px 0">
             <Text heading="h5" color="white">
-              Random tab
+              Random Tab Content
             </Text>
             <DummyContent />
           </View>
         ),
       },
     ]}
+    // Optionally set the initially active tab
+    defaultValue="Services"
+    // Optionally listen for tab changes
+    onTabChange={(activeTab) => console.log('Active Tab:', activeTab.title)}
   />
 );
 
+// Simple placeholder content component
 const DummyContent = () => {
   return (
     <View
@@ -114,102 +99,14 @@ const DummyContent = () => {
       borderRadius="8px"
       height="300px"
       backgroundColor={'black'}
-    ></View>
+      // Added content for visibility
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Text color="grey">Dummy Content Area</Text>
+    </View>
   );
 };
-
 ```
 
-### **styles**
-Allows for optional styling to be applied to the tabs via a TabsStyles object.
-
-```tsx
-import React from 'react';
-import { Text } from '@app-studio/web';
-import { Tabs } from '../../Tabs/Tabs';
-
-export const StylesTabs = () => {
-  const tabs = [
-    {
-      title: 'Product',
-      value: 'product',
-      content: (
-        <Text heading="h5" color="white">
-          Product Tab
-        </Text>
-      ),
-    },
-    {
-      title: 'Services',
-      value: 'services',
-      content: (
-        <Text heading="h5" color="white">
-          Services tab
-        </Text>
-      ),
-    },
-    {
-      title: 'Playground',
-      value: 'playground',
-      content: (
-        <Text heading="h5" color="white">
-          Playground tab
-        </Text>
-      ),
-    },
-    {
-      title: 'Content',
-      value: 'content',
-      content: (
-        <Text heading="h5" color="white">
-          Content tab
-        </Text>
-      ),
-    },
-    {
-      title: 'Random',
-      value: 'random',
-      content: (
-        <Text heading="h5" color="white">
-          Random tab
-        </Text>
-      ),
-    },
-  ];
-  return (
-    <Tabs
-      tabs={tabs}
-      views={{
-        container: { backgroundColor: 'black', borderRadius: '20px' },
-        headerTabs: {
-          backgroundColor: 'purple',
-          width: '100%',
-          borderRadius: '20px 20px 0 0',
-          padding: '10px 0',
-        },
-        tab: {
-          shape: 'rounded',
-        },
-        title: {
-          color: 'color.white',
-        },
-        content: {
-          height: '300px',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        activeTab: {
-          variant: 'ghost',
-        },
-        activeText: {
-          weight: 'bold',
-          size: 'lg',
-        },
-      }}
-    />
-  );
-};
-
-```

package/docs/components/TagInput.mdx

@@ -11,7 +11,7 @@ A form input component for managing a list of tags. Users can add tags by typing
 ```tsx
 import React, { useState } from 'react';
 import { Vertical, Text } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const DefaultTagInput = () => {
   const [tags, setTags] = useState<string[]>([]);
@@ -39,7 +39,7 @@ Characters that trigger tag creation. Supports 'enter', 'comma', 'space', and 't
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const CustomSeparatorsTagInput = () => {
   const [tags, setTags] = useState<string[]>(['react', 'typescript']);
@@ -68,7 +68,7 @@ Maximum number of tags allowed.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const LimitedTagInput = () => {
   const [tags, setTags] = useState<string[]>(['javascript', 'web']);
@@ -96,7 +96,7 @@ Validation constraints for tag length.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const ValidatedTagInput = () => {
   const [tags, setTags] = useState<string[]>([]);
@@ -127,7 +127,7 @@ Whether to allow duplicate tags.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const NoDuplicatesTagInput = () => {
   const [tags, setTags] = useState<string[]>(['unique']);
@@ -150,7 +150,7 @@ Default tags for uncontrolled component usage.
 
 ```tsx
 import React from 'react';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const UncontrolledTagInput = () => {
   return (
@@ -172,7 +172,7 @@ Disabled and read-only states.
 ```tsx
 import React from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const DisabledTagInput = () => {
   return (
@@ -203,7 +203,7 @@ Visual variant of the component: 'outline', 'default', or 'none'.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const VariantTagInput = () => {
   const [tags, setTags] = useState<string[]>(['example']);
@@ -239,7 +239,7 @@ Size of the component: 'xs', 'sm', 'md', 'lg', or 'xl'.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const SizeTagInput = () => {
   const [tags, setTags] = useState<string[]>(['tag']);
@@ -267,7 +267,7 @@ Shape/border radius: 'default', 'sharp', 'rounded', or 'pillShaped'.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const ShapeTagInput = () => {
   const [tags, setTags] = useState<string[]>(['shaped']);
@@ -295,8 +295,8 @@ React nodes to render on the left and right sides of the input.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
-import { SearchIcon, TagIcon } from '../../../Icon';
+import { TagInput } from '@app-studio/web';
+import { SearchIcon, TagIcon } from '@app-studio/web';
 
 export const IconTagInput = () => {
   const [tags, setTags] = useState<string[]>(['search']);
@@ -330,7 +330,7 @@ Custom styling for different parts of the component.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const StyledTagInput = () => {
   const [tags, setTags] = useState<string[]>(['design', 'ui']);
@@ -379,7 +379,7 @@ Callbacks for individual tag operations.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical, Text } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const CallbackTagInput = () => {
   const [tags, setTags] = useState<string[]>(['initial']);
@@ -410,7 +410,7 @@ Whether tags can be removed by clicking the X button.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const NonRemovableTagInput = () => {
   const [tags, setTags] = useState<string[]>(['permanent', 'fixed']);
@@ -441,7 +441,7 @@ TagInput works seamlessly with forms and form libraries.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical, Button } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const FormTagInput = () => {
   const [formData, setFormData] = useState({
@@ -492,7 +492,7 @@ Display validation errors and helper messages.
 ```tsx
 import React, { useState } from 'react';
 import { Vertical } from '@app-studio/web';
-import { TagInput } from '../TagInput';
+import { TagInput } from '@app-studio/web';
 
 export const ErrorTagInput = () => {
   const [tags, setTags] = useState<string[]>([]);

package/docs/components/Text.mdx

@@ -15,7 +15,7 @@ import { Text } from "@app-studio/web";
 “**_size_**” changes the text-size. It has a type "Sizes" with default value “md”.
 
 ```tsx
-import { Vertical } from "../Layout/Vertical/Vertical";
+import { Vertical, Text } from "@app-studio/web";
 
 <Vertical gap={5} alignItems="center">
   {["xs", "sm", "md", "lg", "xl", "xl", "xl", "xl", "xl", "6xl"].map(
@@ -33,7 +33,7 @@ import { Vertical } from "../Layout/Vertical/Vertical";
 “**_heading_**” renders a specific heading html tag. “h1” indicates the most important heading and “h6” the least important heading.
 
 ```tsx
-import { Vertical } from "../Layout/Vertical/Vertical";
+import { Vertical, Text } from "@app-studio/web";
 <Vertical gap={2}>
   <Text heading="h1">Heading 1</Text>
   <Text heading="h2">Heading 2</Text>
@@ -79,7 +79,7 @@ import { Vertical } from "../Layout/Vertical/Vertical";
 “**_weight_**” changes the font weight of the text. It have a default value of “medium”.
 
 ```tsx
-import { Vertical } from "../Layout/Vertical/Vertical";
+import { Vertical, Text } from "@app-studio/web";
 
 <Vertical gap={5} alignItems="center">
   {[

package/docs/components/TextArea.mdx

@@ -11,7 +11,7 @@ A text input field for multi-line text editing with customizable features.
 ```tsx
 import React from 'react';
 
-import { TextArea } from '../TextArea';
+import { TextArea } from '@app-studio/web';
 
 export const DefaultArea = () => (
   <TextArea name="comments" placeholder="Enter your thoughts" />
@@ -26,7 +26,7 @@ Optional color scheme for the component.
 import React from 'react';
 import { Vertical } from '@app-studio/web';
 
-import { TextArea } from '../TextArea';
+import { TextArea } from '@app-studio/web';
 
 export const ColorArea = () => {
   return (
@@ -51,8 +51,8 @@ Helper text that appears below the text area.
 import { useState } from 'react';
 import React from 'react';
 
-import { Button } from '../../../Button/Button';
-import { TextArea } from '../../../Form/TextArea/TextArea';
+import { Button } from '@app-studio/web';
+import { TextArea } from '@app-studio/web';
 
 import { Vertical } from '@app-studio/web';
 
@@ -108,11 +108,11 @@ Placeholder text for the text area when it is empty.
 
 ```tsx
 import React from 'react';
-import { Button } from '../../../Button/Button';
+import { Button } from '@app-studio/web';
 
 import { Horizontal } from '@app-studio/web';
 
-import { TextArea } from '../TextArea';
+import { TextArea } from '@app-studio/web';
 
 export const PlaceholderArea = () => {
   const handleSubmit = (event: any) => {