@app-studio/web 0.9.83 → 0.9.85

package/docs/components/Center.mdx

@@ -16,7 +16,7 @@ import { Center } from '@app-studio/web';
 import { Text } from '@app-studio/web';
 
 export const BasicCenter = () => (
-  <Center height={200} backgroundColor="color.gray.100">
+  <Center height={200} backgroundColor="color-gray-100">
     <Text fontSize={18} fontWeight="bold">
       Centered Content
     </Text>
@@ -32,10 +32,10 @@ import { Loader } from '@app-studio/web';
 import { Text, Vertical } from '@app-studio/web';
 
 export const LoadingCenter = () => (
-  <Center height="100vh" backgroundColor="color.white">
+  <Center height="100vh" backgroundColor="color-white">
     <Vertical gap={16} alignItems="center">
       <Loader size="lg" />
-      <Text color="color.gray.600">Loading...</Text>
+      <Text color="color-gray-600">Loading...</Text>
     </Vertical>
   </Center>
 );
@@ -50,18 +50,18 @@ 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" />
+      <EmptyIcon widthHeight={64} color="color-gray-400" />
       <Vertical gap={8} alignItems="center">
-        <Text fontSize={20} fontWeight="bold" color="color.gray.700">
+        <Text fontSize={20} fontWeight="bold" color="color-gray-700">
           No items found
         </Text>
-        <Text color="color.gray.500" maxWidth={300}>
+        <Text color="color-gray-500" maxWidth={300}>
           There are no items to display. Create your first item to get started.
         </Text>
       </Vertical>
-      <Button variant="filled" colorScheme="theme.primary">
+      <Button variant="filled" colorScheme="theme-primary">
         Create Item
       </Button>
     </Vertical>
@@ -91,7 +91,7 @@ export const ModalCenter = () => {
             <Text fontSize={24} fontWeight="bold">
               Confirm Action
             </Text>
-            <Text color="color.gray.600" maxWidth={300}>
+            <Text color="color-gray-600" maxWidth={300}>
               Are you sure you want to delete this item? This action cannot be undone.
             </Text>
             <Horizontal gap={12}>
@@ -103,7 +103,7 @@ export const ModalCenter = () => {
               </Button>
               <Button
                 variant="filled"
-                colorScheme="theme.error"
+                colorScheme="theme-error"
                 onClick={() => setIsOpen(false)}
               >
                 Delete
@@ -128,7 +128,7 @@ export const HeroCenter = () => (
   <Center
     height="100vh"
     backgroundImage="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
-    color="color.white"
+    color="color-white"
   >
     <Vertical gap={32} alignItems="center" textAlign="center" maxWidth={600}>
       <Vertical gap={16} alignItems="center">
@@ -145,16 +145,16 @@ export const HeroCenter = () => (
         <Button
           variant="filled"
           size="lg"
-          backgroundColor="color.white"
-          color="color.gray.900"
+          backgroundColor="color-white"
+          color="color-gray-900"
         >
           Get Started
         </Button>
         <Button
           variant="outline"
           size="lg"
-          borderColor="color.white"
-          color="color.white"
+          borderColor="color-white"
+          color="color-white"
         >
           Learn More
         </Button>
@@ -176,18 +176,18 @@ export const CardCenter = () => (
     width={300}
     height={200}
     border="1px solid"
-    borderColor="color.gray.200"
+    borderColor="color-gray-200"
     borderRadius={12}
-    backgroundColor="color.white"
+    backgroundColor="color-white"
     boxShadow="0 4px 12px rgba(0,0,0,0.1)"
   >
     <Center height="100%">
       <Vertical gap={12} alignItems="center">
-        <StarIcon widthHeight={32} color="color.yellow.500" filled />
+        <StarIcon widthHeight={32} color="color-yellow-500" filled />
         <Text fontSize={18} fontWeight="bold">
           Premium Feature
         </Text>
-        <Text color="color.gray.600" textAlign="center" fontSize={14}>
+        <Text color="color-gray-600" textAlign="center" fontSize={14}>
           Unlock advanced features with our premium plan
         </Text>
       </Vertical>
@@ -238,7 +238,7 @@ export const ResponsiveCenter = () => (
       </Text>
       <Text
         fontSize={{ mobile: 14, tablet: 16, desktop: 18 }}
-        color="color.gray.600"
+        color="color-gray-600"
       >
         This content adapts to different screen sizes
       </Text>
@@ -258,19 +258,19 @@ export const CenterWithGap = () => (
     <View
       width={60}
       height={60}
-      backgroundColor="color.red.400"
+      backgroundColor="color-red-400"
       borderRadius={8}
     />
     <View
       width={60}
       height={60}
-      backgroundColor="color.blue.400"
+      backgroundColor="color-blue-400"
       borderRadius={8}
     />
     <View
       width={60}
       height={60}
-      backgroundColor="color.green.400"
+      backgroundColor="color-green-400"
       borderRadius={8}
     />
   </Center>
@@ -288,25 +288,25 @@ 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"
+    borderColor="color-red-200"
   >
     <Vertical gap={20} alignItems="center" textAlign="center">
-      <ErrorIcon widthHeight={48} color="color.red.500" />
+      <ErrorIcon widthHeight={48} color="color-red-500" />
       <Vertical gap={8} alignItems="center">
-        <Text fontSize={18} fontWeight="bold" color="color.red.700">
+        <Text fontSize={18} fontWeight="bold" color="color-red-700">
           Something went wrong
         </Text>
-        <Text color="color.red.600" maxWidth={300}>
+        <Text color="color-red-600" maxWidth={300}>
           We encountered an error while processing your request.
           Please try again or contact support.
         </Text>
       </Vertical>
       <Button
         variant="filled"
-        colorScheme="theme.error"
+        colorScheme="theme-error"
         onClick={() => window.location.reload()}
       >
         Try Again
@@ -327,19 +327,19 @@ export const ImagePlaceholder = () => (
   <Center
     width={300}
     height={200}
-    backgroundColor="color.gray.100"
+    backgroundColor="color-gray-100"
     border="2px dashed"
-    borderColor="color.gray.300"
+    borderColor="color-gray-300"
     borderRadius={8}
     cursor="pointer"
     _hover={{
-      backgroundColor: 'color.gray.200',
-      borderColor: 'color.gray.400',
+      backgroundColor: 'color-gray-200',
+      borderColor: 'color-gray-400',
     }}
   >
     <Vertical gap={8} alignItems="center">
-      <ImageIcon widthHeight={32} color="color.gray.500" />
-      <Text color="color.gray.600" fontSize={14}>
+      <ImageIcon widthHeight={32} color="color-gray-500" />
+      <Text color="color-gray-600" fontSize={14}>
         Click to upload image
       </Text>
     </Vertical>
@@ -378,28 +378,28 @@ export const ImagePlaceholder = () => (
 
 **Splash Screen:**
 ```tsx
-<Center height="100vh" backgroundColor="theme.primary">
+<Center height="100vh" backgroundColor="theme-primary">
   <Vertical gap={24} alignItems="center">
     <Logo size="lg" />
-    <Loader color="color.white" />
+    <Loader color="color-white" />
   </Vertical>
 </Center>
 ```
 
 **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>
-    <Text color="color.gray.600">Feature description</Text>
+    <Text color="color-gray-600">Feature description</Text>
   </Vertical>
 </Center>
 ```
 
 **Call to Action:**
 ```tsx
-<Center padding={40} backgroundColor="color.gray.900" color="color.white">
+<Center padding={40} backgroundColor="color-gray-900" color="color-white">
   <Vertical gap={20} alignItems="center" textAlign="center">
     <Text fontSize={24} fontWeight="bold">Ready to get started?</Text>
     <Button variant="filled" size="lg">Get Started Now</Button>

package/docs/components/Checkbox.mdx

@@ -27,11 +27,11 @@ import { Vertical, Checkbox } from '@app-studio/web';
 export const ColorCheckbox = () => (
   <Vertical gap={15}>
     {[
-      'theme.primary',
-      'theme.secondary',
-      'theme.error',
-      'theme.success',
-      'theme.warning',
+      'theme-primary',
+      'theme-secondary',
+      'theme-error',
+      'theme-success',
+      'theme-warning',
     ].map((color) => (
       <Checkbox
         key={color}

package/docs/components/ColorInput.mdx

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import { ColorInput } from '@app-studio/web';
 
 export const BasicColorInput = () => {
-  const [color, setColor] = useState('color.blue.500');
+  const [color, setColor] = useState('color-blue-500');
 
   return (
     <ColorInput
@@ -43,19 +43,19 @@ export const ColorInputVariants = () => {
       <ColorInput
         label="Default Variant"
         variant="default"
-        defaultValue="color.blue.500"
+        defaultValue="color-blue-500"
       />
       
       <ColorInput
         label="Outline Variant"
         variant="outline"
-        defaultValue="color.green.500"
+        defaultValue="color-green-500"
       />
       
       <ColorInput
         label="None Variant"
         variant="none"
-        defaultValue="color.purple.500"
+        defaultValue="color-purple-500"
       />
     </Vertical>
   );
@@ -73,11 +73,11 @@ import { ColorInput } from '@app-studio/web';
 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" />
+      <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>
   );
 };
@@ -125,8 +125,8 @@ import { Button } from '@app-studio/web';
 import { Text } from '@app-studio/web';
 
 export const ColorInputForm = () => {
-  const [backgroundColor, setBackgroundColor] = useState('color.blue.500');
-  const [textColor, setTextColor] = useState('color.white');
+  const [backgroundColor, setBackgroundColor] = useState('color-blue-500');
+  const [textColor, setTextColor] = useState('color-white');
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -172,8 +172,8 @@ export const ColorInputForm = () => {
             type="button" 
             variant="outline"
             onClick={() => {
-              setBackgroundColor('color.blue.500');
-              setTextColor('color.white');
+              setBackgroundColor('color-blue-500');
+              setTextColor('color-white');
             }}
           >
             Reset

package/docs/components/ColorPicker.mdx

@@ -52,7 +52,7 @@ import { ColorPicker } from '@app-studio/web';
 
 export const DefaultValueColorPicker = () => (
   <ColorPicker 
-    defaultValue="color.emerald.500"
+    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: '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-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 (
@@ -170,7 +170,7 @@ export const ColorFormatPickers = () => (
 ```
 
 ### **closeOnSelect**
-Whether to close the dropdown after selecting a color.
+Whether to close the dropdown after selecting a color-
 
 - **Type:** `boolean`
 - **Default:** `true`
@@ -200,7 +200,7 @@ import { ColorPicker } from '@app-studio/web';
 export const DisabledColorPicker = () => (
   <ColorPicker 
     isDisabled
-    value="color.blue.500"
+    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="color.blue.500"
+    value="color-blue-500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -385,10 +385,10 @@ export const StyledColorPicker = () => (
     views={{
       trigger: {
         borderWidth: 2,
-        borderColor: 'color.blue.500',
+        borderColor: 'color-blue-500',
       },
       dropdown: {
-        backgroundColor: 'color.coolGray.50',
+        backgroundColor: 'color-coolGray.50',
         padding: 20,
       },
       colorSwatch: {
@@ -411,12 +411,12 @@ export const CompleteColorPicker = () => {
   const [color, setColor] = useState('#3b82f6');
   
   const predefinedColors = [
-    { 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' },
+    { 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/ContextMenu.mdx

@@ -80,7 +80,7 @@ export const DefaultContextMenu = () => {
       <ContextMenu items={items}>
         <View
           padding={20}
-          backgroundColor="color.gray.100"
+          backgroundColor="color-gray-100"
           borderRadius={8}
           textAlign="center"
           cursor="context-menu"

package/docs/components/DatePicker.mdx

@@ -28,11 +28,11 @@ import { DatePicker } from '@app-studio/web';
 export const ColorDatePicker = () => (
   <Vertical gap={15}>
     {[
-      'theme.primary',
-      'theme.secondary',
-      'theme.error',
-      'theme.success',
-      'theme.warning',
+      'theme-primary',
+      'theme-secondary',
+      'theme-error',
+      'theme-success',
+      'theme-warning',
     ].map((color) => (
       <DatePicker
         key={color}
@@ -68,7 +68,7 @@ export const ShadowDatePicker = () => (
 | Prop         | Type          | Description                                                              | Default     |
 | ------------ | ------------- | ------------------------------------------------------------------------ | ----------- |
 | label        | string        | The label text for the date picker.                                     |             |
-| colorScheme  | string        | The color scheme that changes the background color.                      |             |
+| colorScheme  | string        | The color scheme that changes the background color-                      |             |
 | shadow       | Shadow/Elevation | Adds a shadow effect to the DatePicker.                                  |             |
 | styles       | CSSProperties | Optional custom styles for the DatePicker (container, input, calendar). |             |
 | className    | string        | Optional className for the DatePicker container.                         |             |

package/docs/components/DragAndDrop.mdx

@@ -115,7 +115,7 @@ export const CustomRenderDragAndDrop = () => {
           gap={10} 
           alignItems="center"
           padding={12}
-          backgroundColor={item.completed ? 'color.emerald.100' : 'color.red.100'}
+          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: 'color.coolGray.100',
+        backgroundColor: 'color-coolGray-100',
         padding: 20,
         borderRadius: 12,
         gap: 10,
@@ -207,12 +207,12 @@ export const StyledDragAndDrop = () => {
       renderItem={(item) => <Text>{item}</Text>}
       views={{
         container: {
-          backgroundColor: 'color.coolGray.800',
+          backgroundColor: 'color-coolGray-800',
           padding: 20,
           borderRadius: 16,
         },
         item: {
-          backgroundColor: 'color.coolGray.700',
+          backgroundColor: 'color-coolGray-700',
           color: 'white',
           padding: 16,
           borderRadius: 8,
@@ -266,9 +266,9 @@ export const TaskListDragAndDrop = () => {
   ]);
   
   const priorityColors = {
-    high: 'color.red.500',
-    medium: 'color.amber.500',
-    low: 'color.emerald.500',
+    high: 'color-red-500',
+    medium: 'color-amber-500',
+    low: 'color-emerald-500',
   };
   
   return (
@@ -298,7 +298,7 @@ export const TaskListDragAndDrop = () => {
                   {task.priority}
                 </Text>
               </Horizontal>
-              <Text fontSize={14} color="color.coolGray.500">
+              <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="color.coolGray.500">Name</Text>
+                  <Text fontSize={14} color="color-coolGray-500">Name</Text>
                   <Text fontSize={16}>Premium Widget</Text>
                 </div>
                 <div>
-                  <Text fontSize={14} color="color.coolGray.500">Price</Text>
+                  <Text fontSize={14} color="color-coolGray-500">Price</Text>
                   <Text fontSize={16}>$99.99</Text>
                 </div>
                 <div>
-                  <Text fontSize={14} color="color.coolGray.500">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/Form.mdx

@@ -402,7 +402,7 @@ export const DynamicForm = () => {
                       gap={12}
                       padding={16}
                       border="1px solid"
-                      borderColor="color.gray.200"
+                      borderColor="color-gray-200"
                       borderRadius={8}
                     >
                       <Horizontal justifyContent="space-between" alignItems="center">
@@ -414,7 +414,7 @@ export const DynamicForm = () => {
                             onClick={() => remove(index)}
                             variant="ghost"
                             size="sm"
-                            colorScheme="theme.error"
+                            colorScheme="theme-error"
                           >
                             Remove
                           </Button>

package/docs/components/Formik.mdx

@@ -245,7 +245,7 @@ export const FormikChatInputExample = () => {
                   <Text
                     key={index}
                     padding={8}
-                    backgroundColor="color.gray.100"
+                    backgroundColor="color-gray-100"
                     borderRadius={8}
                   >
                     {msg}
@@ -297,8 +297,8 @@ export const FormikColorInputExample = () => {
   return (
     <Formik
       initialValues={{
-        backgroundColor: 'color.blue.500',
-        textColor: 'color.white'
+        backgroundColor: 'color-blue-500',
+        textColor: 'color-white'
       }}
       validationSchema={Yup.object({
         backgroundColor: Yup.string().required('Background color is required'),