@app-studio/web 0.9.30 → 0.9.32

package/docs/components/Pagination.mdx

@@ -0,0 +1,150 @@
+# Pagination
+
+A flexible pagination component for navigating through pages of content.
+
+### **Import**
+  ```tsx
+  import { Pagination } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { Pagination } from '../Pagination';
+
+export const DefaultPagination = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = 10;
+
+  return (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      onPageChange={setCurrentPage}
+    />
+  );
+};
+```
+
+### **Variants**
+The Pagination component supports different visual variants:
+
+```tsx
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  variant="default"
+/>
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  variant="filled"
+/>
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  variant="outline"
+/>
+```
+
+### **Sizes**
+The Pagination component supports different sizes:
+
+```tsx
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  size="sm"
+/>
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  size="md"
+/>
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  size="lg"
+/>
+```
+
+### **Shapes**
+The Pagination component supports different button shapes:
+
+```tsx
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  shape="rounded"
+/>
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  shape="square"
+/>
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  shape="circular"
+/>
+```
+
+### **Advanced Usage**
+The Pagination component can be customized with additional features:
+
+```tsx
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  pageSize={pageSize}
+  onPageSizeChange={setPageSize}
+  showPageSizeSelector={true}
+  showFirstLastButtons={true}
+  maxPageButtons={7}
+  variant="outline"
+/>
+```
+
+### **Table Integration**
+The Pagination component can be integrated with the Table component:
+
+```tsx
+<Table.Template
+  columns={columns}
+  data={getCurrentPageData()}
+/>
+
+<View marginTop={16} display="flex" justifyContent="space-between" alignItems="center">
+  <Text>
+    Showing {(currentPage - 1) * pageSize + 1} to {Math.min(currentPage * pageSize, totalItems)} of {totalItems} entries
+  </Text>
+  
+  <Pagination
+    currentPage={currentPage}
+    totalPages={totalPages}
+    onPageChange={setCurrentPage}
+    pageSize={pageSize}
+    onPageSizeChange={setPageSize}
+    showPageSizeSelector={true}
+    showPageInfo={false}
+    variant="outline"
+    size="sm"
+  />
+</View>
+```

package/docs/components/Password.mdx

@@ -0,0 +1,121 @@
+### **Import**
+
+```tsx
+import { Password } from "@app-studio/web";
+```
+
+## 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 "../../Icon/OpenEye";
+import { CloseEyeIcon } from "../../Icon/CloseEye";
+
+<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 "../../Button/Button";
+import { OpenEyeIcon } from "../../Icon/OpenEye";
+import { CloseEyeIcon } from "../../Icon/CloseEye";
+
+<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 "../../Button/Button";
+import { OpenEyeIcon } from "../../Icon/OpenEye";
+import { CloseEyeIcon } from "../../Icon/CloseEye";
+
+<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/Resizable.mdx

@@ -0,0 +1,148 @@
+# Resizable
+
+An accessible resizable panel group component for creating flexible layouts with resizable panels.
+
+### **Import**
+  ```tsx
+  import { Resizable } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Resizable } from '@app-studio/web';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
+
+export const DefaultResizable = () => {
+  return (
+    <View height="400px" width="100%">
+      <Resizable>
+        <Resizable.Panel id="panel1" defaultSize="30%">
+          <View padding="16px" height="100%" backgroundColor="color.blue.50">
+            <Text fontWeight="bold">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">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">Panel 3</Text>
+            <Text>This is the third panel. Drag the handle to resize.</Text>
+          </View>
+        </Resizable.Panel>
+      </Resizable>
+    </View>
+  );
+};
+```
+
+### **Orientation**
+The Resizable component supports both horizontal and vertical orientations:
+
+```tsx
+// Horizontal (default)
+<Resizable orientation="horizontal">
+  {/* Panels and handles */}
+</Resizable>
+
+// Vertical
+<Resizable orientation="vertical">
+  {/* Panels and handles */}
+</Resizable>
+```
+
+### **Nested Layouts**
+The Resizable component can be nested to create complex layouts:
+
+```tsx
+<Resizable>
+  <Resizable.Panel id="left" defaultSize="30%">
+    {/* Left panel content */}
+  </Resizable.Panel>
+  
+  <Resizable.Handle id="handle1" />
+  
+  <Resizable.Panel id="right" defaultSize="70%">
+    {/* Nested vertical resizable */}
+    <Resizable orientation="vertical">
+      <Resizable.Panel id="top" defaultSize="50%">
+        {/* Top right panel content */}
+      </Resizable.Panel>
+      
+      <Resizable.Handle id="handle2" />
+      
+      <Resizable.Panel id="bottom" defaultSize="50%">
+        {/* Bottom right panel content */}
+      </Resizable.Panel>
+    </Resizable>
+  </Resizable.Panel>
+</Resizable>
+```
+
+### **Handle Variants**
+The Resizable component supports different handle variants:
+
+```tsx
+<Resizable variant="default">
+  {/* Panels and handles */}
+</Resizable>
+
+<Resizable variant="subtle">
+  {/* Panels and handles */}
+</Resizable>
+
+<Resizable variant="prominent">
+  {/* Panels and handles */}
+</Resizable>
+```
+
+### **Handle Sizes**
+The Resizable component supports different handle sizes:
+
+```tsx
+<Resizable size="sm">
+  {/* Panels and handles */}
+</Resizable>
+
+<Resizable size="md">
+  {/* Panels and handles */}
+</Resizable>
+
+<Resizable size="lg">
+  {/* Panels and handles */}
+</Resizable>
+```
+
+### **Controlled Resizing**
+The Resizable component can be controlled externally:
+
+```tsx
+const [sizes, setSizes] = useState([33.33, 33.33, 33.33]);
+
+const handleSizesChange = (newSizes) => {
+  setSizes(newSizes);
+};
+
+<Resizable defaultSizes={sizes} onSizesChange={handleSizesChange}>
+  {/* Panels and handles */}
+</Resizable>
+```
+
+### **Accessibility**
+The Resizable component is fully accessible:
+
+- Handles have proper ARIA attributes
+- Keyboard navigation is supported (arrow keys to resize, Enter to start resizing, Escape to cancel)
+- Focus management for keyboard users

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/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Select } from '../Select';
+
+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 '../Select';
+
+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 '../Select';
+
+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 '../../../Form/Select/Select';
+
+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 '../Select';
+
+export const IsScrollableDemo = () => {
+  const timeZones = [
+    { label: 'Item1', value: '1' },
+    { label: 'Item2', value: '2' },
+    { label: 'Item3', value: '3' },
+  ];
+
+  return <Select options={timeZones} />;
+};
+
+```

package/docs/components/Separator.mdx

@@ -0,0 +1,121 @@
+# Separator
+
+A flexible separator component for visually or semantically separating content.
+
+### **Import**
+  ```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';
+
+export const DefaultSeparator = () => {
+  return (
+    <>
+      <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>
+    </>
+  );
+};
+```
+
+### **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} />
+```