@app-studio/web 0.9.83 → 0.9.85

package/docs/app-studio/Components.md

@@ -9,7 +9,7 @@ The `Element` component is the foundation of App-Studio. It is responsible for h
 ### Usage
 
 ```jsx
-<Element backgroundColor="color.blue" padding={10}>This is an element</Element>
+<Element backgroundColor="color-blue" padding={10}>This is an element</Element>
 ```
 
 It is the base component for all other components in the library. It adds additional properties to help manage design:
@@ -29,7 +29,7 @@ import { View } from 'app-studio';
 
 <View
   widthHeight={100}
-  backgroundColor="color.white"
+  backgroundColor="color-white"
   marginTop={20}
 >
   {/* Content */}
@@ -64,7 +64,7 @@ For displaying text content with theme support. Extends the basic `span` HTML el
 import { Text } from 'app-studio';
 
 <Text
-  color="color.black"
+  color="color-black"
   marginRight={10}
 >
   Content
@@ -72,7 +72,7 @@ import { Text } from 'app-studio';
 
 // With theme mode
 <Text
-  color="color.red"
+  color="color-red"
   themeMode="dark"
 >
   Dark mode text
@@ -129,7 +129,7 @@ import { Input } from 'app-studio';
   shadow={9}
   on={{
     hover: {
-      backgroundColor: 'color.red'
+      backgroundColor: 'color-red'
     }
   }}
 />
@@ -144,12 +144,12 @@ import { Button } from 'app-studio';
 <Button
   paddingHorizontal={20}
   paddingVertical={10}
-  backgroundColor="color.green.500"
-  color="color.white"
+  backgroundColor="color-green-500"
+  color="color-white"
   borderRadius={5}
   fontWeight="bold"
   on={{
-    hover: { backgroundColor: 'color.green.600' },
+    hover: { backgroundColor: 'color-green-600' },
     active: { transform: 'scale(0.95)' }
   }}
 >

package/docs/app-studio/Design.md

@@ -8,7 +8,7 @@ Here is an example:
 
 ```jsx
 <View
-  backgroundColor="theme.primary"
+  backgroundColor="theme-primary"
   padding={20}
   margin={10}
   width={200}
@@ -25,7 +25,7 @@ The `shadow` prop allows you to apply shadow effects to components. It can accep
 Here is an example:
 
 ```jsx
-<View backgroundColor="theme.primary" padding={20} shadow={6}>
+<View backgroundColor="theme-primary" padding={20} shadow={6}>
   I have a shadow
 </View>
 ```

package/docs/app-studio/Events.md

@@ -21,25 +21,25 @@ Here `eventName` is the name of the CSS pseudo-class, `styleProps` are the CSS p
 As an alternative to the `on` prop, you can use underscore-prefixed properties directly. This provides a more concise syntax for common event-based styling:
 
 ```jsx
-_hover={{ backgroundColor: 'blue.100' }}
+_hover={{ backgroundColor: 'blue-100' }}
 ```
 
 You can also use string values for simple color changes:
 
 ```jsx
-_hover="color.blue.500"
+_hover="color-blue-500"
 ```
 
 Underscore-prefixed properties support all the same events as the `on` prop, but with a more direct syntax. For example, instead of writing:
 
 ```jsx
-on={{ hover: { backgroundColor: 'blue.100' } }}
+on={{ hover: { backgroundColor: 'blue-100' } }}
 ```
 
 You can simply write:
 
 ```jsx
-_hover={{ backgroundColor: 'blue.100' }}
+_hover={{ backgroundColor: 'blue-100' }}
 ```
 
 Both approaches achieve the same result, so you can choose the syntax that best fits your coding style. The underscore-prefixed approach is particularly useful when you want to apply styles to multiple different states without nesting them all within a single `on` prop object.
@@ -54,18 +54,18 @@ Both approaches achieve the same result, so you can choose the syntax that best
 <View
   backgroundColor="grey"
   padding={20}
-  on={{ hover: { backgroundColor: 'blue.100' } }}
+  on={{ hover: { backgroundColor: 'blue-100' } }}
 >
   Hover over me
 </View>
 ```
 
-In this example, the `View` component's background color will change to `blue.100` when the user hovers over it.
+In this example, the `View` component's background color will change to `blue-100` when the user hovers over it.
 
 ### Example 2: Background Color Toggle for `Element`
 
 ```jsx
-<Element backgroundColor="blue" on={{ hover: { backgroundColor: 'color.red' } }} />
+<Element backgroundColor="blue" on={{ hover: { backgroundColor: 'color-red' } }} />
 ```
 
 Here, the `Element` component initially has a background color of `blue`. When hovered over, the background color toggles to `red`.
