@app-studio/web 0.1.0

package/dist/components/Form/Checkbox/Checkbox/Checkbox.props.d.ts

@@ -0,0 +1,97 @@
+import React, { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { CheckboxStyles, Size } from './Checkbox.type';
+/**
+ * Represents the properties for a checkbox component.
+ */
+export interface CheckboxProps {
+    /**
+     * The identifier for the checkbox.
+     */
+    id?: string;
+    /**
+     * Custom icon to be displayed when the checkbox is checked.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Indicates whether the checkbox has an error.
+     */
+    error?: boolean;
+    /**
+     * The name of the checkbox element.
+     */
+    name?: string;
+    /**
+     * The label of the checkbox.
+     */
+    label?: string;
+    /**
+     * Changes the background color of the checkbox.
+     */
+    colorScheme?: string;
+    /**
+     * Give control on the selected state of the checkbox component.
+     */
+    isChecked?: boolean;
+    /**
+     * Allows you to set the initial state of the checkbox without controlling its value
+     */
+    defaultIsSelected?: boolean;
+    /**
+     * If true, the checkbox cannot be interacted with.
+     */
+    isReadOnly?: boolean;
+    /**
+     * If true, the checkbox is disabled and cannot be selected.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates that the checkbox is neither checked nor unchecked.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler function called when the controlled checkbox value changes.
+     */
+    onChange?: Function;
+    /**
+     * Handler function called when the checkbox value changes on iOS and Android devices.
+     */
+    onValueChange?: Function;
+    /**
+     * CSS styles
+     */
+    styles?: CheckboxStyles;
+    /**
+     * Sets the height and width of the checkbox.
+     */
+    size?: Size;
+    /**
+     * Sets a shadow effect for the checkbox.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Other additional properties.
+     */
+    [x: string]: any;
+}
+export interface CheckboxViewProps extends CheckboxProps {
+    /**
+     * Indicates whether the checkbox is currently being hovered.
+     */
+    isHovered?: boolean;
+    /**
+     * A function to set the hovered state of the checkbox.
+     * @param hovered - The hovered state to set.
+     */
+    setIsHovered?: (hovered: boolean) => void;
+    /**
+     * Indicates whether the checkbox is selected/checked.
+     */
+    isChecked?: boolean;
+    /**
+     * A function to set the selected state of the checkbox.
+     * @param selected - The selected state to set.
+     */
+    setIsChecked?: (selected: boolean) => void;
+}

package/dist/components/Form/Checkbox/Checkbox/Checkbox.state.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CheckboxProps } from './Checkbox.props';
+export declare const useCheckboxState: ({ defaultIsSelected }: CheckboxProps) => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isSelected: boolean;
+    setIsSelected: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/components/Form/Checkbox/Checkbox/Checkbox.style.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { Size } from './Checkbox.type';
+export declare const Sizes: Record<Size, CSSProperties>;
+export declare const IconSizes: Record<Size, number>;

package/dist/components/Form/Checkbox/Checkbox/Checkbox.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CheckboxViewProps } from './Checkbox.props';
+declare const CheckboxView: React.FC<CheckboxViewProps>;
+export default CheckboxView;

package/dist/components/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CheckboxProps } from './Checkbox/Checkbox.props';
+/**
+ * Checkbox allows users to select one or more options from a list of choices.
+ */
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/Form/Checkbox/examples/ColorScheme.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ColorCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/Default.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DefaultCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/DisabledInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DisabledCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/ErrorCheckbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/FormCheckout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FormCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/IconCheckbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const IconCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/IndeterminateCheckbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const IndeterminateCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/ReadOnlyInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ReadOnlyCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/Shadow.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ShadowCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/SizeInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SizeCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/StylesInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledCheckbox: () => JSX.Element;

package/dist/components/Form/Checkbox/examples/index.d.ts

