@app-studio/web 0.9.45 → 0.9.47

package/docs/components/Icon.mdx

@@ -118,63 +118,96 @@ export const IconOrientations = () => (
 );
 ```
 
-### **Available Icons**
-
-The icon library includes a comprehensive set of icons organized by category:
-
-**Navigation & Actions:**
-- `ArrowIcon` - Directional arrows with orientation support
-- `ChevronIcon` - Chevron arrows for dropdowns and navigation
-- `CloseIcon` - Close/X icon for modals and dismissible elements
-- `MenuIcon` - Hamburger menu icon
-- `BackIcon` - Back navigation arrow
-- `ForwardIcon` - Forward navigation arrow
-
-**File & Media:**
-- `UploadIcon` - File upload indicator
-- `DownloadIcon` - File download indicator
-- `ImageIcon` - Image file representation
-- `VideoIcon` - Video file representation
-- `FileIcon` - Generic file representation
-- `FolderIcon` - Folder/directory representation
-- `AttachmentIcon` - File attachment indicator
-
-**User Interface:**
-- `EditIcon` - Edit/pencil icon for editing actions
-- `DeleteIcon` / `DustBinIcon` - Delete/trash actions
-- `CopyIcon` - Copy to clipboard actions
-- `SearchIcon` - Search functionality
-- `FilterIcon` - Filter/sort functionality
-- `SettingsIcon` - Settings and configuration
-- `InfoIcon` - Information and help
-- `WarningIcon` - Warning and alert states
-- `ErrorIcon` - Error states
-- `CheckIcon` - Success and confirmation
-- `PlusIcon` - Add/create actions
-- `MinusIcon` - Remove/subtract actions
-
-**Social & Communication:**
-- `FacebookIcon` - Facebook social media
-- `XIcon` - X (Twitter) social media
-- `MessageIcon` - Chat and messaging
-- `MailIcon` - Email communication
-- `PhoneIcon` - Phone and calling
-- `ShareIcon` - Share functionality
-
-**Media Controls:**
-- `PlayIcon` - Play media content
-- `PauseIcon` - Pause media content
-- `StopIcon` - Stop media content
-- `VolumeIcon` - Audio volume control
-- `MuteIcon` - Mute audio
-
-**Status & Indicators:**
-- `LoadingSpinnerIcon` - Loading and progress states
-- `StarIcon` - Ratings and favorites
-- `HeartIcon` - Likes and favorites
-- `BookmarkIcon` - Bookmarks and saved items
-- `BellIcon` - Notifications
-- `BadgeIcon` - Status badges
+### **Available Icons (complete list)**
+
+Below is the complete list of exported icons with short English descriptions. Use the "Icon Grid Display" example to preview them.
+
+- `ArrowIcon` — Directional arrow with orientation (up/right/down/left).
+- `AttachmentIcon` — Attach a file (paperclip).
+- `AudioIcon` — Speaker with sound waves (audio on).
+- `BatteryIcon` — Battery/energy status.
+- `BluetoothIcon` — Bluetooth logo, wireless connectivity.
+- `BoldArrowIcon` — Thick arrow for primary action.
+- `BookmarkIcon` — Bookmark / saved item.
+- `CalendarIcon` — Calendar / date / agenda.
+- `CameraIcon` — Camera / image capture.
+- `ChartIcon` — Document with lines, report/graph context.
+- `CheckIcon` — Validation / success (tick).
+- `ChevronIcon` — Chevron (navigation, expand/collapse).
+- `ClockIcon` — Clock / time / deadlines.
+- `CloseEyeIcon` — Eye-off, hide/mask content.
+- `CloseIcon` — Close / dismiss (cross).
+- `CloudIcon` — Cloud / storage / weather.
+- `CopyIcon` — Copy to clipboard.
+- `CropIcon` — Crop tool / image cropping.
+- `DeleteIcon` — Delete / trash.
+- `DocumentIcon` — Document/file with lines.
+- `DragHandleIcon` — Drag handle (grid of dots).
+- `DragHandleLinesIcon` — Drag handle (two lines).
+- `DustBinIcon` — Trash bin (alias of Delete).
+- `EditIcon` — Edit/modify (pencil).
+- `ErrorIcon` — Error / critical state.
+- `ExternalLinkIcon` — Open in new tab / external link.
+- `FacebookIcon` — Facebook social network.
+- `FileIcon` — Generic file.
+- `FilterIcon` — Filter / sort.
+- `FolderIcon` — Folder / directory.
+- `GiftIcon` — Gift / reward / promo.
+- `HeartIcon` — Like / favorite / love.
+- `HelpIcon` — Help / support / question mark.
+- `HomeIcon` — Home / main page.
+- `ImageIcon` — Image / media.
+- `InfoIcon` — Information / details.
+- `InstagramIcon` — Instagram social network.
+- `LikeIcon` — Thumbs up / like.
+- `LinkedinIcon` — LinkedIn social network.
+- `LoadingSpinnerIcon` — Loading / in progress.
+- `LocationIcon` — Location / pin.
+- `LockIcon` — Locked / secure.
+- `LogoutIcon` — Logout / sign out.
+- `MagicWandIcon` — Assistant / automation / magic.
+- `MenuIcon` — Hamburger menu.
+- `MicrophoneIcon` — Microphone / audio input.
+- `MinusIcon` — Minus / reduce / remove.
+- `MoonIcon` — Moon / dark mode / night.
+- `NotificationIcon` — Notifications / alert.
+- `OpenEyeIcon` — Eye-on, show/visibility.
+- `PanelIcon` — Layout with side panel.
+- `PauseIcon` — Pause media.
+- `PlayIcon` — Play media.
+- `PlusIcon` — Plus / add / create.
+- `PowerOffIcon` — Power / turn off.
+- `PrintIcon` — Print.
+- `ProfileIcon` — Profile / user.
+- `RefreshIcon` — Refresh / reload.
+- `RotateIcon` — Rotate / pivot.
+- `SaveIcon` — Save / persist.
+- `SearchIcon` — Search.
+- `SendIcon` — Send (paper plane).
+- `SettingsIcon` — Settings / configuration.
+- `ShapeIcon` — Shapes (rectangle/circle/polygon).
+- `ShieldIcon` — Shield / protection / security.
+- `SliderIcon` — Slider controls.
+- `SpinnerIcon` — Circular progress indicator.
+- `StarIcon` — Star / rating / favorite.
+- `StopIcon` — Stop media (square).
+- `SuccessIcon` — Success / validated (circle + tick).
+- `TextIcon` — Text / title.
+- `ThreadsIcon` — Threads social network.
+- `TickIcon` — Checkmark / validated.
+- `TrashIcon` — Trash (alias of Delete).
+- `TwitchIcon` — Twitch platform.
+- `TwitterIcon` — Twitter/X social network.
+- `UploadIcon` — Upload / send a file.
+- `UnLikeIcon` — Thumbs down / dislike.
+- `UnlockIcon` — Unlock / access.
+- `UserIcon` — User / account.
+- `VideoIcon` — Video / media.
+- `WifiIcon` — Wi‑Fi network.
+- `XIcon` — X social network.
+- `YoutubeIcon` — YouTube platform.
+- `ZoomInIcon` — Zoom in.
+- `ZoomOutIcon` — Zoom out.
 
 ### **Icon Usage in Components**
 ```tsx

