@app-studio/web 0.1.0

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

@@ -0,0 +1,144 @@
+import { CSSProperties } from 'react';
+import { Shadow } from 'app-studio';
+import { Elevation } from 'src/utils/elevation';
+import { Shape, Size, TextAreaStyles, Variant } from './TextArea.type';
+export interface TextAreaProps {
+    /**
+     * Changes the label and border color of the input field.
+     */
+    colorScheme?: string;
+    /**
+     * Sets the initial value of the textarea.
+     */
+    defaultValue?: string;
+    /**
+     * Specifies whether the input field should display an error state.
+     */
+    error?: boolean;
+    /**
+     * Specifies whether the text input is editable or not for iOS and Android.
+     */
+    isEditable?: boolean;
+    /**
+     * Provides additional information about the input field.
+     */
+    helperText?: string;
+    /**
+     * The input field identifier.
+     */
+    id?: string;
+    /**
+     * Specifies whether the input field is read-only and cannot be edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Specifies whether the input field is disabled and cannot be interacted with.
+     */
+    isDisabled?: boolean;
+    /**
+     * Specifies whether the input field should be automatically focused.
+     */
+    isAutoFocus?: boolean;
+    /**
+     * Specifies whether the input field should allow multiple lines of text.
+     */
+    isMultiline?: boolean;
+    /**
+     * Displays a label above the user input.
+     */
+    label?: string;
+    /**
+     * Specifies the maximum number of rows that the textarea should display.
+     */
+    maxRows?: number;
+    /**
+     * Specifies the maximum number of columns that the textarea should display.
+     */
+    maxCols?: number;
+    /**
+     * The name of the input field.
+     */
+    name: string;
+    /**
+     * Placeholder text to display in the input field until the user enters text.
+     */
+    placeholder?: string;
+    /**
+     * Handler function called when the input field value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Handler function called when the input field value changes for iOS and Android.
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * Callback function triggered when the field loses focus.
+     */
+    onBlur?: (value: any) => void;
+    /**
+     * Callback function called when the text input receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Sets the text size and padding of the input field.
+     */
+    size?: Size;
+    /**
+     * Applies a shadow effect to the input field.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Changes the shape or outline of the input field.
+     */
+    shape?: Shape;
+    /**
+     * CSS styles for the input container and field.
+     */
+    styles?: TextAreaStyles;
+    /**
+     * The default value of the input field.
+     */
+    value?: string | number;
+    /**
+     * Changes the style variant of the input field.
+     */
+    variant?: Variant;
+    /**
+     * Additional properties for customization and extension.
+     */
+    [x: string]: any;
+}
+export interface TextAreaViewProps extends TextAreaProps {
+    /**
+     * The hint text displayed in the textarea.
+     */
+    hint?: string;
+    /**
+     * Callback prop to update the hint text.
+     */
+    setHint?: Function;
+    /**
+     * Prop indicating if the textarea is being hovered.
+     */
+    isHovered?: boolean;
+    /**
+     * Callback prop to update the hover state of the textarea.
+     */
+    setIsHovered?: Function;
+    /**
+     * The current value of the textarea input.
+     */
+    inputValue?: string | number;
+    /**
+     * Callback prop to update the value of the textarea input.
+     */
+    setInputValue?: Function;
+    /**
+     * Prop indicating if the textarea is currently focused.
+     */
+    isFocused?: boolean;
+    /**
+     * Callback prop to update the focus state of the textarea.
+     */
+    setIsFocused?: Function;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TextAreaProps } from './TextArea.props';
+export declare const useTextAreaState: ({ label, placeholder, defaultValue, value }: TextAreaProps) => {
+    hint: string | undefined;
+    setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputValue: import("react").Key;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<import("react").Key>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/components/Form/TextArea/TextArea/TextArea.type.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export declare type Variant = 'outline' | 'default' | 'unStyled';
+export declare type Shape = 'default' | 'sharp' | 'rounded';
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type TextAreaStyles = {
+    box?: CSSProperties;
+    text?: CSSProperties;
+    label?: CSSProperties;
+    helperText?: CSSProperties;
+    field?: CSSProperties;
+};

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextAreaProps } from './TextArea/TextArea.props';
+/**
+ * Text Area is an component used to create a multi-line input field.
+ */
+export declare const TextArea: React.FC<TextAreaProps>;

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

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

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

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

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

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

package/dist/components/Form/TextArea/examples/ErrorInput.d.ts

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

package/dist/components/Form/TextArea/examples/FormikErrorInput.d.ts

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

package/dist/components/Form/TextArea/examples/FormikHelperText.d.ts

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

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

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

package/dist/components/Form/TextArea/examples/LabelInput.d.ts

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

package/dist/components/Form/TextArea/examples/MaxRowCol.d.ts

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

package/dist/components/Form/TextArea/examples/Placeholder.d.ts

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

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

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

package/dist/components/Form/TextArea/examples/ShadowArea.d.ts

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

