@app-studio/components 0.10.17

package/docs/components/Password.mdx

@@ -0,0 +1,121 @@
+### **Import**
+
+```tsx
+import { Password } from "@app-studio/components";
+```
+
+## Props
+
+| Prop             | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| visibleIcon      | ReactNode     | Icon to display when the password is visible.                                                                                             |         |
+| hiddenIcon       | ReactNode     | Icon to display when the password is hidden.                                                                                              |         |
+| isClearable      | boolean       | Indicates whether the input is clearable.                                                                                                 | false   |
+| isDisabled       | boolean       | Makes the field unusable.                                                                                                                | false   |
+| error            | boolean       | Indicates that the text field value failed the validation criteria.                                                                       | false   |
+| helperText       | string        | Text used to inform the user that the content of the field is invalid.                                                                    |         |
+| styles           | TextFieldStyles | Optional custom styles for the TextField.                                                                                                 |         |
+| className        | string        | Optional className for the TextField.                                                                                                     |         |
+
+### **Default**
+
+It has type equals to “password” and isClearable set to false. It has all the props of the TextField component.
+
+```tsx
+<Password label="Password" value="123456" />
+```
+
+### **Disabled**
+
+“**_isDisabled_**” makes the field unusable.
+
+```tsx
+<Password value="password" isDisabled />
+```
+
+### **Icon**
+
+“**_visibleIcon_**” and “**_hiddenIcon_**” are icons indicating whether the password is visible or hidden.
+
+```tsx
+import { OpenEyeIcon } from '@app-studio/components';
+import { CloseEyeIcon } from '@app-studio/components';
+
+<Password
+  visibleIcon={<OpenEyeIcon size={14} />}
+  hiddenIcon={<CloseEyeIcon size={14} />}
+/>;
+```
+
+### **Error**
+
+“**_error_**” if true, indicates that the text field value failed the validation criteria.
+
+```tsx
+import { Vertical } from "app-studio";
+import { Button } from '@app-studio/components';
+import { OpenEyeIcon } from '@app-studio/components';
+import { CloseEyeIcon } from '@app-studio/components';
+
+<Password
+  placeholder="Password"
+  colorScheme="theme-secondary"
+  visibleIcon={<OpenEyeIcon size={14} />}
+  hiddenIcon={<CloseEyeIcon size={14} />}
+  error
+/>;
+```
+
+### **HelperText**
+
+“**_helperText_**” is a string text used to inform the user that the content of the field is invalid.
+
+```tsx
+import { Vertical } from "app-studio";
+import { Button } from '@app-studio/components';
+import { OpenEyeIcon } from '@app-studio/components';
+import { CloseEyeIcon } from '@app-studio/components';
+
+<Password
+  placeholder="Password"
+  helperText="Incorrect password"
+  visibleIcon={<OpenEyeIcon size={14} />}
+  hiddenIcon={<CloseEyeIcon size={14} />}
+  error
+/>;
+```
+
+## **Default Values**
+
+```tsx
+const Shapes: Record<Shape, number | string> = {
+  default: "6px 6px 0 0",
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24,
+};
+```
+
+## Types
+
+```tsx
+type Variant = "outline" | "default" | "none";
+```
+
+```tsx
+type Shape = "default" | "sharp" | "rounded" | "pillShaped";
+```
+
+```tsx
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+```
+
+```tsx
+type TextFieldStyles = {
+  container?: CSSProperties;
+  field?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  text?: CSSProperties;
+};
+```

package/docs/components/ProgressBar.mdx

