@app-studio/web 0.9.39 → 0.9.43

package/docs/components/DropdownMenu.mdx

@@ -1,81 +1,55 @@
 # DropdownMenu
 
-A dropdown menu component that appears when clicking on a trigger element.
+A versatile component for displaying a list of interactive items in a popup, triggered by another element.
 
 ### **Import**
-  ```tsx
-  import { DropdownMenu } from '@app-studio/web';
-  ```
+```tsx
+import { DropdownMenu } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { DropdownMenu } from '../DropdownMenu';
-import { Button } from '../../Button/Button';
-import { CopyIcon, EditIcon, DeleteIcon } from '../../Icon/Icon';
+import { DropdownMenu } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
+import {
+  Button,
+  CopyIcon,
+  EditIcon,
+  DeleteIcon,
+  DownloadIcon,
+  ShareIcon,
+} from 'src/components';
 
 export const DefaultDropdownMenu = () => {
-  const items = [
+  const handleCopy = () => alert('Copy clicked');
+  const handleEdit = () => alert('Edit clicked');
+  const handleDelete = () => alert('Delete clicked');
+  const handleDownload = () => alert('Download clicked');
+  const handleShare = () => alert('Share clicked');
+
+  const items: any[] = [
     {
       id: 'copy',
       label: 'Copy',
       icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
+      onClick: handleCopy,
     },
     {
       id: 'edit',
       label: 'Edit',
       icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
+      onClick: handleEdit,
     },
     {
       id: 'divider-1',
-      divider: true
+      divider: true,
     },
     {
       id: 'delete',
       label: 'Delete',
       icon: <DeleteIcon widthHeight={16} />,
-      onClick: () => alert('Delete clicked')
-    }
-  ];
-
-  return (
-    <DropdownMenu 
-      trigger={<Button>Open Menu</Button>}
-      items={items}
-    />
-  );
-};
-```
-
-### **Submenu**
-Create nested dropdown menus with submenus.
-
-```tsx
-import React from 'react';
-import { DropdownMenu } from '../DropdownMenu';
-import { Button } from '../../Button/Button';
-import { 
-  CopyIcon, 
-  EditIcon, 
-  DownloadIcon, 
-  ShareIcon 
-} from '../../Icon/Icon';
-
-export const SubmenuDropdownMenu = () => {
-  const items = [
-    {
-      id: 'copy',
-      label: 'Copy',
-      icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
-    },
-    {
-      id: 'edit',
-      label: 'Edit',
-      icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
+      onClick: handleDelete,
     },
     {
       id: 'more',
@@ -85,121 +59,29 @@ export const SubmenuDropdownMenu = () => {
           id: 'download',
           label: 'Download',
           icon: <DownloadIcon widthHeight={16} />,
-          onClick: () => alert('Download clicked')
+          onClick: handleDownload,
         },
         {
           id: 'share',
           label: 'Share',
           icon: <ShareIcon widthHeight={16} />,
-          onClick: () => alert('Share clicked')
-        }
-      ]
-    }
-  ];
-
-  return (
-    <DropdownMenu 
-      trigger={<Button>Open Menu</Button>}
-      items={items}
-    />
-  );
-};
-```
-
-### **Positioning**
-Control the position and alignment of the dropdown menu.
-
-```tsx
-import React from 'react';
-import { DropdownMenu } from '../DropdownMenu';
-import { Button } from '../../Button/Button';
-import { CopyIcon, EditIcon } from '../../Icon/Icon';
-
-export const PositionedDropdownMenu = () => {
-  const items = [
-    {
-      id: 'copy',
-      label: 'Copy',
-      icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
+          onClick: handleShare,
+        },
+      ],
     },
     {
-      id: 'edit',
-      label: 'Edit',
-      icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
-    }
-  ];
-
-  return (
-    <>
-      <DropdownMenu 
-        trigger={<Button>Bottom (Default)</Button>}
-        items={items}
-        side="bottom"
-        align="start"
-      />
-      
-      <DropdownMenu 
-        trigger={<Button>Top Center</Button>}
-        items={items}
-        side="top"
-        align="center"
-      />
-      
-      <DropdownMenu 
-        trigger={<Button>Right End</Button>}
-        items={items}
-        side="right"
-        align="end"
-      />
-    </>
-  );
-};
-```
-
-### **Custom Styling**
-Customize the appearance of the dropdown menu.
-
-```tsx
-import React from 'react';
-import { DropdownMenu } from '../DropdownMenu';
-import { Button } from '../../Button/Button';
-import { CopyIcon, EditIcon } from '../../Icon/Icon';
-
-export const CustomDropdownMenu = () => {
-  const items = [
-    {
-      id: 'copy',
-      label: 'Copy',
-      icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
+      id: 'disabled',
+      label: 'Disabled Option',
+      disabled: true,
     },
-    {
-      id: 'edit',
-      label: 'Edit',
-      icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
-    }
   ];
 
   return (
-    <DropdownMenu 
-      trigger={<Button variant="outline">Custom Menu</Button>}
-      items={items}
-      views={{
-        menu: {
-          backgroundColor: 'color.blue',
-          color: 'color.white',
-          borderRadius: '8px',
-        },
-        item: {
-          _hover: {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-          }
-        }
-      }}
-    />
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Text marginBottom={10}>Default Dropdown Menu</Text>
+      <DropdownMenu trigger={<Button>Open Menu</Button>} items={items} />
+    </Vertical>
   );
 };
 ```
