@app-studio/web 0.9.39 → 0.9.43

package/docs/components/Badge.mdx

@@ -1,91 +1,69 @@
 # Badge
 
-Displays a visual badge for labeling or highlighting items
+Renders a badge with various styles and states according to the design guidelines.
 
 ### **Import**
-  ```tsx
-  import { Badge } from '@app-studio/web';
-  ```
+```tsx
+import { Badge } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Badge } from '../Badge';
+import { Badge } from '@app-studio/web';
 
 export const DefaultDemo = () => <Badge content="default" />;
-
 ```
 
 ### **content**
-The content displayed in the Badge component.
+The content to be displayed within the badge.
+
+- **Type:** `string | number`
 
 ```tsx
 import React from 'react';
-import { Badge } from '../Badge';
+import { Badge } from '@app-studio/web';
 
 export const ContentDemo = () => <Badge content="content" />;
-
 ```
 
 ### **variant**
-Determines the Badge's style variant.
+Determines the styling variants a UI component can have, which could include filled, outlined, or ghost styles among others.
+
+- **Type:** `Variant`
+- **Default:** `filled`
+- **Possible Values:** `filled, outline, link, ghost`
 
 ```tsx
 import React from 'react';
 import { Vertical } from 'app-studio';
 
-import { Badge } from '../Badge';
-import { Variant } from '../Badge/Badge.type';
+import { Badge } from '@app-studio/web';
+import { Variant } from '@app-studio/web';
 import { View } from 'app-studio';
 export const VariantDemo = () => (
   <Vertical gap={15}>
     {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
       <View position={'relative'} key={index}>
-        <Badge
-          content={variant}
-          variant={variant as Variant}
-          colorScheme="theme.primary"
-        />
+        <Badge content={variant} variant={variant as Variant} />
       </View>
     ))}
   </Vertical>
 );
-
-```
-
-### **colorScheme**
-Specifies a custom color scheme for the Badge.
-
-```tsx
-import React from 'react';
-import { Badge } from '../Badge';
-import { Horizontal } from 'app-studio';
-
-export const ColorSchemeDemo = () => (
-  <Horizontal gap={10}>
-    {[
-      'theme.primary',
-      'theme.secondary',
-      'theme.warning',
-      'theme.success',
-      'theme.error',
-    ].map((color, index) => (
-      <Badge key={index} colorScheme={color} isAuto content={color} />
-    ))}
-  </Horizontal>
-);
-
 ```
 
 ### **position**
-Defines the position of the Badge relative to its container.
+Lists possible positions for UI elements that can be placed in one of the corners of a container, like notification badges.
+
+- **Type:** `Position`
+- **Possible Values:** `top-right, top-left, bottom-right, bottom-left`
 
 ```tsx
 import React from 'react';
-import { Badge } from '../Badge';
+import { Badge } from '@app-studio/web';
 import { View } from 'app-studio';
 import { Horizontal } from 'app-studio';
-import { Position } from '../Badge/Badge.type';
+import { Position } from '@app-studio/web';
 
 export const PositionDemo = () => (
   <Horizontal gap={10}>
@@ -104,18 +82,21 @@ export const PositionDemo = () => (
     )}
   </Horizontal>
 );
-
 ```
 
 ### **size**
-Determines the size of the Badge.
+Specifies available sizes for UI elements, catering to a range of scalability from extra small to extra large.
+
+- **Type:** `Size`
+- **Default:** `md`
+- **Possible Values:** `xs, sm, md, lg, xl`
 
 ```tsx
 import React from 'react';
 import { Vertical } from 'app-studio';
 
-import { Badge } from '../Badge';
-import { Size } from '../Badge/Badge.type';
+import { Badge } from '@app-studio/web';
+import { Size } from '@app-studio/web';
 import { View } from 'app-studio';
 export const SizeDemo = () => (
   <Vertical gap={10}>
@@ -126,17 +107,20 @@ export const SizeDemo = () => (
     ))}
   </Vertical>
 );
-
 ```
 
 ### **shape**
