@app-studio/web 0.9.31 → 0.9.33

package/docs/components/Badge.mdx

@@ -0,0 +1,220 @@
+# Badge
+
+Displays a visual badge for labeling or highlighting items
+
+### **Import**
+  ```tsx
+  import { Badge } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Badge } from '../Badge';
+
+export const DefaultDemo = () => <Badge content="default" />;
+
+```
+
+### **content**
+The content displayed in the Badge component.
+
+```tsx
+import React from 'react';
+import { Badge } from '../Badge';
+
+export const ContentDemo = () => <Badge content="content" />;
+
+```
+
+### **variant**
+Determines the Badge's style variant.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { Badge } from '../Badge';
+import { Variant } from '../Badge/Badge.type';
+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"
+        />
+      </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.
+
+```tsx
+import React from 'react';
+import { Badge } from '../Badge';
+import { View } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Position } from '../Badge/Badge.type';
+
+export const PositionDemo = () => (
+  <Horizontal gap={10}>
+    {['top-right', 'top-left', 'bottom-right', 'bottom-left'].map(
+      (position, index) => (
+        <View
+          key={index}
+          position="relative"
+          height="100px"
+          width="200px"
+          backgroundColor="#F2EFE5"
+        >
+          <Badge position={position as Position} content={position} />
+        </View>
+      )
+    )}
+  </Horizontal>
+);
+
+```
+
+### **size**
+Determines the size of the Badge.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { Badge } from '../Badge';
+import { Size } from '../Badge/Badge.type';
+import { View } from 'app-studio';
+export const SizeDemo = () => (
+  <Vertical gap={10}>
+    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
+      <View position="relative" key={index}>
+        <Badge content={size} size={size as Size} />
+      </View>
+    ))}
+  </Vertical>
+);
+
+```
+
+### **shape**
+Specifies the shape of the Badge.
+
+```tsx
+import React from 'react';
+import { Horizontal } from 'app-studio';
+import { Badge } from '../Badge';
+import { Shape } from '../Badge/Badge.type';
+import { View } from 'app-studio';
+export const ShapeDemo = () => (
+  <Horizontal gap={15}>
+    {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
+      <View position="relative" key={index}>
+        <Badge content={border} shape={border as Shape} />
+      </View>
+    ))}
+  </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 '../../Text/Text';
+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

@@ -0,0 +1,272 @@
+# Button
+
+Customizable button for user interaction
+
+### **Import**
+  ```tsx
+  import { Button } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+
+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.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+import { Vertical } from 'app-studio';
+
+export const LoaderButtons = () => (
+  <Vertical gap={15}>
+    <Button isLoading isFilled>
+      Submitting
+    </Button>
+    <Button
+      isLoading
+      loaderProps={{
+        type: 'dotted',
+        views: {
+          loader: { color: 'color.white' },
+          text: {
+            color: 'color.black',
+          },
+        },
+      }}
+      isFilled
+    >
+      Submitting
+    </Button>
+    <Button
+      isLoading
+      loaderPosition="right"
+      loaderProps={{
+        type: 'quarter',
+        views: {
+          loader: { color: 'color.black' },
+          text: { color: 'color.black' },
+        },
+      }}
+      isFilled
+    >
+      Submitting
+    </Button>
+  </Vertical>
+);
+
+```
+
+### **icon**
+Optional React node(s) defining the icon to be displayed within the button.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+import { Center } from 'app-studio';
+
+import { DustBinIcon } from '../../Icon/Icon';
+
+import { Shape } from '../Button/Button.type';
+
+export const IconButtons = () => (
+  <Center gap={15}>
+    <Button icon={<DustBinIcon size={16} />} height={48}>
+      Delete
+    </Button>
+    <Button
+      height={48}
+      icon={<DustBinIcon size={16} />}
+      shape={'pillShaped' as Shape}
+      iconPosition="right"
+      colorScheme="theme.secondary"
+    >
+      Delete
+    </Button>
+    <Button
+      icon={<DustBinIcon size={16} />}
+      colorScheme="theme.primary"
+      isIconRounded
+      isAuto
+    />
+  </Center>
+);
+
+```
+
+### **isDisabled**
+Optional boolean to indicate if the button is non-interactive/disabled.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+
+export const DisabledButton = () => (
+  <Button
+    onClick={() => {
+      alert('Disabled');
+    }}
+    isDisabled
+  >
+    Disabled
+  </Button>
+);
+
+```
+
+### **isAuto**
+Optional boolean indicating if the button size should automatically adjust to its content.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+import { Horizontal } from 'app-studio';
+
+import { Shape } from '../Button/Button.type';
+
+export const BorderedButtons = () => (
+  <Horizontal gap={15}>
+    {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
+      <Button key={index} shape={border as Shape} isAuto>
+        {border}
+      </Button>
+    ))}
+  </Horizontal>
+);
+
+```
+
+### **size**
+Optional Size to specify the size of the button.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+import { Vertical } from 'app-studio';
+
+import { Size } from '../Button/Button.type';
+
+export const ButtonSizes = () => (
+  <Vertical gap={10}>
+    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
+      <Button key={index} size={size as Size}>
+        Button
+      </Button>
+    ))}
+  </Vertical>
+);
+
+```
+
+### **shadow**
+Optional shadow property that can be a predefined Shadow, Elevation value or custom CSSProperties to apply shadow effects to the button.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+
+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.
+
+```tsx
+import React from 'react';
+import { Button } from '../Button';
+import { Vertical } from 'app-studio';
+
+import { Variant } from '../Button/Button.type';
+
+export const VariantButtons = () => (
+  <Vertical gap={15}>
+    {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
+      <Button
+        key={index}
+        to="https://www.npmjs.com/package/app-studio"
+        variant={variant as Variant}
+        colorScheme="theme.primary"
+        isFilled
+      >
+        {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
+      >
+        {variant}
+      </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>
+);
+
+```
+