+

package/docs/components/EmojiPicker.mdx

@@ -0,0 +1,84 @@
+# EmojiPicker
+
+A user-friendly tool for selecting and inserting emojis into text inputs or forms.
+
+### **Import**
+```tsx
+import { EmojiPicker } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { EmojiPicker } from '@app-studio/web';
+
+export const DefaultEmojiPicker = () => (
+  <EmojiPicker
+    label="Choose an emoji"
+    placeholder="Select an emoji"
+    onChange={(emoji) => console.log('Selected emoji:', emoji)}
+    onEmojiSelect={(emoji) => console.log('Selected emoji object:', emoji)}
+  />
+);
+```
+
+### **customEmojis**
+An array of custom Emoji objects to include in the picker.
+
+- **Type:** `Emoji[]`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { EmojiPicker } from '@app-studio/web';
+
+export const CustomEmojisEmojiPicker = () => (
+  <EmojiPicker
+    label="Custom emoji set"
+    customEmojis={[
+      {
+        emoji: '🚀',
+        name: 'rocket',
+        category: 'objects',
+        keywords: ['rocket', 'space', 'launch'],
+      },
+      {
+        emoji: '⭐',
+        name: 'star',
+        category: 'symbols',
+        keywords: ['star', 'favorite', 'rating'],
+      },
+      {
+        emoji: '🎯',
+        name: 'target',
+        category: 'activities',
+        keywords: ['target', 'goal', 'aim'],
+      },
+      {
+        emoji: '💎',
+        name: 'diamond',
+        category: 'objects',
+        keywords: ['diamond', 'gem', 'precious'],
+      },
+      {
+        emoji: '🔥',
+        name: 'fire',
+        category: 'symbols',
+        keywords: ['fire', 'hot', 'trending'],
+      },
+      {
+        emoji: '⚡',
+        name: 'lightning',
+        category: 'symbols',
+        keywords: ['lightning', 'fast', 'energy'],
+      },
+    ]}
+    enabledCategories={['recent', 'objects', 'symbols', 'activities']}
+    showSearch={true}
+    showRecentEmojis={true}
+    placeholder="Choose from custom emojis"
+    onChange={(emoji) => console.log('Selected custom emoji:', emoji)}
+  />
+);
+```
+

package/docs/components/File.mdx

@@ -1,8 +1,134 @@
 # File
 
-File component.
+A component for displaying file icons and images with customizable colors and theming support.
 
 ### **Import**
-  \`\`\`tsx
-  import { File } from '@app-studio/web';
-  \`\`\`
+```tsx
+import { FileSVG, FileImage } from '@app-studio/web';
+```
+
+### **FileSVG - Default**
+```tsx
+import React from 'react';
+import { FileSVG } from '@app-studio/web';
+
+export const DefaultFile = () => (
+  <FileSVG src="/icons/document.svg" width={48} height={48} />
+);
+```
+
+### **src**
+The source URL of the SVG or image file to display.
+
+- **Type:** `string`
+- **Required:** `true`
+
+```tsx
+import React from 'react';
+import { FileSVG } from '@app-studio/web';
+
+export const FileWithSource = () => (
+  <FileSVG 
+    src="/icons/pdf-icon.svg" 
+    width={64} 
+    height={64} 
+  />
+);
+```
+
+### **color**
+Optional color to apply to the SVG file. Uses theme-aware color system.
+
+- **Type:** `string`
+- **Default:** `undefined`
+
+```tsx
+import React from 'react';
+import { FileSVG } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+
+export const ColoredFiles = () => (
+  <Horizontal gap={15}>
+    <FileSVG src="/icons/file.svg" color="primary" width={48} height={48} />
+    <FileSVG src="/icons/file.svg" color="error" width={48} height={48} />
+    <FileSVG src="/icons/file.svg" color="success" width={48} height={48} />
+  </Horizontal>
+);
+```
+
+### **views**
+Custom styles for the container and image elements.
+
+- **Type:** `{ container?: ViewProps; image?: ImageProps }`
+
+```tsx
+import React from 'react';
+import { FileSVG } from '@app-studio/web';
+
+export const StyledFile = () => (
+  <FileSVG 
+    src="/icons/file.svg" 
+    width={64} 
+    height={64}
+    views={{
+      container: { 
+        backgroundColor: '#f0f0f0',
+        borderRadius: 8,
+        padding: 10
+      },
+      image: { 
+        opacity: 0.8 
+      }
+    }}
+  />
+);
+```
+
+### **FileImage**
+Display regular image files with standard image props.
+
+```tsx
+import React from 'react';
+import { FileImage } from '@app-studio/web';
+
+export const ImageFile = () => (
+  <FileImage 
+    path="/images/document.png" 
+    width={200} 
+    height={150}
+    borderRadius={8}
+  />
+);
+```
+
+### **themeMode**
+Override the theme mode for the file component.
+
+- **Type:** `'light' | 'dark'`
+- **Default:** Uses context theme
+
+```tsx
+import React from 'react';
+import { FileSVG } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+
+export const ThemedFiles = () => (
+  <Horizontal gap={15}>
+    <FileSVG 
+      src="/icons/file.svg" 
+      color="text" 
+      themeMode="light"
+      width={48} 
+      height={48} 
+    />
+    <FileSVG 
+      src="/icons/file.svg" 
+      color="text" 
+      themeMode="dark"
+      width={48} 
+      height={48} 
+    />
+  </Horizontal>
+);
+```
+

package/docs/components/Flow.mdx

@@ -11,7 +11,7 @@ A component for creating interactive workflow diagrams and flowcharts with suppo
 ```tsx
 import React, { useState } from 'react';
 import { Flow } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const BasicFlow = () => {
   // Initial nodes and edges
@@ -55,7 +55,7 @@ export const BasicFlow = () => {
 ```tsx
 import React, { useState } from 'react';
 import { Flow } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 import { FlowNode } from '@app-studio/web';
 
 export const FlowWithNodeAddition = () => {
@@ -101,7 +101,7 @@ export const FlowWithNodeAddition = () => {
 ```tsx
 import React, { useState } from 'react';
 import { Flow } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 import { FlowNode } from '@app-studio/web';
 
 export const FlowWithDragAndDrop = () => {

package/docs/components/Form.mdx

@@ -46,7 +46,7 @@ import { Formik } from 'formik';
 import * as Yup from 'yup';
 import { FormikForm, FormikTextField, FormikCheckbox } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const BasicForm = () => {
   const initialValues = {
@@ -134,7 +134,7 @@ import {
   FormikTagInput
 } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const AdvancedForm = () => {
   const initialValues = {
@@ -254,7 +254,7 @@ import { Formik } from 'formik';
 import * as Yup from 'yup';
 import { FormikForm, FormikTextField, FormikPassword } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const ValidationForm = () => {
   const initialValues = {
@@ -342,7 +342,7 @@ import { Formik, FieldArray } from 'formik';
 import * as Yup from 'yup';
 import { FormikForm, FormikTextField } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Vertical, Horizontal } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
 import { PlusIcon, MinusIcon } from '@app-studio/web';
 
 export const DynamicForm = () => {

package/docs/components/Formik.mdx

@@ -14,11 +14,11 @@ A basic form with Formik integration.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikTextField } from '../Formik.TextField';
-import { FormikCheckbox } from '../Formik.Checkbox';
-import { Button } from '../../Button/Button';
-import { Vertical } from 'app-studio';
+import { FormikForm } from '@app-studio/web';
+import { FormikTextField } from '@app-studio/web';
+import { FormikCheckbox } from '@app-studio/web';
+import { Button } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 
 export const BasicFormExample = () => {
   // Define initial values
@@ -90,9 +90,9 @@ Text input field integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikTextField } from '../Formik.TextField';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikTextField } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikTextFieldExample = () => {
   return (
@@ -128,9 +128,9 @@ Multi-line text input integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikTextArea } from '../Formik.TextArea';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikTextArea } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikTextAreaExample = () => {
   return (
@@ -166,9 +166,9 @@ Checkbox input integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikCheckbox } from '../Formik.Checkbox';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikCheckbox } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikCheckboxExample = () => {
   return (
@@ -202,9 +202,9 @@ Chat input with file upload, mentions, and auto-completion integrated with Formi
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikChatInput } from '../Formik.ChatInput';
-import { Button, Vertical, Text } from 'app-studio';
+import { FormikForm } from '@app-studio/web';
+import { FormikChatInput } from '@app-studio/web';
+import { Button, Vertical, Text } from '@app-studio/web';
 
 export const FormikChatInputExample = () => {
   const mentionData = [
@@ -289,9 +289,9 @@ Color picker input integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikColorInput } from '../Formik.ColorInput';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikColorInput } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikColorInputExample = () => {
   return (
@@ -349,9 +349,9 @@ Select dropdown integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikSelect } from '../Formik.Select';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikSelect } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikSelectExample = () => {
   const options = [
@@ -392,9 +392,9 @@ Toggle switch integrated with Formik.
 ```tsx
 import React from 'react';
 import { Formik } from 'formik';
-import { FormikForm } from '../Formik.Form';
-import { FormikSwitch } from '../Formik.Switch';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikSwitch } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikSwitchExample = () => {
   return (
@@ -425,9 +425,9 @@ Date picker integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikDatePicker } from '../Formik.DatePicker';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikDatePicker } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikDatePickerExample = () => {
   return (
@@ -462,9 +462,9 @@ Country selection dropdown integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikCountryPicker } from '../Formik.CountryPicker';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikCountryPicker } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikCountryPickerExample = () => {
   return (
@@ -499,9 +499,9 @@ Password input with show/hide toggle integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikPassword } from '../Formik.Password';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikPassword } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikPasswordExample = () => {
   return (
@@ -538,9 +538,9 @@ Combobox with search functionality integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikComboBox } from '../Formik.ComboBox';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikComboBox } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikComboBoxExample = () => {
   const items = [
@@ -583,9 +583,9 @@ Slider component integrated with Formik.
 import React from 'react';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { FormikForm } from '../Formik.Form';
-import { FormikSlider } from '../Formik.Slider';
-import { Button } from '../../Button/Button';
+import { FormikForm } from '@app-studio/web';
+import { FormikSlider } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
 export const FormikSliderExample = () => {
   return (