-Specifies the shape of the Badge.
+Defines possible values for the shape of a UI component such as buttons or badges.
+
+- **Type:** `Shape`
+- **Default:** `pillShaped`
+- **Possible Values:** `sharp, rounded, pillShaped`
 
 ```tsx
 import React from 'react';
 import { Horizontal } from 'app-studio';
-import { Badge } from '../Badge';
-import { Shape } from '../Badge/Badge.type';
+import { Badge } from '@app-studio/web';
+import { Shape } from '@app-studio/web';
 import { View } from 'app-studio';
 export const ShapeDemo = () => (
   <Horizontal gap={15}>
@@ -147,74 +131,5 @@ export const ShapeDemo = () => (
     ))}
   </Horizontal>
 );
-
-```
-
-### **styles**
-Custom styling that overrides default views.
-
-```tsx
-import React from 'react';
-import { Badge } from '../Badge';
-
-export const StylesDemo = () => {
-  return (
-    <Badge
-      content="styles"
-      views={{
-        container: {
-          backgroundColor: 'transparent',
-        },
-        text: {
-          color: 'purple',
-        },
-      }}
-    />
-  );
-};
-
-```
-
-### **Theme Mode Support**
-The Badge component supports both light and dark themes through the `themeMode` prop.
-
-```tsx
-import React from 'react';
-import { Badge } from '../Badge';
-import { Vertical, Horizontal } from 'app-studio';
-import { Text } from 'app-studio';
-import { Variant } from '../Badge/Badge.type';
-
-export const DarkModeDemo = () => {
-  const variants: Variant[] = ['filled', 'outline', 'link', 'ghost'];
-
-  return (
-    <Vertical gap={24}>
-      <Text fontSize={20} fontWeight="bold">Light Mode Badges</Text>
-      <Horizontal gap={16} alignItems="center">
-        {variants.map((variant) => (
-          <Badge
-            key={variant}
-            content={variant}
-            variant={variant}
-            themeMode="light"
-          />
-        ))}
-      </Horizontal>
-
-      <Text fontSize={20} fontWeight="bold" marginTop={40}>Dark Mode Badges</Text>
-      <Horizontal gap={16} alignItems="center">
-        {variants.map((variant) => (
-          <Badge
-            key={variant}
-            content={variant}
-            variant={variant}
-            themeMode="dark"
-          />
-        ))}
-      </Horizontal>
-    </Vertical>
-  );
-};
 ```
 

package/docs/components/Button.mdx

@@ -1,139 +1,106 @@
 # Button
 
-Customizable button for user interaction
+A versatile button component for user interaction with various styles, sizes, and interactive effects.
 
 ### **Import**
-  ```tsx
-  import { Button } from '@app-studio/web';
-  ```
+```tsx
+import { Button } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 
 export const DefaultButton = () => (
   <Button onClick={() => alert('Hello, World!')}>Default</Button>
 );
-
-```
-
-### **colorScheme**
-Optional string to define the color scheme of the button.
-
-```tsx
-import React from 'react';
-import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
-
-export const ColoredButtons = () => (
-  <Horizontal gap={10}>
-    {[
-      'theme.primary',
-      'theme.secondary',
-      'theme.warning',
-      'theme.success',
-      'theme.error',
-    ].map((color, index) => (
-      <Button key={index} colorScheme={color} isAuto>
-        {color}
-      </Button>
-    ))}
-  </Horizontal>
-);
-
 ```
 
 ### **loaderProps**
 Optional LoaderProps object to configure the appearance and behavior of the loader animation.
 
+- **Type:** `LoaderProps`
+- **Possible Values:** ``
+
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 import { Vertical } from 'app-studio';
 
 export const LoaderButtons = () => (
   <Vertical gap={15}>
-    <Button isLoading isFilled>
+    <Button isLoading isFilled onClick={(e) => alert('ok')}>
       Submitting
     </Button>
-    <Button
-      isLoading
-      loaderProps={{
-        type: 'dotted',
-        views: {
-          loader: { color: 'color.white' },
-          text: {
-            color: 'color.black',
-          },
-        },
-      }}
-      isFilled
-    >
+    <Button isLoading isFilled>
       Submitting
     </Button>
-    <Button
-      isLoading
-      loaderPosition="right"
-      loaderProps={{
-        type: 'quarter',
-        views: {
-          loader: { color: 'color.black' },
-          text: { color: 'color.black' },
-        },
-      }}
-      isFilled
-    >
+    <Button isLoading loaderPosition="right" isFilled>
       Submitting
     </Button>
   </Vertical>
 );