@@ -125,10 +125,10 @@ The `on` prop supports a comprehensive set of CSS pseudo-classes, allowing you t
 <Form.Input
   value="Focus me"
   on={{
-    focus: { borderColor: 'color.blue.500', boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.5)' },
-    invalid: { borderColor: 'color.red.500' },
-    disabled: { backgroundColor: 'color.gray.100', cursor: 'not-allowed' },
-    placeholder: { color: 'color.gray.400' }
+    focus: { borderColor: 'color-blue-500', boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.5)' },
+    invalid: { borderColor: 'color-red-500' },
+    disabled: { backgroundColor: 'color-gray-100', cursor: 'not-allowed' },
+    placeholder: { color: 'color-gray-400' }
   }}
 />
 ```
@@ -140,10 +140,10 @@ This example shows how to style an input field in different states: when it has
 ```jsx
 <Form.Input
   value="Focus me"
-  _focus={{ borderColor: 'color.blue.500', boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.5)' }}
-  _invalid={{ borderColor: 'color.red.500' }}
-  _disabled={{ backgroundColor: 'color.gray.100', cursor: 'not-allowed' }}
-  _placeholder={{ color: 'color.gray.400' }}
+  _focus={{ borderColor: 'color-blue-500', boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.5)' }}
+  _invalid={{ borderColor: 'color-red-500' }}
+  _disabled={{ backgroundColor: 'color-gray-100', cursor: 'not-allowed' }}
+  _placeholder={{ color: 'color-gray-400' }}
 />
 ```
 
@@ -153,13 +153,13 @@ This example achieves the same result as the previous one but uses the more conc
 
 ```jsx
 <Button
-  backgroundColor="color.blue.500"
+  backgroundColor="color-blue-500"
   color="white"
   padding={10}
   borderRadius={4}
   on={{
-    hover: { backgroundColor: 'color.blue.600', shadow: 3 },
-    active: { backgroundColor: 'color.blue.700', transform: 'scale(0.98)', shadow: 1 },
+    hover: { backgroundColor: 'color-blue-600', shadow: 3 },
+    active: { backgroundColor: 'color-blue-700', transform: 'scale(0.98)', shadow: 1 },
     focus: { boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.5)' },
     disabled: { opacity: 0.6, cursor: 'not-allowed', shadow: 0 }
   }}
@@ -176,12 +176,12 @@ This button changes its appearance based on different interaction states, provid
 
 ```jsx
 <Button
-  backgroundColor="color.blue.500"
+  backgroundColor="color-blue-500"
   color="white"
   padding={10}
   borderRadius={4}
-  _hover={{ backgroundColor: 'color.blue.600', shadow: 3 }}
-  _active={{ backgroundColor: 'color.blue.700', transform: 'scale(0.98)', shadow: 1 }}
+  _hover={{ backgroundColor: 'color-blue-600', shadow: 3 }}
+  _active={{ backgroundColor: 'color-blue-700', transform: 'scale(0.98)', shadow: 1 }}
   _focus={{ boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.5)' }}
   _disabled={{ opacity: 0.6, cursor: 'not-allowed', shadow: 0 }}
 >
@@ -199,11 +199,11 @@ This example achieves the same result as the previous one but uses the more conc
     <View
       as="li"
       padding={10}
-      borderBottom="1px solid color.gray.200"
+      borderBottom="1px solid color-gray-200"
       on={{
-        firstChild: { borderTop: '1px solid color.gray.200' },
+        firstChild: { borderTop: '1px solid color-gray-200' },
         lastChild: { borderBottom: 'none' },
-        hover: { backgroundColor: 'color.gray.50' }
+        hover: { backgroundColor: 'color-gray.50' }
       }}
     >
       {item.name}
@@ -228,7 +228,7 @@ This example shows how to apply different styles to list items based on their po
     marginRight={8}
     on={{
       checked: { /* Custom styles for the checked state */ },
-      focus: { outline: 'none', boxShadow: '0 0 0 2px color.blue.300' }
+      focus: { outline: 'none', boxShadow: '0 0 0 2px color-blue-300' }
     }}
   />
   Accept terms and conditions
@@ -248,16 +248,16 @@ The `on` prop can be combined with animations to create dynamic effects:
 ```jsx
 <Button
   padding={10}
-  backgroundColor="color.purple.500"
+  backgroundColor="color-purple-500"
   color="white"
   borderRadius={4}
   on={{
     hover: {
-      backgroundColor: 'color.purple.600',
+      backgroundColor: 'color-purple-600',
       animate: Animation.pulse({ duration: '1s', iterationCount: 'infinite' })
     },
     active: {
-      backgroundColor: 'color.purple.700',
+      backgroundColor: 'color-purple-700',
       animate: Animation.scale({ from: { transform: 'scale(1)' }, to: { transform: 'scale(0.95)' }, duration: '0.1s' })
     }
   }}
@@ -273,15 +273,15 @@ You can also use underscore-prefixed properties with animations:
 ```jsx
 <Button
   padding={10}
-  backgroundColor="color.purple.500"
+  backgroundColor="color-purple-500"
   color="white"
   borderRadius={4}
   _hover={{
-    backgroundColor: 'color.purple.600',
+    backgroundColor: 'color-purple-600',
     animate: Animation.pulse({ duration: '1s', iterationCount: 'infinite' })
   }}
   _active={{
-    backgroundColor: 'color.purple.700',
+    backgroundColor: 'color-purple-700',
     animate: Animation.scale({ from: { transform: 'scale(1)' }, to: { transform: 'scale(0.95)' }, duration: '0.1s' })
   }}
 >

package/docs/app-studio/Hooks.md

@@ -146,7 +146,7 @@ function ThemeComponent() {
       <Button onClick={() => setThemeMode(themeMode === 'light' ? 'dark' : 'light')}>
         Toggle Theme
       </Button>
-      <View backgroundColor={getColor('theme.primary')}>
+      <View backgroundColor={getColor('theme-primary')}>
         Themed content
       </View>
     </>
@@ -259,7 +259,7 @@ function InViewComponent() {
   });
 
   return (
-    <View ref={ref} height={200} backgroundColor="gray.100">
+    <View ref={ref} height={200} backgroundColor="gray-100">
       {inView ? 'Visible' : 'Hidden'}
     </View>
   );
@@ -324,12 +324,12 @@ function PositionAwareComponent() {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         padding={20}
-        backgroundColor="gray.100"
+        backgroundColor="gray-100"
         borderRadius={8}
       >
         Hover me for tooltip
         {relation && (
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="gray-600">
             Position: {relation.position.vertical}-{relation.position.horizontal}
             <br />
             More space: {relation.space.vertical}-{relation.space.horizontal}
@@ -373,7 +373,7 @@ function ManualUpdateExample() {
           More space available on {relation.space.vertical} and {relation.space.horizontal}.
         </Text>
       )}
-      <View ref={ref} padding={20} backgroundColor="blue.100" marginTop={20}>
+      <View ref={ref} padding={20} backgroundColor="blue-100" marginTop={20}>
         Target Element
       </View>
     </View>
@@ -390,7 +390,7 @@ function CustomEventsExample() {
   });
 
   return (
-    <View ref={ref} padding={20} backgroundColor="green.100">
+    <View ref={ref} padding={20} backgroundColor="green-100">
       Hover, scroll, or resize to see updates
       {relation && (
         <Text fontSize="sm" marginTop={8}>

package/docs/app-studio/Providers.md

@@ -40,8 +40,8 @@ function ThemedComponent() {
   
   return (
     <View 
-      backgroundColor={theme.colors.primary}
-      padding={theme.spacing.medium}
+      backgroundColor={theme-colors.primary}
+      padding={theme-spacing.medium}
     >
       <Button onPress={() => setMode(mode === 'light' ? 'dark' : 'light')}>
         Toggle Theme

package/docs/app-studio/README.md

@@ -123,10 +123,10 @@ function MyStyledElement() {
     <Element
       as="section"
       padding={16}
-      backgroundColor="color.blue.500"
+      backgroundColor="color-blue-500"
       borderRadius={8}
-      color="color.white"
-      on={{ hover: { backgroundColor: 'color.blue.600' } }}
+      color="color-white"
+      on={{ hover: { backgroundColor: 'color-blue-600' } }}
       media={{ mobile: { padding: 8 } }}
     >
       This is a styled section.
@@ -161,9 +161,9 @@ import { View, Horizontal, Text } from 'app-studio';
 
 function MyLayout() {
   return (
-    <View padding={16} backgroundColor="color.gray.100">
+    <View padding={16} backgroundColor="color-gray-100">
       <Horizontal gap={8} alignItems="center">
-        <View width={50} height={50} backgroundColor="color.red.500" borderRadius="50%" />
+        <View width={50} height={50} backgroundColor="color-red-500" borderRadius="50%" />
         <Text fontSize="lg" fontWeight="bold">Item Title</Text>
       </Horizontal>
     </View>
@@ -199,7 +199,7 @@ function MyText() {
     <Text
       fontSize="xl"
       fontWeight="bold"
-      color="theme.primary"
+      color="theme-primary"
       textAlign="center"
       toUpperCase
     >
@@ -242,7 +242,7 @@ function MyImage() {
       <Image src="logo.png" alt="Company Logo" width={100} height={50} objectFit="contain" />
 
       <ImageBackground src="hero.jpg" height={200} width="100%" display="flex" alignItems="center" justifyContent="center">
-        <Text color="color.white" fontSize="2xl">Overlay Text</Text>
+        <Text color="color-white" fontSize="2xl">Overlay Text</Text>
       </ImageBackground>
     </>
   );
@@ -286,9 +286,9 @@ function MyForm() {
 
   return (
     <Form onSubmit={handleSubmit} display="flex" flexDirection="column" gap={12}>
-      <Input name="username" placeholder="Username" padding={8} borderRadius={4} border="1px solid color.gray.300" />
-      <Input name="password" type="password" placeholder="Password" padding={8} borderRadius={4} border="1px solid color.gray.300" />
-      <Button type="submit" backgroundColor="color.blue.500" color="color.white" padding={10} borderRadius={4} cursor="pointer">
+      <Input name="username" placeholder="Username" padding={8} borderRadius={4} border="1px solid color-gray-300" />
+      <Input name="password" type="password" placeholder="Password" padding={8} borderRadius={4} border="1px solid color-gray-300" />
+      <Button type="submit" backgroundColor="color-blue-500" color="color-white" padding={10} borderRadius={4} cursor="pointer">
         Log In
       </Button>
     </Form>
@@ -346,7 +346,7 @@ function AnimatedComponent() {
     <View
       animate={Animation.fadeIn({ duration: '0.5s' })}
       padding={20}
-      backgroundColor="color.blue.200"
+      backgroundColor="color-blue-200"
     >
       Fades In
     </View>
@@ -394,7 +394,7 @@ function SequencedAnimation() {
     <View
       animate={sequence}
       padding={20}
-      backgroundColor="color.green.200"
+      backgroundColor="color-green-200"
     >
       Sequence
     </View>
@@ -448,7 +448,7 @@ function ResponsiveAnimation() {
   return (
     <View
       padding={20}
-      backgroundColor="color.purple.200"
+      backgroundColor="color-purple-200"
       media={{
         mobile: {
           animate: Animation.fadeIn({ duration: '1s' })
@@ -496,7 +496,7 @@ import { View } from './components/View'; // Assuming View component path
 function HoverComponent() {
   const [hoverRef, isHovered] = useHover();
   return (
-    <View ref={hoverRef} padding={20} backgroundColor={isHovered ? 'color.gray.200' : 'color.white'}>
+    <View ref={hoverRef} padding={20} backgroundColor={isHovered ? 'color-gray-200' : 'color-white'}>
       Hover over me!
     </View>
   );
@@ -511,8 +511,8 @@ function ResponsiveComponent() {
   return (
     <View>
       <Text>Current Screen: {screen}, Orientation: {orientation}</Text>
-      {on('mobile') && <Text color="color.red.500">This only shows on mobile!</Text>}
-      {on('desktop') && <Text color="color.blue.500">This only shows on desktop!</Text>}
+      {on('mobile') && <Text color="color-red-500">This only shows on mobile!</Text>}
+      {on('desktop') && <Text color="color-blue-500">This only shows on desktop!</Text>}
       {/* Check specific breakpoint */}
       {on('md') && <Text>Medium screen size detected.</Text>}
     </View>
@@ -527,7 +527,7 @@ function LazyLoadComponent() {
   const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 });
 
   return (
-    <View ref={ref} height={200} backgroundColor="color.gray.100">
+    <View ref={ref} height={200} backgroundColor="color-gray-100">
       {inView ? (
         <View animate={Animation.fadeIn()}>Content loaded!</View>
       ) : (
@@ -552,14 +552,14 @@ Manages the application's theme, including color palettes, light/dark modes, and
 
 | Prop    | Type               | Default                             | Description                                                                       |
 | :------ | :----------------- | :---------------------------------- | :-------------------------------------------------------------------------------- |
-| `theme` | `object`           | `{ primary: 'color.black', ... }`   | Custom theme tokens (e.g., `primary`, `secondary`) that map to color strings.     |
+| `theme` | `object`           | `{ primary: 'color-black', ... }`   | Custom theme tokens (e.g., `primary`, `secondary`) that map to color strings.     |
 | `mode`  | `'light' \| 'dark'`| `'light'`                           | Sets the initial theme mode.                                                      |
 | `dark`  | `Colors`           | Default dark palette & main colors  | Configuration object for dark mode containing `main` (singleton colors) and `palette`. |
 | `light` | `Colors`           | Default light palette & main colors | Configuration object for light mode containing `main` (singleton colors) and `palette`.|
 
 **Context Values (via `useTheme`)**
 
-*   `getColor(colorName, mode?)`: Resolves a color string (e.g., `color.blue.500`, `theme.primary`, `blackAlpha.500`) to its CSS value for the specified or current theme mode. You can also directly access specific theme mode colors using the `light.` or `dark.` prefix (e.g., `light.white` or `dark.red.200`), which will always use that specific theme mode's color regardless of the current theme setting.
+*   `getColor(colorName, mode?)`: Resolves a color string (e.g., `color-blue-500`, `theme-primary`, `blackAlpha-500`) to its CSS value for the specified or current theme mode. You can also directly access specific theme mode colors using the `light.` or `dark.` prefix (e.g., `light.white` or `dark.red-200`), which will always use that specific theme mode's color regardless of the current theme setting.
 *   `theme`: The merged theme configuration object.
 *   `themeMode`: The current mode ('light' or 'dark').
 *   `setThemeMode(mode)`: Function to change the theme mode.
@@ -633,8 +633,8 @@ function ThemedComponent() {
 
   return (
     <View
-      backgroundColor={getColor('theme.primary')} // Get theme color
-      color={getColor('color.white')}            // Get singleton color
+      backgroundColor={getColor('theme-primary')} // Get theme color
+      color={getColor('color-white')}            // Get singleton color
       borderRadius={8}
       padding={10}
     >
@@ -644,8 +644,8 @@ function ThemedComponent() {
       <View
         marginTop={10}
         padding={8}
-        backgroundColor={getColor('light.blue.200')} // Always light mode blue
-        borderColor={getColor('dark.red.500')}       // Always dark mode red
+        backgroundColor={getColor('light.blue-200')} // Always light mode blue
+        borderColor={getColor('dark.red-500')}       // Always dark mode red
         borderWidth={2}
         borderStyle="solid"
         borderRadius={4}
@@ -656,7 +656,7 @@ function ThemedComponent() {
       {/* Direct usage in component props without getColor */}
       <View marginTop={10} padding={8}>
         <Text color="light.white">Always light mode white text</Text>
-        <Text color="dark.blue.700" marginTop={4}>Always dark mode blue text</Text>
+        <Text color="dark.blue-700" marginTop={4}>Always dark mode blue text</Text>
       </View>
     </View>
   );
@@ -691,16 +691,16 @@ function ResponsiveCard() {
     <View
       flexDirection={on('mobile') ? 'column' : 'row'} // Stack on mobile, row otherwise
       padding={16}
-      backgroundColor="color.white"
+      backgroundColor="color-white"
       borderRadius={8}
       shadow={2} // Apply shadow level 2
       gap={on('mobile') ? 12 : 20}
     >
       <View flex={1}> {/* Use flex for layout control */}
         <Text fontWeight="bold" fontSize="lg">Card Title</Text>
-        <Text color="color.gray.600">Some descriptive content here.</Text>
+        <Text color="color-gray-600">Some descriptive content here.</Text>
       </View>
-      <View width={on('mobile') ? '100%' : 100} height={100} backgroundColor="color.blue.100" borderRadius={4}>
+      <View width={on('mobile') ? '100%' : 100} height={100} backgroundColor="color-blue-100" borderRadius={4}>
         {/* Image or placeholder */}
       </View>
     </View>
@@ -718,14 +718,14 @@ function AnimatedButton() {
     <Button
       paddingHorizontal={20}
       paddingVertical={10}
-      backgroundColor="color.green.500"
-      color="color.white"
+      backgroundColor="color-green-500"
+      color="color-white"
       borderRadius={5}
       fontWeight="bold"
       animate={Animation.fadeIn({ duration: '0.5s' })}
       on={{
         hover: {
-          backgroundColor: 'color.green.600',
+          backgroundColor: 'color-green-600',
           animate: Animation.pulse({ duration: '0.8s', iterationCount: 2 })
         },
         active: {

package/docs/app-studio/Responsive.md

@@ -21,13 +21,13 @@ const Example = () => {
     <View widthHeight={100} 
      media={{
         mobile: {
-          backgroundColor: 'color.green',
+          backgroundColor: 'color-green',
         },
         tablet: {
-          backgroundColor: 'color.yellow',
+          backgroundColor: 'color-yellow',
         },
         xl: {
-          backgroundColor: 'color.blue',
+          backgroundColor: 'color-blue',
         },
       }}  
       />