@app-studio/web 0.9.31 → 0.9.33

package/docs/components/Toggle.mdx

@@ -0,0 +1,141 @@
+# Toggle
+
+A user-interface element for toggling between on/off states.
+
+### **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 property to determine the shape of the toggle component.
+
+```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}>
+    {['sharp', 'rounded', 'pillShaped'].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.
+
+```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.
+
+```tsx
+import React from 'react';
+import { Toggle } from '../Toggle';
+
+export const IsDisabledDemo = () => {
+  return <Toggle isDisabled>IsDisabled</Toggle>;
+};
+
+```
+
+### **variant**
+Optional property to style the toggle component with predefined sets of visual types.
+
+```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>
+);
+
+```
+
+### **colorScheme**
+Optional string to set the color scheme for the toggle component's appearance.
+
+```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} colorScheme={color}>
+        {color}
+      </Toggle>
+    ))}
+  </Horizontal>
+);
+
+```
+
+### **onToggle**
+Optional function that triggers when the toggle state changes, receives the new state as an argument.
+
+```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>
+  );
+};
+
+```
+

package/docs/components/ToggleGroup.mdx

@@ -0,0 +1,165 @@
+# ToggleGroup
+
+Enables selection from a group of toggle switches.
+
+### **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.
+
+```tsx
+import React from 'react';
+import { DustBinIcon } from '../../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 size={18} />,
+      isActive: true,
+    },
+  ];
+  return (
+    <Horizontal gap={15}>
+      {['sharp', 'rounded', 'pillShaped'].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.
+
+```tsx
+import React from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+import { Text } from '../../Text/Text';
+
+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.
+
+```tsx
+import React from 'react';
+import { Text } from '../../Text/Text';
+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>
+  );
+};
+
+```
+
+### **colorScheme**
+Optional colorScheme prop for theming the toggle group.
+
+```tsx
+import React from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+import { Vertical } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+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} colorScheme={color} />
+      ))}
+    </Vertical>
+  );
+};
+
+```
+
+### **onToggleChange**
+Optional callback function that fires when the active toggle changes, providing the IDs of active toggles.
+
+```tsx
+import React, { useState } from 'react';
+import { ToggleGroup } from '../ToggleGroup';
+import { Text } from '../../Text/Text';
+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>
+  );
+};
+
+```
+

package/docs/components/Tooltip.mdx

@@ -0,0 +1,191 @@
+# Tooltip
+
+A component that displays informative text when users hover over, focus on, or tap 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';
+
+export const DefaultTooltip = () => {
+  return (
+    <Tooltip content="This is a tooltip">
+      <Button>Hover Me</Button>
+    </Tooltip>
+  );
+};
+```
+
+### **Positions**
+Tooltips can be positioned relative to the trigger element.
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+
+export const TooltipPositionsExample = () => {
+  return (
+    <Horizontal gap={20}>
+      <Tooltip content="Tooltip on top" position="top">
+        <Button>Top</Button>
+      </Tooltip>
+      
+      <Tooltip content="Tooltip on right" position="right">
+        <Button>Right</Button>
+      </Tooltip>
+      
+      <Tooltip content="Tooltip on bottom" position="bottom">
+        <Button>Bottom</Button>
+      </Tooltip>
+      
+      <Tooltip content="Tooltip on left" position="left">
+        <Button>Left</Button>
+      </Tooltip>
+    </Horizontal>
+  );
+};
+```
+
+### **Variants**
+Different visual styles for tooltips.
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+
+export const TooltipVariantsExample = () => {
+  return (
+    <Horizontal gap={20}>
+      <Tooltip content="Default tooltip style" variant="default">
+        <Button>Default</Button>
+      </Tooltip>
+      
+      <Tooltip content="Light tooltip style" variant="light">
+        <Button>Light</Button>
+      </Tooltip>
+      
+      <Tooltip content="Dark tooltip style" variant="dark">
+        <Button>Dark</Button>
+      </Tooltip>
+    </Horizontal>
+  );
+};
+```
+
+### **Sizes**
+Tooltips come in different sizes.
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Horizontal } from 'app-studio';
+
+export const TooltipSizesExample = () => {
+  return (
+    <Horizontal gap={20}>
+      <Tooltip content="Small tooltip" size="sm">
+        <Button>Small</Button>
+      </Tooltip>
+      
+      <Tooltip content="Medium tooltip" size="md">
+        <Button>Medium</Button>
+      </Tooltip>
+      
+      <Tooltip content="Large tooltip with more content" size="lg">
+        <Button>Large</Button>
+      </Tooltip>
+    </Horizontal>
+  );
+};
+```
+
+### **Custom Content**
+Tooltips can contain rich content, not just text.
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+import { Vertical } from 'app-studio';
+
+export const CustomContentTooltip = () => {
+  return (
+    <Tooltip
+      content={
+        <Vertical padding={5}>
+          <Text fontWeight="bold">Custom Tooltip</Text>
+          <Text fontSize="12px">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>
+  );
+};
+```
+
+### **Compound Component Pattern**
+For more control, you can use the compound component pattern.
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+
+export const CompoundTooltip = () => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Button>Hover Me</Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <Text>This is a tooltip using compound components</Text>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};
+```
+
+### **Integration with Other Components**
+Tooltips can be easily integrated with other components.
+
+```tsx
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+import { Button } from '../../Button/Button';
+import { Icon } from '../../Icon/Icon';
+
+export const IntegratedTooltip = () => {
+  return (
+    <Button>
+      Save
+      <Tooltip content="Save your changes">
+        <Icon name="info-circle" marginLeft={5} />
+      </Tooltip>
+    </Button>
+  );
+};
+```