@app-studio/web 0.9.41 → 0.9.44

package/docs/components/Toast.mdx

@@ -1,165 +1,88 @@
 # Toast
 
-A succinct message that is displayed temporarily.
+Displays temporary, dismissible messages to inform users about actions, status, or events.
 
 ### **Import**
-  ```tsx
-  import { Toast } from '@app-studio/web';
-  ```
+```tsx
+import { Toast } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
 import { Toast } from '@app-studio/web';
 
 export const DefaultToast = () => {
   return (
-    <Button
-      onClick={() =>
-        Toast.success('Success', 'Your action was completed successfully.')
-      }
-    >
-      Show Success Toast
-    </Button>
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.success('Success', 'Your action was completed successfully.')
+        }
+      >
+        Show Success Toast
+      </Button>
+    </Horizontal>
   );
 };
 ```
 
-### **Variants**
-The Toast component supports different variants:
-
-```tsx
-// Info toast
-Toast.info('Information', 'This is an informational message.');
-
-// Success toast
-Toast.success('Success', 'Your action was completed successfully.');
+### **duration**
+The time in milliseconds before the toast automatically closes. Default is usually 5000ms.
 
-// Warning toast
-Toast.warning('Warning', 'Please be careful with this action.');
-
-// Error toast
-Toast.error('Error', 'An error occurred while processing your request.');
-```
-
-### **Positions**
-The Toast component can be positioned in different areas of the screen:
+- **Type:** `number`
 
 ```tsx
-// Top position
-Toast.info('Top Toast', 'This toast appears at the top.', { position: 'top' });
-
-// Top-right position (default)
-Toast.info('Top Right Toast', 'This toast appears at the top-right.', { position: 'top-right' });
-
-// Top-left position
-Toast.info('Top Left Toast', 'This toast appears at the top-left.', { position: 'top-left' });
-
-// Bottom position
-Toast.info('Bottom Toast', 'This toast appears at the bottom.', { position: 'bottom' });
-
-// Bottom-right position
-Toast.info('Bottom Right Toast', 'This toast appears at the bottom-right.', { position: 'bottom-right' });
-
-// Bottom-left position
-Toast.info('Bottom Left Toast', 'This toast appears at the bottom-left.', { position: 'bottom-left' });
-```
-
-### **Duration**
-The Toast component can be displayed for different durations:
-
-```tsx
-// Short duration (2 seconds)
-Toast.info('Short Duration', 'This toast will disappear in 2 seconds.', {
-  duration: 2000,
-});
-
-// Default duration (5 seconds)
-Toast.info('Default Duration', 'This toast will disappear in 5 seconds.');
-
-// Long duration (10 seconds)
-Toast.info('Long Duration', 'This toast will disappear in 10 seconds.', {
-  duration: 10000,
-});
-```
-
-### **Actions**
-The Toast component can include action buttons:
-
-```tsx
-// Toast with an undo action
-Toast.success('Item Deleted', 'The item has been successfully deleted.', {
-  action: () => {
-    // Handle undo action
-    console.log('Undo action triggered');
-  },
-  actionText: 'Undo',
-});
-
-// Toast with a retry action
-Toast.error('Failed to Save', 'There was an error saving your changes.', {
-  action: () => {
-    // Handle retry action
-    console.log('Retry action triggered');
-  },
-  actionText: 'Retry',
-});
-```
-
-### **Customization**
-The Toast component can be customized:
-
-```tsx
-// Custom styled toast
-Toast.info('Custom Styled Toast', 'This toast has custom styling.', {
-  views: {
-    container: {
-      backgroundColor: 'color.purple.50',
-      borderColor: 'color.purple.300',
-      borderRadius: '12px',
-      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-    },
-    title: {
-      color: 'color.purple.700',
-      fontSize: '18px',
-    },
-    description: {
-      color: 'color.purple.600',
-    },
-  },
-  showIcon: false,
-});
-
-// Toast without a close button
-Toast.success('No Close Button', 'This toast does not have a close button.', {
-  isClosable: false,
-});
-
-// Toast without an icon
-Toast.warning('No Icon', 'This toast does not display an icon.', {
-  showIcon: false,
-});
-```
-
-### **Toast Container**
-The Toast component requires a container to be rendered:
+import React from 'react';
+import { Button } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+import { Toast } from '@app-studio/web';
 
-```tsx
-// Add this to your app's root component or layout
-<Toast.Container position="top-right" />
+export const ToastDurations = () => {
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.info(
+            'Short Duration',
+            'This toast will disappear in 2 seconds.',
+            {
+              duration: 2000,
+            }
+          )
+        }
+      >
+        2 Seconds
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.info(
+            'Default Duration',
+            'This toast will disappear in 5 seconds.'
+          )
+        }
+      >
+        5 Seconds (Default)
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.info(
+            'Long Duration',
+            'This toast will disappear in 10 seconds.',
+            {
+              duration: 10000,
+            }
+          )
+        }
+      >
+        10 Seconds
+      </Button>
+    </Horizontal>
+  );
+};
 ```
 
