@app-studio/web 0.9.41 → 0.9.43

package/docs/components/AspectRatio.mdx

@@ -1,17 +1,17 @@
 # AspectRatio
 
-Maintains a set aspect ratio for child content
+This component ensures its content maintains a specified aspect ratio, adjusting its size responsively while preserving visual proportions.
 
 ### **Import**
-  ```tsx
-  import { AspectRatio } from '@app-studio/web';
-  ```
+```tsx
+import { AspectRatio } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Image } from '@app-studio/web';
-import { AspectRatio } from '../AspectRatio';
+import { Image } from 'app-studio';
+import { AspectRatio } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   return (
@@ -26,16 +26,19 @@ export const DefaultDemo = () => {
     </AspectRatio>
   );
 };
-
 ```
 
 ### **ratio**
-specifying the aspect ratio
+Set a default aspect ratio of 16:9 if no ratio is provided as a prop.
+
+- **Type:** `number`
+- **Default:** `16 / 9`
+- **Possible Values:** ``
 
 ```tsx
 import React from 'react';
-import { Image } from '@app-studio/web';
-import { AspectRatio } from '../AspectRatio';
+import { Image } from 'app-studio';
+import { AspectRatio } from '@app-studio/web';
 
 export const RatioDemo = () => {
   return (
@@ -50,6 +53,5 @@ export const RatioDemo = () => {
     </AspectRatio>
   );
 };
-
 ```
 

package/docs/components/AudioInput.mdx

@@ -0,0 +1,43 @@
+# AudioInput
+
+Provides a user interface for recording, playing, and uploading audio content.
+
+### **Import**
+```tsx
+import { AudioInput } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { AudioInput } from '@app-studio/web';
+import { View, Text, Button } from 'app-studio';
+
+export const Default = () => {
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+
+  const handleAudio = (file: File) => {
+    setAudioFile(file);
+  };
+
+  return (
+    <View flexDirection="column" gap={4} padding={4} alignItems="flex-start">
+      <Text variant="heading" size="lg">
+        Audio Input Example
+      </Text>
+      <AudioInput onAudio={handleAudio} />
+      {audioFile && (
+        <View flexDirection="column" gap={2}>
+          <Text>
+            Recorded Audio: <strong>{audioFile.name}</strong> (
+            {(audioFile.size / 1024).toFixed(2)} KB)
+          </Text>
+          <audio controls src={URL.createObjectURL(audioFile)} />
+          <Button onPress={() => setAudioFile(null)}>Clear Audio</Button>
+        </View>
+      )}
+    </View>
+  );
+};
+```
+

package/docs/components/Avatar.mdx

@@ -1,31 +1,34 @@
 # Avatar
 
-Displays a circular avatar with image fallback and custom styling options.
+Displays a user's avatar, which can be an image or initials, with customizable size and styles.
 
 ### **Import**
-  ```tsx
-  import { Avatar } from '@app-studio/web';
-  ```
+```tsx
+import { Avatar } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Avatar } from '../Avatar';
+import { Avatar } from '@app-studio/web';
 
 export const DefaultDemo = () => (
   <Avatar src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg" />
 );
-
 ```
 
 ### **size**
-Optional property to specify the size of the avatar, from predefined Size options.
+Optional size of the avatar, predefined in 'Size' type.
+
+- **Type:** `Size`
+- **Default:** `md`
+- **Possible Values:** `xs, sm, md, lg, xl`
 
 ```tsx
 import React from 'react';
-import { Vertical } from '@app-studio/web';
-import { Avatar } from '../Avatar';
-import { Size } from '../Avatar/Avatar.type';
+import { Vertical } from 'app-studio';
+import { Avatar } from '@app-studio/web';
+import { Size } from '@app-studio/web';
 
 export const SizeDemo = () => {
   return (
@@ -40,46 +43,18 @@ export const SizeDemo = () => {
     </Vertical>
   );
 };
-
 ```
 
 ### **fallback**
-Optional string for an image URL to use if the primary 'src' fails to load.
+URL or path for the fallback image if the source fails to load.
 
-```tsx
-import React from 'react';
-import { Avatar } from '../Avatar';
-
-export const FallbackDemo = () => <Avatar src="" fallback="ML" />;
-
-```
-
-### **styles**
-Optional object to apply custom styles to the avatar component.
+- **Type:** `string`
+- **Default:** `IM`
 
 ```tsx
 import React from 'react';
-import { Avatar } from '../Avatar';
-
-export const StylesDemo = () => {
-  return (
-    <Avatar
-      src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg"
-      views={{
-        container: {
-          boxShadow: 'none', // Add shadow effect
-        },
-        fallback: {
-          color: 'theme.secondary',
-        },
-        image: {
-          objectFit: 'fill',
-        },
-      }}
-      onClick={() => console.log('hello')}
-    />
-  );
-};
+import { Avatar } from '@app-studio/web';
 
+export const FallbackDemo = () => <Avatar src="" fallback="ML" />;
 ```