@app-studio/web 0.9.41 → 0.9.44

package/docs/components/Accordion.mdx

@@ -1,158 +1,111 @@
 # Accordion
 
-A component that displays collapsible content panels for presenting information in a limited amount of space.
+Organizes content into collapsible sections for efficient space management.
 
 ### **Import**
-  ```tsx
-  import { Accordion } from '@app-studio/web';
-  ```
+```tsx
+import { Accordion } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from '@app-studio/web';
+import { Accordion } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
 
 export const DefaultAccordion = () => {
   return (
-    <Accordion>
-      <Accordion.Item id="item-1">
-        <Accordion.Header>
-          <Text fontWeight="bold">What is React?</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-      
-      <Accordion.Item id="item-2">
-        <Accordion.Header>
-          <Text fontWeight="bold">What are React Hooks?</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            Hooks are functions that let you "hook into" React state and lifecycle features from function components.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```
-
-### **Multiple**
-Allow multiple items to be expanded at once.
+    <Vertical gap={20} width="100%" maxWidth={600}>
+      <Text marginBottom={10}>Default Accordion (Single)</Text>
+      <Accordion type="single" defaultValue="item-1">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">What is React?</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              React is a JavaScript library for building user interfaces. It is
+              maintained by Facebook and a community of individual developers
+              and companies. React can be used as a base in the development of
+              single-page or mobile applications.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
 
-```tsx
-import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from '@app-studio/web';
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">What are React Hooks?</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              Hooks are functions that let you hook into React state and
+              lifecycle features from function components. Hooks dont work
+              inside classes — they let you use React without classes.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
 
-export const MultipleAccordion = () => {
-  return (
-    <Accordion allowMultiple defaultExpandedItems={['item-1']}>
-      <Accordion.Item id="item-1">
-        <Accordion.Header>
-          <Text fontWeight="bold">First Item (Initially Expanded)</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This item is initially expanded. You can expand multiple items at once in this accordion.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-      
-      <Accordion.Item id="item-2">
-        <Accordion.Header>
-          <Text fontWeight="bold">Second Item</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This is the second item. Try expanding this while the first item is still open.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">What is JSX?</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              JSX is a syntax extension for JavaScript. It was written to be
+              used with React and looks a lot like HTML. Because JSX is
+              JavaScript, you can use variables inside it.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </Vertical>
   );
 };
 ```
 
-### **Variants**
-Different visual styles for the accordion.
+### **collapsible**
+If true, allows all accordion items to be collapsed, meaning no item has to be open.
+
+- **Type:** `boolean`
+- **Default:** `false`
 
 ```tsx
 import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from '@app-studio/web';
+import { Accordion } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
 
-export const AccordionVariants = () => {
+export const CollapsibleAccordion = () => {
   return (
-    <>
-      <Accordion variant="outline">
-        <Accordion.Item id="outline-1">
-          <Accordion.Header>
-            <Text fontWeight="bold">Outline Variant</Text>
-          </Accordion.Header>
+    <Vertical gap={20} width="100%" maxWidth={600}>
+      <Text marginBottom={10}>Collapsible Accordion (Single)</Text>
+      <Accordion type="single" defaultValue="item-1" collapsible>
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Question 1</Text>
+          </Accordion.Trigger>
           <Accordion.Content>
             <Text>
-              This is the content for the outline variant accordion.
+              This is the answer to question 1. Since `collapsible` is true, you
+              can click the trigger again to close this item, even though its
+              the only one.
             </Text>
           </Accordion.Content>
         </Accordion.Item>
-      </Accordion>
-      
-      <Accordion variant="filled">
-        <Accordion.Item id="filled-1">
-          <Accordion.Header>
-            <Text fontWeight="bold">Filled Variant</Text>
-          </Accordion.Header>
+
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Question 2</Text>
+          </Accordion.Trigger>
           <Accordion.Content>
             <Text>
-              This is the content for the filled variant accordion.
+              This is the answer to question 2. Only one item can be open, but
+              it can be closed entirely.
             </Text>
           </Accordion.Content>
         </Accordion.Item>
       </Accordion>
-    </>
+    </Vertical>
   );
 };
 ```
 