-### **Programmatic Control**
-The Toast component can be controlled programmatically:
-
-```tsx
-// Show a toast and get its ID
-const toastId = Toast.info('Hello', 'This is a toast message');
-
-// Remove a specific toast
-Toast.remove(toastId);
-
-// Remove all toasts
-Toast.removeAll();
-```

package/docs/components/Toggle.mdx

@@ -1,32 +1,35 @@
 # Toggle
 
-A user-interface element for toggling between on/off states.
+A versatile control allowing users to switch between two states, enabling or disabling features.
 
 ### **Import**
-  ```tsx
-  import { Toggle } from '@app-studio/web';
-  ```
+```tsx
+import { Toggle } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Toggle } from '../Toggle';
+import { Toggle } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   return <Toggle>Default</Toggle>;
 };
-
 ```
 
 ### **shape**
-Optional property to determine the shape of the toggle component.
+Optional 'shape' property to determine the shape of the toggle component.
+
+- **Type:** `string`
+- **Default:** `rounded`
+- **Possible Values:** `sharp, rounded, pillShaped`
 
 ```tsx
 import React from 'react';
-import { Horizontal } from '@app-studio/web';
-import { Toggle } from '../Toggle';
-import { Shape } from '../Toggle/Toggle.type';
-import { View } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+import { Toggle } from '@app-studio/web';
+import { Shape } from '@app-studio/web';
+import { View } from 'app-studio';
 export const ShapeDemo = () => (
   <Horizontal gap={15}>
     {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
@@ -36,15 +39,18 @@ export const ShapeDemo = () => (
     ))}
   </Horizontal>
 );
-
 ```
 
 ### **isToggled**
 Optional boolean to define the initial toggle state.
 
+- **Type:** `boolean`
+- **Default:** `undefined`
+- **Possible Values:** `true, false`
+
 ```tsx
 import React from 'react';
-import { Toggle } from '../Toggle';
+import { Toggle } from '@app-studio/web';
 
 export const IsToggledDemo = () => {
   return (
@@ -53,30 +59,36 @@ export const IsToggledDemo = () => {
     </Toggle>
   );
 };
-
 ```
 
 ### **isDisabled**
 Optional boolean to set the toggle component as disabled or not.
 
+- **Type:** `boolean`
+- **Default:** `undefined`
+- **Possible Values:** `true, false`
+
 ```tsx
 import React from 'react';
-import { Toggle } from '../Toggle';
+import { Toggle } from '@app-studio/web';
 
 export const IsDisabledDemo = () => {
   return <Toggle isDisabled>IsDisabled</Toggle>;
 };
-
 ```
 
 ### **variant**
-Optional property to style the toggle component with predefined sets of visual types.
+Optional 'variant' to style the toggle component with predefined sets of visual types.
+
+- **Type:** `string`
+- **Default:** `ghost`
+- **Possible Values:** `outline, link, ghost`
 
 ```tsx
 import React from 'react';
-import { Toggle } from '../Toggle';
-import { Vertical } from '@app-studio/web';
-import { Variant } from '../Toggle/Toggle.type';
+import { Toggle } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+import { Variant } from '@app-studio/web';
 
 export const VariantDemo = () => (
   <Vertical gap={15}>
@@ -87,42 +99,19 @@ export const VariantDemo = () => (
     ))}
   </Vertical>
 );
-
-```
-
-### **colorScheme**
-Optional string to set the color scheme for the toggle component's appearance.
-
-```tsx
-import React from 'react';
-import { Toggle } from '../Toggle';
-import { Horizontal } from '@app-studio/web';
-
-export const ColorSchemeDemo = () => (
-  <Horizontal gap={10}>
-    {[
-      'theme.primary',
-      'theme.secondary',
-      'theme.warning',
-      'theme.success',
-      'theme.error',
-    ].map((color, index) => (
-      <Toggle key={index} colorScheme={color}>
-        {color}
-      </Toggle>
-    ))}
-  </Horizontal>
-);
-
 ```
 
 ### **onToggle**
 Optional function that triggers when the toggle state changes, receives the new state as an argument.
 
+- **Type:** `(isToggled: boolean) => void`
+- **Default:** `undefined`
+- **Possible Values:** `N/A`
+
 ```tsx
 import React from 'react';
 import { useState } from 'react';
-import { Toggle } from '../Toggle';
+import { Toggle } from '@app-studio/web';
 
 export const OnToggleDemo = () => {
   const [isToggle, setIsToggled] = useState(false);
@@ -136,6 +125,5 @@ export const OnToggleDemo = () => {
     </Toggle>
   );
 };
-
 ```
 

