@app-studio/web 0.1.0

package/src/components/Form/CountryPicker/CountryPicker.md

@@ -0,0 +1,206 @@
+### **Import**
+
+```jsx static
+import { CountryPicker } from "app-studio";
+```
+
+### **Default**
+
+```jsx
+<CountryPicker label="Country" placeholder="Select a country..." />
+```
+
+### **Disabled**
+
+“**_isDisabled_**” makes the field unusable.
+
+```tsx
+<CountryPicker isDisabled />
+```
+
+### **Read Only**
+
+“**_isReadOnly_**” makes the field readable but not writable. Can only read the element.
+
+```tsx
+<CountryPicker isReadOnly />
+```
+
+### **Size**
+
+“**_size_**” changes the text and icon size . It has a default value of “md”.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10}>
+  <CountryPicker name="xs" size="xs" label="xs" />
+  <CountryPicker name="sm" size="sm" label="sm" />
+  <CountryPicker name="md" size="md" label="md" />
+  <CountryPicker name="lg" size="lg" label="lg" />
+  <CountryPicker name="xl" size="xl" label="xl" />
+</Vertical>;
+```
+
+### **Shape**
+
+“**_shape_**” changes the appearance of the borders.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10}>
+  {["default", "sharp", "rounded", "pillShaped"].map((shape) => (
+    <CountryPicker
+      key={shape}
+      shape={shape}
+      placeholder="Select a country..."
+    />
+  ))}
+</Vertical>;
+```
+
+### **Variant**
+
+“**_variant_**” modifies the layout or design of the component.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10}>
+  {["outline", "default", "unStyled"].map((variant) => (
+    <CountryPicker
+      key={variant}
+      variant={variant}
+      label={variant}
+      placeholder="Select a country..."
+    />
+  ))}
+</Vertical>;
+```
+
+### **ColorScheme**
+
+“**_colorScheme_**” modifies the label and border color of the field.
+
+```jsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={15}>
+  {["theme.primary", "theme.secondary", "theme.error", "theme.success", "theme.warning"].map((color) => (
+    <CountryPicker key={color} label={color} colorScheme={color} />
+  ))}
+</Vertical>;
+```
+
+### **Shadow**
+
+“**_shadow_**” adds a shadow effect to the field.
+
+```tsx
+<CountryPicker shadow={{ boxShadow: "rgba(0, 0, 0, 0.20) 0px 3px 8px" }} />
+```
+
+### **HelperText**
+
+“**_helperText_**” provides additional information about the field.
+
+```tsx
+<CountryPicker helperText="CountryPicker one item!" error />
+```
+
+### **Styles**
+
+“**_styles_**” changes the style of the field.
+
+```jsx
+<CountryPicker
+  styles={{
+    box: { 
+      borderRadius: 10, 
+      borderColor: 'theme.primary',
+      borderStyle: 'solid',
+      borderWidth: 1
+    },
+    text: { color: "theme.primary"  },
+    label: { fontWeight: "bold", color: "theme.primary"  },
+    dropDown: { color: "theme.primary"  },
+  }}
+  error
+/>
+```
+
+```jsx static
+const Shapes: Record<Shape, number | string> = {
+  default: "6px 6px 0 0",
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24,
+};
+```
+
+## Types
+
+```tsx static
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+```
+
+```jsx static
+type CountryPickerStyles = {
+  text?: CSSProperties,
+  icon?: CSSProperties,
+  dropDown?: CSSProperties,
+  box?: CSSProperties,
+  label?: CSSProperties,
+  helperText?: CSSProperties,
+};
+```
+
+```jsx static
+type Shape = "default" | "sharp" | "rounded" | "pillShaped";
+```
+
+```jsx static
+type Country = {
+  name: string,
+  dial_code: string,
+  emoji: string,
+  code: string,
+};
+```
+
+```js static
+type Variant = "default" | "outline" | "unStyled";
+```
+
+```jsx static
+type Styles = {
+  box?: CSSProperties,
+  text?: CSSProperties,
+  label?: CSSProperties,
+  helperText?: CSSProperties,
+  field?: CSSProperties,ssss
+};
+```
+
+## Default Values
+
+```jsx static
+const LabelSizes: Record<Size, number> = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16,
+};
+```
+
+```jsx static
+const IconSizes: Record<Size, string> = {
+  xs: "8px",
+  sm: "10px",
+  md: "12px",
+  lg: "14px",
+  xl: "16px",
+};
+```

package/src/components/Form/CountryPicker/CountryPicker.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { CountryPickerProps } from './CountryPicker/CountryPicker.props';
+import { useCountryPickerState } from './CountryPicker/CountryPicker.state';
+import CountryPickerView from './CountryPicker/CountryPicker.view';
+
+const CountryPickerComponent: React.FC<CountryPickerProps> = (props) => {
+  const countryPickerStates = useCountryPickerState(props);
+
+  return <CountryPickerView {...countryPickerStates} {...props} />;
+};
+
+/**
+ * Country picker allows users to select a country from a dropdown list or search field.
+ */
+export const CountryPicker = CountryPickerComponent;