@@ -0,0 +1,143 @@
+# ProgressBar
+
+A progress bar component for displaying progress or completion status with customizable colors, shapes (linear or circular), and styling.
+
+### **Import**
+```tsx
+import { ProgressBar } from '@app-studio/components';
+```
+
+### **Linear Progress (Default)**
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const LinearExamples = () => (
+  <Vertical gap={20}>
+    <ProgressBar value={30} />
+    <ProgressBar value={60} color="color-blue-500" height={8} radius={4} />
+    <ProgressBar value={90} color="color-green-500" height={12} radius={6} />
+  </Vertical>
+);
+```
+
+### **Circular Progress**
+Display progress in a circular format.
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const CircularExamples = () => (
+  <Horizontal gap={30}>
+    <ProgressBar 
+      shape="circle" 
+      value={45} 
+      size={60} 
+    />
+    <ProgressBar 
+      shape="circle" 
+      value={75} 
+      size={80} 
+      color="color-purple-500" 
+      strokeWidth={8}
+      showLabel 
+    />
+    <ProgressBar 
+      shape="circle" 
+      value={90} 
+      size={100} 
+      color="color-orange-500" 
+      strokeWidth={10} 
+      backgroundColor="color-orange-100"
+      showLabel
+      labelColor="color-orange-700"
+    />
+  </Horizontal>
+);
+```
+
+### **Props**
+
+#### **Common Props**
+- **value** (`number`): Current progress value (default: 0).
+- **max** (`number`): Maximum progress value (default: 100).
+- **color** (`string`): Color of the filled portion.
+- **backgroundColor** (`string`): Background color of the track.
+- **animated** (`boolean`): Whether to animate the progress change (default: true).
+- **animationDuration** (`string`): Duration of the animation (e.g., '0.5s').
+- **views** (`ProgressBarStyles`): Custom styles object.
+
+#### **Linear Props**
+- **height** (`number | string`): Height of the bar.
+- **radius** (`number | string`): Border radius for rounded corners.
+
+#### **Circular Props (shape="circle")**
+- **size** (`number`): Diameter of the circle.
+- **strokeWidth** (`number`): Width of the progress stroke.
+- **showLabel** (`boolean`): Whether to show the percentage label in the center.
+- **labelColor** (`string`): Color of the label text.
+
+### **Animated & Dynamic**
+```tsx
+import React, { useState, useEffect } from 'react';
+import { ProgressBar } from '@app-studio/components';
+import { Vertical, Button, Text } from 'app-studio';
+
+export const DynamicProgress = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
+    }, 800);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Vertical gap={20}>
+      <Text>Uploading... {progress}%</Text>
+      <ProgressBar value={progress} color="color-blue-600" animated />
+      
+      <Horizontal gap={20} marginTop={20}>
+        <ProgressBar 
+          shape="circle" 
+          value={progress} 
+          size={50} 
+          showLabel 
+          color="color-blue-600" 
+        />
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+
+### **Custom Styling (Views)**
+Customize internal parts using the `views` prop.
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/components';
+
+export const CustomStyle = () => (
+  <ProgressBar 
+    value={70} 
+    height={20}
+    views={{
+      container: { 
+        borderColor: 'color-gray-300', 
+        borderWidth: 1, 
+        padding: 2, 
+        borderRadius: 12 
+      },
+      bar: { 
+        borderRadius: 10,
+        background: 'linear-gradient(90deg, #FF5C97, #705CFF)' 
+      }
+    }} 
+  />
+);
+```

package/docs/components/Resizable.mdx