@@ -0,0 +1,11 @@
+export * from 'src/components/Form/Checkbox/examples/ColorScheme';
+export * from 'src/components/Form/Checkbox/examples/Default';
+export * from 'src/components/Form/Checkbox/examples/DisabledInput';
+export * from 'src/components/Form/Checkbox/examples/ErrorCheckbox';
+export * from 'src/components/Form/Checkbox/examples/FormCheckout';
+export * from 'src/components/Form/Checkbox/examples/IconCheckbox';
+export * from 'src/components/Form/Checkbox/examples/IndeterminateCheckbox';
+export * from 'src/components/Form/Checkbox/examples/ReadOnlyInput';
+export * from 'src/components/Form/Checkbox/examples/Shadow';
+export * from 'src/components/Form/Checkbox/examples/SizeInput';
+export * from 'src/components/Form/Checkbox/examples/StylesInput';

package/dist/components/Form/CountryPicker/CountryPicker/CountryPicker.props.d.ts

@@ -0,0 +1,173 @@
+import { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { Country, CountryPickerStyles, Shape, Size, Variant } from './CountryPicker.type';
+export interface CountryPickerProps {
+    /**
+     * The identifier for the CountryPicker component.
+     */
+    id?: string;
+    /**
+     * Indicates whether the field has an error.
+     */
+    error?: boolean;
+    /**
+     * The name of the field.
+     */
+    name?: string;
+    /**
+     * The label text for the field.
+     */
+    label?: string;
+    /**
+     * The color scheme that changes the border color on hover of the field.
+     */
+    colorScheme?: string;
+    /**
+     * Additional helper text that provides information about the field.
+     */
+    helperText?: string;
+    /**
+     * A brief text or hint that appears in the field before the user enters any value.
+     */
+    placeholder?: string;
+    /**
+     * The shape that changes the outlines of the CountryPicker.
+     */
+    shape?: Shape;
+    /**
+     * If true, the field will be automatically focused.
+     */
+    isAutoFocus?: boolean;
+    /**
+     * If true, the CountryPicker cannot be edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * If true, the field will be unusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * Callback function triggered when the CountryPicker loses focus.
+     */
+    onBlur?: (value: any) => void;
+    /**
+     * Callback function triggered when the field value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * CSS styles for the CountryPicker component.
+     */
+    styles?: CountryPickerStyles;
+    /**
+     * The font size of the CountryPicker.
+     */
+    size?: Size;
+    /**
+     * The default value of the input field.
+     */
+    value?: string | number;
+    /**
+     * Changes the style of the input field.
+     */
+    variant?: Variant;
+    /**
+     * Adds a shadow effect to the CountryPicker.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Other properties that can be passed to the component.
+     */
+    [x: string]: any;
+}
+export interface CountryPickerViewProps extends CountryPickerProps {
+    /**
+     * Indicates whether the country picker is currently being hovered.
+     */
+    isHovered?: boolean;
+    /**
+     * A function to set the hovered state of the country picker.
+     * @param hovered - The hovered state to set.
+     */
+    setIsHovered?: (hovered: boolean) => void;
+    /**
+     * Indicates whether the country picker is focused.
+     */
+    isFocused?: boolean;
+    /**
+     * A function to set the focus state of the country picker.
+     * @param focused - The focus state to set.
+     */
+    setIsFocused?: (focused: boolean) => void;
+    /**
+     * Indicates the currently selected country.
+     */
+    selected?: string;
+    /**
+     * A function to set the selected country.
+     * @param selected - The selected country to set.
+     */
+    setSelected?: (selected: string) => void;
+    /**
+     * Indicates whether the country picker should be hidden.
+     */
+    hide?: boolean;
+    /**
+     * A function to set the hide state of the country picker.
+     * @param hide - The hide state to set.
+     */
+    setHide?: (hide: boolean) => void;
+    /**
+     * Options for the country picker.
+     */
+    newOptions?: Array<Country>;
+    /**
+     * A function to set the new options for the country picker.
+     * @param newOptions - The new options to set.
+     */
+    setNewOptions?: (newOptions: Array<Country>) => void;
+}
+export interface DropDownProps {
+    /**
+     * To set the height and width of the item list.
+     */
+    size?: Size;
+    /**
+     * Function that will be called when the option is CountryPickered
+     */
+    callback?: Function;
+    /**
+     * List of options
+     */
+    options: Array<Country>;
+    /**
+     * Css styles for the CountryPicker container and label
+     */
+    styles?: CountryPickerStyles;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}
+export interface DropDownItemProps {
+    /**
+     * Function that will be called when the option is clicked
+     */
+    callback?: Function;
+    /**
+     * Option to be displayed
+     */
+    option: string;
+    /**
+     * To set the DropDownItem's fontSize
+     */
+    size?: Size;
+    /**
+     * Css styles
+     */
+    styles?: CountryPickerStyles;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Form/CountryPicker/CountryPicker/CountryPicker.state.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CountryPickerProps } from './CountryPicker.props';
+import { Country } from './CountryPicker.type';
+export declare const useCountryPickerState: ({ placeholder }: CountryPickerProps) => {
+    hide: boolean;
+    setHide: React.Dispatch<React.SetStateAction<boolean>>;
+    newOptions: Country[];
+    setNewOptions: React.Dispatch<React.SetStateAction<Country[]>>;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isFocused: boolean;
+    setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    selected: string;
+    setSelected: React.Dispatch<React.SetStateAction<string>>;
+};

package/dist/components/Form/CountryPicker/CountryPicker/CountryPicker.style.d.ts

@@ -0,0 +1,3 @@
+import { Size } from './CountryPicker.type';
+export declare const IconSizes: Record<Size, number>;
+export declare const LabelSizes: Record<Size, number>;

package/dist/components/Form/CountryPicker/CountryPicker/CountryPicker.view.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CountryPickerViewProps, DropDownItemProps, DropDownProps } from './CountryPicker.props';
+export declare const DropDownItem: React.FC<DropDownItemProps>;
+export declare const DropDown: React.FC<DropDownProps>;
+declare const CountryPickerView: React.FC<CountryPickerViewProps>;
+export default CountryPickerView;