-
 ```
 
 ### **icon**
 Optional React node(s) defining the icon to be displayed within the button.
 
+- **Type:** `React.ReactNode`
+- **Possible Values:** ``
+
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 import { Center } from 'app-studio';
 
-import { DustBinIcon } from '../../Icon/Icon';
+import { DustBinIcon } from '@app-studio/web';
 
-import { Shape } from '../Button/Button.type';
+import { Shape } from '@app-studio/web';
 
 export const IconButtons = () => (
   <Center gap={15}>
-    <Button icon={<DustBinIcon size={16} />} height={48}>
+    <Button icon={<DustBinIcon widthHeight={16} />} size="md">
       Delete
     </Button>
     <Button
-      height={48}
-      icon={<DustBinIcon size={16} />}
+      size="md"
+      icon={<DustBinIcon widthHeight={16} />}
       shape={'pillShaped' as Shape}
       iconPosition="right"
-      colorScheme="theme.secondary"
     >
       Delete
     </Button>
+    <Button icon={<DustBinIcon widthHeight={16} />} isIconRounded isAuto />
     <Button
-      icon={<DustBinIcon size={16} />}
-      colorScheme="theme.primary"
-      isIconRounded
-      isAuto
-    />
+      icon={<DustBinIcon widthHeight={16} />}
+      size="md"
+      iconPosition="top"
+    >
+      Delete
+    </Button>
+    <Button
+      size="md"
+      icon={<DustBinIcon widthHeight={16} />}
+      shape={'pillShaped' as Shape}
+      iconPosition="bottom"
+    >
+      Delete
+    </Button>
   </Center>
 );
-
 ```
 
 ### **isDisabled**
 Optional boolean to indicate if the button is non-interactive/disabled.
 
+- **Type:** `boolean`
+- **Default:** `false`
+- **Possible Values:** ``
+
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 
 export const DisabledButton = () => (
   <Button
@@ -145,77 +112,88 @@ export const DisabledButton = () => (
     Disabled
   </Button>
 );
-
 ```
 
 ### **isAuto**
 Optional boolean indicating if the button size should automatically adjust to its content.
 
+- **Type:** `boolean`
+- **Default:** `false`
+- **Possible Values:** ``
+
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 import { Horizontal } from 'app-studio';
 
-import { Shape } from '../Button/Button.type';
+import { Shape } from '@app-studio/web';
 
 export const BorderedButtons = () => (
   <Horizontal gap={15}>
     {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
-      <Button key={index} shape={border as Shape} isAuto>
+      <Button key={index} shape={border as Shape}>
         {border}
       </Button>
     ))}
   </Horizontal>
 );
-
 ```
 
 ### **size**
 Optional Size to specify the size of the button.
 
+- **Type:** `Size`
+- **Default:** `md`
+- **Possible Values:** `xs, sm, md, lg, xl`
+
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 import { Vertical } from 'app-studio';
 
-import { Size } from '../Button/Button.type';
+import { Size } from '@app-studio/web';
 
 export const ButtonSizes = () => (
   <Vertical gap={10}>
     {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
       <Button key={index} size={size as Size}>
-        Button
+        Button {size.toUpperCase()}
       </Button>
     ))}
   </Vertical>
 );
-
 ```
 
 ### **shadow**
 Optional shadow property that can be a predefined Shadow, Elevation value or custom CSSProperties to apply shadow effects to the button.
 
+- **Type:** `Shadow | Elevation | ViewProps`
+- **Possible Values:** ``
+
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 
 export const ShadowButton = () => (
   <Button shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}>
     Click Me
   </Button>
 );
-
 ```
 
 ### **variant**