@@ -0,0 +1,149 @@
+# Resizable
+
+A flexible container that allows users to resize its content areas by dragging adjustable dividers.
+
+### **Import**
+```tsx
+import { Resizable } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Resizable } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+
+export const DefaultResizable = () => {
+  return (
+    <View
+      height="400px"
+      width="100%"
+      border="1px solid #e2e8f0"
+      borderRadius="8px"
+      overflow="hidden"
+    >
+      <Resizable>
+        <Resizable.Panel id="panel1" defaultSize="30%">
+          <View padding="16px" height="100%" backgroundColor="color-blue-50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Panel 1
+            </Text>
+            <Text>This is the first panel. Drag the handle to resize.</Text>
+          </View>
+        </Resizable.Panel>
+
+        <Resizable.Handle id="handle1" withVisualIndicator />
+
+        <Resizable.Panel id="panel2" defaultSize="40%">
+          <View padding="16px" height="100%" backgroundColor="color-green-50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Panel 2
+            </Text>
+            <Text>This is the second panel. Drag the handle to resize.</Text>
+          </View>
+        </Resizable.Panel>
+
+        <Resizable.Handle id="handle2" withVisualIndicator />
+
+        <Resizable.Panel id="panel3" defaultSize="30%">
+          <View padding="16px" height="100%" backgroundColor="color-purple-50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Panel 3
+            </Text>
+            <Text>This is the third panel. Drag the handle to resize.</Text>
+          </View>
+        </Resizable.Panel>
+      </Resizable>
+    </View>
+  );
+};
+```
+
+### **collapsible**
+Enables or disables the ability for panels to collapse.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+```tsx
+import React from 'react';
+import { Resizable } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+
+export const CollapsibleResizable = () => {
+  return (
+    <View
+      height="400px"
+      width="100%"
+      border="1px solid #e2e8f0"
+      borderRadius="8px"
+      overflow="hidden"
+    >
+      <Resizable
+        collapsible={true}
+        autoSaveId="collapsible-example"
+        keyboardResizeBy={20}
+      >
+        <Resizable.Panel
+          id="panel1"
+          defaultSize="25%"
+          collapsible={true}
+          minSize={100}
+          maxSize={300}
+        >
+          <View padding="16px" height="100%" backgroundColor="color-blue-50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Collapsible Panel
+            </Text>
+            <Text>
+              This panel can be collapsed using the button on the handle. It
+              also has min (100px) and max (300px) constraints.
+            </Text>
+          </View>
+        </Resizable.Panel>
+
+        <Resizable.Handle id="handle1" withVisualIndicator withCollapseButton />
+
+        <Resizable.Panel id="panel2" defaultSize="50%">
+          <View padding="16px" height="100%" backgroundColor="color-green-50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Main Panel
+            </Text>
+            <Text>
+              This is the main content panel. Try using keyboard navigation with
+              arrow keys to resize panels. Home/End keys make larger jumps.
+            </Text>
+          </View>
+        </Resizable.Panel>
+
+        <Resizable.Handle
+          id="handle2"
+          withVisualIndicator
+          withCollapseButton
+          collapseTarget="panel3"
+        />
+
+        <Resizable.Panel
+          id="panel3"
+          defaultSize="25%"
+          collapsible={true}
+          defaultCollapsed={true}
+        >
+          <View padding="16px" height="100%" backgroundColor="color-purple-50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Initially Collapsed Panel
+            </Text>
+            <Text>
+              This panel starts collapsed. The layout is persisted in
+              localStorage so your changes will be remembered when you return.
+            </Text>
+          </View>
+        </Resizable.Panel>
+      </Resizable>
+    </View>
+  );
+};
+```
+

package/docs/components/Select.mdx

@@ -0,0 +1,126 @@
+# Select
+
+A customizable UI component for selecting from a list of options.
+
+## Props
+
+| Prop           | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| options          | { label: string; value: string }[] | Array of options for the select box.                                                                                                     |         |
+| label            | string        | Label for the select box.                                                                                                                               |         |
+| placeholder      | string        | Placeholder text for the select box.                                                                                                                      |         |
+| error            | boolean       | Flag to indicate if the select has an error state.                                                                                                       | false   |
+| helperText       | string        | Helper text that appears below the select box.                                                                                                            |         |
+| shadow           | Shadow        | Determines the shadow property of the select component.                                                                                                  |         |
+| styles           | CSSProperties | Optional custom styles for the select component.                                                                                                        |         |
+| className        | string        | Optional className for the select component.                                                                                                          |         |
+| isScrollable     | boolean       | Boolean to control whether the select options are scrollable                                                                                             | true    |
+
+### **Import**
+  ```tsx
+  import { Select } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Select } from '@app-studio/components';
+
+export const DefaultSelect = () => (
+  <Select
+    options={[
+      { label: 'Item1', value: '1' },
+      { label: 'Item2', value: '2' },
+      { label: 'Item3', value: '3' },
+    ]}
+    label="Select an item"
+  />
+);
+
+```
+
+### **error**
+Flag to indicate if the select has an error state
+
+```tsx
+import React from 'react';
+import { Select } from '@app-studio/components';
+
+export const ErrorSelect = () => (
+  <Select
+    id="error"
+    name="error"
+    error
+    options={[
+      { label: 'Item1', value: '1' },
+      { label: 'Item2', value: '2' },
+      { label: 'Item3', value: '3' },
+    ]}
+  />
+);
+
+```
+
+### **helperText**
+Helper text that appears below the select box
+
+```tsx
+import React from 'react';
+
+import { Select } from '@app-studio/components';
+
+export const HelperTextSelect = () => (
+  <Select
+    options={[
+      { label: 'Item1', value: '1' },
+      { label: 'Item2', value: '2' },
+      { label: 'Item3', value: '3' },
+    ]}
+    helperText="select one item!"
+    error
+  />
+);
+
+```
+
+### **shadow**
+Determines the shadow property of the select component
+
+```tsx
+import React from 'react';
+import { Select } from '@app-studio/components';
+
+export const ShadowSelect = () => (
+  <Select
+    shadow={{
+      boxShadow:
+        'rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset',
+    }}
+    options={[
+      { label: 'Item1', value: '1' },
+      { label: 'Item2', value: '2' },
+      { label: 'Item3', value: '3' },
+    ]}
+  />
+);
+
+```
+
+### **isScrollable**
+Boolean to control whether the select options are scrollable
+
+```tsx
+import React from 'react';
+import { Select } from '@app-studio/components';
+
+export const IsScrollableDemo = () => {
+  const timeZones = [
+    { label: 'Item1', value: '1' },
+    { label: 'Item2', value: '2' },
+    { label: 'Item3', value: '3' },
+  ];
+
+  return <Select options={timeZones} />;
+};
+
+```