package/dist/components/Form/CountryPicker/CountryPicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CountryPickerProps } from './CountryPicker/CountryPicker.props';
+/**
+ * Country picker allows users to select a country from a dropdown list or search field.
+ */
+export declare const CountryPicker: React.FC<CountryPickerProps>;

package/dist/components/Form/CountryPicker/examples/Color.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ColorCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Default.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DefaultCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Disabled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DisabledCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Error.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Form.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FormCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Formik.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FormikCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/HelperText.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HelperTextCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/ReadOnlyInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ReadOnlyCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Shadow.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ShadowCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Shape.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ShapeCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/SizeInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SizeCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/StylesInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/Variant.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const VariantCountryPicker: () => JSX.Element;

package/dist/components/Form/CountryPicker/examples/index.d.ts

@@ -0,0 +1,12 @@
+export * from 'src/components/Form/CountryPicker/examples/Color';
+export * from 'src/components/Form/CountryPicker/examples/Default';
+export * from 'src/components/Form/CountryPicker/examples/Disabled';
+export * from 'src/components/Form/CountryPicker/examples/Error';
+export * from 'src/components/Form/CountryPicker/examples/Form';
+export * from 'src/components/Form/CountryPicker/examples/HelperText';
+export * from 'src/components/Form/CountryPicker/examples/ReadOnlyInput';
+export * from 'src/components/Form/CountryPicker/examples/Shadow';
+export * from 'src/components/Form/CountryPicker/examples/Shape';
+export * from 'src/components/Form/CountryPicker/examples/SizeInput';
+export * from 'src/components/Form/CountryPicker/examples/StylesInput';
+export * from 'src/components/Form/CountryPicker/examples/Variant';

