@app-studio/web 0.9.85 → 0.9.88

package/docs/app-studio/Events.md

@@ -203,7 +203,7 @@ This example achieves the same result as the previous one but uses the more conc
       on={{
         firstChild: { borderTop: '1px solid color-gray-200' },
         lastChild: { borderBottom: 'none' },
-        hover: { backgroundColor: 'color-gray.50' }
+        hover: { backgroundColor: 'color-gray-50' }
       }}
     >
       {item.name}

package/docs/components/AttachmentGroup.md

@@ -0,0 +1,45 @@
+
+# AttachmentGroup
+
+The `AttachmentGroup` component displays a list of file attachments, typically used in chat interfaces or upload previews. It supports displaying thumbnails for images and videos, and generic icons for other file types. It also provides a mechanism to remove attachments.
+
+## Import
+
+```tsx
+import { AttachmentGroup } from 'src/components/AttachmentGroup/AttachmentGroup';
+```
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import { AttachmentGroup } from 'src/components/AttachmentGroup/AttachmentGroup';
+
+const MyComponent = () => {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const handleRemove = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <AttachmentGroup 
+      files={files} 
+      onRemove={handleRemove} 
+      showPreviews={true} 
+    />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|Data | | | |
+| `files` | `File[]` | (required) | Array of File objects to display. |
+| `onRemove` | `(index: number) => void` | (required) | Callback function fired when the remove button is clicked. |
+| `showPreviews` | `boolean` | `false` | Whether to show hover previews for supported file types. |
+| `layout` | `'inline' \| 'grid'` | `'inline'` | Layout mode for the attachments. |
+| `maxHeight` | `string` | `'120px'` | Maximum height of the container container before scrolling. |
+| `sandboxId` | `string` | - | Optional ID for sandbox context (if applicable). |
+| `views` | `object` | `{}` | Custom styles for internal sub-components (`container`, `item`, `name`, etc.). |

package/docs/components/Badge.mdx

@@ -109,12 +109,67 @@ export const SizeDemo = () => (
 );
 ```
 
+### **children**
+Renders children content inside the badge, allowing for custom compositions.
+
+```tsx
+import React from 'react';
+import { Badge } from '@app-studio/web';
+import { Text } from 'app-studio';
+
+export const ChildrenDemo = () => (
+  <Badge>
+    <Text color="color-white">Custom Children</Text>
+  </Badge>
+);
+```
+
+### **icon**
+Displays an icon within the badge layout.
+
+```tsx
+import React from 'react';
+import { Badge } from '@app-studio/web';
+import { View } from 'app-studio';
+
+const Icon = () => (
+  <View width="12px" height="12px" backgroundColor="currentColor" borderRadius="50%" />
+);
+
+export const IconDemo = () => (
+    <Horizontal gap={10}>
+        <Badge icon={<Icon />} content="With Icon" />
+    </Horizontal>
+);
+```
+
+### **pastil**
+Shows a status dot (pastil) inside the badge. Can be a boolean or a specific status color string.
+
+- **Type:** `boolean | string`
+- **Possible Values:** `true, default, info, success, warning, error` or any color string
+
+```tsx
+import React from 'react';
+import { Badge } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+
+export const PastilDemo = () => (
+  <Horizontal gap={10}>
+    <Badge pastil={true} content="Active" />
+    <Badge pastil="success" content="Success" />
+    <Badge pastil="warning" content="Warning" />
+    <Badge pastil="error" content="Error" />
+  </Horizontal>
+);
+```
+
 ### **shape**
 Defines possible values for the shape of a UI component such as buttons or badges.
 
 - **Type:** `Shape`
-- **Default:** `pillShaped`
-- **Possible Values:** `sharp, rounded, pillShaped`
+- **Default:** `pill`
+- **Possible Values:** `square, rounded, pill`
 
 ```tsx
 import React from 'react';
@@ -124,9 +179,9 @@ import { Shape } from '@app-studio/web';
 import { View } from 'app-studio';
 export const ShapeDemo = () => (
   <Horizontal gap={15}>
-    {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
+    {['square', 'rounded', 'pill'].map((shape, index) => (
       <View position="relative" key={index}>
-        <Badge content={border} shape={border as Shape} />
+        <Badge content={shape} shape={shape as Shape} />
       </View>
     ))}
   </Horizontal>

package/docs/components/Center.mdx

@@ -50,7 +50,7 @@ import { Text, Vertical } from '@app-studio/web';
 import { EmptyIcon } from '@app-studio/web';
 
 export const EmptyStateCenter = () => (
-  <Center height={400} backgroundColor="color-gray.50" borderRadius={12}>
+  <Center height={400} backgroundColor="color-gray-50" borderRadius={12}>
     <Vertical gap={20} alignItems="center" textAlign="center">
       <EmptyIcon widthHeight={64} color="color-gray-400" />
       <Vertical gap={8} alignItems="center">
@@ -288,7 +288,7 @@ import { ErrorIcon } from '@app-studio/web';
 export const ErrorStateCenter = () => (
   <Center
     height={400}
-    backgroundColor="color-red.50"
+    backgroundColor="color-red-50"
     borderRadius={12}
     border="1px solid"
     borderColor="color-red-200"
@@ -388,7 +388,7 @@ export const ImagePlaceholder = () => (
 
 **Feature Highlight:**
 ```tsx
-<Center height={300} backgroundColor="color-blue.50">
+<Center height={300} backgroundColor="color-blue-50">
   <Vertical gap={16} alignItems="center" textAlign="center">
     <FeatureIcon widthHeight={48} />
     <Text fontSize={20} fontWeight="bold">Feature Name</Text>

package/docs/components/ColorPicker.mdx

@@ -388,7 +388,7 @@ export const StyledColorPicker = () => (
         borderColor: 'color-blue-500',
       },
       dropdown: {
-        backgroundColor: 'color-coolGray.50',
+        backgroundColor: 'color-coolGray-50',
         padding: 20,
       },
       colorSwatch: {

package/docs/components/ComboBox.mdx

@@ -70,7 +70,9 @@ export const OnSelectDemo = () => {
         id="onSelect"
         items={items}
         onSelect={(item) => {
-          showMessage('success', `Item selected: ${item.label}`);
+          if (!Array.isArray(item)) {
+            showMessage('success', `Item selected: ${item.label}`);
+          }
         }}
       />
       <MessageLayout position="bottomRight" />

package/docs/components/DropZone.md

@@ -0,0 +1,82 @@
+
+# DropZone
+
+The `DropZone` component provides a drag-and-drop area for file uploads. It extends the functionality of the `Uploader` component but offers a specific UI optimized for dropping files. It supports single and multiple file selection, custom content, and image previews.
+
+## Import
+
+```tsx
+import { DropZone } from 'src/components/DropZone/DropZone';
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { DropZone } from 'src/components/DropZone/DropZone';
+
+const MyComponent = () => {
+  const handleFileSelect = (file: File) => {
+    console.log('Selected:', file);
+  };
+
+  return (
+    <DropZone onFileSelect={handleFileSelect} />
+  );
+};
+```
+
+### Multiple Files with Preview
+
+```tsx
+import { DropZone } from 'src/components/DropZone/DropZone';
+
+const MyComponent = () => {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const handleMultipleFileSelect = (newFiles: File[]) => {
+    setFiles(prev => [...prev, ...newFiles]);
+  };
+
+  const handleRemove = (index: number) => {
+    setFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <DropZone 
+      multiple
+      selectedFiles={files}
+      onMultipleFileSelect={handleMultipleFileSelect}
+      onRemove={handleRemove}
+      text="Drop files here"
+    />
+  );
+};
+```
+
+## Props
+
+The `DropZone` component accepts all props from `UseUploadProps` (shared with `Uploader`) plus the following specific props:
+
+| Prop | Type | Default | Description |
+|Data | | | |
+| `children` | `React.ReactNode` | - | Custom content to render inside the drop zone when no preview is active. |
+| `text` | `string` | `'Drop files...'` | Text to display when no children are provided. |
+| `textProps` | `TextProps` | - | Props for the text element. |
+| `containerProps` | `ViewProps` | - | Props for the main container (e.g., height, background). |
+| `disabled` | `boolean` | `false` | Disables drag-and-drop and click interactions. |
+| `previewUrl` | `string` | - | External URL to display as a preview image (overrides internal logic). |
+| `imageProps` | `ImageProps` | - | Props for the preview image element. |
+| `selectedFiles` | `File[]` | - | Array of files to display (using `AttachmentGroup`) in multi-file mode. |
+| `onRemove` | `(index: number) => void` | - | Callback when a file is removed from the selected list in multi-file mode. |
+
+### Inherited Props (UseUploadProps)
+
+| Prop | Type | Description |
+|Data | | |
+| `accept` | `string` | Accepted file types (e.g., `'image/*'`). |
+| `multiple` | `boolean` | Whether multiple files can be selected. |
+| `onFileSelect` | `(file: File) => void` | Callback for single file selection. |
+| `onMultipleFileSelect` | `(files: File[]) => void` | Callback for multiple file selection. |
+| `validateFile` | `(file: File) => string \| null` | Function to validate files before acceptance. |

package/docs/components/Formik.mdx

@@ -4,7 +4,7 @@ Formik integration components for form state management and validation.
 
 ### **Import**
   ```tsx
-  import { FormikForm, FormikTextField, FormikCheckbox, FormikChatInput, FormikColorInput, FormikSelect, FormikSwitch, FormikTextArea, FormikDatePicker, FormikCountryPicker, FormikPassword, FormikComboBox, FormikSlider } from '@app-studio/web';
+  import { FormikForm, FormikTextField, FormikCheckbox, FormikChatInput, FormikColorInput, FormikSelect, FormikSwitch, FormikTextArea, FormikDatePicker, FormikCountryPicker, FormikPassword, FormikComboBox, FormikSlider, FormikIconPicker, FormikEmojiPicker, FormikOTPInput, FormikRadio, FormikSelector, FormikTagInput, FormikToggle, FormikToggleGroup, FormikUploader } from '@app-studio/web';
   ```
 
 ### **Basic Form**
@@ -619,3 +619,272 @@ export const FormikSliderExample = () => {
   );
 };
 ```
+
+### **FormikIconPicker**
+Icon picker integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikIconPicker, Button } from '@app-studio/web';
+
+export const FormikIconPickerExample = () => (
+  <Formik
+    initialValues={{ icon: 'user' }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikIconPicker
+          name="icon"
+          label="Select Icon"
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikEmojiPicker**
+Emoji picker integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikEmojiPicker, Button } from '@app-studio/web';
+
+export const FormikEmojiPickerExample = () => (
+  <Formik
+    initialValues={{ emoji: '👍' }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikEmojiPicker
+          name="emoji"
+          label="Select Emoji"
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikOTPInput**
+OTP input integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikOTPInput, Button } from '@app-studio/web';
+
+export const FormikOTPInputExample = () => (
+  <Formik
+    initialValues={{ otp: '' }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikOTPInput
+          name="otp"
+          label="Verification Code"
+          length={6}
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Verify
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikRadio**
+Radio button group integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikRadio, Button } from '@app-studio/web';
+
+export const FormikRadioExample = () => (
+  <Formik
+    initialValues={{ gender: '' }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikRadio
+          name="gender"
+          label="Gender"
+          options={[
+            { label: 'Male', value: 'male' },
+            { label: 'Female', value: 'female' },
+            { label: 'Other', value: 'other' },
+          ]}
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikSelector**
+Selector component integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikSelector, Button } from '@app-studio/web';
+
+export const FormikSelectorExample = () => (
+  <Formik
+    initialValues={{ plan: 'basic' }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikSelector
+          name="plan"
+          label="Subscription Plan"
+          options={[
+            { label: 'Basic', value: 'basic', description: 'Basic plan description' },
+            { label: 'Pro', value: 'pro', description: 'Pro plan description' },
+          ]}
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikTagInput**
+Tag input integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikTagInput, Button } from '@app-studio/web';
+
+export const FormikTagInputExample = () => (
+  <Formik
+    initialValues={{ tags: [] }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikTagInput
+          name="tags"
+          label="Tags"
+          placeholder="Type and press enter..."
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikToggle**
+Toggle switch integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikToggle, Button } from '@app-studio/web';
+
+export const FormikToggleExample = () => (
+  <Formik
+    initialValues={{ notifications: true }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikToggle
+          name="notifications"
+          label="Enable Notifications"
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikToggleGroup**
+Group of toggles integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikToggleGroup, Button } from '@app-studio/web';
+
+export const FormikToggleGroupExample = () => (
+  <Formik
+    initialValues={{ alignment: 'left' }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikToggleGroup
+          name="alignment"
+          label="Text Alignment"
+          options={[
+            { label: 'Left', value: 'left' },
+            { label: 'Center', value: 'center' },
+            { label: 'Right', value: 'right' },
+          ]}
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```
+
+### **FormikUploader**
+File uploader integrated with Formik.
+
+```tsx
+import React from 'react';
+import { Formik } from 'formik';
+import { FormikForm, FormikUploader, Button } from '@app-studio/web';
+
+export const FormikUploaderExample = () => (
+  <Formik
+    initialValues={{ files: [] }}
+    onSubmit={(values) => alert(JSON.stringify(values))}
+  >
+    {({ handleSubmit }) => (
+      <FormikForm>
+        <FormikUploader
+          name="files"
+          label="Upload Files"
+          multiple
+        />
+        <Button type="submit" onClick={handleSubmit} marginTop={16}>
+          Submit
+        </Button>
+      </FormikForm>
+    )}
+  </Formik>
+);
+```

package/docs/components/IconPicker.mdx

@@ -0,0 +1,106 @@
+# IconPicker
+
+A dropdown component for selecting icons from a predefined list (Lucide icons).
+
+### **Import**
+```tsx
+import { IconPicker } from '@app-studio/web';
+```
+
+### **Basic Usage**
+```tsx
+import React, { useState } from 'react';
+import { IconPicker } from '@app-studio/web';
+
+export const BasicUsage = () => {
+  const [icon, setIcon] = useState('user');
+
+  return (
+    <IconPicker
+      label="Select Icon"
+      value={icon}
+      onChange={setIcon}
+      placeholder="Choose an icon"
+    />
+  );
+};
+```
+
+### **Size**
+The `size` prop controls the size of the trigger and the icons.
+- **Type:** `Size`
+- **Default:** `md`
+- **Possible Values:** `xs, sm, md, lg`
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/web';
+
+export const SizeDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker size="sm" placeholder="Small (sm)" />
+    <IconPicker size="md" placeholder="Medium (md)" />
+    <IconPicker size="lg" placeholder="Large (lg)" />
+  </Vertical>
+);
+```
+
+### **Variant**
+The `variant` prop controls the visual style of the trigger.
+- **Type:** `Variant`
+- **Default:** `default`
+- **Possible Values:** `default, outline, filled`
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/web';
+
+export const VariantDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker variant="default" placeholder="Default" />
+    <IconPicker variant="outline" placeholder="Outline" />
+    <IconPicker variant="filled" placeholder="Filled" />
+  </Vertical>
+);
+```
+
+### **Shape**
+The `shape` prop controls the border radius of the trigger.
+- **Type:** `Shape`
+- **Default:** `default`
+- **Possible Values:** `default, rounded, square, pill`
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/web';
+
+export const ShapeDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker shape="default" placeholder="Default" />
+    <IconPicker shape="rounded" placeholder="Rounded" />
+    <IconPicker shape="square" placeholder="Square" />
+    <IconPicker shape="pill" placeholder="Pill" />
+  </Vertical>
+);
+```
+
+### **States**
+The component supports various states like `disabled`, `readOnly`, and `error`.
+
+```tsx
+import React from 'react';
+import { IconPicker, Vertical } from '@app-studio/web';
+
+export const StatesDemo = () => (
+  <Vertical gap={10}>
+    <IconPicker label="Disabled" isDisabled placeholder="Disabled" />
+    <IconPicker label="Read Only" isReadOnly value="lock" />
+    <IconPicker label="Error" error helperText="This field has an error" />
+  </Vertical>
+);
+```
+
+### **Props**
+
+| Prop | Type | Default | Description |
+|Data to come here|

package/docs/components/OTPInput.mdx

@@ -55,7 +55,7 @@ export const CustomizedOTPInput = () => {
         views={{
           container: {
             borderColor: 'theme-primary',
-            backgroundColor: 'color-gray.50',
+            backgroundColor: 'color-gray-50',
           },
           input: {
             color: 'theme-primary',
@@ -161,7 +161,7 @@ export const StepValuesOTPInput = () => {
         views={{
           container: {
             borderColor: 'theme-primary',
-            backgroundColor: 'color-gray.50',
+            backgroundColor: 'color-gray-50',
           },
           input: {
             color: 'theme-primary',