package/docs/components.md

@@ -297,167 +297,3 @@ const TooltipExample = () => (
 );
 ```
 
-## V. Data Display Components
-
-### Calendar
-
-A component for displaying dates and allowing users to select a single date or a date range.
-
-**Example:**
-```tsx
-import { Calendar } from '@app-studio';
-import { useState } from 'react';
-
-const CalendarExample = () => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-
-  return (
-    <Calendar
-      value={selectedDate}
-      onChange={setSelectedDate}
-    />
-  );
-};
-```
-
-### Kanban Card
-
-A draggable card component designed for use within a Kanban board. It displays key information and can be customized.
-
-**Example:**
-```tsx
-import { KanbanCard } from '@app-studio';
-
-const KanbanCardExample = () => (
-  <KanbanCard
-    id="task-1"
-    title="Design the new dashboard"
-    description="Create mockups in Figma for the v2 dashboard."
-    tags={[{ label: 'UI/UX', color: 'blue' }, { label: 'High Priority', color: 'red' }]}
-    assignee={{ name: 'Jane Doe', avatarUrl: '/avatars/jane.png' }}
-  />
-);
-```
-
-### Tree
-
-A component for displaying hierarchical data with expandable/collapsible nodes. Supports both a compound component pattern and a data-driven approach.
-
-**Example:**
-```tsx
-import { Tree } from '@app-studio/web';
-import { FolderIcon, FileIcon } from '@app-studio/web';
-
-const FileTreeExample = () => {
-  const treeData = [
-    {
-      id: 'root',
-      label: 'Project',
-      icon: <FolderIcon size={16} />,
-      children: [
-        {
-          id: 'src',
-          label: 'src',
-          icon: <FolderIcon size={16} />,
-          children: [
-            { id: 'components', label: 'components', icon: <FileIcon size={16} /> },
-            { id: 'utils', label: 'utils', icon: <FileIcon size={16} /> },
-          ],
-        },
-      ],
-    },
-  ];
-
-  return (
-    <Tree
-      items={treeData}
-      defaultExpandedItems={['root', 'src']}
-      onItemSelect={(itemId) => console.log(`Selected: ${itemId}`)}
-    />
-  );
-};
-```
-
-For detailed documentation, see [Tree Component](./components/Tree.mdx).
-
-### Flow
-
-A component for creating interactive workflow diagrams and flowcharts with support for node connections, drag-and-drop functionality, and viewport controls.
-
-**Example:**
-```tsx
-import { Flow } from '@app-studio/web';
-import { useState } from 'react';
-
-const FlowExample = () => {
-  const [nodes, setNodes] = useState([
-    {
-      id: 'node-1',
-      position: { x: 50, y: 50 },
-      data: { label: 'Start Node', subtitle: 'Begin here' },
-    },
-    {
-      id: 'node-2',
-      position: { x: 50, y: 200 },
-      data: { label: 'Process Node', subtitle: 'Do something' },
-    },
-  ]);
-
-  const [edges, setEdges] = useState([
-    { id: 'edge-1-2', source: 'node-1', target: 'node-2' },
-  ]);
-
-  return (
-    <Flow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={setNodes}
-      onEdgesChange={setEdges}
-    />
-  );
-};
-```
-
-For detailed documentation, see [Flow Component](./components/Flow.mdx).
-
-### OKR
-
-A component for displaying and tracking Objectives and Key Results (OKRs). Provides a comprehensive view of progress, status, and ownership for strategic goals.
-
-**Example:**
-```tsx
-import { OKR } from '@app-studio/web';
-
-const OKRExample = () => {
-  const objectives = [
-    {
-      id: '1',
-      title: 'Launch New Feature',
-      description: 'Successfully launch the new feature to all users.',
-      owner: 'John Doe',
-      timeframe: 'Q4 2025',
-      tags: ['new-feature', 'launch'],
-      progress: 50,
-      status: 'onTrack',
-      keyResults: [
-        {
-          id: '1.1',
-          title: 'Complete development',
-          progress: 80,
-          status: 'onTrack',
-        },
-        {
-          id: '1.2',
-          title: 'Complete QA testing',
-          progress: 40,
-          status: 'atRisk',
-        },
-      ],
-    },
-  ];
-
-  return <OKR objectives={objectives} />;
-};
-```
-
-For detailed documentation, see [OKR Component](./components/OKR.mdx).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.45",
+  "version": "0.9.47",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [

package/docs/components/Calendar.mdx

@@ -1,189 +0,0 @@
-# Calendar
-
-A flexible calendar component with day, week, and month views for displaying and managing events. Features intelligent navigation (day-by-day, week-by-week, month-by-month), interactive hover cards for events and days, custom event rendering, and comprehensive styling customization.
-
-### **Import**
-  ```tsx
-  import { Calendar } from '@app-studio/web';
-  ```
-
-### **Default**
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const DefaultCalendar = () => {
-  return <Calendar />;
-};
-```
-
-### **With Events**
-Display events in the calendar with customizable event objects. Hover over events to see detailed information in a popup card, and hover over day cells to see a summary of the day's events.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-import { CalendarEvent } from '@app-studio/web';
-
-export const CalendarWithEvents = () => {
-  const events: CalendarEvent[] = [
-    {
-      id: 1,
-      title: 'Team Meeting',
-      start: new Date(2025, 9, 15, 10, 0),
-      end: new Date(2025, 9, 15, 11, 0),
-      description: 'Weekly team sync-up',
-    },
-    {
-      id: 2,
-      title: 'Project Deadline',
-      start: new Date(2025, 9, 18, 17, 0),
-      description: 'Submit final deliverables',
-    },
-  ];
-
-  return <Calendar events={events} />;
-};
-```
-
-**Interactive Features:**
-- **Event Hover Cards**: Hover over any event to see full details including title, date, time, and description
-- **Smart Navigation**: Navigation buttons automatically adapt to the current view (Previous/Next Day, Week, or Month)
-- **Fixed Cell Dimensions**: All day cells maintain consistent width (minimum 180px) and height for uniform layout
-- **Scrollable Content**: Events within each day cell scroll independently while maintaining cell dimensions
-
-### **Day View**
-Show a single day with all events for that day.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const DayViewCalendar = () => {
-  return <Calendar initialView="day" />;
-};
-```
-
-### **Week View**
-Display a full week with events across all days.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const WeekViewCalendar = () => {
-  return <Calendar initialView="week" />;
-};
-```
-
-### **Month View**
-Show the entire month with events distributed across days.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const MonthViewCalendar = () => {
-  return <Calendar initialView="month" />;
-};
-```
-
-### **Week Starts On**
-Configure which day the week starts on (0 = Sunday, 1 = Monday, etc.).
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const WeekStartsOnMonday = () => {
-  return <Calendar weekStartsOn={1} />;
-};
-```
-
-### **Custom Styles**
-Customize the appearance of calendar elements using the `views` prop.
-
-## Props
-
-| Prop | Type | Description | Default |
-| --- | --- | --- | --- |
-| `events` | `CalendarEvent[]` | Array of events to display. | `[]` |
-| `initialDate` | `Date \| string` | Initial date to display (ISO string or Date object). | `new Date()` |
-| `initialView` | `'day' \| 'week' \| 'month'` | Initial view to display. | `'month'` |
-| `weekStartsOn` | `0-6` | Day the week starts on (0 = Sunday, 1 = Monday). | `0` |
-| `onEventDrop` | `(event: CalendarEvent) => void` | Callback when an event is moved to a new date. | - |
-| `onEventResize` | `(event: CalendarEvent) => void` | Callback when an event is resized. | - |
-| `onEventAdd` | `(start: string, end: string) => void` | Callback when a date is double-clicked to add an event. | - |
-| `onEventTitleChange` | `(event: CalendarEvent, newTitle: string) => void` | Callback when an event's title is changed. | - |
-| `onEventDescriptionChange` | `(event: CalendarEvent, newDescription: string) => void` | Callback when an event's description is changed. | - |
-| `onEventDelete` | `(event: CalendarEvent) => void` | Callback when an event is deleted. | - |
-| `onDateClick` | `(date: string) => void` | Callback when a date is clicked. | - |
-| `onDateChange` | `(date: Date) => void` | Callback when the visible date range changes. | - |
-| `onViewChange` | `(view: CalendarView) => void` | Callback when the active view changes. | - |
-| `views` | `CalendarViews` | Style overrides for various parts of the component. | `{}` |
-
-## CalendarEvent Interface
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `id` | `string \| number` | Unique identifier for the event. |
-| `title` | `string` | Event title shown in the calendar. |
-| `start` | `string` | Start date/time in ISO format (`YYYY-MM-DD` or `YYYY-MM-DDTHH:MM`). |
-| `end` | `string` | End date/time in ISO format (`YYYY-MM-DD` or `YYYY-MM-DDTHH:MM`). |
-| `color` | `'blue' \| 'red' \| 'green' \| 'purple' \| 'orange'` | Color variant for the event. |
-| `description` | `string` | Optional description (used for tooltips or custom rendering). |
-| `metadata` | `Record<string, unknown>` | Additional metadata for custom logic. |
-
-## CalendarViews Interface
-
-Customize the appearance of different calendar elements. All elements support the `views` prop for complete customization:
-
-### Container & Layout
-- `container` - Main calendar container (ViewProps)
-- `header` - Header section (ViewProps)
-- `grid` - Calendar grid container (ViewProps)
-
-### Header Elements
-- `headerTitle` - Title text in header (TextProps)
-- `navigation` - Navigation buttons container (ViewProps)
-- `navigationButton` - Navigation button props (ButtonProps)
-- `viewSwitcher` - View switcher buttons container (ViewProps)
-- `viewButton` - View button props (ButtonProps)
-
-### Weekday Header
-- `weekdayRow` - Weekday row container (ViewProps)
-- `weekdayHeader` - Individual weekday header cell (ViewProps)
-- `weekdayLabel` - Weekday label text (TextProps)
-
-### Week & Day Structure
-- `weekRow` - Week row container (ViewProps)
-- `dayColumn` - Individual day column/cell (ViewProps)
-- `dayHeader` - Day header within cell (ViewProps)
-- `dayNumber` - Day number text (TextProps)
-- `dayMeta` - Day metadata text (TextProps)
-
-### Events
-- `events` - Events container within day (ViewProps)
-- `event` - Individual event container (ViewProps)
-- `eventTitle` - Event title text (TextProps)
-- `eventTime` - Event time text (TextProps)
-- `emptyState` - Empty state text when no events (TextProps)
-
-### Example: Complete Customization
-
-```tsx
-<Calendar
-  events={events}
-  views={{
-    container: { backgroundColor: 'color.gray.50', padding: 32 },
-    headerTitle: { fontSize: 24, color: 'color.primary.700' },
-    weekdayRow: { backgroundColor: 'color.primary.50', borderRadius: 8 },
-    weekdayLabel: { fontSize: 16, fontWeight: '700' },
-    dayColumn: { padding: 20, borderRadius: 16, borderWidth: 2 },
-    dayNumber: { fontSize: 20, color: 'color.primary.700' },
-    event: { padding: 16, backgroundColor: 'color.primary.100' },
-    eventTitle: { fontSize: 16, fontWeight: '700' },
-  }}
-/>
-```
-