@app-studio/components 0.10.17

package/docs/components/Chart.mdx

@@ -0,0 +1,136 @@
+# Chart
+
+A comprehensive charting component for visualizing data in various formats including bar, line, area, pie, and donut charts.
+
+### **Import**
+```tsx
+import { Chart, CHART_COLORS } from '@app-studio/components';
+```
+
+### **Quick Start (Bar Chart)**
+```tsx
+import React from 'react';
+import { Chart, CHART_COLORS, View } from '@app-studio/components';
+
+export const SimpleBarChart = () => (
+    <View height="300px">
+        <Chart
+            type="bar"
+            title="Monthly Sales"
+            data={{
+                labels: ['Jan', 'Feb', 'Mar'],
+                series: [{ name: 'Sales', data: [30, 50, 40], color: CHART_COLORS.blue }]
+            }}
+        />
+    </View>
+);
+```
+
+### **Chart Types**
+
+#### **Line & Area Charts**
+Useful for showing trends over time.
+
+```tsx
+<View height="300px">
+    <Chart
+        type="line" // or "area"
+        title="User Growth"
+        showGrid
+        showTooltips
+        data={{
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            series: [
+                { name: '2023', data: [100, 120, 140, 180], color: CHART_COLORS.purple },
+                { name: '2024', data: [150, 190, 220, 280], color: CHART_COLORS.teal }
+            ]
+        }}
+    />
+</View>
+```
+
+#### **Pie & Donut Charts**
+Useful for showing proportional data.
+
+```tsx
+<View height="300px">
+    <Chart
+        type="donut" // or "pie"
+        title="Device Usage"
+        dataPoints={[
+            { label: 'Mobile', value: 60, color: CHART_COLORS.indigo },
+            { label: 'Desktop', value: 30, color: CHART_COLORS.cyan },
+            { label: 'Tablet', value: 10, color: CHART_COLORS.gray }
+        ]}
+        onDataPointClick={(point, index) => alert(`Clicked ${point.label}`)}
+    />
+</View>
+```
+
+### **States (Loading, Error, No Data)**
+Handle various UI states gracefully with built-in props.
+
+```tsx
+import React, { useState } from 'react';
+import { Chart, Button, Vertical, Horizontal } from '@app-studio/components';
+
+export const ChartStateDemo = () => {
+    const [status, setStatus] = useState('normal'); 
+
+    return (
+        <Vertical gap={20}>
+            <Horizontal gap={10}>
+                <Button onClick={() => setStatus('loading')}>Load</Button>
+                <Button onClick={() => setStatus('error')}>Error</Button>
+                <Button onClick={() => setStatus('empty')}>Empty</Button>
+            </Horizontal>
+
+            <View height="300px">
+                <Chart
+                    type="bar"
+                    title="Revenue"
+                    isLoading={status === 'loading'}
+                    error={status === 'error' ? 'Connection Failed' : undefined}
+                    noData={status === 'empty'}
+                    data={{ labels: ['A', 'B'], series: [{ name: 'Val', data: [1, 2] }] }}
+                />
+            </View>
+        </Vertical>
+    );
+};
+```
+
+### **Interactive Events**
+- **onSeriesClick**: Called when a bar (bar chart) or point (line/area) is clicked.
+- **onDataPointClick**: Called when a slice (pie/donut) is clicked.
+
+```tsx
+<Chart
+    type="bar"
+    data={data}
+    onSeriesClick={(seriesName, index) => {
+        console.log(`Series: ${seriesName}, Index: ${index}`);
+    }}
+/>
+```
+
+### **Props Reference**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'bar' \| 'line' \| 'area' \| 'pie' \| 'donut'` | **Required** | The type of chart to render |
+| `data` | `ChartData` | - | Data for multi-series charts (bar, line, area) |
+| `dataPoints` | `ChartDataPoint[]` | - | Data points for single series charts (pie, donut) |
+| `title` | `string` | - | The title of the chart |
+| `showLegend` | `boolean` | `true` | Whether to show the legend |
+| `showGrid` | `boolean` | `true` | Show background grid (cartesian charts) |
+| `showTooltips` | `boolean` | `true` | Show tooltips on hover |
+| `animated` | `boolean` | `true` | Animate entry |
+| `isLoading` | `boolean` | `false` | Show loading overlay |
+| `error` | `ReactNode` | - | Show error message overlay |
+| `noData` | `boolean \| ReactNode` | - | Show no data message overlay |
+| `height` / `width` | `number \| string` | `200` | Dimensions of the chart container |
+| `views` | `ChartStyles` | - | Custom styles override object |
+
+### **Available Colors (CHART_COLORS)**
+`blue`, `green`, `purple`, `orange`, `red`, `teal`, `pink`, `indigo`, `yellow`, `cyan`.

