@app-studio/web 0.9.39 → 0.9.41

package/docs/components/Checkbox.mdx

@@ -22,7 +22,7 @@ Optional color scheme string that might allow customization of the checkbox's ap
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Checkbox } from '../Checkbox';
 

package/docs/components/ColorInput.mdx

@@ -34,7 +34,7 @@ Different visual styles for the color input.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { ColorInput } from '../ColorInput';
 
 export const ColorInputVariants = () => {
@@ -67,7 +67,7 @@ Different sizes for the color input.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { ColorInput } from '../ColorInput';
 
 export const ColorInputSizes = () => {
@@ -119,10 +119,10 @@ Color input integrated with form handling.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical, Horizontal } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
 import { ColorInput } from '../ColorInput';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const ColorInputForm = () => {
   const [backgroundColor, setBackgroundColor] = useState('color.blue.500');

package/docs/components/ComboBox.mdx

@@ -38,7 +38,7 @@ Optional callback function triggered when an item is selected.
 ```tsx
 import React from 'react';
 import { ComboBox } from '../ComboBox';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { MessageLayout, showMessage } from '../../..';
 
 export const OnSelectDemo = () => {

package/docs/components/ContextMenu.mdx

@@ -11,7 +11,7 @@ A context menu component that appears when right-clicking on an element.
 ```tsx
 import React from 'react';
 import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 import { CopyIcon, EditIcon, DeleteIcon } from '../../Icon/Icon';
 
 export const DefaultContextMenu = () => {
@@ -62,7 +62,7 @@ Create nested context menus with submenus.
 ```tsx
 import React from 'react';
 import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 import { 
   CopyIcon, 
   EditIcon, 
@@ -126,7 +126,7 @@ Different visual styles for the context menu.
 ```tsx
 import React from 'react';
 import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 import { CopyIcon, EditIcon } from '../../Icon/Icon';
 
 export const ContextMenuVariants = () => {
@@ -169,7 +169,7 @@ Customize the appearance of the context menu.
 ```tsx
 import React from 'react';
 import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 import { CopyIcon, EditIcon } from '../../Icon/Icon';
 
 export const CustomContextMenu = () => {

package/docs/components/CountryPicker.mdx

@@ -64,7 +64,7 @@ Optional shape of the CountryPicker for visual styles
 import React from 'react';
 import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
 
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Shape } from '../CountryPicker/CountryPicker.type';
 
@@ -90,7 +90,7 @@ Variant for different visual types of CountryPicker
 import React from 'react';
 import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
 
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Variant } from '../CountryPicker/CountryPicker.type';
 

package/docs/components/DatePicker.mdx

@@ -21,7 +21,7 @@ The color scheme that changes the background color of the DatePicker.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { DatePicker } from '../DatePicker';
 

package/docs/components/DragAndDrop.mdx

@@ -11,7 +11,7 @@ A powerful drag and drop component for reordering lists and items with smooth an
 ```tsx
 import React, { useState } from 'react';
 import { DragAndDrop } from '@app-studio/web';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 
 export const BasicDragAndDrop = () => {
   const [items, setItems] = useState([
@@ -52,7 +52,7 @@ export const BasicDragAndDrop = () => {
 ```tsx
 import React, { useState } from 'react';
 import { DragAndDrop } from '@app-studio/web';
-import { View, Text, Horizontal } from 'app-studio';
+import { View, Text, Horizontal } from '@app-studio/web';
 import { DragHandleIcon, EditIcon, DeleteIcon } from '@app-studio/web';
 
 interface Task {
@@ -170,7 +170,7 @@ export const TaskDragAndDrop = () => {
 ```tsx
 import React, { useState } from 'react';
 import { DragAndDrop } from '@app-studio/web';
-import { View, Text, Horizontal, Vertical } from 'app-studio';
+import { View, Text, Horizontal, Vertical } from '@app-studio/web';
 
 interface KanbanItem {
   id: string;

package/docs/components/Drawer.mdx

@@ -1,29 +1,46 @@
-# Drawer
+# Drawer Component
 
-A drawer is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
+A flexible drawer/modal panel component that slides out from any edge of the screen. Useful for displaying additional content, forms, or settings without leaving the current page.
+
+## Features
+
+- **Flexible Placement**: Slide from left, right, top, or bottom
+- **Multiple Sizes**: Choose from xs, sm, md, lg, xl, or full width/height
+- **Compound Component**: Use sub-components for granular control
+- **Customizable Closing**: Prevent closing on overlay click when needed
+- **Smooth Animations**: CSS-based transitions for performance
+- **Accessible**: Built with modal best practices
+
+## Installation
+
+The Drawer component is part of the app-studio library and is already available in your project.
 
-### **Import**
 ```tsx
 import { Drawer } from '@app-studio/web';
 ```
 
-### **Default**
+## Basic Usage
+
+### Simple Drawer
+
 ```tsx
-import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
-import { Vertical } from 'app-studio';
+import { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button } from '@app-studio/web';
 
-export const DefaultDrawer = () => {
+export function DrawerExample() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+
       <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <Drawer.Header>Drawer Title</Drawer.Header>
+        <Drawer.Header onClose={() => setIsOpen(false)}>
+          Drawer Title
+        </Drawer.Header>
         <Drawer.Body>
-          <p>This is the content of the drawer.</p>
+          <p>Your content goes here</p>
         </Drawer.Body>
         <Drawer.Footer>
           <Button onClick={() => setIsOpen(false)}>Close</Button>
@@ -31,134 +48,257 @@ export const DefaultDrawer = () => {
       </Drawer>
     </>
   );
-};
+}
 ```
 
-### **Placement**
-The `placement` prop determines which side of the screen the drawer will appear from. It can be `top`, `right`, `bottom`, or `left`.
+### With Different Placements
 
 ```tsx
-import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
+<Drawer isOpen={isOpen} onClose={onClose} placement="left">
+  {/* Content */}
+</Drawer>
 
-export const PlacementDrawer = () => {
-  const [placement, setPlacement] = useState('right');
-  const [isOpen, setIsOpen] = useState(false);
+<Drawer isOpen={isOpen} onClose={onClose} placement="right">
+  {/* Content */}
+</Drawer>
 
-  const openDrawer = (p) => {
-    setPlacement(p);
-    setIsOpen(true);
-  };
+<Drawer isOpen={isOpen} onClose={onClose} placement="top">
+  {/* Content */}
+</Drawer>
 
-  return (
-    <Horizontal gap={10}>
-      <Button onClick={() => openDrawer('top')}>Top</Button>
-      <Button onClick={() => openDrawer('right')}>Right</Button>
-      <Button onClick={() => openDrawer('bottom')}>Bottom</Button>
-      <Button onClick={() => openDrawer('left')}>Left</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} placement={placement}>
-        <Drawer.Header>Drawer Title</Drawer.Header>
-        <Drawer.Body>
-          <p>This is the content of the drawer.</p>
-        </Drawer.Body>
-      </Drawer>
-    </Horizontal>
-  );
-};
+<Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+  {/* Content */}
+</Drawer>
 ```
 
-### **Size**
-The `size` prop controls the width or height of the drawer, depending on the placement.
+### With Different Sizes
+
+```tsx
+// xs: 320px
+<Drawer isOpen={isOpen} onClose={onClose} size="xs" />
+
+// sm: 380px
+<Drawer isOpen={isOpen} onClose={onClose} size="sm" />
+
+// md: 480px (default)
+<Drawer isOpen={isOpen} onClose={onClose} size="md" />
+
+// lg: 640px
+<Drawer isOpen={isOpen} onClose={onClose} size="lg" />
+
+// xl: 768px
+<Drawer isOpen={isOpen} onClose={onClose} size="xl" />
+
+// full: 100% width/height
+<Drawer isOpen={isOpen} onClose={onClose} size="full" />
+```
+
+## API Reference
+
+### Drawer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | Required | Controls whether the drawer is visible |
+| `onClose` | `() => void` | Required | Callback fired when the drawer should close |
+| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | Which edge the drawer slides from |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Width (for left/right) or height (for top/bottom) of drawer |
+| `isClosePrevented` | `boolean` | `false` | If true, clicking the overlay won't close the drawer |
+| `children` | `React.ReactNode` | - | Content of the drawer (typically sub-components) |
+
+### Drawer.Overlay Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | Required | Controls overlay visibility |
+| `onClose` | `() => void` | Required | Callback when overlay is clicked |
+| `isClosePrevented` | `boolean` | `false` | Prevent closing on overlay click |
+| `blur` | `number` | - | Optional blur amount for backdrop |
+| `children` | `React.ReactNode` | - | Drawer container element |
+
+### Drawer.Container Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | Placement of the drawer |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Size of the drawer |
+| `children` | `React.ReactNode` | - | Drawer content |
+
+### Drawer.Header Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClose` | `() => void` | - | Callback for close button |
+| `buttonPosition` | `'left' \| 'right'` | `'right'` | Position of the close button |
+| `children` | `React.ReactNode` | - | Header content (typically title text) |
+
+### Drawer.Body Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Main content of the drawer |
+
+### Drawer.Footer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Footer content (typically action buttons) |
+
+## Compound Components
+
+The Drawer uses a compound component pattern for flexible composition:
 
 ```tsx
-import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
+<Drawer isOpen={isOpen} onClose={onClose}>
+  <Drawer.Overlay>
+    <Drawer.Container>
+      <Drawer.Header onClose={onClose}>Title</Drawer.Header>
+      <Drawer.Body>Content</Drawer.Body>
+      <Drawer.Footer>Actions</Drawer.Footer>
+    </Drawer.Container>
+  </Drawer.Overlay>
+</Drawer>
+```
+
+However, you typically use the simpler form where the main Drawer component wraps the sub-components directly.
+
+## Common Patterns
 
-export const SizeDrawer = () => {
-  const [size, setSize] = useState('md');
+### Form in a Drawer
+
+```tsx
+export function FormDrawer() {
   const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState({ name: '', email: '' });
 
-  const openDrawer = (s) => {
-    setSize(s);
-    setIsOpen(true);
+  const handleSubmit = () => {
+    console.log('Form submitted:', formData);
+    setIsOpen(false);
   };
 
   return (
-    <Horizontal gap={10}>
-      <Button onClick={() => openDrawer('xs')}>xs</Button>
-      <Button onClick={() => openDrawer('sm')}>sm</Button>
-      <Button onClick={() => openDrawer('md')}>md</Button>
-      <Button onClick={() => openDrawer('lg')}>lg</Button>
-      <Button onClick={() => openDrawer('xl')}>xl</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} size={size}>
-        <Drawer.Header>Drawer Title</Drawer.Header>
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Form</Button>
+
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Drawer.Header onClose={() => setIsOpen(false)}>
+          Create New Item
+        </Drawer.Header>
         <Drawer.Body>
-          <p>This is the content of the drawer.</p>
+          <input
+            placeholder="Name"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          />
+          <input
+            placeholder="Email"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          />
         </Drawer.Body>
+        <Drawer.Footer>
+          <Button variant="secondary" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Submit</Button>
+        </Drawer.Footer>
       </Drawer>
-    </Horizontal>
+    </>
   );
-};
+}
 ```
 
-### **Prevent Closing**
-The `isClosePrevented` prop prevents the drawer from closing when the overlay is clicked.
+### Prevent Closing on Overlay Click
 
 ```tsx
-import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
+<Drawer
+  isOpen={isOpen}
+  onClose={onClose}
+  isClosePrevented={true}
+>
+  <Drawer.Header onClose={onClose}>
+    Important Action
+  </Drawer.Header>
+  <Drawer.Body>
+    This drawer can only be closed by clicking the close button
+  </Drawer.Body>
+</Drawer>
+```
 
-export const PreventCloseDrawer = () => {
-  const [isOpen, setIsOpen] = useState(false);
+### Nested Drawers
+
+```tsx
+export function NestedDrawers() {
+  const [drawer1Open, setDrawer1Open] = useState(false);
+  const [drawer2Open, setDrawer2Open] = useState(false);
 
   return (
     <>
-      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} isClosePrevented>
-        <Drawer.Header>Drawer Title</Drawer.Header>
+      <Button onClick={() => setDrawer1Open(true)}>Open First Drawer</Button>
+
+      <Drawer isOpen={drawer1Open} onClose={() => setDrawer1Open(false)} placement="left">
+        <Drawer.Header onClose={() => setDrawer1Open(false)}>
+          First Drawer
+        </Drawer.Header>
         <Drawer.Body>
-          <p>This drawer cannot be closed by clicking the overlay.</p>
+          <Button onClick={() => setDrawer2Open(true)}>Open Second Drawer</Button>
         </Drawer.Body>
-        <Drawer.Footer>
-          <Button onClick={() => setIsOpen(false)}>Close</Button>
-        </Drawer.Footer>
+      </Drawer>
+
+      <Drawer isOpen={drawer2Open} onClose={() => setDrawer2Open(false)} placement="right">
+        <Drawer.Header onClose={() => setDrawer2Open(false)}>
+          Second Drawer
+        </Drawer.Header>
+        <Drawer.Body>Content for second drawer</Drawer.Body>
       </Drawer>
     </>
   );
-};
+}
 ```
 
-### **Props**
+## Styling & Customization
 
-#### **Drawer**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `placement` | `top` \| `right` \| `bottom` \| `left` | `right` | The placement of the drawer. |
-| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | The size of the drawer. |
-| `isOpen` | `boolean` | - | If `true`, the drawer will be open. |
-| `onClose` | `() => void` | - | Callback fired when the drawer closes. |
-| `isClosePrevented` | `boolean` | `false` | If `true`, the drawer will not close when clicking the overlay. |
-| `children` | `React.ReactNode` | - | The children of the drawer. |
-
-#### **Drawer.Header**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `onClose` | `() => void` | - | Callback fired when the close button is clicked. |
-| `buttonPosition` | `left` \| `right` | `right` | The position of the close button. |
-| `children` | `React.ReactNode` | - | The content of the drawer header. |
+The Drawer component respects the `app-studio` theme. You can customize appearance using:
 
-#### **Drawer.Body**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | - | The content of the drawer body. |
+1. **CSS Classes** - Override via CSS
+2. **ViewProps** - Pass style props to adjust appearance
+3. **Placement and Size** - Primary customization levers
 
-#### **Drawer.Footer**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | - | The content of the drawer footer. |
+## Size Reference
+
+| Size | Width/Height |
+|------|-------------|
+| `xs` | 320px |
+| `sm` | 380px |
+| `md` | 480px (default) |
+| `lg` | 640px |
+| `xl` | 768px |
+| `full` | 100% |
+
+## Best Practices
+
+1. **Always provide onClose**: Ensure users can exit the drawer
+2. **Clear call-to-action**: Make it obvious what the drawer is for
+3. **Concise content**: Drawers work best for focused, task-specific content
+4. **Footer buttons**: Use Footer component for action buttons
+5. **Prevent accidental closes**: Use `isClosePrevented` for critical operations
+6. **Keyboard support**: Ensure proper focus management with your content
+7. **Mobile consideration**: Test drawer sizes on mobile - consider using `full` size on small screens
+
+## Examples
+
+Check out the example implementations:
+- Default Drawer: `src/components/Drawer/Examples/DefaultDrawer.tsx`
+- Placements: `src/components/Drawer/Examples/DrawerPlacements.tsx`
+- Sizes: `src/components/Drawer/Examples/DrawerSizes.tsx`
+
+## Accessibility
+
+- Drawer automatically manages focus when opening/closing
+- Overlay click triggers `onClose` callback (unless `isClosePrevented`)
+- Close button in Header provides clear exit path
+- Built-in animations respect `prefers-reduced-motion` preferences
+
+## Browser Support
 
+Works in all modern browsers that support CSS transforms and transitions.

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

@@ -18,7 +18,7 @@ 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 { Vertical } from '@app-studio/web';
 
 export const BasicFormExample = () => {
   // Define initial values
@@ -204,7 +204,7 @@ 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 { Button, Vertical, Text } from '@app-studio/web';
 
 export const FormikChatInputExample = () => {
   const mentionData = [