@app-studio/components 0.10.17

package/dist/files/media/Toast.mdx

@@ -0,0 +1,802 @@
+# Toast
+
+Displays transient, non-disruptive messages to inform users about system changes or actions.
+
+### **Import**
+```tsx
+import { Toast } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Toast } from '../Toast';
+
+export const DefaultToast = () => {
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.success('Success', 'Your action was completed successfully.')
+        }
+      >
+        Show Success Toast
+      </Button>
+    </Horizontal>
+  );
+};
+```
+
+### **duration**
+The duration in milliseconds after which the toast automatically disappears.
+
+- **Type:** `number`
+
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Toast } from '../Toast';
+
+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>
+  );
+};
+```
+
+### **Actions**
+
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Toast } from '../Toast';
+
+export const ToastActions = () => {
+  const handleUndo = () => {
+    Toast.success('Action Undone', 'Your previous action has been undone.');
+  };
+
+  const handleRetry = () => {
+    Toast.info('Retrying...', 'Attempting to process your request again.');
+  };
+
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.success(
+            'Item Deleted',
+            'The item has been successfully deleted.',
+            {
+              action: handleUndo,
+              actionText: 'Undo',
+            }
+          )
+        }
+      >
+        With Undo Action
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.error(
+            'Failed to Save',
+            'There was an error saving your changes.',
+            {
+              action: handleRetry,
+              actionText: 'Retry',
+            }
+          )
+        }
+      >
+        With Retry Action
+      </Button>
+    </Horizontal>
+  );
+};
+```
+
+### **Customization**
+
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Toast } from '../Toast';
+
+export const CustomizedToast = () => {
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          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,
+          })
+        }
+      >
+        Custom Styled Toast
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.success(
+            'No Close Button',
+            'This toast does not have a close button.',
+            {
+              isClosable: false,
+            }
+          )
+        }
+      >
+        No Close Button
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.warning('No Icon', 'This toast does not display an icon.', {
+            showIcon: false,
+          })
+        }
+      >
+        No Icon
+      </Button>
+    </Horizontal>
+  );
+};
+```
+
+### **DesignSystem**
+
+```tsx
+/**
+ * Toast Examples - Design System
+ *
+ * Showcases the Toast component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Text } from 'app-studio';
+import { View } from 'app-studio';
+import { Toast } from '../Toast';
+
+export const DesignSystemToast = () => {
+  // Handler for action buttons
+  const handleAction = () => {
+    Toast.success('Action Completed', 'The action was performed successfully.');
+  };
+
+  return (
+    <Vertical gap={32}>
+      {/* Toast Variants */}
+      <View>
+        <Text marginBottom={8} fontWeight="600">
+          Toast Variants
+        </Text>
+        <Horizontal gap={12}>
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Information',
+                'This is an informational message following the design system guidelines.',
+                {
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            Info Toast
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.success(
+                'Success',
+                'Your action was completed successfully following the design system guidelines.',
+                {
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            Success Toast
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.warning(
+                'Warning',
+                'Please be careful with this action following the design system guidelines.',
+                {
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            Warning Toast
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.error(
+                'Error',
+                'An error occurred while processing your request following the design system guidelines.',
+                {
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            Error Toast
+          </Button>
+        </Horizontal>
+      </View>
+
+      {/* Toast Positions */}
+      <View>
+        <Text marginBottom={8} fontWeight="600">
+          Toast Positions
+        </Text>
+        <Horizontal gap={12} flexWrap="wrap">
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Top Position',
+                'This toast appears at the top of the screen.',
+                {
+                  position: 'top',
+                }
+              )
+            }
+          >
+            Top
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Top Right Position',
+                'This toast appears at the top right of the screen.',
+                {
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            Top Right
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Top Left Position',
+                'This toast appears at the top left of the screen.',
+                {
+                  position: 'top-left',
+                }
+              )
+            }
+          >
+            Top Left
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Bottom Position',
+                'This toast appears at the bottom of the screen.',
+                {
+                  position: 'bottom',
+                }
+              )
+            }
+          >
+            Bottom
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Bottom Right Position',
+                'This toast appears at the bottom right of the screen.',
+                {
+                  position: 'bottom-right',
+                }
+              )
+            }
+          >
+            Bottom Right
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Bottom Left Position',
+                'This toast appears at the bottom left of the screen.',
+                {
+                  position: 'bottom-left',
+                }
+              )
+            }
+          >
+            Bottom Left
+          </Button>
+        </Horizontal>
+      </View>
+
+      {/* Toast Durations */}
+      <View>
+        <Text marginBottom={8} fontWeight="600">
+          Toast Durations
+        </Text>
+        <Horizontal gap={12}>
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Short Duration',
+                'This toast will disappear in 2 seconds.',
+                {
+                  duration: 2000,
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            2 Seconds
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Default Duration',
+                'This toast will disappear in 5 seconds (default).',
+                {
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            5 Seconds (Default)
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Long Duration',
+                'This toast will disappear in 10 seconds.',
+                {
+                  duration: 10000,
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            10 Seconds
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Persistent Toast',
+                'This toast will not auto-dismiss. Click the X to dismiss it.',
+                {
+                  duration: 0, // Set to 0 to make it persistent
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            Persistent
+          </Button>
+        </Horizontal>
+      </View>
+
+      {/* Toast with Actions */}
+      <View>
+        <Text marginBottom={8} fontWeight="600">
+          Toast with Actions
+        </Text>
+        <Horizontal gap={12}>
+          <Button
+            onClick={() =>
+              Toast.success(
+                'Item Deleted',
+                'The item has been successfully deleted.',
+                {
+                  action: handleAction,
+                  actionText: 'Undo',
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            With Undo Action
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.error(
+                'Failed to Save',
+                'There was an error saving your changes.',
+                {
+                  action: handleAction,
+                  actionText: 'Retry',
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            With Retry Action
+          </Button>
+        </Horizontal>
+      </View>
+
+      {/* Custom Styled Toast */}
+      <View>
+        <Text marginBottom={8} fontWeight="600">
+          Custom Styled Toast
+        </Text>
+        <Horizontal gap={12}>
+          <Button
+            onClick={() =>
+              Toast.info(
+                'Custom Styled Toast',
+                'This toast has custom styling following the design system.',
+                {
+                  position: 'top-right',
+                  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',
+                      fontFamily:
+                        'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
+                    },
+                    description: {
+                      color: 'color-purple-600',
+                      fontFamily:
+                        'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
+                    },
+                  },
+                }
+              )
+            }
+          >
+            Custom Styled Toast
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.success(
+                'No Close Button',
+                'This toast does not have a close button.',
+                {
+                  isClosable: false,
+                  position: 'top-right',
+                }
+              )
+            }
+          >
+            No Close Button
+          </Button>
+
+          <Button
+            onClick={() =>
+              Toast.info('No Icon', 'This toast does not display an icon.', {
+                showIcon: false,
+                position: 'top-right',
+              })
+            }
+          >
+            No Icon
+          </Button>
+        </Horizontal>
+      </View>
+
+      {/* Custom Render Toast */}
+      <View>
+        <Text marginBottom={8} fontWeight="600">
+          Custom Render Toast
+        </Text>
+        <Horizontal gap={12}>
+          <Button
+            onClick={() => {
+              Toast.success(
+                'Custom Render',
+                'This toast uses a custom render function',
+                {
+                  position: 'top-right',
+                  render: ({ onClose }) => (
+                    <Vertical
+                      backgroundColor="color-purple-100"
+                      borderColor="color-purple-300"
+                      borderWidth="1px"
+                      borderStyle="solid"
+                      borderRadius="8px"
+                      padding="16px"
+                      boxShadow="0 4px 12px rgba(0, 0, 0, 0.08)"
+                      width="100%"
+                      maxWidth="400px"
+                    >
+                      <Text size="lg" fontWeight="600" color="color-purple-800">
+                        Custom Design System Toast
+                      </Text>
+                      <Text size="sm" color="color-purple-700" marginTop="8px">
+                        This toast is completely custom rendered following the
+                        design system guidelines!
+                      </Text>
+                      <Horizontal justifyContent="flex-end" marginTop="12px">
+                        <Button size="sm" onClick={onClose}>
+                          Dismiss
+                        </Button>
+                      </Horizontal>
+                    </Vertical>
+                  ),
+                }
+              );
+            }}
+          >
+            Custom Render Toast
+          </Button>
+        </Horizontal>
+      </View>
+    </Vertical>
+  );
+};
+```
+
+### **HookUsage**
+
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Text } from 'app-studio';
+import { useToast } from '../Toast';
+
+export const HookUsageDemo = () => {
+  // Use the hook to get toast functions
+  const toast = useToast();
+
+  const showCustomRenderToast = () => {
+    toast.success('Custom Render', 'This toast uses a custom render function', {
+      render: ({ onClose }) => (
+        <Vertical
+          backgroundColor="color-purple-100"
+          borderColor="color-purple-300"
+          borderWidth="1px"
+          borderStyle="solid"
+          borderRadius="8px"
+          padding="12px"
+          boxShadow="0 4px 8px rgba(0, 0, 0, 0.1)"
+          width="100%"
+          maxWidth="400px"
+        >
+          <Text size="lg" weight="bold" color="color-purple-800">
+            Custom Render Toast
+          </Text>
+          <Text size="sm" color="color-purple-700" marginTop="4px">
+            This toast is completely custom rendered!
+          </Text>
+          <Horizontal justifyContent="flex-end" marginTop="8px">
+            <Button size="sm" onClick={onClose}>
+              Dismiss
+            </Button>
+          </Horizontal>
+        </Vertical>
+      ),
+    });
+  };
+
+  const showPersistentToast = () => {
+    const id = toast.warning(
+      'Persistent Toast',
+      'This toast will not auto-dismiss. Click the button below to dismiss it.',
+      {
+        duration: 0, // Set to 0 to make it persistent
+        action: () => toast.remove(id),
+        actionText: 'Dismiss',
+      }
+    );
+  };
+
+  const showAnimatedToast = () => {
+    toast.info('Animated Toast', 'This toast has improved animations', {
+      position: 'bottom',
+    });
+  };
+
+  return (
+    <Vertical gap={10}>
+      <Text>
+        These examples demonstrate the new hook-based API and enhanced features:
+      </Text>
+      <Horizontal gap={10}>
+        <Button onClick={showCustomRenderToast}>Custom Render</Button>
+        <Button onClick={showPersistentToast}>Persistent Toast</Button>
+        <Button onClick={showAnimatedToast}>Animated Toast</Button>
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './designSystem';
+export * from './variants';
+export * from './positions';
+export * from './duration';
+export * from './actions';
+export * from './customization';
+export * from './hookUsage';
+```
+
+### **Positions**
+
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Toast } from '../Toast';
+import { ToastPosition } from '../Toast/Toast.type';
+
+export const ToastPositions = () => {
+  const showToastAtPosition = (position: ToastPosition) => {
+    Toast.info(
+      `${position} Toast`,
+      `This toast appears at the ${position} position.`,
+      { position }
+    );
+  };
+
+  return (
+    <Vertical gap={16}>
+      <Horizontal gap={10}>
+        <Button onClick={() => showToastAtPosition('top-left')}>
+          Top Left
+        </Button>
+        <Button onClick={() => showToastAtPosition('top')}>Top</Button>
+        <Button onClick={() => showToastAtPosition('top-right')}>
+          Top Right
+        </Button>
+      </Horizontal>
+
+      <Horizontal gap={10}>
+        <Button onClick={() => showToastAtPosition('bottom-left')}>
+          Bottom Left
+        </Button>
+        <Button onClick={() => showToastAtPosition('bottom')}>Bottom</Button>
+        <Button onClick={() => showToastAtPosition('bottom-right')}>
+          Bottom Right
+        </Button>
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+
+### **Variants**
+
+```tsx
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+import { Toast } from '../Toast';
+
+export const ToastVariants = () => {
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.info('Information', 'This is an informational message.')
+        }
+      >
+        Info
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.success('Success', 'Your action was completed successfully.')
+        }
+      >
+        Success
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.warning('Warning', 'Please be careful with this action.')
+        }
+      >
+        Warning
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.error(
+            'Error',
+            'An error occurred while processing your request.'
+          )
+        }
+      >
+        Error
+      </Button>
+    </Horizontal>
+  );
+};
+```
+