package/dist/components/Form/DatePicker/DatePicker/DatePicker.props.d.ts

@@ -0,0 +1,103 @@
+import React, { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { DatePickerStyles, Shape, Size, Variant } from './DatePicker.type';
+export interface DatePickerProps {
+    /**
+     * The identifier for the DatePicker component.
+     */
+    id?: string;
+    /**
+     * Custom icon to display when the DatePicker is checked.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Indicates whether the DatePicker has an error.
+     */
+    error?: boolean;
+    /**
+     * Additional helper text that provides information about the field.
+     */
+    helperText?: string;
+    /**
+     * The name of the toggle.
+     */
+    name?: string;
+    /**
+     * The color scheme that changes the background color of the DatePicker.
+     */
+    colorScheme?: string;
+    /**
+     * If true, the DatePicker cannot be selected.
+     */
+    isReadOnly?: boolean;
+    /**
+     * If true, the DatePicker will be unusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * The label text for the  field.
+     */
+    label?: string;
+    /**
+     * Callback function triggered when the DatePicker value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Callback function triggered when the DatePicker value changes for IOS and Android.
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * CSS styles for the DatePicker container and label.
+     */
+    styles?: DatePickerStyles;
+    /**
+     * The shape that changes the outlines of the field.
+     */
+    shape?: Shape;
+    /**
+     * Changes the style of the  field.
+     */
+    variant?: Variant;
+    /**
+     * The size that sets the height and width of the DatePicker.
+     */
+    size?: Size;
+    /**
+     * Adds a shadow effect to the DatePicker.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Other properties that can be passed to the component.
+     */
+    [x: string]: any;
+}
+export interface DatePickerViewProps extends DatePickerProps {
+    /**
+     * The selected date value as a string.
+     */
+    date: string;
+    /**
+     * A function to set the selected date value.
+     * @param {string} newDate - The new date value to set.
+     */
+    setDate: (newDate: string) => void;
+    /**
+     * Flag indicating if the date picker is currently being hovered.
+     */
+    isHovered: boolean;
+    /**
+     * A function to set the hovered state of the date picker.
+     * @param {boolean} hovered - The hovered state to set.
+     */
+    setIsHovered: (hovered: boolean) => void;
+    /**
+     * Flag indicating if the date picker is currently focused.
+     */
+    isFocused: boolean;
+    /**
+     * A function to set the focus state of the date picker.
+     * @param {boolean} focused - The focus state to set.
+     */
+    setIsFocused: (focused: boolean) => void;
+}

package/dist/components/Form/DatePicker/DatePicker/DatePicker.state.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const useDatePickerState: () => {
+    date: string;
+    setDate: React.Dispatch<React.SetStateAction<string>>;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isFocused: boolean;
+    setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/components/Form/DatePicker/DatePicker/DatePicker.style.d.ts

@@ -0,0 +1,3 @@
+import { Size } from './DatePicker.type';
+export declare const IconSizes: Record<Size, string>;
+export declare const LabelSizes: Record<Size, number>;

package/dist/components/Form/DatePicker/DatePicker/DatePicker.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DatePickerViewProps } from './DatePicker.props';
+declare const DatePickerView: React.FC<DatePickerViewProps>;
+export default DatePickerView;

package/dist/components/Form/DatePicker/DatePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DatePickerProps } from './DatePicker/DatePicker.props';
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/components/Form/DatePicker/examples/ColorScheme.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ColorDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/Default.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DefaultDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/DisabledInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DisabledDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/ErrorCheckbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/FormCheckout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FormDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/Formik.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FormikDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/ReadOnlyInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ReadOnlyDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/Shadow.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ShadowDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/SizeInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SizeDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/StylesInput.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledDatePicker: () => JSX.Element;

package/dist/components/Form/DatePicker/examples/helperTextDatePicker.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HelperTextDatePicker: () => JSX.Element;