package/docs/components/ChatWidget.mdx

@@ -0,0 +1,106 @@
+---
+title: ChatWidget
+description: A comprehensive chat interface component with support for various message types, attachments, and context integration.
+---
+
+# ChatWidget
+
+The `ChatWidget` provides a polished, interactive chat UI. It supports user and assistant messages, rich content types (including reasoning blocks and tool outputs), file attachments, and context-aware inputs.
+
+## Usage
+
+```tsx
+import { ChatWidget } from 'app-studio';
+import { useState } from 'react';
+
+const MyChat = () => {
+  const [messages, setMessages] = useState([
+    { id: '1', role: 'assistant', content: 'Hello! How can I help you?', timestamp: new Date() }
+  ]);
+
+  const handleSend = (text: string) => {
+    // Add user message
+    const userMsg = { id: Date.now().toString(), role: 'user', content: text, timestamp: new Date() };
+    setMessages(prev => [...prev, userMsg]);
+    
+    // Simulate reponse
+    setTimeout(() => {
+        setMessages(prev => [...prev, { 
+            id: (Date.now() + 1).toString(), 
+            role: 'assistant', 
+            content: 'I received your message!', 
+            timestamp: new Date() 
+        }]);
+    }, 1000);
+  };
+
+  return (
+    <div style={{ height: 500, width: 400 }}>
+      <ChatWidget
+        messages={messages}
+        onSubmit={handleSend}
+        variant="default"
+        inputPlaceholder="Type a message..."
+      />
+    </div>
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `messages` | `Message[]` | `[]` | Array of message objects to display. |
+| `inputValue` | `string` | - | Value for the message input (controlled mode). |
+| `onInputChange` | `(value: string) => void` | - | Callback when input value changes. |
+| `onSubmit` | `(message: string) => void` | - | Callback when a message is sent. |
+| `inputPlaceholder` | `string` | - | Placeholder text for the input area. |
+| `disableInput` | `boolean` | `false` | Whether the input area is disabled. |
+| `variant` | `'default' \| 'glassy' \| 'minimal'` | `'default'` | Visual style variant of the widget. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | General size scale of the widget. |
+| `showTimestamps` | `boolean` | `false` | Whether to display timestamps below messages. |
+| `enableAttachments` | `boolean` | `false` | Shows the attachment (paperclip) button. |
+| `enableContextPicker` | `boolean` | `false` | Shows the context picker (+ button) in the input area. |
+| `selectedContextElements` | `ContextElement[]` | `[]` | List of context elements currently selected/attached to the input. |
+| `isLoading` | `boolean` | `false` | Displays a loading indicator if true. |
+| `loadingText` | `string` | - | Text to display alongside the loading indicator. |
+| `maxHeight` | `string \| number` | - | Maximum height for the messages display area. |
+
+## Types
+
+### Message
+
+```typescript
+type MessageRole = 'user' | 'assistant';
+type MessageType = 'text' | 'error' | 'system' | 'tool';
+
+interface Message {
+  id: string;
+  role: MessageRole;
+  content: string;
+  timestamp: Date;
+  reasoning?: string; // Collapsible "thinking" process block
+  messageType?: MessageType; // Defaults to 'text'
+  attachments?: Attachment[];
+  contextElements?: ContextElement[];
+}
+```
+
+### ContextElement
+
+```typescript
+interface ContextElement {
+  id: string;
+  name: string;
+  tagName: string;
+  rect?: DOMRect;
+}
+```
+
+## Variants
+
+- **default**: Standard solid background appearance.
+- **glassy**: Semi-transparent background with blur effects (requires appropriate container/background).
+- **minimal**: Stripped down appearance, suitable for embedding in tighter spaces.
+

package/docs/components/Checkbox.mdx

@@ -0,0 +1,64 @@
+# Checkbox
+
+A customizable checkbox form element with optional label and various views.
+
+### **Import**
+  ```tsx
+  import { Checkbox } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+
+import { Checkbox } from '@app-studio/components';
+
+export const DefaultCheckbox = () => <Checkbox label="option" />;
+
+```
+
+### **colorScheme**
+Optional color scheme string that might allow customization of the checkbox's appearance.
+
+```tsx
+import React from 'react';
+import { Vertical, Checkbox } from '@app-studio/components';
+
+export const ColorCheckbox = () => (
+  <Vertical gap={15}>
+    {[
+      'theme-primary',
+      'theme-secondary',
+      'theme-error',
+      'theme-success',
+      'theme-warning',
+    ].map((color) => (
+      <Checkbox
+        key={color}
+        colorScheme={color}
+        label={color}
+        defaultIsSelected
+      />
+    ))}
+  </Vertical>
+);
+
+```
+
+### **shadow**
+An optional shadow or elevation effect that can be applied to the Checkbox component, accepting either a Shadow, Elevation, or generic CSSProperties object.
+
+```tsx
+import React from 'react';
+import { Checkbox } from '@app-studio/components';
+
+export const ShadowCheckbox = () => (
+  <Checkbox
+    id="shadowCheckbox"
+    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
+    defaultIsSelected
+  />
+);
+
+```
+

package/docs/components/ColorInput.mdx

@@ -0,0 +1,209 @@
+# ColorInput
+
+A form-integrated color picker component that allows users to select colors from a predefined palette or enter custom color values.
+
+### **Import**
+```tsx
+import { ColorInput } from '@app-studio/components';
+```
+
+### **Basic Usage**
+A simple color input with default settings.
+
+```tsx
+import React, { useState } from 'react';
+import { ColorInput } from '@app-studio/components';
+
+export const BasicColorInput = () => {
+  const [color, setColor] = useState('color-blue-500');
+
+  return (
+    <ColorInput
+      label="Background Color"
+      value={color}
+      onChange={setColor}
+      placeholder="Select a color"
+      helperText="Choose a background color for your theme"
+    />
+  );
+};
+```
+
+### **Variants**
+Different visual styles for the color input.
+
+```tsx
+import React from 'react';
+import { Vertical } from '@app-studio/components';
+import { ColorInput } from '@app-studio/components';
+
+export const ColorInputVariants = () => {
+  return (
+    <Vertical gap={16} width="300px">
+      <ColorInput
+        label="Default Variant"
+        variant="default"
+        defaultValue="color-blue-500"
+      />
+      
+      <ColorInput
+        label="Outline Variant"
+        variant="outline"
+        defaultValue="color-green-500"
+      />
+      
+      <ColorInput
+        label="None Variant"
+        variant="none"
+        defaultValue="color-purple-500"
+      />
+    </Vertical>
+  );
+};
+```
+
+### **Sizes**
+Different sizes for the color input.
+
+```tsx
+import React from 'react';
+import { Vertical } from '@app-studio/components';
+import { ColorInput } from '@app-studio/components';
+
+export const ColorInputSizes = () => {
+  return (
+    <Vertical gap={16} width="300px">
+      <ColorInput label="Extra Small" size="xs" defaultValue="color-red-500" />
+      <ColorInput label="Small" size="sm" defaultValue="color-orange-500" />
+      <ColorInput label="Medium" size="md" defaultValue="color-yellow-500" />
+      <ColorInput label="Large" size="lg" defaultValue="color-green-500" />
+      <ColorInput label="Extra Large" size="xl" defaultValue="color-blue-500" />
+    </Vertical>
+  );
+};
+```
+
+### **Custom Colors**
+Color input with custom color palette and options.
+
+```tsx
+import React, { useState } from 'react';
+import { ColorInput } from '@app-studio/components';
+
+export const CustomColorInput = () => {
+  const [color, setColor] = useState('');
+  
+  const customColors = [
+    { name: 'Brand Primary', value: '#3B82F6' },
+    { name: 'Brand Secondary', value: '#10B981' },
+    { name: 'Brand Accent', value: '#F59E0B' },
+    { name: 'Brand Dark', value: '#1F2937' },
+  ];
+
+  return (
+    <ColorInput
+      label="Brand Color"
+      value={color}
+      onChange={setColor}
+      predefinedColors={customColors}
+      showCustomInput={true}
+      showRecentColors={true}
+      helperText="Choose from brand colors or enter a custom color"
+    />
+  );
+};
+```
+
+### **Form Integration**
+Color input integrated with form handling.
+
+```tsx
+import React, { useState } from 'react';
+import { Vertical, Horizontal } from '@app-studio/components';
+import { ColorInput } from '@app-studio/components';
+import { Button } from '@app-studio/components';
+import { Text } from '@app-studio/components';
+
+export const ColorInputForm = () => {
+  const [backgroundColor, setBackgroundColor] = useState('color-blue-500');
+  const [textColor, setTextColor] = useState('color-white');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert(`Background: ${backgroundColor}, Text: ${textColor}`);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={16} width="400px">
+        <ColorInput
+          label="Background Color"
+          value={backgroundColor}
+          onChange={setBackgroundColor}
+          helperText="Choose the background color"
+        />
+        
+        <ColorInput
+          label="Text Color"
+          value={textColor}
+          onChange={setTextColor}
+          helperText="Choose the text color"
+        />
+
+        {/* Preview */}
+        <div 
+          style={{
+            padding: '16px',
+            borderRadius: '8px',
+            backgroundColor: backgroundColor,
+            color: textColor,
+            border: '1px solid #e5e7eb'
+          }}
+        >
+          <Text fontWeight="bold">Preview</Text>
+          <Text>This is how your theme will look</Text>
+        </div>
+
+        <Horizontal gap={8}>
+          <Button type="submit" variant="filled">
+            Apply Theme
+          </Button>
+          <Button 
+            type="button" 
+            variant="outline"
+            onClick={() => {
+              setBackgroundColor('color-blue-500');
+              setTextColor('color-white');
+            }}
+          >
+            Reset
+          </Button>
+        </Horizontal>
+      </Vertical>
+    </form>
+  );
+};
+```
+
+### **Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text for the color input |
+| `value` | `string` | - | Controlled value of the color input |
+| `defaultValue` | `string` | `''` | Default value for uncontrolled usage |
+| `onChange` | `(color: string) => void` | - | Callback when color changes |
+| `placeholder` | `string` | `'Select a color'` | Placeholder text |
+| `helperText` | `string` | - | Helper text below the input |
+| `error` | `boolean \| string` | `false` | Error state or message |
+| `isDisabled` | `boolean` | `false` | Whether the input is disabled |
+| `isReadOnly` | `boolean` | `false` | Whether the input is read-only |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Size of the input |
+| `variant` | `'default' \| 'outline' \| 'none'` | `'default'` | Visual variant |
+| `shape` | `'default' \| 'sharp' \| 'rounded' \| 'pillShaped'` | `'default'` | Border radius style |
+| `predefinedColors` | `PredefinedColor[]` | Default palette | Array of predefined colors |
+| `showCustomInput` | `boolean` | `true` | Whether to show custom color input |
+| `showRecentColors` | `boolean` | `true` | Whether to show recent colors |
+| `maxRecentColors` | `number` | `8` | Maximum number of recent colors |
+| `closeOnSelect` | `boolean` | `true` | Whether to close dropdown on selection |
+| `views` | `ColorInputStyles` | `{}` | Custom styling object |