package/dist/components/Form/TextArea/examples/ShapeInput.d.ts

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

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

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

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

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

package/dist/components/Form/TextArea/examples/VariantsInputs.d.ts

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

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

@@ -0,0 +1,15 @@
+export { ColorArea } from 'src/components/Form/TextArea/examples/ColorScheme';
+export { DefaultArea } from 'src/components/Form/TextArea/examples/Default';
+export { DisabledArea } from 'src/components/Form/TextArea/examples/DisabledInput';
+export { ErrorArea } from 'src/components/Form/TextArea/examples/ErrorInput';
+export { FormikErrorArea } from 'src/components/Form/TextArea/examples/FormikErrorInput';
+export { FormikHelperTextArea } from 'src/components/Form/TextArea/examples/FormikHelperText';
+export { HelperTextArea } from 'src/components/Form/TextArea/examples/HelperText';
+export { LabelArea } from 'src/components/Form/TextArea/examples/LabelInput';
+export { MaxArea } from 'src/components/Form/TextArea/examples/MaxRowCol';
+export { PlaceholderArea } from 'src/components/Form/TextArea/examples/Placeholder';
+export { ReadOnlyArea } from 'src/components/Form/TextArea/examples/ReadOnlyInput';
+export { ShapesArea } from 'src/components/Form/TextArea/examples/ShapeInput';
+export { SizeArea } from 'src/components/Form/TextArea/examples/SizeInput';
+export { StyledArea } from 'src/components/Form/TextArea/examples/StylesInput';
+export { VariantsArea } from 'src/components/Form/TextArea/examples/VariantsInputs';

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

@@ -0,0 +1,124 @@
+import React, { CSSProperties } from 'react';
+import { Shadow } from 'app-studio';
+import { Elevation } from 'src/utils/elevation';
+import { Shape, Size, TextFieldStyles, Variant } from './TextField.type';
+export interface TextFieldProps {
+    /**
+     * The input field identifier.
+     */
+    id?: string;
+    /**
+     * Specifies whether the input field should display an error state.
+     */
+    error?: boolean;
+    /**
+     * Provides additional information about the input field.
+     */
+    helperText?: string;
+    /**
+     * The name of the input field.
+     */
+    name?: string;
+    /**
+     * Displays a label above the user input.
+     */
+    label?: string;
+    /**
+     * Changes the label and border color of the input field.
+     */
+    colorScheme?: string;
+    /**
+     * The left child to include in the field.
+     */
+    leftChild?: React.ReactNode;
+    /**
+     * The right child to include in the field.
+     */
+    rightChild?: React.ReactNode;
+    /**
+     * Placeholder text to display in the input field until the user enters text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the input field is read-only and cannot be edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Specifies whether the input field is disabled and cannot be interacted with.
+     */
+    isDisabled?: boolean;
+    /**
+     * Specifies whether a clear button should be added to the input field that clears its value when clicked.
+     */
+    isClearable?: boolean;
+    /**
+     * Specifies whether the input field should be automatically focused.
+     */
+    isAutoFocus?: boolean;
+    /**
+     * Handler function called when the input field value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Handler function called when the input field value changes for iOS and Android.
+     */
+    onChangeText?: (value: string) => void;
+    /**
+     * Callback function triggered when the field loses focus.
+     */
+    onBlur?: (value: any) => void;
+    /**
+     * Event called when the input field is clicked/pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Callback function called when the text input receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Sets the text size and padding of the input field.
+     */
+    size?: Size;
+    /**
+     * Applies a shadow effect to the input field.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Changes the shape or outline of the input field.
+     */
+    shape?: Shape;
+    /**
+     * CSS styles for the input container and field.
+     */
+    styles?: TextFieldStyles;
+    /**
+     * The default value of the input field.
+     */
+    value?: string;
+    /**
+     * Changes the style variant of the input field.
+     */
+    variant?: Variant;
+    /**
+     * Additional properties for customization and extension.
+     */
+    [x: string]: any;
+}
+export interface TextFieldViewProps extends TextFieldProps {
+    /** The hint text for the text field */
+    hint?: string;
+    /** Function to set the hint text for the text field */
+    setHint?: Function;
+    /** Indicates whether the text field is currently focused or not */
+    isFocused?: boolean;
+    /** Function to set the focused state of the text field */
+    setIsFocused?: Function;
+    /** Indicates whether the mouse pointer is currently hovering over the text field or not */
+    isHovered?: boolean;
+    /** Function to set the hovered state of the text field */
+    setIsHovered?: Function;
+    /** The current value of the text field */
+    inputValue?: string;
+    /** Function to set the value of the text field */
+    setInputValue?: Function;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TextFieldProps } from './TextField.props';
+export declare const useTextFieldState: ({ label, placeholder, value }: TextFieldProps) => {
+    hint: string | undefined;
+    setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputValue: string;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextFieldProps } from './TextField/TextField.props';
+/**
+ * TextField is used to capture text data from users.
+ */
+export declare const TextField: React.FC<TextFieldProps>;

