@app-studio/web 0.9.41 → 0.9.44

package/docs/components/Select.mdx

@@ -24,7 +24,7 @@ A customizable UI component for selecting from a list of options.
 ### **Default**
 ```tsx
 import React from 'react';
-import { Select } from '../Select';
+import { Select } from '@app-studio/web';
 
 export const DefaultSelect = () => (
   <Select
@@ -44,7 +44,7 @@ Flag to indicate if the select has an error state
 
 ```tsx
 import React from 'react';
-import { Select } from '../Select';
+import { Select } from '@app-studio/web';
 
 export const ErrorSelect = () => (
   <Select
@@ -67,7 +67,7 @@ Helper text that appears below the select box
 ```tsx
 import React from 'react';
 
-import { Select } from '../Select';
+import { Select } from '@app-studio/web';
 
 export const HelperTextSelect = () => (
   <Select
@@ -88,7 +88,7 @@ Determines the shadow property of the select component
 
 ```tsx
 import React from 'react';
-import { Select } from '../../../Form/Select/Select';
+import { Select } from '@app-studio/web';
 
 export const ShadowSelect = () => (
   <Select
@@ -111,7 +111,7 @@ Boolean to control whether the select options are scrollable
 
 ```tsx
 import React from 'react';
-import { Select } from '../Select';
+import { Select } from '@app-studio/web';
 
 export const IsScrollableDemo = () => {
   const timeZones = [

package/docs/components/Separator.mdx

@@ -1,121 +1,34 @@
 # Separator
 
-A flexible separator component for visually or semantically separating content.
+A visual element used to divide or group content on a user interface.
 
 ### **Import**
-  ```tsx
-  import { Separator } from '@app-studio/web';
-  ```
+```tsx
+import { Separator } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
 import { Separator } from '@app-studio/web';
-import { Text } from '@app-studio/web';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
 
 export const DefaultSeparator = () => {
   return (
-    <>
+    <Vertical width="100%" gap={16}>
+      <Text>Default Separator</Text>
       <Text>
         This is some text above the separator. The separator helps to visually
         divide content sections.
       </Text>
       <Separator />
       <Text>
-        This is some text below the separator. Notice how the separator creates a
-        clear visual distinction between content areas.
+        This is some text below the separator. Notice how the separator creates
+        a clear visual distinction between content areas.
       </Text>
-    </>
+    </Vertical>
   );
 };
 ```
 
-### **Variants**
-The Separator component supports different visual variants:
-
-```tsx
-<Separator variant="solid" />
-<Separator variant="dashed" />
-<Separator variant="dotted" />
-```
-
-### **Thicknesses**
-The Separator component supports different thicknesses:
-
-```tsx
-<Separator thickness="thin" />
-<Separator thickness="medium" />
-<Separator thickness="thick" />
-```
-
-### **Orientations**
-The Separator component supports horizontal and vertical orientations:
-
-```tsx
-<Separator orientation="horizontal" />
-
-<Horizontal height={100} alignItems="center">
-  <Text>Left Content</Text>
-  <Separator orientation="vertical" />
-  <Text>Right Content</Text>
-</Horizontal>
-```
-
-### **Colors**
-The Separator component can be customized with different colors:
-
-```tsx
-<Separator color="color.gray.200" />
-<Separator color="color.blue.500" />
-<Separator color="color.green.500" />
-<Separator color="color.red.500" />
-```
-
-### **With Label**
-The Separator component can include a label in the middle:
-
-```tsx
-<Separator label="OR" />
-
-<Separator 
-  label="SECTION DIVIDER" 
-  views={{
-    label: {
-      fontWeight: 'bold',
-      color: 'color.blue.500',
-      textTransform: 'uppercase',
-    }
-  }}
-/>
-```
-
-### **In Card**
-The Separator component can be used within cards to separate content sections:
-
-```tsx
-<Card variant="outlined" shape="rounded">
-  <Card.Header>
-    <Text fontWeight="bold" size="lg">Card Title</Text>
-  </Card.Header>
-  <Card.Content>
-    <Text>
-      This is the first section of content in the card.
-    </Text>
-    <Separator spacing="8px" />
-    <Text>
-      This is the second section of content.
-    </Text>
-    <Separator label="ADDITIONAL INFORMATION" spacing="8px" />
-    <Text>
-      This is the third section with additional information.
-    </Text>
-  </Card.Content>
-</Card>
-```
-
-### **Accessibility**
-By default, the Separator component has a semantic role of `separator`. If the separator is purely decorative, you can set the `decorative` prop to `true` to hide it from screen readers:
-
-```tsx
-<Separator decorative={true} />
-```

package/docs/components/ShareButton.mdx

@@ -0,0 +1,29 @@
+# ShareButton
+
+A button that allows users to share content from the web application using the device's native sharing capabilities.
+
+### **Import**
+```tsx
+import { ShareButton } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ShareButton } from '@app-studio/web';
+
+export const DefaultShareButton = () => (
+  <ShareButton
+    label="Share this page"
+    shareData={{
+      title: 'App Studio',
+      text: 'Découvrez les composants App Studio.',
+      url: 'https://appstudio.example.com',
+    }}
+    onUnsupported={() =>
+      alert('Le partage natif est indisponible sur ce navigateur.')
+    }
+  />
+);
+```
+

package/docs/components/Sidebar.mdx

@@ -1,147 +1,86 @@
 # Sidebar
 
-A composable, themeable and customizable sidebar component for navigation and content organization.
+A versatile layout component for navigation or content, typically positioned at the screen edges.
 
 ### **Import**
-  ```tsx
-  import { Sidebar } from '@app-studio/web';
-  ```
+```tsx
+import { Sidebar } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
 import { Sidebar } from '@app-studio/web';
-import { Text } from '@app-studio/web';
-import { Vertical } from '@app-studio/web';
-import { HomeIcon, UserIcon, SettingsIcon } from '@app-studio/web';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { HomeIcon,
+  SettingsIcon,
+  UserIcon,
+  NotificationIcon,
+  HelpIcon, } from '@app-studio/web';
+import { SideBarNavItem } from '@app-studio/web';
 
 export const DefaultSidebar = () => {
   return (
-    <Sidebar defaultExpanded={true}>
-      <Sidebar.Header>
-        <Text fontWeight="bold" size="lg">App Name</Text>
-      </Sidebar.Header>
-      <Sidebar.Content>
-        <Vertical gap={8}>
-          <NavItem icon={<HomeIcon widthHeight={20} />} label="Home" isActive />
-          <NavItem icon={<UserIcon widthHeight={20} />} label="Profile" />
-          <NavItem icon={<SettingsIcon widthHeight={20} />} label="Settings" />
-        </Vertical>
-      </Sidebar.Content>
-      <Sidebar.Footer>
-        <Text size="sm" color="color.gray.500">© 2023 App Studio</Text>
-      </Sidebar.Footer>
-    </Sidebar>
+    <View
+      height="500px"
+      position="relative"
+      border="1px solid #e2e8f0"
+      borderRadius="8px"
+      overflow="hidden"
+    >
+      <Horizontal width="100%" height="100%">
+        <Sidebar defaultExpanded={true} fixed={false}>
+          <Sidebar.Header>
+            <Text fontWeight="bold" size="lg">
+              App Name
+            </Text>
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Vertical gap={8}>
+              <SideBarNavItem
+                icon={<HomeIcon widthHeight={20} />}
+                label="Home"
+                isActive
+              />
+              <SideBarNavItem
+                icon={<UserIcon widthHeight={20} />}
+                label="Profile"
+              />
+              <SideBarNavItem
+                icon={<NotificationIcon widthHeight={20} />}
+                label="Notifications"
+              />
+              <SideBarNavItem
+                icon={<SettingsIcon widthHeight={20} />}
+                label="Settings"
+              />
+              <SideBarNavItem
+                icon={<HelpIcon widthHeight={20} />}
+                label="Help"
+              />
+            </Vertical>
+          </Sidebar.Content>
+          <Sidebar.Footer>
+            <Text size="sm" color="color.gray.500">
+              © 2023 App Studio
+            </Text>
+          </Sidebar.Footer>
+        </Sidebar>
+        <View flex="1" padding="16px" backgroundColor="color.gray.50">
+          <Text fontWeight="bold" size="xl" marginBottom="16px">
+            Main Content
+          </Text>
+          <Text>
+            This is the main content area. It will adjust based on the sidebar
+            state.
+          </Text>
+        </View>
+      </Horizontal>
+    </View>
   );
 };
-
-const NavItem = ({ icon, label, isActive = false }) => (
-  <Horizontal
-    alignItems="center"
-    gap={12}
-    padding="8px 12px"
-    borderRadius="4px"
-    backgroundColor={isActive ? 'color.blue.50' : 'transparent'}
-    color={isActive ? 'color.blue.600' : 'color.gray.700'}
-    fontWeight={isActive ? 'bold' : 'normal'}
-    cursor="pointer"
-    _hover={{ backgroundColor: isActive ? 'color.blue.50' : 'color.gray.100' }}
-  >
-    {icon}
-    <Text>{label}</Text>
-  </Horizontal>
-);
-```
-
-### **Variants**
-The Sidebar component supports different visual variants:
-
-```tsx
-<Sidebar variant="default" />
-<Sidebar variant="filled" />
-<Sidebar variant="outline" />
-```
-
-### **Positions**
-The Sidebar component can be positioned on either side:
-
-```tsx
-<Sidebar position="left" />
-<Sidebar position="right" />
-```
-
-### **Sizes**
-The Sidebar component supports different sizes:
-
-```tsx
-<Sidebar size="sm" />
-<Sidebar size="md" />
-<Sidebar size="lg" />
-```
-
-### **Controlled Expansion**
-The Sidebar component can be controlled externally:
-
-```tsx
-const [isExpanded, setIsExpanded] = useState(true);
-
-<Button onClick={() => setIsExpanded(!isExpanded)}>
-  {isExpanded ? 'Collapse' : 'Expand'} Sidebar
-</Button>
-
-<Sidebar 
-  expanded={isExpanded} 
-  onExpandedChange={setIsExpanded}
->
-  {/* Sidebar content */}
-</Sidebar>
-```
-
-### **Customization**
-The Sidebar component can be customized with the views prop:
-
-```tsx
-<Sidebar
-  views={{
-    container: {
-      backgroundColor: 'color.blue.800',
-      color: 'color.white',
-    },
-    header: {
-      borderBottomColor: 'color.blue.700',
-      backgroundColor: 'color.blue.900',
-    },
-    content: {
-      padding: '20px',
-    },
-    footer: {
-      borderTopColor: 'color.blue.700',
-      backgroundColor: 'color.blue.900',
-    },
-    toggleButton: {
-      backgroundColor: 'color.blue.700',
-      _hover: { backgroundColor: 'color.blue.600' },
-    },
-  }}
->
-  {/* Sidebar content */}
-</Sidebar>
-```
-
-### **Responsive Behavior**
-The Sidebar component can adapt to different screen sizes:
-
-```tsx
-<Sidebar
-  breakpoint={768}
-  breakpointBehavior="overlay"
-  hasBackdrop={true}
->
-  {/* Sidebar content */}
-</Sidebar>
 ```
 
-Available breakpoint behaviors:
-- `collapse`: Automatically collapses the sidebar below the breakpoint
-- `overlay`: Converts the sidebar to an overlay below the breakpoint
-- `hide`: Hides the sidebar completely below the breakpoint