@app-studio/components 0.10.17

package/dist/files/media/Toggle.mdx

@@ -0,0 +1,159 @@
+# Toggle
+
+A versatile interactive switch to toggle states, with customizable appearance and behavior.
+
+### **Import**
+```tsx
+import { Toggle } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Toggle } from '../Toggle';
+
+export const DefaultDemo = () => {
+  return <Toggle>Default</Toggle>;
+};
+```
+
+### **shape**
+Optional 'shape' property to determine the shape of the toggle component.
+
+- **Type:** `Shape`
+- **Default:** `rounded`
+- **Possible Values:** `square, rounded, pill`
+
+```tsx
+import React from 'react';
+import { Horizontal } from 'app-studio';
+import { Toggle } from '../Toggle';
+import { Shape } from '../Toggle/Toggle.type';
+import { View } from 'app-studio';
+export const ShapeDemo = () => (
+  <Horizontal gap={15}>
+    {['square', 'rounded', 'pill'].map((border, index) => (
+      <View position="relative" key={index}>
+        <Toggle shape={border as Shape}>{border}</Toggle>
+      </View>
+    ))}
+  </Horizontal>
+);
+```
+
+### **isToggled**
+Optional boolean to define the initial toggle state.
+
+- **Type:** `boolean`
+- **Possible Values:** `true, false`
+
+```tsx
+import React from 'react';
+import { Toggle } from '../Toggle';
+
+export const IsToggledDemo = () => {
+  return (
+    <Toggle isToggled={true} isDisabled>
+      IsActive
+    </Toggle>
+  );
+};
+```
+
+### **isDisabled**
+Optional boolean to set the toggle component as disabled or not.
+
+- **Type:** `boolean`
+- **Possible Values:** `true, false`
+
+```tsx
+import React from 'react';
+import { Toggle } from '../Toggle';
+
+export const IsDisabledDemo = () => {
+  return <Toggle isDisabled>IsDisabled</Toggle>;
+};
+```
+
+### **variant**
+Optional 'variant' to style the toggle component with predefined sets of visual types.
+
+- **Type:** `Variant`
+- **Default:** `ghost`
+- **Possible Values:** `outline, link, ghost`
+
+```tsx
+import React from 'react';
+import { Toggle } from '../Toggle';
+import { Vertical } from 'app-studio';
+import { Variant } from '../Toggle/Toggle.type';
+
+export const VariantDemo = () => (
+  <Vertical gap={15}>
+    {['outline', 'link', 'ghost'].map((variant, index) => (
+      <Toggle key={index} variant={variant as Variant}>
+        {variant}
+      </Toggle>
+    ))}
+  </Vertical>
+);
+```
+
+### **onToggle**
+Optional function that triggers when the toggle state changes, receives the new state as an argument.
+
+- **Type:** `(isToggled: boolean) => void`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { useState } from 'react';
+import { Toggle } from '../Toggle';
+
+export const OnToggleDemo = () => {
+  const [isToggle, setIsToggled] = useState(false);
+  return (
+    <Toggle
+      onToggle={(state) => {
+        setIsToggled(state);
+      }}
+    >
+      {isToggle ? 'On' : 'Off'}
+    </Toggle>
+  );
+};
+```
+
+### **ColorScheme**
+
+```tsx
+import React from 'react';
+import { Toggle } from '../Toggle';
+import { Horizontal } from 'app-studio';
+
+export const ColorSchemeDemo = () => (
+  <Horizontal gap={10}>
+    {[
+      'theme-primary',
+      'theme-secondary',
+      'theme-warning',
+      'theme-success',
+      'theme-error',
+    ].map((color, index) => (
+      <Toggle key={index}>{color}</Toggle>
+    ))}
+  </Horizontal>
+);
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './isDisabled';
+export * from './isToggled';
+export * from './onToggle';
+export * from './shape';
+export * from './variant';
+```
+

package/dist/files/media/ToggleGroup.mdx

@@ -0,0 +1,180 @@
+# ToggleGroup
+
+Manages a group of interactive toggle buttons, allowing users to select one or more options.
+
+### **Import**
+```tsx
+import { ToggleGroup } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+
+export const DefaultDemo = () => {
+  const items = [
+    { id: 'B', value: 'B' },
+    { id: 'C', value: 'C' },
+    { id: 'D', value: 'D' },
+  ];
+  return <ToggleGroup items={items} />;
+};
+```
+
+### **shape**
+Optional shape prop to define the shape of toggle elements.
+
+- **Type:** `Shape`
+- **Default:** `rounded`
+- **Possible Values:** `square, rounded, pill`
+
+```tsx
+import React from 'react';
+import { DustBinIcon } from '../../Icon/Icon';
+import { ToggleGroup } from '../ToggleGroup';
+import { Shape } from '../ToggleGroup/ToggleGroup.type';
+import { Horizontal } from 'app-studio';
+import { View } from 'app-studio';
+
+export const ShapeDemo = () => {
+  const items = [
+    {
+      id: 'item',
+      value: <DustBinIcon widthHeight={18} />,
+      isActive: true,
+    },
+  ];
+  return (
+    <Horizontal gap={15}>
+      {['square', 'rounded', 'pill'].map((border, index) => (
+        <View position="relative" key={index}>
+          <ToggleGroup items={items} shape={border as Shape} />
+        </View>
+      ))}
+    </Horizontal>
+  );
+};
+```
+
+### **items**
+Mandatory array of items defining each toggle in the group.
+
+- **Type:** `ToggleItem[]`
+
+```tsx
+import React from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+import { Text } from 'app-studio';
+
+export const ItemsDemo = () => {
+  const items = [
+    { id: 'B', value: <Text>B</Text> },
+    { id: 'C', value: <Text>C</Text> },
+    { id: 'D', value: <Text>D</Text> },
+  ];
+  return <ToggleGroup items={items} />;
+};
+```
+
+### **variant**
+Optional variant prop to specify the visual style of the toggle group.
+
+- **Type:** `Variant`
+- **Default:** `ghost`
+- **Possible Values:** `outline, link, ghost`
+
+```tsx
+import React from 'react';
+import { Text } from 'app-studio';
+import { ToggleGroup } from '../ToggleGroup';
+import { Variant } from '../ToggleGroup/ToggleGroup.type';
+import { Vertical } from 'app-studio';
+
+export const VariantDemo = () => {
+  const items = [
+    { id: 'B', value: <Text>B</Text> },
+    { id: 'C', value: <Text>C</Text> },
+    { id: 'D', value: <Text>D</Text> },
+  ];
+  return (
+    <Vertical gap={15}>
+      {['outline', 'link', 'ghost'].map((variant, index) => (
+        <ToggleGroup key={index} items={items} variant={variant as Variant} />
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **onToggleChange**
+Optional callback function that fires when the active toggle changes, providing the IDs of active toggles.
+
+- **Type:** `(activeIds: string[]) => void`
+
+```tsx
+import React, { useState } from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+
+export const OnToggleChangeDemo = () => {
+  const [newItems, setNewItems] = useState<any>([]);
+
+  const items = [
+    { id: 'B', value: <Text>B</Text> },
+    { id: 'C', value: <Text>C</Text> },
+    { id: 'D', value: <Text>D</Text> },
+  ];
+  return (
+    <Vertical gap={10}>
+      <ToggleGroup
+        items={items}
+        onToggleChange={(items) => setNewItems(items)}
+      />
+      Selected: {newItems}
+    </Vertical>
+  );
+};
+```
+
+### **ColorScheme**
+
+```tsx
+import React from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+import { Vertical } from 'app-studio';
+import { Text } from 'app-studio';
+
+export const ColorSchemeDemo = () => {
+  const items = [
+    { id: 'B', value: <Text>B</Text> },
+    { id: 'C', value: <Text>C</Text>, isActive: true },
+    { id: 'D', value: <Text>D</Text>, isDisabled: true },
+  ];
+  return (
+    <Vertical gap={10}>
+      {[
+        'theme-primary',
+        'theme-secondary',
+        'theme-warning',
+        'theme-success',
+        'theme-error',
+      ].map((color, index) => (
+        <ToggleGroup key={index} items={items} />
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './items';
+export * from './onToggleChange';
+export * from './shape';
+export * from './variant';
+```
+

package/dist/files/media/Tooltip.mdx

@@ -0,0 +1,307 @@
+# Tooltip
+
+Displays informative text or content when a user interacts with an element.
+
+### **Import**
+```tsx
+import { Tooltip } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+
+export const DefaultTooltip = () => {
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Text marginBottom={10}>
+        <Tooltip content="This is a tooltip">
+          <Button>Hover Me</Button>
+        </Tooltip>
+        Default Tooltip
+      </Text>
+    </Vertical>
+  );
+};
+```
+
+### **Custom**
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+
+export const CustomTooltip = () => {
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Text marginBottom={10}>Custom Styled Tooltip</Text>
+      <Tooltip
+        content={
+          <Vertical padding={5}>
+            <Text fontWeight="bold">Custom Tooltip</Text>
+            <Text>With rich content and styling</Text>
+          </Vertical>
+        }
+        views={{
+          content: {
+            backgroundColor: 'theme-primary',
+            color: 'color-white',
+            borderRadius: '8px',
+          },
+          arrow: {
+            backgroundColor: 'theme-primary',
+          },
+        }}
+      >
+        <Button variant="outline">Hover for Custom Tooltip</Button>
+      </Tooltip>
+    </Vertical>
+  );
+};
+```
+
+### **Index**
+
+```tsx
+export * from './default';
+export * from './positions';
+export * from './variants';
+export * from './sizes';
+export * from './custom';
+export * from './integration';
+```
+
+### **Integration**
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { View } from 'app-studio';
+import { InfoIcon } from '../../Icon/Icon';
+import { Slider } from '../../Slider/Slider';
+import { Alert } from '../../Alert/Alert';
+
+export const TooltipIntegration = () => {
+  return (
+    <Vertical gap={30} width="100%" maxWidth={600}>
+      <Text fontWeight="bold" marginBottom={10}>
+        Integration with Button
+      </Text>
+
+      <Horizontal gap={20}>
+        <Button>
+          Save
+          <Tooltip content="Save your changes" position="top">
+            <InfoIcon size={16} marginLeft={5} />
+          </Tooltip>
+        </Button>
+      </Horizontal>
+
+      <Text fontWeight="bold" marginTop={20} marginBottom={10}>
+        Integration with Alert
+      </Text>
+
+      <Alert
+        title="Important Notice"
+        description={
+          'This action cannot be undone'
+          // <Horizontal alignItems="center">
+          //   <Text></Text>
+          //   <Tooltip content="Once deleted, you cannot recover this item">
+          //     <InfoIcon size={16} marginLeft={5} cursor="pointer" />
+          //   </Tooltip>
+          // </Horizontal>
+        }
+        variant="warning"
+      />
+
+      <Text fontWeight="bold" marginTop={20} marginBottom={10}>
+        Integration with Slider
+      </Text>
+
+      <View width="100%" maxWidth={400}>
+        <Horizontal alignItems="center" marginBottom={10}>
+          <Text>Volume</Text>
+          <Tooltip content="Adjust the volume level" position="right">
+            <InfoIcon size={16} marginLeft={5} cursor="pointer" />
+          </Tooltip>
+        </Horizontal>
+        <Slider defaultValue={50} />
+      </View>
+    </Vertical>
+  );
+};
+```
+
+### **Positions**
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+
+export const TooltipPositions = () => {
+  return (
+    <Vertical gap={30} width="100%" maxWidth={600}>
+      <Text fontWeight="bold" marginBottom={10}>
+        Different Positions
+      </Text>
+
+      <Horizontal gap={20} flexWrap="wrap">
+        <Vertical gap={10} alignItems="center">
+          <Text>Top Position</Text>
+          <Tooltip content="Tooltip on top" position="top">
+            <Button>Top</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Right Position</Text>
+          <Tooltip content="Tooltip on right" position="right">
+            <Button>Right</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Bottom Position</Text>
+          <Tooltip content="Tooltip on bottom" position="bottom">
+            <Button>Bottom</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Left Position</Text>
+          <Tooltip content="Tooltip on left" position="left">
+            <Button>Left</Button>
+          </Tooltip>
+        </Vertical>
+      </Horizontal>
+
+      <Text fontWeight="bold" marginTop={20} marginBottom={10}>
+        Different Alignments
+      </Text>
+
+      <Horizontal gap={20} flexWrap="wrap">
+        <Vertical gap={10} alignItems="center">
+          <Text>Start Alignment</Text>
+          <Tooltip content="Start aligned tooltip" align="start">
+            <Button>Start</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Center Alignment</Text>
+          <Tooltip content="Center aligned tooltip" align="center">
+            <Button>Center</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>End Alignment</Text>
+          <Tooltip content="End aligned tooltip" align="end">
+            <Button>End</Button>
+          </Tooltip>
+        </Vertical>
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+
+### **Sizes**
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+
+export const TooltipSizes = () => {
+  return (
+    <Vertical gap={30} width="100%" maxWidth={600}>
+      <Horizontal gap={20}>
+        <Vertical gap={10} alignItems="center">
+          <Text>Small Size</Text>
+          <Tooltip content="Small tooltip" size="sm">
+            <Button>Small</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Medium Size (Default)</Text>
+          <Tooltip content="Medium tooltip" size="md">
+            <Button>Medium</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Large Size</Text>
+          <Tooltip
+            content="Large tooltip with more content that might wrap to multiple lines"
+            size="lg"
+          >
+            <Button>Large</Button>
+          </Tooltip>
+        </Vertical>
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+
+### **Variants**
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+
+export const TooltipVariants = () => {
+  return (
+    <Vertical gap={30} width="100%" maxWidth={600}>
+      <Horizontal gap={20}>
+        <Vertical gap={10} alignItems="center">
+          <Text>Default Variant</Text>
+          <Tooltip content="Default tooltip style" variant="default">
+            <Button>Default</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Light Variant</Text>
+          <Tooltip content="Light tooltip style" variant="light">
+            <Button>Light</Button>
+          </Tooltip>
+        </Vertical>
+
+        <Vertical gap={10} alignItems="center">
+          <Text>Dark Variant</Text>
+          <Tooltip content="Dark tooltip style" variant="dark">
+            <Button>Dark</Button>
+          </Tooltip>
+        </Vertical>
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+

package/dist/files/media/Uploader.mdx

@@ -0,0 +1,9 @@
+# Uploader
+
+A component for uploading files, offering validation, previews, and progress tracking.
+
+### **Import**
+```tsx
+import { Uploader } from '@app-studio/web';
+```
+