-### **Disabled**
-Disable specific accordion items.
-
-```tsx
-import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from '@app-studio/web';
-
-export const DisabledAccordion = () => {
-  return (
-    <Accordion>
-      <Accordion.Item id="regular-1">
-        <Accordion.Header>
-          <Text fontWeight="bold">Regular Item</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This is a regular accordion item that can be expanded and collapsed.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-      
-      <Accordion.Item id="disabled-1" isDisabled>
-        <Accordion.Header>
-          <Text fontWeight="bold">Disabled Item</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This content won't be accessible because the item is disabled.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```

package/docs/components/Alert.mdx

@@ -1,16 +1,16 @@
 # Alert
 
-Displays an alert with optional icon and customizable views.
+Displays important messages to users with various styles and states.
 
 ### **Import**
-  ```tsx
-  import { Alert } from '@app-studio/web';
-  ```
+```tsx
+import { Alert } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Alert } from '../Alert';
+import { Alert } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   return (
@@ -20,37 +20,41 @@ export const DefaultDemo = () => {
     />
   );
 };
-
 ```
 
 ### **icon**
-Optional icon property, expecting a React node element
+Custom icon element to display in the alert, overriding the default variant-based icon.
+
+- **Type:** `ReactNode`
 
 ```tsx
 import React from 'react';
-import { EditIcon } from '../../Icon/Icon';
-import { Alert } from '../Alert';
+import { EditIcon } from '@app-studio/web';
+import { Alert } from '@app-studio/web';
 
 export const IconDemo = () => {
   return (
     <Alert
       title="Heads up!"
       description="You can add components to your app using the cli."
-      icon={<EditIcon size={24} color="black" />}
+      icon={<EditIcon widthHeight={24} color="black" />}
     />
   );
 };
-
 ```
 
 ### **variant**
-Optional variant property to determine the style of the alert
+Determines the visual style and semantic meaning of the alert.
+
+- **Type:** `string`
+- **Default:** `default`
+- **Possible Values:** `default, info, success, error, warning`
 
 ```tsx
 import React from 'react';
-import { Horizontal } from '@app-studio/web';
-import { Alert } from '../Alert';
-import { Variant } from '../Alert/Alert.type';
+import { Horizontal } from 'app-studio';
+import { Alert } from '@app-studio/web';
+import { Variant } from '@app-studio/web';
 
 export const VariantDemo = () => (
   <Horizontal gap={10}>
@@ -64,60 +68,5 @@ export const VariantDemo = () => (
     ))}
   </Horizontal>
 );
-
-```
-
-### **styles**
-Optional styles property to apply custom styles to the alert component
-
-```tsx
-import React from 'react';
-import { Alert } from '../Alert';
-
-export const StylesDemo = () => (
-  <Alert
-    title={'Heads Up!'}
-    description={'You can add components to your app using the cli.'}
-    views={{
-      container: { backgroundColor: 'black' },
-      title: { color: 'white' },
-      description: { color: 'white' },
-      icon: { color: 'white' },
-    }}
-  />
-);
-
-```
-
-### **Theme Mode Support**
-The Alert component supports both light and dark themes through the `themeMode` prop.
-
-```tsx
-import React from 'react';
-import { Alert } from '../Alert';
-import { Vertical } from '@app-studio/web';
-import { Text } from '@app-studio/web';
-
-export const DarkModeDemo = () => {
-  return (
-    <Vertical gap={24}>
-      <Text fontSize={20} fontWeight="bold">Light Mode Alerts</Text>
-      <Alert
-        themeMode="light"
-        variant="info"
-        title="Info Alert (Light)"
-        description="This is an info alert in light mode."
-      />
-
-      <Text fontSize={20} fontWeight="bold" marginTop={40}>Dark Mode Alerts</Text>
-      <Alert
-        themeMode="dark"
-        variant="info"
-        title="Info Alert (Dark)"
-        description="This is an info alert in dark mode."
-      />
-    </Vertical>
-  );
-};
 ```
 

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" />;
 ```