package/docs/components/Selector.mdx

@@ -0,0 +1,78 @@
+# Selector
+
+A segmented control UI component for selecting from a limited list of options, typically used for toggling states or selecting mutually exclusive options like complexity or priority.
+
+## Props
+
+| Prop           | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| options          | { label: string; value: string; color?: string }[] | Array of options for the selector. `color` defaults to primary theme color if not specified.                                       |         |
+| label            | string        | Label for the selector group, displayed with an icon.                                                                                                                |         |
+| id               | string        | ID for the form field.                                                                                                                                    |         |
+| name             | string        | Name attribute for the form field.                                                                                                                        |         |
+| value            | string        | The currently selected value.                                                                                                                             |         |
+| onChange         | (value: any) => void | Callback function when selection changes.                                                                                                        |         |
+| views            | SelectorStyles | Custom styles for internal sub-components (container, item, etc.).                                                                                       |         |
+
+### **Import**
+  ```tsx
+  import { Selector } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Selector } from '@app-studio/components';
+
+export const DefaultSelector = () => (
+  <Selector
+    options={[
+      { label: 'Option A', value: 'A' },
+      { label: 'Option B', value: 'B' },
+      { label: 'Option C', value: 'C' },
+    ]}
+    label="Standard Selection"
+  />
+);
+```
+
+### **Complexity Example (Colored Options)**
+Display options with specific semantic colors for active states, suitable for indicating status levels like Low, Medium, High.
+
+```tsx
+import React from 'react';
+import { Selector } from '@app-studio/components';
+
+export const ComplexitySelector = () => (
+  <Selector
+    label="Complexity"
+    options={[
+      { label: 'Low', value: 'Low', color: 'color-emerald-500' },
+      { label: 'Medium', value: 'Medium', color: 'color-amber-500' },
+      { label: 'High', value: 'High', color: 'color-red-500' },
+    ]}
+  />
+);
+```
+
+### **Custom Styling**
+Apply custom styles to the container or items using the `views` prop.
+
+```tsx
+import React from 'react';
+import { Selector } from '@app-studio/components';
+
+export const CustomStyleSelector = () => (
+  <Selector
+    label="Custom Styled"
+    views={{
+      container: { backgroundColor: 'color-gray-50' },
+      item: { fontSize: '14px', fontStyle: 'italic' }
+    }}
+    options={[
+      { label: 'One', value: '1' },
+      { label: 'Two', value: '2' },
+    ]}
+  />
+);
+```

package/docs/components/Separator.mdx

@@ -0,0 +1,34 @@
+# Separator
+
+A visual element used to divide or group content on a user interface.
+
+### **Import**
+```tsx
+import { Separator } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Separator } from '@app-studio/components';
+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.
+      </Text>
+    </Vertical>
+  );
+};
+```
+

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/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ShareButton } from '@app-studio/components';
+
+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.')
+    }
+  />
+);
+```
+