package/dist/components/Form/TextField/examples/ClearInput.d.ts

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

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

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

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

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

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

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

package/dist/components/Form/TextField/examples/ErrorInput.d.ts

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

package/dist/components/Form/TextField/examples/FormikErrorInput.d.ts

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

package/dist/components/Form/TextField/examples/FormikHelperText.d.ts

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

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

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

package/dist/components/Form/TextField/examples/LabelInput.d.ts

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

package/dist/components/Form/TextField/examples/LeftChild.d.ts

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

package/dist/components/Form/TextField/examples/Placeholder.d.ts

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

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

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

package/dist/components/Form/TextField/examples/RightChild.d.ts

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

package/dist/components/Form/TextField/examples/ShapeInput.d.ts

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

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

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

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

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

package/dist/components/Form/TextField/examples/VariantsInputs.d.ts

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

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

@@ -0,0 +1,17 @@
+export * from 'src/components/Form/TextField/examples/ClearInput';
+export * from 'src/components/Form/TextField/examples/ColorScheme';
+export * from 'src/components/Form/TextField/examples/Default';
+export * from 'src/components/Form/TextField/examples/DisabledInput';
+export * from 'src/components/Form/TextField/examples/ErrorInput';
+export * from 'src/components/Form/TextField/examples/FormikErrorInput';
+export * from 'src/components/Form/TextField/examples/FormikHelperText';
+export * from 'src/components/Form/TextField/examples/HelperText';
+export * from 'src/components/Form/TextField/examples/LabelInput';
+export * from 'src/components/Form/TextField/examples/LeftChild';
+export * from 'src/components/Form/TextField/examples/Placeholder';
+export * from 'src/components/Form/TextField/examples/ReadOnlyInput';
+export * from 'src/components/Form/TextField/examples/RightChild';
+export * from 'src/components/Form/TextField/examples/ShapeInput';
+export * from 'src/components/Form/TextField/examples/SizeInput';
+export * from 'src/components/Form/TextField/examples/StylesInput';
+export * from 'src/components/Form/TextField/examples/VariantsInputs';

package/dist/components/Layout/Center/Center/Center.props.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Wrap } from '../../configs/Input.type';
+export interface CenterProps {
+    /**
+     * To specifies if the items should be wrap or not, based on available space on the line.
+     */
+    wrap?: Wrap;
+    /**
+     * Layout content
+     */
+    children: React.ReactNode;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Layout/Center/Center/Center.view.d.ts

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

package/dist/components/Layout/Center/Center.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CenterProps } from './Center/Center.props';
+export declare const Center: React.FC<CenterProps>;

package/dist/components/Layout/Horizontal/Horizontal/Horizontal.props.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Justify, Wrap } from '../../configs/Input.type';
+export interface HorizontalProps {
+    /**
+     * The layout content
+     */
+    children: React.ReactNode;
+    /**
+     * Aligns items horizontally, when they don't fill up the entire main-axis
+     */
+    justify?: Justify;
+    /**
+     * To specifies if the items should be wrap or not, based on available space on the line.
+     */
+    wrap?: Wrap;
+    /**
+     * If true, it reverses the items order on the horizontal axis.
+     */
+    isReversed?: boolean;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Layout/Horizontal/Horizontal/Horizontal.view.d.ts

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

package/dist/components/Layout/Horizontal/Horizontal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HorizontalProps } from './Horizontal/Horizontal.props';
+export declare const Horizontal: React.FC<HorizontalProps>;

package/dist/components/Layout/Horizontal/examples/Default.d.ts

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

package/dist/components/Layout/Horizontal/examples/Justify.d.ts

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

package/dist/components/Layout/Horizontal/examples/Reversed.d.ts

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

package/dist/components/Layout/Horizontal/examples/Wrap.d.ts

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

package/dist/components/Layout/Horizontal/examples/index.d.ts

@@ -0,0 +1,4 @@
+export * from 'src/components/Layout/Horizontal/examples/Default';
+export * from 'src/components/Layout/Horizontal/examples/Justify';
+export * from 'src/components/Layout/Horizontal/examples/Reversed';
+export * from 'src/components/Layout/Horizontal/examples/Wrap';

package/dist/components/Layout/Input/FieldContainer/FieldContainer/FieldContainer.props.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TextFieldStyles } from 'src/components/Layout/configs/Input.type';
+export interface ContainerProps {
+    /**
+     * The content to be rendered inside the container.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the input field should display an error state.
+     */
+    error?: boolean;
+    /**
+     * Provides additional information or instructions about the field.
+     */
+    helperText?: string;
+    /**
+     * CSS styles for the select box and dropdown.
+     */
+    styles?: TextFieldStyles;
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

package/dist/components/Layout/Input/FieldContainer/FieldContainer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ContainerProps } from './FieldContainer/FieldContainer.props';
+export declare const FieldContainer: React.FC<ContainerProps>;