@app-studio/components 0.10.17

package/dist/files/media/Accordion.mdx

@@ -0,0 +1,333 @@
+# Accordion
+
+A collapsible content component that displays information in a compact, expandable format.
+
+### **Import**
+```tsx
+import { Accordion } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text, Vertical } from 'app-studio';
+
+export const DefaultAccordion = () => {
+  return (
+    <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>
+
+        <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>
+
+        <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>
+  );
+};
+```
+
+### **collapsible**
+If true, allows all accordion items to be closed, even when `type` is set to 'single'.
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Possible Values:** `true, false`
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text, Vertical } from 'app-studio';
+
+export const CollapsibleAccordion = () => {
+  return (
+    <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 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.Item value="item-2">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Question 2</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              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**
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text, Vertical } from 'app-studio';
+
+export const DisabledAccordion = () => {
+  return (
+    <Vertical gap={20} width="100%" maxWidth={600}>
+      <Text marginBottom={10}>Disabled Item</Text>
+      <Accordion type="single" defaultValue="disabled-1" collapsible>
+        <Accordion.Item value="disabled-1">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Regular Item</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              This is a regular accordion item that can be expanded and
+              collapsed.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+
+        <Accordion.Item value="disabled-2" isDisabled>
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Disabled Item</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              This content wont be accessible because the item is disabled.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+
+        <Accordion.Item value="disabled-3">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Another Regular Item</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              This is another regular accordion item that can be expanded and
+              collapsed.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </Vertical>
+  );
+};
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './variants';
+export * from './multiple';
+export * from './disabled';
+export * from './collapsible';
+```
+
+### **Multiple**
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text, Vertical } from 'app-studio';
+
+export const MultipleAccordion = () => {
+  return (
+    <Vertical gap={20} width="100%" maxWidth={600}>
+      <Text marginBottom={10}>Multiple Expanded Items</Text>
+      <Accordion type="multiple" defaultValue={['multi-1']}>
+        <Accordion.Item value="multi-1">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">First Item (Initially Expanded)</Text>
+          </Accordion.Trigger>
+          <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 value="multi-2">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Second Item</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              This is the second item. Try expanding this while the first item
+              is still open.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+
+        <Accordion.Item value="multi-3">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Third Item</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              This is the third item. You can have all three items expanded at
+              once.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </Vertical>
+  );
+};
+```
+
+### **Variants**
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text, Vertical } from 'app-studio';
+
+export const AccordionVariants = () => {
+  return (
+    <Vertical gap={30} width="100%" maxWidth={600}>
+      <Vertical gap={10}>
+        <Text fontWeight="bold">Outline Variant</Text>
+        <Accordion type="single" defaultValue="outline-1" variant="outline">
+          <Accordion.Item value="outline-1">
+            <Accordion.Trigger>
+              <Text fontWeight="bold">First Item</Text>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Text>
+                This is the content for the first item in the outline variant
+                accordion.
+              </Text>
+            </Accordion.Content>
+          </Accordion.Item>
+
+          <Accordion.Item value="outline-2">
+            <Accordion.Trigger>
+              <Text fontWeight="bold">Second Item</Text>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Text>
+                This is the content for the second item in the outline variant
+                accordion.
+              </Text>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </Vertical>
+
+      <Vertical gap={10}>
+        <Text fontWeight="bold">Filled Variant</Text>
+        <Accordion type="single" defaultValue="filled-1" variant="filled">
+          <Accordion.Item value="filled-1">
+            <Accordion.Trigger>
+              <Text fontWeight="bold">First Item</Text>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Text>
+                This is the content for the first item in the filled variant
+                accordion.
+              </Text>
+            </Accordion.Content>
+          </Accordion.Item>
+
+          <Accordion.Item value="filled-2">
+            <Accordion.Trigger>
+              <Text fontWeight="bold">Second Item</Text>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Text>
+                This is the content for the second item in the filled variant
+                accordion.
+              </Text>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </Vertical>
+
+      <Vertical gap={10}>
+        <Text fontWeight="bold">square Shape</Text>
+        <Accordion
+          type="single"
+          defaultValue="square-1"
+          shape="square"
+          variant="outline"
+        >
+          <Accordion.Item value="square-1">
+            <Accordion.Trigger>
+              <Text fontWeight="bold">First Item</Text>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Text>
+                This is the content for the first item in the square shape
+                accordion.
+              </Text>
+            </Accordion.Content>
+          </Accordion.Item>
+
+          <Accordion.Item value="square-2">
+            <Accordion.Trigger>
+              <Text fontWeight="bold">Second Item</Text>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Text>
+                This is the content for the second item in the square shape
+                accordion.
+              </Text>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </Vertical>
+    </Vertical>
+  );
+};
+```
+

package/dist/files/media/Alert.mdx

@@ -0,0 +1,353 @@
+# Alert
+
+Renders an alert with various styles and states to display important messages to users.
+
+### **Import**
+```tsx
+import { Alert } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Alert } from '../Alert';
+
+export const DefaultDemo = () => {
+  return (
+    <Alert
+      title="Heads up!"
+      description="You can add components to your app using the cli."
+    />
+  );
+};
+```
+
+### **icon**
+Custom icon to display in the alert, overriding the default icon for the chosen variant.
+
+- **Type:** `React.ReactNode`
+
+```tsx
+import React from 'react';
+import { EditIcon } from '../../Icon/Icon';
+import { Alert } from '../Alert';
+
+export const IconDemo = () => {
+  return (
+    <Alert
+      title="Heads up!"
+      description="You can add components to your app using the cli."
+      icon={<EditIcon widthHeight={24} color="black" />}
+    />
+  );
+};
+```
+
+### **variant**
+Defines the visual style and semantic meaning of the alert, affecting colors and default icon.
+
+- **Type:** `string`
+- **Default:** `default`
+
+```tsx
+import React from 'react';
+import { Horizontal } from 'app-studio';
+import { Alert } from '../Alert';
+import { Variant } from '../Alert/Alert.type';
+
+export const VariantDemo = () => (
+  <Horizontal gap={10}>
+    {['default', 'info', 'warning', 'success', 'error'].map((color, index) => (
+      <Alert
+        key={index}
+        variant={color as Variant}
+        title={'Heads Up!'}
+        description={'You can add components to your app using the cli.'}
+      />
+    ))}
+  </Horizontal>
+);
+```
+
+### **DarkMode**
+
+```tsx
+import React from 'react';
+import { Alert } from '../Alert';
+import { Vertical } from 'app-studio';
+import { Text } from 'app-studio';
+
+export const DarkModeDemo = () => {
+  return (
+    <Vertical gap={24}>
+      <Text fontSize={20} fontWeight="bold">
+        Light Mode Alerts
+      </Text>
+      <Vertical gap={16}>
+        <Alert
+          themeMode="light"
+          variant="default"
+          title="Default Alert (Light)"
+          description="This is a default alert in light mode."
+        />
+        <Alert
+          themeMode="light"
+          variant="info"
+          title="Info Alert (Light)"
+          description="This is an info alert in light mode."
+        />
+        <Alert
+          themeMode="light"
+          variant="success"
+          title="Success Alert (Light)"
+          description="This is a success alert in light mode."
+        />
+        <Alert
+          themeMode="light"
+          variant="warning"
+          title="Warning Alert (Light)"
+          description="This is a warning alert in light mode."
+        />
+        <Alert
+          themeMode="light"
+          variant="error"
+          title="Error Alert (Light)"
+          description="This is an error alert in light mode."
+        />
+      </Vertical>
+
+      <Text fontSize={20} fontWeight="bold" marginTop={40}>
+        Dark Mode Alerts
+      </Text>
+      <Vertical gap={16}>
+        <Alert
+          themeMode="dark"
+          variant="default"
+          title="Default Alert (Dark)"
+          description="This is a default alert in dark mode."
+        />
+        <Alert
+          themeMode="dark"
+          variant="info"
+          title="Info Alert (Dark)"
+          description="This is an info alert in dark mode."
+        />
+        <Alert
+          themeMode="dark"
+          variant="success"
+          title="Success Alert (Dark)"
+          description="This is a success alert in dark mode."
+        />
+        <Alert
+          themeMode="dark"
+          variant="warning"
+          title="Warning Alert (Dark)"
+          description="This is a warning alert in dark mode."
+        />
+        <Alert
+          themeMode="dark"
+          variant="error"
+          title="Error Alert (Dark)"
+          description="This is an error alert in dark mode."
+        />
+      </Vertical>
+    </Vertical>
+  );
+};
+```
+
+### **DesignSystem**
+
+```tsx
+import React from 'react';
+import { Alert } from '../Alert';
+import { Vertical, Text, View, useTheme } from 'app-studio';
+import { EditIcon } from '../../Icon/Icon';
+
+export const DesignSystemAlerts = () => {
+  const { themeMode } = useTheme();
+
+  return (
+    <Vertical gap={24}>
+      {/* Variant Examples */}
+      <View>
+        <Text marginBottom={8} fontWeight="600" color="theme-primary">
+          Alert Variants
+        </Text>
+        <Vertical gap={16}>
+          <Alert
+            variant="default"
+            title="Default Alert"
+            description="This is a default alert with neutral styling."
+          />
+
+          <Alert
+            variant="info"
+            title="Information"
+            description="This alert provides helpful information to the user."
+          />
+
+          <Alert
+            variant="success"
+            title="Success"
+            description="The operation was completed successfully."
+          />
+
+          <Alert
+            variant="warning"
+            title="Warning"
+            description="This action might have some consequences."
+          />
+
+          <Alert
+            variant="error"
+            title="Error"
+            description="Something went wrong. Please try again."
+          />
+        </Vertical>
+      </View>
+
+      {/* Custom Icon Example */}
+      <View>
+        <Text marginBottom={8} fontWeight="600" color="theme-primary">
+          Custom Icon
+        </Text>
+        <Alert
+          variant="info"
+          title="Custom Icon Alert"
+          description="This alert uses a custom icon instead of the default one."
+          icon={<EditIcon size={20} color="color-blue-500" />}
+        />
+      </View>
+
+      {/* Custom Styling Example */}
+      <View>
+        <Text marginBottom={8} fontWeight="600" color="theme-primary">
+          Custom Styling
+        </Text>
+        <Alert
+          title="Custom Styled Alert"
+          description="This alert has custom styling applied to it."
+          views={{
+            container: {
+              backgroundColor:
+                themeMode === 'light' ? 'color-purple-50' : 'color-gray-800',
+              borderColor:
+                themeMode === 'light' ? 'color-purple-200' : 'color-purple-500',
+              boxShadow:
+                themeMode === 'light'
+                  ? '0 2px 8px rgba(124, 58, 237, 0.1)'
+                  : 'none',
+              borderRadius: '12px',
+              borderLeftWidth: '4px',
+              borderRightWidth: '1px',
+              borderTopWidth: '1px',
+              borderBottomWidth: '1px',
+            },
+            title: {
+              color: 'theme-primary',
+              fontSize: '18px',
+              fontWeight: '600',
+            },
+            description: {
+              color:
+                themeMode === 'light' ? 'color-gray-700' : 'color-gray-300',
+            },
+            icon: {
+              color: 'color-purple-500',
+            },
+          }}
+        />
+      </View>
+
+      {/* Rich Content Example */}
+      <View>
+        <Text marginBottom={8} fontWeight="600" color="theme-primary">
+          Rich Content
+        </Text>
+        <Alert
+          variant="info"
+          title="Alert with Rich Content"
+          description={
+            <Vertical gap={8}>
+              <Text
+                color={
+                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
+                }
+              >
+                This alert contains rich content with multiple paragraphs:
+              </Text>
+              <Text
+                color={
+                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
+                }
+              >
+                • First item in the list
+              </Text>
+              <Text
+                color={
+                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
+                }
+              >
+                • Second item in the list
+              </Text>
+              <Text
+                color={
+                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
+                }
+              >
+                • Third item with{' '}
+                <Text as="span" fontWeight="600" color="theme-primary">
+                  emphasized
+                </Text>{' '}
+                text
+              </Text>
+            </Vertical>
+          }
+        />
+      </View>
+    </Vertical>
+  );
+};
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './designSystem';
+export * from './icon';
+export * from './styles';
+export * from './variant';
+export * from './darkMode';
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './icon';
+export * from './styles';
+export * from './variant';
+```
+
+### **Styles**
+
+```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' },
+    }}
+  />
+);
+```
+