-Optional Variant to define the stylistic variation of the button.
+Variant to define the stylistic variation of the button.
+
+- **Type:** `Variant`
+- **Default:** `filled`
+- **Possible Values:** `filled, outline, link, ghost, borderMoving, animatedStroke`
 
 ```tsx
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '@app-studio/web';
 import { Vertical } from 'app-studio';
 
-import { Variant } from '../Button/Button.type';
+import { Variant } from '@app-studio/web';
 
 export const VariantButtons = () => (
   <Vertical gap={15}>
@@ -224,49 +202,19 @@ export const VariantButtons = () => (
         key={index}
         to="https://www.npmjs.com/package/app-studio"
         variant={variant as Variant}
-        colorScheme="theme.primary"
-        isFilled
       >
-        {variant}
+        App Studio Link {variant}
       </Button>
     ))}
     {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
-      <Button
-        key={index}
-        to="https://www.npmjs.com/package/app-studio"
-        variant={variant as Variant}
-        isFilled
-      >
+      <Button key={index} variant={variant as Variant}>
         {variant}
       </Button>
     ))}
+    {/* Effect variants */}
+    <Button variant="borderMoving">Border Moving Effect</Button>
+    <Button variant="animatedStroke">Animated Stroke Effect</Button>
   </Vertical>
 );
-
-```
-
-### **effect**
-Optional effect to apply interactive effects (e.g., ripple) to the button.
-
-```tsx
-import React from 'react';
-import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
-
-export const EffectButton = () => (
-  <Horizontal gap={10}>
-    <Button effect="hover">Hover</Button>
-    <Button colorScheme="theme.error" variant="ghost" effect="hover">
-      Hover
-    </Button>
-    <Button colorScheme="theme.secondary" variant="outline" effect="reverse">
-      Reverse
-    </Button>
-    <Button colorScheme="theme.warning" variant="link" effect="reverse">
-      Reverse
-    </Button>
-  </Horizontal>
-);
-
 ```
 

package/docs/components/Calendar.mdx

@@ -10,7 +10,7 @@ A flexible calendar component with day, week, and month views for displaying and
 ### **Default**
 ```tsx
 import React from 'react';
-import { Calendar } from '../Calendar';
+import { Calendar } from '@app-studio/web';
 
 export const DefaultCalendar = () => {
   return <Calendar />;
@@ -22,8 +22,8 @@ Display events in the calendar with customizable event objects. Hover over event
 
 ```tsx
 import React from 'react';
-import { Calendar } from '../Calendar';
-import { CalendarEvent } from '../Calendar/Calendar.props';
+import { Calendar } from '@app-studio/web';
+import { CalendarEvent } from '@app-studio/web';
 
 export const CalendarWithEvents = () => {
   const events: CalendarEvent[] = [
@@ -57,7 +57,7 @@ Show a single day with all events for that day.
 
 ```tsx
 import React from 'react';
-import { Calendar } from '../Calendar';
+import { Calendar } from '@app-studio/web';
 
 export const DayViewCalendar = () => {
   return <Calendar initialView="day" />;
@@ -69,7 +69,7 @@ Display a full week with events across all days.
 
 ```tsx
 import React from 'react';
-import { Calendar } from '../Calendar';
+import { Calendar } from '@app-studio/web';
 
 export const WeekViewCalendar = () => {
   return <Calendar initialView="week" />;
@@ -81,7 +81,7 @@ Show the entire month with events distributed across days.
 
 ```tsx
 import React from 'react';
-import { Calendar } from '../Calendar';
+import { Calendar } from '@app-studio/web';
 
 export const MonthViewCalendar = () => {
   return <Calendar initialView="month" />;
@@ -93,7 +93,7 @@ Configure which day the week starts on (0 = Sunday, 1 = Monday, etc.).
 
 ```tsx
 import React from 'react';
-import { Calendar } from '../Calendar';
+import { Calendar } from '@app-studio/web';
 
 export const WeekStartsOnMonday = () => {
   return <Calendar weekStartsOn={1} />;