@app-studio/web 0.9.44 → 0.9.46

package/docs/components/Badge.mdx

@@ -74,7 +74,7 @@ export const PositionDemo = () => (
           position="relative"
           height="100px"
           width="200px"
-          backgroundColor="#F2EFE5"
+          backgroundColor="color.warmGray.100"
         >
           <Badge position={position as Position} content={position} />
         </View>

package/docs/components/ColorPicker.mdx

@@ -52,7 +52,7 @@ import { ColorPicker } from '@app-studio/web';
 
 export const DefaultValueColorPicker = () => (
   <ColorPicker 
-    defaultValue="#10b981"
+    defaultValue="color.emerald.500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -69,11 +69,11 @@ import { ColorPicker } from '@app-studio/web';
 
 export const PredefinedColorPicker = () => {
   const colors = [
-    { color: '#ef4444', label: 'Red' },
-    { color: '#3b82f6', label: 'Blue' },
-    { color: '#10b981', label: 'Green' },
-    { color: '#f59e0b', label: 'Orange' },
-    { color: '#8b5cf6', label: 'Purple' },
+    { color: 'color.red.500', label: 'Red' },
+    { color: 'color.blue.500', label: 'Blue' },
+    { color: 'color.emerald.500', label: 'Green' },
+    { color: 'color.amber.500', label: 'Orange' },
+    { color: 'color.violet.500', label: 'Purple' },
   ];
   
   return (
@@ -200,7 +200,7 @@ import { ColorPicker } from '@app-studio/web';
 export const DisabledColorPicker = () => (
   <ColorPicker 
     isDisabled
-    value="#3b82f6"
+    value="color.blue.500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -219,7 +219,7 @@ import { ColorPicker } from '@app-studio/web';
 export const ReadOnlyColorPicker = () => (
   <ColorPicker 
     isReadOnly
-    value="#3b82f6"
+    value="color.blue.500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -385,10 +385,10 @@ export const StyledColorPicker = () => (
     views={{
       trigger: {
         borderWidth: 2,
-        borderColor: '#3b82f6',
+        borderColor: 'color.blue.500',
       },
       dropdown: {
-        backgroundColor: '#f9fafb',
+        backgroundColor: 'color.coolGray.50',
         padding: 20,
       },
       colorSwatch: {
@@ -411,12 +411,12 @@ export const CompleteColorPicker = () => {
   const [color, setColor] = useState('#3b82f6');
   
   const predefinedColors = [
-    { color: '#ef4444', label: 'Red' },
-    { color: '#3b82f6', label: 'Blue' },
-    { color: '#10b981', label: 'Green' },
-    { color: '#f59e0b', label: 'Orange' },
-    { color: '#8b5cf6', label: 'Purple' },
-    { color: '#ec4899', label: 'Pink' },
+    { color: 'color.red.500', label: 'Red' },
+    { color: 'color.blue.500', label: 'Blue' },
+    { color: 'color.emerald.500', label: 'Green' },
+    { color: 'color.amber.500', label: 'Orange' },
+    { color: 'color.violet.500', label: 'Purple' },
+    { color: 'color.pink.500', label: 'Pink' },
   ];
   
   return (

package/docs/components/DragAndDrop.mdx

@@ -115,7 +115,7 @@ export const CustomRenderDragAndDrop = () => {
           gap={10} 
           alignItems="center"
           padding={12}
-          backgroundColor={item.completed ? '#d1fae5' : '#fee2e2'}
+          backgroundColor={item.completed ? 'color.emerald.100' : 'color.red.100'}
           borderRadius={8}
         >
           <Text fontWeight="bold">#{index + 1}</Text>
@@ -147,7 +147,7 @@ export const ContainerPropsDragAndDrop = () => {
       onChange={setItems}
       renderItem={(item) => <Text>{item}</Text>}
       containerProps={{
-        backgroundColor: '#f3f4f6',
+        backgroundColor: 'color.coolGray.100',
         padding: 20,
         borderRadius: 12,
         gap: 10,
@@ -177,7 +177,7 @@ export const ItemPropsDragAndDrop = () => {
       renderItem={(item) => <Text>{item}</Text>}
       itemProps={{
         padding: 15,
-        backgroundColor: '#ffffff',
+        backgroundColor: 'white',
         borderRadius: 8,
         cursor: 'grab',
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
@@ -207,13 +207,13 @@ export const StyledDragAndDrop = () => {
       renderItem={(item) => <Text>{item}</Text>}
       views={{
         container: {
-          backgroundColor: '#1f2937',
+          backgroundColor: 'color.coolGray.800',
           padding: 20,
           borderRadius: 16,
         },
         item: {
-          backgroundColor: '#374151',
-          color: '#ffffff',
+          backgroundColor: 'color.coolGray.700',
+          color: 'white',
           padding: 16,
           borderRadius: 8,
           marginBottom: 8,
@@ -266,9 +266,9 @@ export const TaskListDragAndDrop = () => {
   ]);
   
   const priorityColors = {
-    high: '#ef4444',
-    medium: '#f59e0b',
-    low: '#10b981',
+    high: 'color.red.500',
+    medium: 'color.amber.500',
+    low: 'color.emerald.500',
   };
   
   return (
@@ -278,7 +278,7 @@ export const TaskListDragAndDrop = () => {
       renderItem={(task, index) => (
         <View
           padding={16}
-          backgroundColor="#ffffff"
+          backgroundColor="white"
           borderRadius={12}
           borderLeftWidth={4}
           borderLeftColor={priorityColors[task.priority]}
@@ -298,7 +298,7 @@ export const TaskListDragAndDrop = () => {
                   {task.priority}
                 </Text>
               </Horizontal>
-              <Text fontSize={14} color="#6b7280">
+              <Text fontSize={14} color="color.coolGray.500">
                 {task.description}
               </Text>
             </Vertical>

package/docs/components/Drawer.mdx

@@ -434,15 +434,15 @@ export const DetailsDrawer = () => {
             <Drawer.Body>
               <Vertical gap={20}>
                 <div>
-                  <Text fontSize={14} color="#6b7280">Name</Text>
+                  <Text fontSize={14} color="color.coolGray.500">Name</Text>
                   <Text fontSize={16}>Premium Widget</Text>
                 </div>
                 <div>
-                  <Text fontSize={14} color="#6b7280">Price</Text>
+                  <Text fontSize={14} color="color.coolGray.500">Price</Text>
                   <Text fontSize={16}>$99.99</Text>
                 </div>
                 <div>
-                  <Text fontSize={14} color="#6b7280">Description</Text>
+                  <Text fontSize={14} color="color.coolGray.500">Description</Text>
                   <Text fontSize={16}>
                     A high-quality widget with advanced features
                     and premium materials.

package/docs/components/Gradient.mdx

@@ -14,8 +14,8 @@ import { Gradient } from '@app-studio/web';
 
 export const DefaultGradient = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     width={300} 
     height={200} 
   />
@@ -38,22 +38,22 @@ export const GradientTypes = () => (
   <Vertical gap={15}>
     <Gradient 
       type="linear" 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={100} 
     />
     <Gradient 
       type="radial" 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={100} 
     />
     <Gradient 
       type="conic" 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={100} 
     />
@@ -73,9 +73,9 @@ import { Vertical } from 'app-studio';
 
 export const SimpleGradients = () => (
   <Vertical gap={15}>
-    <Gradient from="#ef4444" to="#f59e0b" width={300} height={100} />
-    <Gradient from="#10b981" to="#3b82f6" width={300} height={100} />
-    <Gradient from="#8b5cf6" to="#ec4899" width={300} height={100} />
+    <Gradient from="color.red.500" to="color.amber.500" width={300} height={100} />
+    <Gradient from="color.emerald.500" to="color.blue.500" width={300} height={100} />
+    <Gradient from="color.violet.500" to="color.pink.500" width={300} height={100} />
   </Vertical>
 );
 ```
@@ -127,8 +127,8 @@ export const DirectionalGradients = () => (
       <Gradient 
         key={direction}
         direction={direction as any}
-        from="#3b82f6" 
-        to="#8b5cf6" 
+        from="color.blue.500" 
+        to="color.violet.500" 
         width={300} 
         height={100} 
       />
@@ -154,16 +154,16 @@ export const RadialShapes = () => (
     <Gradient 
       type="radial"
       shape="circle"
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={200} 
       height={200} 
     />
     <Gradient 
       type="radial"
       shape="ellipse"
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={200} 
     />
@@ -195,8 +195,8 @@ export const RadialPositions = () => (
         key={position}
         type="radial"
         position={position as any}
-        from="#3b82f6" 
-        to="#8b5cf6" 
+        from="color.blue.500" 
+        to="color.violet.500" 
         width={300} 
         height={100} 
       />
@@ -217,8 +217,8 @@ import { Gradient } from '@app-studio/web';
 
 export const AnimatedGradient = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     animate
     width={300} 
     height={200} 
@@ -240,16 +240,16 @@ import { Vertical } from 'app-studio';
 export const AnimationDurations = () => (
   <Vertical gap={15}>
     <Gradient 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       animate
       animationDuration={1}
       width={300} 
       height={80} 
     />
     <Gradient 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       animate
       animationDuration={5}
       width={300} 
@@ -271,14 +271,14 @@ import { Text, Center } from 'app-studio';
 
 export const GradientWithContent = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     width={300} 
     height={200}
     borderRadius={16}
   >
     <Center width="100%" height="100%">
-      <Text color="#ffffff" fontSize={24} fontWeight="bold">
+      <Text color="white" fontSize={24} fontWeight="bold">
         Gradient Background
       </Text>
     </Center>
@@ -297,8 +297,8 @@ import { Gradient } from '@app-studio/web';
 
 export const StyledGradient = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     width={300} 
     height={200}
     views={{
@@ -379,28 +379,28 @@ import { Text, Vertical, Button } from 'app-studio';
 
 export const GradientCard = () => (
   <Gradient 
-    from="#667eea" 
-    to="#764ba2" 
+    from="color.indigo.400" 
+    to="color.purple.700" 
     width={350} 
     borderRadius={16}
     boxShadow="0 10px 40px rgba(0,0,0,0.2)"
   >
     <Vertical gap={20} padding={30}>
-      <Text color="#ffffff" fontSize={28} fontWeight="bold">
+      <Text color="white" fontSize={28} fontWeight="bold">
         Premium Plan
       </Text>
-      <Text color="#ffffff" fontSize={48} fontWeight="bold">
+      <Text color="white" fontSize={48} fontWeight="bold">
         $99
         <Text as="span" fontSize={20}>/month</Text>
       </Text>
       <Vertical gap={10}>
-        <Text color="#ffffff">✓ Unlimited projects</Text>
-        <Text color="#ffffff">✓ Priority support</Text>
-        <Text color="#ffffff">✓ Advanced analytics</Text>
+        <Text color="white">✓ Unlimited projects</Text>
+        <Text color="white">✓ Priority support</Text>
+        <Text color="white">✓ Advanced analytics</Text>
       </Vertical>
       <Button 
-        backgroundColor="#ffffff" 
-        color="#667eea"
+        backgroundColor="white" 
+        color="color.indigo.400"
         isFullWidth
       >
         Get Started
@@ -434,7 +434,7 @@ export const AnimatedBackground = () => (
   >
     <Center width="100%" height="100%">
       <Text 
-        color="#ffffff" 
+        color="white" 
         fontSize={40} 
         fontWeight="bold"
         textAlign="center"

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/Loader.mdx

@@ -93,11 +93,11 @@ import { Horizontal } from 'app-studio';
 
 export const ColoredLoaders = () => (
   <Horizontal gap={30}>
-    <Loader loaderColor="#3b82f6" />
-    <Loader loaderColor="#10b981" />
-    <Loader loaderColor="#ef4444" />
-    <Loader loaderColor="#f59e0b" />
-    <Loader loaderColor="#8b5cf6" />
+    <Loader loaderColor="color.blue.500" />
+    <Loader loaderColor="color.emerald.500" />
+    <Loader loaderColor="color.red.500" />
+    <Loader loaderColor="color.amber.500" />
+    <Loader loaderColor="color.violet.500" />
   </Horizontal>
 );
 ```
@@ -170,8 +170,8 @@ import { Loader } from '@app-studio/web';
 
 export const ColoredTextLoader = () => (
   <Loader 
-    loaderColor="#3b82f6" 
-    textColor="#3b82f6"
+    loaderColor="color.blue.500" 
+    textColor="color.blue.500"
   >
     Loading...
   </Loader>
@@ -277,7 +277,7 @@ export const ButtonLoader = () => {
       isDisabled={loading}
     >
       <Horizontal gap={10} alignItems="center">
-        {loading && <Loader size={16} loaderColor="#ffffff" />}
+        {loading && <Loader size={16} loaderColor="white" />}
         {loading ? 'Submitting...' : 'Submit'}
       </Horizontal>
     </Button>
@@ -298,31 +298,31 @@ export const LoaderShowcase = () => (
     <Vertical gap={15}>
       <Text fontWeight="bold">Spinner Variants</Text>
       <Horizontal gap={20}>
-        <Loader type="spinner" size="sm" loaderColor="#3b82f6" />
-        <Loader type="spinner" size="md" loaderColor="#10b981" />
-        <Loader type="spinner" size="lg" loaderColor="#ef4444" />
+        <Loader type="spinner" size="sm" loaderColor="color.blue.500" />
+        <Loader type="spinner" size="md" loaderColor="color.emerald.500" />
+        <Loader type="spinner" size="lg" loaderColor="color.red.500" />
       </Horizontal>
     </Vertical>
     
     <Vertical gap={15}>
       <Text fontWeight="bold">Dotted Variants</Text>
       <Horizontal gap={20}>
-        <Loader type="dotted" size="sm" loaderColor="#3b82f6" />
-        <Loader type="dotted" size="md" loaderColor="#10b981" />
-        <Loader type="dotted" size="lg" loaderColor="#ef4444" />
+        <Loader type="dotted" size="sm" loaderColor="color.blue.500" />
+        <Loader type="dotted" size="md" loaderColor="color.emerald.500" />
+        <Loader type="dotted" size="lg" loaderColor="color.red.500" />
       </Horizontal>
     </Vertical>
     
     <Vertical gap={15}>
       <Text fontWeight="bold">With Text</Text>
       <Horizontal gap={30}>
-        <Loader type="spinner" loaderColor="#3b82f6" textColor="#3b82f6">
+        <Loader type="spinner" loaderColor="color.blue.500" textColor="color.blue.500">
           Loading...
         </Loader>
         <Loader 
           type="dotted" 
-          loaderColor="#10b981" 
-          textColor="#10b981"
+          loaderColor="color.emerald.500" 
+          textColor="color.emerald.500"
           textPosition="right"
         >
           Processing