package/docs/components/ToggleGroup.mdx

@@ -1,16 +1,16 @@
 # ToggleGroup
 
-Enables selection from a group of toggle switches.
+A group of toggle buttons allowing users to select one or more options.
 
 ### **Import**
-  ```tsx
-  import { ToggleGroup } from '@app-studio/web';
-  ```
+```tsx
+import { ToggleGroup } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { ToggleGroup } from '../ToggleGroup';
+import { ToggleGroup } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   const items = [
@@ -20,25 +20,28 @@ export const DefaultDemo = () => {
   ];
   return <ToggleGroup items={items} />;
 };
-
 ```
 
 ### **shape**
 Optional shape prop to define the shape of toggle elements.
 
+- **Type:** `string`
+- **Default:** `rounded`
+- **Possible Values:** `sharp, rounded, pillShaped`
+
 ```tsx
 import React from 'react';
-import { DustBinIcon } from '../../Icon';
-import { ToggleGroup } from '../ToggleGroup';
-import { Shape } from '../ToggleGroup/ToggleGroup.type';
-import { Horizontal } from '@app-studio/web';
-import { View } from '@app-studio/web';
+import { DustBinIcon } from '@app-studio/web';
+import { ToggleGroup } from '@app-studio/web';
+import { Shape } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+import { View } from 'app-studio';
 
 export const ShapeDemo = () => {
   const items = [
     {
       id: 'item',
-      value: <DustBinIcon size={18} />,
+      value: <DustBinIcon widthHeight={18} />,
       isActive: true,
     },
   ];
@@ -52,16 +55,19 @@ export const ShapeDemo = () => {
     </Horizontal>
   );
 };
-
 ```
 
 ### **items**
 Mandatory array of items defining each toggle in the group.
 
+- **Type:** `array`
+- **Default:** `undefined`
+- **Possible Values:** `ToggleItem[]`
+
 ```tsx
 import React from 'react';
-import { ToggleGroup } from '../ToggleGroup';
-import { Text } from '@app-studio/web';
+import { ToggleGroup } from '@app-studio/web';
+import { Text } from 'app-studio';
 
 export const ItemsDemo = () => {
   const items = [
@@ -71,18 +77,21 @@ export const ItemsDemo = () => {
   ];
   return <ToggleGroup items={items} />;
 };
-
 ```
 
 ### **variant**
 Optional variant prop to specify the visual style of the toggle group.
 
+- **Type:** `string`
+- **Default:** `ghost`
+- **Possible Values:** `outline, link, ghost`
+
 ```tsx
 import React from 'react';
-import { Text } from '@app-studio/web';
-import { ToggleGroup } from '../ToggleGroup';
-import { Variant } from '../ToggleGroup/ToggleGroup.type';
-import { Vertical } from '@app-studio/web';
+import { Text } from 'app-studio';
+import { ToggleGroup } from '@app-studio/web';
+import { Variant } from '@app-studio/web';
+import { Vertical } from 'app-studio';
 
 export const VariantDemo = () => {
   const items = [
@@ -98,49 +107,20 @@ export const VariantDemo = () => {
     </Vertical>
   );
 };
-
-```
-
-### **colorScheme**
-Optional colorScheme prop for theming the toggle group.
-
-```tsx
-import React from 'react';
-import { ToggleGroup } from '../ToggleGroup';
-import { Vertical } from '@app-studio/web';
-import { Text } from '@app-studio/web';
-
-export const ColorSchemeDemo = () => {
-  const items = [
-    { id: 'B', value: <Text>B</Text> },
-    { id: 'C', value: <Text>C</Text>, isActive: true },
-    { id: 'D', value: <Text>D</Text>, isDisabled: true },
-  ];
-  return (
-    <Vertical gap={10}>
-      {[
-        'theme.primary',
-        'theme.secondary',
-        'theme.warning',
-        'theme.success',
-        'theme.error',
-      ].map((color, index) => (
-        <ToggleGroup key={index} items={items} colorScheme={color} />
-      ))}
-    </Vertical>
-  );
-};
-
 ```
 
 ### **onToggleChange**
 Optional callback function that fires when the active toggle changes, providing the IDs of active toggles.
 
+- **Type:** `function`
+- **Default:** `undefined`
+- **Possible Values:** `(activeIds: string[]) => void`
+
 ```tsx
 import React, { useState } from 'react';
-import { ToggleGroup } from '../ToggleGroup';
-import { Text } from '@app-studio/web';
-import { Vertical } from '@app-studio/web';
+import { ToggleGroup } from '@app-studio/web';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
 
 export const OnToggleChangeDemo = () => {
   const [newItems, setNewItems] = useState<any>([]);
@@ -160,6 +140,5 @@ export const OnToggleChangeDemo = () => {
     </Vertical>
   );
 };
-
 ```