@app-studio/components 0.10.17

package/docs/components/Loader.mdx

@@ -0,0 +1,344 @@
+# Loader
+
+A loading indicator component with multiple types, sizes, speeds, and text positioning options.
+
+### **Import**
+```tsx
+import { Loader } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+
+export const DefaultLoader = () => (
+  <Loader />
+);
+```
+
+### **type**
+Defines the type of the loader.
+
+- **Type:** `LoaderType`
+- **Default:** `'spinner'`
+- **Possible Values:** `'spinner' | 'dotted' | 'quarter' | 'pulse' | 'bars'`
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const LoaderTypes = () => (
+  <Horizontal gap={30}>
+    <Loader type="spinner" />
+    <Loader type="dotted" />
+    <Loader type="quarter" />
+    <Loader type="pulse" />
+    <Loader type="bars" />
+  </Horizontal>
+);
+```
+
+### **size**
+Sets the size of the loader.
+
+- **Type:** `number | Size`
+- **Default:** `'md'`
+- **Possible Values:** `'xs' | 'sm' | 'md' | 'lg' | 'xl'` or pixel number
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const LoaderSizes = () => (
+  <Horizontal gap={20} alignItems="center">
+    <Loader size="xs" />
+    <Loader size="sm" />
+    <Loader size="md" />
+    <Loader size="lg" />
+    <Loader size="xl" />
+  </Horizontal>
+);
+```
+
+### **Custom Size**
+Using pixel values for custom sizes.
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const CustomSizeLoaders = () => (
+  <Horizontal gap={20} alignItems="center">
+    <Loader size={16} />
+    <Loader size={32} />
+    <Loader size={48} />
+    <Loader size={64} />
+  </Horizontal>
+);
+```
+
+### **loaderColor**
+Defines the color of the loader element.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const ColoredLoaders = () => (
+  <Horizontal gap={30}>
+    <Loader loaderColor="color-blue-500" />
+    <Loader loaderColor="color-emerald-500" />
+    <Loader loaderColor="color-red-500" />
+    <Loader loaderColor="color-amber-500" />
+    <Loader loaderColor="color-violet-500" />
+  </Horizontal>
+);
+```
+
+### **speed**
+Controls the speed of the loader's animation.
+
+- **Type:** `Speed`
+- **Default:** `'normal'`
+- **Possible Values:** `'slow' | 'normal' | 'fast'`
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const LoaderSpeeds = () => (
+  <Horizontal gap={30}>
+    <Loader speed="slow" />
+    <Loader speed="normal" />
+    <Loader speed="fast" />
+  </Horizontal>
+);
+```
+
+### **children**
+Text or content to display with the loader.
+
+- **Type:** `React.ReactNode`
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+
+export const LoaderWithText = () => (
+  <Loader>Loading...</Loader>
+);
+```
+
+### **textPosition**
+Determines the position of the text relative to the loader.
+
+- **Type:** `TextPosition`
+- **Default:** `'bottom'`
+- **Possible Values:** `'top' | 'bottom' | 'left' | 'right'`
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const TextPositions = () => (
+  <Vertical gap={30}>
+    <Loader textPosition="top">Loading from top</Loader>
+    <Loader textPosition="bottom">Loading from bottom</Loader>
+    <Loader textPosition="left">Loading from left</Loader>
+    <Loader textPosition="right">Loading from right</Loader>
+  </Vertical>
+);
+```
+
+### **textColor**
+Sets the color of the text displayed with the loader.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+
+export const ColoredTextLoader = () => (
+  <Loader 
+    loaderColor="color-blue-500" 
+    textColor="color-blue-500"
+  >
+    Loading...
+  </Loader>
+);
+```
+
+### **Loading States**
+Common loading state patterns.
+
+```tsx
+import React, { useState } from 'react';
+import { Loader } from '@app-studio/components';
+import { Button, Vertical } from 'app-studio';
+
+export const LoadingStates = () => {
+  const [loading, setLoading] = useState(false);
+  
+  return (
+    <Vertical gap={20}>
+      <Button 
+        onClick={() => {
+          setLoading(true);
+          setTimeout(() => setLoading(false), 3000);
+        }}
+      >
+        Start Loading
+      </Button>
+      
+      {loading && (
+        <Loader>Please wait...</Loader>
+      )}
+    </Vertical>
+  );
+};
+```
+
+### **Inline Loader**
+Small loader for inline use.
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Text, Horizontal } from 'app-studio';
+
+export const InlineLoader = () => (
+  <Horizontal gap={10} alignItems="center">
+    <Text>Saving</Text>
+    <Loader size={16} />
+  </Horizontal>
+);
+```
+
+### **Full Page Loader**
+Centered loader for full page loading.
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Center } from 'app-studio';
+
+export const FullPageLoader = () => (
+  <Center width="100vw" height="100vh">
+    <Loader size="xl">Loading application...</Loader>
+  </Center>
+);
+```
+
+### **Card Loading**
+Loader inside a card component.
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Card } from '@app-studio/components';
+import { Center } from 'app-studio';
+
+export const CardLoader = () => (
+  <Card width={300} height={200}>
+    <Center width="100%" height="100%">
+      <Loader>Loading content...</Loader>
+    </Center>
+  </Card>
+);
+```
+
+### **Button Loading**
+Loader integrated with button.
+
+```tsx
+import React, { useState } from 'react';
+import { Loader } from '@app-studio/components';
+import { Button, Horizontal } from 'app-studio';
+
+export const ButtonLoader = () => {
+  const [loading, setLoading] = useState(false);
+  
+  return (
+    <Button 
+      onClick={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+      }}
+      isDisabled={loading}
+    >
+      <Horizontal gap={10} alignItems="center">
+        {loading && <Loader size={16} loaderColor="white" />}
+        {loading ? 'Submitting...' : 'Submit'}
+      </Horizontal>
+    </Button>
+  );
+};
+```
+
+### **Different Types Showcase**
+Showcasing all loader types with customization.
+
+```tsx
+import React from 'react';
+import { Loader } from '@app-studio/components';
+import { Vertical, Horizontal, Text } from 'app-studio';
+
+export const LoaderShowcase = () => (
+  <Vertical gap={30}>
+    <Vertical gap={15}>
+      <Text fontWeight="bold">Spinner Variants</Text>
+      <Horizontal gap={20}>
+        <Loader type="spinner" size="sm" loaderColor="color-blue-500" />
+        <Loader type="spinner" size="md" loaderColor="color-emerald-500" />
+        <Loader type="spinner" size="lg" loaderColor="color-red-500" />
+      </Horizontal>
+    </Vertical>
+    
+    <Vertical gap={15}>
+      <Text fontWeight="bold">Dotted Variants</Text>
+      <Horizontal gap={20}>
+        <Loader type="dotted" size="sm" loaderColor="color-blue-500" />
+        <Loader type="dotted" size="md" loaderColor="color-emerald-500" />
+        <Loader type="dotted" size="lg" loaderColor="color-red-500" />
+      </Horizontal>
+    </Vertical>
+    
+    <Vertical gap={15}>
+      <Text fontWeight="bold">With Text</Text>
+      <Horizontal gap={30}>
+        <Loader type="spinner" loaderColor="color-blue-500" textColor="color-blue-500">
+          Loading...
+        </Loader>
+        <Loader 
+          type="dotted" 
+          loaderColor="color-emerald-500" 
+          textColor="color-emerald-500"
+          textPosition="right"
+        >
+          Processing
+        </Loader>
+      </Horizontal>
+    </Vertical>
+    
+    <Vertical gap={15}>
+      <Text fontWeight="bold">Different Speeds</Text>
+      <Horizontal gap={30}>
+        <Loader speed="slow">Slow</Loader>
+        <Loader speed="normal">Normal</Loader>
+        <Loader speed="fast">Fast</Loader>
+      </Horizontal>
+    </Vertical>
+  </Vertical>
+);
+```
+

package/docs/components/Menubar.mdx

@@ -0,0 +1,128 @@
+# Menubar
+
+A versatile component for structured navigation, displaying a list of interactive items and their sub-menus.
+
+### **Import**
+```tsx
+import { Menubar } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Menubar } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+import { EditIcon } from '@app-studio/components';
+
+export const DefaultMenubar = () => {
+  const items: any[] = [
+    {
+      id: 'file',
+      label: 'File',
+      items: [
+        {
+          id: 'new',
+          label: 'New',
+          icon: <EditIcon size={16} />,
+          onClick: () => console.log('New clicked'),
+        },
+        {
+          id: 'open',
+          label: 'Open',
+          onClick: () => console.log('Open clicked'),
+        },
+        { separator: true },
+        {
+          id: 'save',
+          label: 'Save',
+          onClick: () => console.log('Save clicked'),
+        },
+        {
+          id: 'save-as',
+          label: 'Save As',
+          onClick: () => console.log('Save As clicked'),
+        },
+      ],
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      items: [
+        {
+          id: 'undo',
+          label: 'Undo',
+          onClick: () => console.log('Undo clicked'),
+        },
+        {
+          id: 'redo',
+          label: 'Redo',
+          onClick: () => console.log('Redo clicked'),
+        },
+        { separator: true },
+        {
+          id: 'cut',
+          label: 'Cut',
+          onClick: () => console.log('Cut clicked'),
+        },
+        {
+          id: 'copy',
+          label: 'Copy',
+          onClick: () => console.log('Copy clicked'),
+        },
+        {
+          id: 'paste',
+          label: 'Paste',
+          onClick: () => console.log('Paste clicked'),
+        },
+      ],
+    },
+    {
+      id: 'view',
+      label: 'View',
+      items: [
+        {
+          id: 'zoom-in',
+          label: 'Zoom In',
+          onClick: () => console.log('Zoom In clicked'),
+        },
+        {
+          id: 'zoom-out',
+          label: 'Zoom Out',
+          onClick: () => console.log('Zoom Out clicked'),
+        },
+        { separator: true },
+        {
+          id: 'fullscreen',
+          label: 'Fullscreen',
+          onClick: () => console.log('Fullscreen clicked'),
+        },
+      ],
+    },
+    {
+      id: 'help',
+      label: 'Help',
+      items: [
+        {
+          id: 'documentation',
+          label: 'Documentation',
+          onClick: () => console.log('Documentation clicked'),
+        },
+        {
+          id: 'about',
+          label: 'About',
+          onClick: () => console.log('About clicked'),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <View width="100%">
+      <Text marginBottom={10}>Default Menubar</Text>
+      <Menubar items={items} />
+    </View>
+  );
+};
+```
+

package/docs/components/Message.mdx

@@ -0,0 +1,256 @@
+# Message
+
+Displays various types of messages with customizable content, icons, actions, and closing behavior.
+
+### **Import**
+```tsx
+import { Message } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { showMessage } from '@app-studio/components';
+// This is a functional component named 'DefaultDemo' that renders a Button component from the '../../Button/Button' path.
+export const DefaultDemo = () => {
+  return (
+    <Button
+      onClick={() =>
+        showMessage(
+          'success',
+          'Scheduled: Catch up',
+          'Friday, February 10, 2023 at 5:57 PM'
+        )
+      }
+    >
+      Show Toast
+    </Button>
+  );
+};
+```
+
+### **subtitle**
+The secondary text content of the message.
+
+- **Type:** `string`
+- **Default:** `undefined`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { showMessage } from '@app-studio/components';
+
+export const SubtitleDemo = () => {
+  return (
+    <Button
+      onClick={() =>
+        showMessage(
+          'error',
+          'Error Message',
+          'An error occurred while processing your request.'
+        )
+      }
+    >
+      Show Toast
+    </Button>
+  );
+};
+```
+
+### **variant**
+The type or category of the message, influencing its styling.
+
+- **Type:** `MessageType`
+- **Default:** `undefined`
+- **Possible Values:** `info, warning, error, success`
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+import { showMessage } from '@app-studio/components';
+import { MessageType } from '@app-studio/components';
+
+export const VariantDemo = () => {
+  return (
+    <Horizontal gap={10}>
+      {['info', 'error', 'warning', 'success'].map((variant, index) => (
+        <Button
+          key={index}
+          onClick={() =>
+            showMessage(
+              variant as MessageType,
+              `${variant.toUpperCase()} toast here!`
+            )
+          }
+          isAuto
+        >
+          Show {variant}
+        </Button>
+      ))}
+    </Horizontal>
+  );
+};
+```
+
+### **title**
+The main title or heading of the message.
+
+- **Type:** `string`
+- **Default:** `undefined`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { showMessage } from '@app-studio/components';
+
+export const TitleDemo = () => {
+  return (
+    <Button
+      onClick={() => showMessage('info', 'Here is some important information.')}
+    >
+      Show Toast
+    </Button>
+  );
+};
+```
+
+### **isClosable**
+Determines if the message can be manually closed by the user.
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Possible Values:** `true, false`
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+import { showMessage } from '@app-studio/components';
+
+export const IsClosableDemo = () => {
+  return (
+    <>
+      <Horizontal gap={10} position="relative">
+        <Button
+          onClick={() =>
+            showMessage(
+              'success',
+              'Scheduled: Catch up',
+              'Friday, February 10, 2023 at 5:57 PM',
+              {
+                isClosable: true,
+              }
+            )
+          }
+        >
+          Close Button
+        </Button>
+      </Horizontal>
+    </>
+  );
+};
+```
+
+### **action**
+A callback function to execute when the action button is clicked.
+
+- **Type:** `Function`
+- **Default:** `undefined`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { showMessage } from '@app-studio/components';
+// Defines the `ActionDemo` functional component that encapsulates the button interaction logic.
+export const ActionDemo = () => {
+  return (
+    <Button
+      onClick={() =>
+        showMessage(
+          'success',
+          'Scheduled: Catch up',
+          'Friday, February 10, 2023 at 5:57 PM'
+        )
+      }
+      isAuto
+    >
+      Add Calendar
+    </Button>
+  );
+};
+```
+
+### **showIcon**
+Determines if an icon corresponding to the message variant should be displayed.
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Possible Values:** `true, false`
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { showMessage } from '@app-studio/components';
+
+export const ShowIconDemo = () => {
+  return (
+    <Button
+      onClick={() =>
+        showMessage(
+          'warning',
+          'Scheduled: Catch up',
+          'Friday, February 10, 2023 at 5:57 PM',
+          {
+            showIcon: true,
+          }
+        )
+      }
+    >
+      Add Calendar
+    </Button>
+  );
+};
+```
+
+### **timeout**
+The duration in milliseconds after which the message automatically hides.
+
+- **Type:** `number`
+- **Default:** `3000`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { showMessage } from '@app-studio/components';
+
+export const TimeoutDemo = () => {
+  return (
+    <Button
+      onClick={() =>
+        showMessage(
+          'info',
+          'Info Message',
+          'Here is some important information.',
+          {
+            timeout: 1000,
+          }
+        )
+      }
+    >
+      Add Calendar
+    </Button>
+  );
+};
+```
+