@app-studio/web 0.9.84 → 0.9.85

package/docs/components/Gradient.mdx

@@ -14,8 +14,8 @@ import { Gradient } from '@app-studio/web';
 
 export const DefaultGradient = () => (
   <Gradient 
-    from="color.blue.500" 
-    to="color.violet.500" 
+    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="color.blue.500" 
-      to="color.violet.500" 
+      from="color-blue-500" 
+      to="color-violet-500" 
       width={300} 
       height={100} 
     />
     <Gradient 
       type="radial" 
-      from="color.blue.500" 
-      to="color.violet.500" 
+      from="color-blue-500" 
+      to="color-violet-500" 
       width={300} 
       height={100} 
     />
     <Gradient 
       type="conic" 
-      from="color.blue.500" 
-      to="color.violet.500" 
+      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="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} />
+    <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="color.blue.500" 
-        to="color.violet.500" 
+        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="color.blue.500" 
-      to="color.violet.500" 
+      from="color-blue-500" 
+      to="color-violet-500" 
       width={200} 
       height={200} 
     />
     <Gradient 
       type="radial"
       shape="ellipse"
-      from="color.blue.500" 
-      to="color.violet.500" 
+      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="color.blue.500" 
-        to="color.violet.500" 
+        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="color.blue.500" 
-    to="color.violet.500" 
+    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="color.blue.500" 
-      to="color.violet.500" 
+      from="color-blue-500" 
+      to="color-violet-500" 
       animate
       animationDuration={1}
       width={300} 
       height={80} 
     />
     <Gradient 
-      from="color.blue.500" 
-      to="color.violet.500" 
+      from="color-blue-500" 
+      to="color-violet-500" 
       animate
       animationDuration={5}
       width={300} 
@@ -271,8 +271,8 @@ import { Text, Center } from 'app-studio';
 
 export const GradientWithContent = () => (
   <Gradient 
-    from="color.blue.500" 
-    to="color.violet.500" 
+    from="color-blue-500" 
+    to="color-violet-500" 
     width={300} 
     height={200}
     borderRadius={16}
@@ -297,8 +297,8 @@ import { Gradient } from '@app-studio/web';
 
 export const StyledGradient = () => (
   <Gradient 
-    from="color.blue.500" 
-    to="color.violet.500" 
+    from="color-blue-500" 
+    to="color-violet-500" 
     width={300} 
     height={200}
     views={{
@@ -379,8 +379,8 @@ import { Text, Vertical, Button } from 'app-studio';
 
 export const GradientCard = () => (
   <Gradient 
-    from="color.indigo.400" 
-    to="color.purple.700" 
+    from="color-indigo-400" 
+    to="color-purple-700" 
     width={350} 
     borderRadius={16}
     boxShadow="0 10px 40px rgba(0,0,0,0.2)"
@@ -400,7 +400,7 @@ export const GradientCard = () => (
       </Vertical>
       <Button 
         backgroundColor="white" 
-        color="color.indigo.400"
+        color="color-indigo-400"
         isFullWidth
       >
         Get Started

package/docs/components/Horizontal.mdx

@@ -15,14 +15,14 @@ import { View, Horizontal } from '@app-studio/web';
 
 export const DefaultHorizontal = () => (
   <Horizontal>
-    <View width={50} height={50} backgroundColor="theme.primary" />
+    <View width={50} height={50} backgroundColor="theme-primary" />
     <View
       width={50}
       height={50}
-      backgroundColor="theme.secondary"
+      backgroundColor="theme-secondary"
       margin="0 10px "
     />
-    <View width={50} height={50} backgroundColor="theme.warning" />
+    <View width={50} height={50} backgroundColor="theme-warning" />
   </Horizontal>
 );
 

package/docs/components/HoverCard.mdx

@@ -52,15 +52,15 @@ export const DefaultHoverCard = () => {
           <HoverCard.Content
             views={{
               container: {
-                backgroundColor: 'color.blue',
-                color: 'color.white',
+                backgroundColor: 'color-blue',
+                color: 'color-white',
                 borderRadius: '8px',
                 padding: '16px',
               },
             }}
           >
             <Text color="white">
-              This HoverCard has custom styling with a primary background color.
+              This HoverCard has custom styling with a primary background color-
             </Text>
           </HoverCard.Content>
         </HoverCard>

package/docs/components/Icon.mdx

@@ -34,7 +34,7 @@ import React from 'react';
 import { Icon } from '@app-studio/web';
 
 export const DynamicIcons = () => (
-  <Icon name="camera" widthHeight={24} color="color.primary.500" />
+  <Icon name="camera" widthHeight={24} color="color-primary-500" />
 );
 ```
 
@@ -63,17 +63,17 @@ import { Horizontal } from '@app-studio/web';
 
 export const IconColors = () => (
   <Horizontal gap={16}>
-    <HeartIcon widthHeight={32} color="color.red.500" />
-    <HeartIcon widthHeight={32} color="color.blue.500" />
-    <HeartIcon widthHeight={32} color="color.green.500" />
-    <HeartIcon widthHeight={32} color="color.purple.500" />
-    <HeartIcon widthHeight={32} color="color.orange.500" />
+    <HeartIcon widthHeight={32} color="color-red-500" />
+    <HeartIcon widthHeight={32} color="color-blue-500" />
+    <HeartIcon widthHeight={32} color="color-green-500" />
+    <HeartIcon widthHeight={32} color="color-purple-500" />
+    <HeartIcon widthHeight={32} color="color-orange-500" />
   </Horizontal>
 );
 ```
 
 ### **Icon Styles**
-Since we use Lucide, `filled` creates a solid style where applicable, but generally Lucide icons are line-art. The `filled` prop typically fills the path with the current color.
+Since we use Lucide, `filled` creates a solid style where applicable, but generally Lucide icons are line-art. The `filled` prop typically fills the path with the current color-
 
 ```tsx
 import React from 'react';
@@ -84,14 +84,14 @@ export const IconVariants = () => (
   <Vertical gap={16}>
     <Text>Filled Styles</Text>
     <Horizontal gap={16}>
-      <StarIcon widthHeight={32} filled={true} color="color.yellow.500" />
-      <HeartIcon widthHeight={32} filled={true} color="color.red.500" />
+      <StarIcon widthHeight={32} filled={true} color="color-yellow-500" />
+      <HeartIcon widthHeight={32} filled={true} color="color-red-500" />
     </Horizontal>
 
     <Text>Line Styles</Text>
     <Horizontal gap={16}>
-      <StarIcon widthHeight={32} filled={false} color="color.yellow.500" />
-      <HeartIcon widthHeight={32} filled={false} color="color.red.500" />
+      <StarIcon widthHeight={32} filled={false} color="color-yellow-500" />
+      <HeartIcon widthHeight={32} filled={false} color="color-red-500" />
     </Horizontal>
   </Vertical>
 );
@@ -237,7 +237,7 @@ The `Icon` component accepts the following props:
 | widthHeight | number | 24 | Size of the icon in pixels (sets both width and height) |
 | size | number | undefined | Alternative to widthHeight, consistent with Lucide props |
 | color | string | 'currentColor' | Color of the icon (supports theme colors) |
-| filled | boolean | false | Whether to fill the icon body with color. Note: applies to all line-art. |
+| filled | boolean | false | Whether to fill the icon body with color- Note: applies to all line-art. |
 | strokeWidth | number | 1-2 | Stroke width for the icon lines |
 | orientation | `'left' \| 'right' \| 'up' \| 'down'` | 'up' | Rotates the icon |
 | transform | string | undefined | Custom CSS transform property |
@@ -288,12 +288,12 @@ export const IconGrid = () => {
             key={iconName}
             padding={12}
             border="1px solid"
-            borderColor="color.gray.200"
+            borderColor="color-gray-200"
             borderRadius={8}
             textAlign="center"
           >
             {/* Some icons might need specific props, generic render here */}
-             <IconComponent widthHeight={24} color="color.gray.700" />
+             <IconComponent widthHeight={24} color="color-gray-700" />
             <Text fontSize={10} marginTop={4}>
               {iconName}
             </Text>

package/docs/components/Label.mdx

@@ -105,7 +105,7 @@ export const FormLabels = () => (
     <Vertical gap={8}>
       <Horizontal alignItems="center" gap={4}>
         <Label weight="medium">Full Name</Label>
-        <Label color="color.red.500" size="sm">*</Label>
+        <Label color="color-red-500" size="sm">*</Label>
       </Horizontal>
       <TextField placeholder="Enter your full name" required />
     </Vertical>
@@ -113,14 +113,14 @@ export const FormLabels = () => (
     <Vertical gap={8}>
       <Horizontal alignItems="center" gap={4}>
         <Label weight="medium">Email Address</Label>
-        <Label color="color.red.500" size="sm">*</Label>
+        <Label color="color-red-500" size="sm">*</Label>
       </Horizontal>
       <TextField type="email" placeholder="Enter your email" required />
     </Vertical>
 
     <Vertical gap={8}>
       <Label weight="medium">Additional Comments</Label>
-      <Label size="sm" color="color.gray.600">Optional</Label>
+      <Label size="sm" color="color-gray-600">Optional</Label>
       <TextArea placeholder="Enter any additional comments" rows={3} />
     </Vertical>
   </Vertical>
@@ -139,8 +139,8 @@ export const SectionHeaders = () => (
       <Label heading="h2" weight="bold" marginBottom={8}>
         Personal Information
       </Label>
-      <View height={1} backgroundColor="color.gray.200" marginBottom={16} />
-      <Label color="color.gray.600">
+      <View height={1} backgroundColor="color-gray-200" marginBottom={16} />
+      <Label color="color-gray-600">
         Please provide your personal details below.
       </Label>
     </View>
@@ -149,8 +149,8 @@ export const SectionHeaders = () => (
       <Label heading="h2" weight="bold" marginBottom={8}>
         Contact Details
       </Label>
-      <View height={1} backgroundColor="color.gray.200" marginBottom={16} />
-      <Label color="color.gray.600">
+      <View height={1} backgroundColor="color-gray-200" marginBottom={16} />
+      <Label color="color-gray-600">
         How can we reach you?
       </Label>
     </View>
@@ -159,8 +159,8 @@ export const SectionHeaders = () => (
       <Label heading="h2" weight="bold" marginBottom={8}>
         Preferences
       </Label>
-      <View height={1} backgroundColor="color.gray.200" marginBottom={16} />
-      <Label color="color.gray.600">
+      <View height={1} backgroundColor="color-gray-200" marginBottom={16} />
+      <Label color="color-gray-600">
         Customize your experience.
       </Label>
     </View>
@@ -176,13 +176,13 @@ import { Vertical } from '@app-studio/web';
 
 export const ColoredLabels = () => (
   <Vertical gap={12}>
-    <Label color="color.blue.600">Primary Label</Label>
-    <Label color="color.green.600">Success Label</Label>
-    <Label color="color.yellow.600">Warning Label</Label>
-    <Label color="color.red.600">Error Label</Label>
-    <Label color="color.gray.600">Muted Label</Label>
-    <Label color="theme.primary">Theme Primary</Label>
-    <Label color="theme.secondary">Theme Secondary</Label>
+    <Label color="color-blue-600">Primary Label</Label>
+    <Label color="color-green-600">Success Label</Label>
+    <Label color="color-yellow-600">Warning Label</Label>
+    <Label color="color-red-600">Error Label</Label>
+    <Label color="color-gray-600">Muted Label</Label>
+    <Label color="theme-primary">Theme Primary</Label>
+    <Label color="theme-secondary">Theme Secondary</Label>
   </Vertical>
 );
 ```
@@ -232,7 +232,7 @@ export const ColoredLabels = () => (
   type="email"
   aria-describedby="email-help"
 />
-<Label id="email-help" size="sm" color="color.gray.600">
+<Label id="email-help" size="sm" color="color-gray-600">
   We'll never share your email with anyone else.
 </Label>
 ```
@@ -247,11 +247,11 @@ import { Label } from '@app-studio/web';
 export const CustomStyledLabel = () => (
   <Label
     weight="bold"
-    color="color.blue.600"
+    color="color-blue-600"
     textTransform="uppercase"
     letterSpacing="0.05em"
     borderBottom="2px solid"
-    borderColor="color.blue.600"
+    borderColor="color-blue-600"
     paddingBottom={4}
     display="inline-block"
   >
@@ -269,7 +269,7 @@ export const ResponsiveLabel = () => (
   <Label
     size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }}
     weight={{ mobile: 'normal', desktop: 'bold' }}
-    color={{ mobile: 'color.gray.700', desktop: 'color.blue.600' }}
+    color={{ mobile: 'color-gray-700', desktop: 'color-blue-600' }}
   >
     Responsive Label
   </Label>
@@ -287,12 +287,12 @@ export const InteractiveLabel = () => {
   return (
     <Label
       cursor="pointer"
-      color={isActive ? 'color.blue.600' : 'color.gray.700'}
+      color={isActive ? 'color-blue-600' : 'color-gray-700'}
       weight={isActive ? 'bold' : 'normal'}
       onClick={() => setIsActive(!isActive)}
       transition="all 0.2s ease"
       _hover={{
-        color: 'color.blue.600',
+        color: 'color-blue-600',
       }}
     >
       Click me to toggle
@@ -351,9 +351,9 @@ export const InteractiveLabel = () => {
 ```tsx
 const StatusLabel = ({ status, children }) => {
   const colors = {
-    active: 'color.green.600',
-    pending: 'color.yellow.600',
-    inactive: 'color.red.600',
+    active: 'color-green-600',
+    pending: 'color-yellow-600',
+    inactive: 'color-red-600',
   };
 
   return (
@@ -374,7 +374,7 @@ const StatusLabel = ({ status, children }) => {
 <Vertical gap={4}>
   <Label weight="medium">Password</Label>
   <TextField type="password" />
-  <Label size="sm" color="color.gray.600">
+  <Label size="sm" color="color-gray-600">
     Must be at least 8 characters with uppercase, lowercase, and numbers
   </Label>
 </Vertical>
@@ -411,7 +411,7 @@ import { Card } from '@app-studio/web';
     </Label>
   </Card.Header>
   <Card.Body>
-    <Label color="color.gray.600">
+    <Label color="color-gray-600">
       Card description text
     </Label>
   </Card.Body>
@@ -427,7 +427,7 @@ import { NavigationMenu } from '@app-studio/web';
     <Label
       size="xs"
       weight="bold"
-      color="color.gray.500"
+      color="color-gray-500"
       textTransform="uppercase"
       letterSpacing="0.05em"
     >

package/docs/components/Link.mdx

@@ -41,8 +41,8 @@ export const UnderlineLink = () => (
     <Link
       to={'https://www.npmjs.com/package/app-studio'}
       underline="underline"
-      color="theme.primary"
-      textDecorationColor="theme.primary"
+      color="theme-primary"
+      textDecorationColor="theme-primary"
     >
       <Text>Underline</Text>
     </Link>

package/docs/components/Loader.mdx

@@ -93,11 +93,11 @@ import { Horizontal } from 'app-studio';
 
 export const ColoredLoaders = () => (
   <Horizontal gap={30}>
-    <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" />
+    <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="color.blue.500" 
-    textColor="color.blue.500"
+    loaderColor="color-blue-500" 
+    textColor="color-blue-500"
   >
     Loading...
   </Loader>
@@ -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="color.blue.500" />
-        <Loader type="spinner" size="md" loaderColor="color.emerald.500" />
-        <Loader type="spinner" size="lg" loaderColor="color.red.500" />
+        <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="color.blue.500" />
-        <Loader type="dotted" size="md" loaderColor="color.emerald.500" />
-        <Loader type="dotted" size="lg" loaderColor="color.red.500" />
+        <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="color.blue.500" textColor="color.blue.500">
+        <Loader type="spinner" loaderColor="color-blue-500" textColor="color-blue-500">
           Loading...
         </Loader>
         <Loader 
           type="dotted" 
-          loaderColor="color.emerald.500" 
-          textColor="color.emerald.500"
+          loaderColor="color-emerald-500" 
+          textColor="color-emerald-500"
           textPosition="right"
         >
           Processing

package/docs/components/OTPInput.mdx

@@ -54,11 +54,11 @@ export const CustomizedOTPInput = () => {
         shadow={{ boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 6px' }}
         views={{
           container: {
-            borderColor: 'theme.primary',
-            backgroundColor: 'color.gray.50',
+            borderColor: 'theme-primary',
+            backgroundColor: 'color-gray.50',
           },
           input: {
-            color: 'theme.primary',
+            color: 'theme-primary',
             fontWeight: 'bold',
           },
         }}
@@ -116,7 +116,7 @@ export const OnCompleteDemo = () => {
         isAutoFocus
       />
       {message && (
-        <Text color="theme.success" fontWeight="medium">
+        <Text color="theme-success" fontWeight="medium">
           {message}
         </Text>
       )}
@@ -160,11 +160,11 @@ export const StepValuesOTPInput = () => {
         gap={12}
         views={{
           container: {
-            borderColor: 'theme.primary',
-            backgroundColor: 'color.gray.50',
+            borderColor: 'theme-primary',
+            backgroundColor: 'color-gray.50',
           },
           input: {
-            color: 'theme.primary',
+            color: 'theme-primary',
             fontWeight: 'bold',
           },
         }}
@@ -172,13 +172,13 @@ export const StepValuesOTPInput = () => {
 
       <Horizontal justifyContent="space-between" width="100%">
         {stepValues.map((step) => (
-          <Text key={step} fontSize={14} color="color.blueGray.500">
+          <Text key={step} fontSize={14} color="color-blueGray-500">
             {step}
           </Text>
         ))}
       </Horizontal>
 
-      <Text fontSize={14} color="color.gray.600">
+      <Text fontSize={14} color="color-gray-600">
         This OTP input will snap to the closest value from:{' '}
         {stepValues.join(', ')}
       </Text>

package/docs/components/Password.mdx

@@ -59,7 +59,7 @@ import { CloseEyeIcon } from '@app-studio/web';
 
 <Password
   placeholder="Password"
-  colorScheme="theme.secondary"
+  colorScheme="theme-secondary"
   visibleIcon={<OpenEyeIcon size={14} />}
   hiddenIcon={<CloseEyeIcon size={14} />}
   error

package/docs/components/ProgressBar.mdx

@@ -16,8 +16,8 @@ import { Vertical } from 'app-studio';
 export const LinearExamples = () => (
   <Vertical gap={20}>
     <ProgressBar value={30} />
-    <ProgressBar value={60} color="color.blue.500" height={8} radius={4} />
-    <ProgressBar value={90} color="color.green.500" height={12} radius={6} />
+    <ProgressBar value={60} color="color-blue-500" height={8} radius={4} />
+    <ProgressBar value={90} color="color-green-500" height={12} radius={6} />
   </Vertical>
 );
 ```
@@ -41,7 +41,7 @@ export const CircularExamples = () => (
       shape="circle" 
       value={75} 
       size={80} 
-      color="color.purple.500" 
+      color="color-purple-500" 
       strokeWidth={8}
       showLabel 
     />
@@ -49,11 +49,11 @@ export const CircularExamples = () => (
       shape="circle" 
       value={90} 
       size={100} 
-      color="color.orange.500" 
+      color="color-orange-500" 
       strokeWidth={10} 
-      backgroundColor="color.orange.100"
+      backgroundColor="color-orange-100"
       showLabel
-      labelColor="color.orange.700"
+      labelColor="color-orange-700"
     />
   </Horizontal>
 );
@@ -99,7 +99,7 @@ export const DynamicProgress = () => {
   return (
     <Vertical gap={20}>
       <Text>Uploading... {progress}%</Text>
-      <ProgressBar value={progress} color="color.blue.600" animated />
+      <ProgressBar value={progress} color="color-blue-600" animated />
       
       <Horizontal gap={20} marginTop={20}>
         <ProgressBar 
@@ -107,7 +107,7 @@ export const DynamicProgress = () => {
           value={progress} 
           size={50} 
           showLabel 
-          color="color.blue.600" 
+          color="color-blue-600" 
         />
       </Horizontal>
     </Vertical>
@@ -128,7 +128,7 @@ export const CustomStyle = () => (
     height={20}
     views={{
       container: { 
-        borderColor: 'color.gray.300', 
+        borderColor: 'color-gray-300', 
         borderWidth: 1, 
         padding: 2, 
         borderRadius: 12