@app-studio/web 0.1.0

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

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

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { Headings, Sizes, TextWeights } from './Label.type';
+export interface LabelProps {
+    /**
+     * The text content
+     */
+    children: React.ReactNode;
+    /**
+     * Specify a heading html tag.
+     */
+    heading?: Headings;
+    /**
+     * If true, the text is styled in italic
+     */
+    isItalic?: boolean;
+    /**
+     * Marks up a text to indicate that it is no longer valid
+     */
+    isStriked?: boolean;
+    /**
+     * If true, it underline the text
+     */
+    isUnderlined?: boolean;
+    /**
+     * Changes the text-size
+     */
+    size?: Sizes | number;
+    /**
+     * Changes the font weight of the text
+     */
+    weight?: TextWeights;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}

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

@@ -0,0 +1,2 @@
+import { Headings } from './Label.type';
+export declare const HeadingSizes: Record<Headings, Record<string, number | string>>;

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

@@ -0,0 +1,3 @@
+export declare type TextWeights = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'black';
+export declare type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export declare type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

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

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

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

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

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TextFieldProps } from 'src/components/Form/TextField/TextField/TextField.props';
+export interface PasswordProps extends TextFieldProps {
+    /**
+     * The name of the input field
+     */
+    name?: string;
+    /**
+     * If true, the Input will be unusable
+     */
+    isDisabled?: boolean;
+    /**
+     * Icon to Indicate that the password is visible
+     */
+    visibleIcon?: React.ReactNode;
+    /**
+     * Icon to Indicate that the password is hidden
+     */
+    hiddenIcon?: React.ReactNode;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}
+export interface PasswordViewProps extends PasswordProps {
+    /**
+     * Optional prop to determine if the password is visible
+     */
+    isVisible?: boolean;
+    /**
+     * Optional callback prop to update the visibility state
+     */
+    setIsVisible?: Function;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const usePasswordState: () => {
+    isVisible: boolean;
+    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PasswordProps } from './Password/Password.props';
+/**
+ * To allow users to securely enter sensitive information
+ */
+export declare const Password: React.FC<PasswordProps>;

package/dist/components/Form/Password/example/Default.d.ts

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

package/dist/components/Form/Password/example/DisabledInput.d.ts

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

package/dist/components/Form/Password/example/ErrorInput.d.ts

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

package/dist/components/Form/Password/example/FormikErrorInput.d.ts

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

package/dist/components/Form/Password/example/FormikHelperText.d.ts

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

package/dist/components/Form/Password/example/HelperText.d.ts

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

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

@@ -0,0 +1,234 @@
+import { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { SelectStyles, Shape, Size, Variant } from './Select.type';
+export interface SelectProps {
+    /**
+     * The identifier of the select field.
+     */
+    id?: string;
+    /**
+     * Indicates whether the field has an error.
+     */
+    error?: boolean;
+    /**
+     * The name of the select field.
+     */
+    name?: string;
+    /**
+     * The label text for the select field.
+     */
+    label?: string;
+    /**
+     * Changes the border color when hovering over the field.
+     */
+    colorScheme?: string;
+    /**
+     * Provides additional information or instructions about the field.
+     */
+    helperText?: string;
+    /**
+     * A brief text or hint that appears in the field before the user enters any value.
+     */
+    placeholder?: string;
+    /**
+     * An array of options for the select field.
+     */
+    options: Array<string>;
+    /**
+     * If true, allows multiple options to be selected.
+     */
+    isMulti?: boolean;
+    /**
+     * If true, the select field cannot be edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * If true, the select field is disabled and cannot be used.
+     */
+    isDisabled?: boolean;
+    /**
+     * Handler function to be called when the select value changes.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Changes the shape or outline of the input field.
+     */
+    shape?: Shape;
+    /**
+     * Changes the style variant of the input field.
+     */
+    variant?: Variant;
+    /**
+     * CSS styles for the select box and dropdown.
+     */
+    styles?: SelectStyles;
+    /**
+     * Specifies the height and width of the select.
+     */
+    size?: Size;
+    /**
+     * Applies a shadow effect to the select field.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Additional properties and attributes for the select field.
+     */
+    [x: string]: any;
+}
+export interface SelectViewProps extends SelectProps {
+    /**
+     * Optional prop indicating if an option is selected
+     */
+    selected: string | Array<string>;
+    /**
+     * Optional callback prop to update the selected option
+     */
+    setSelected: Function;
+    /**
+     * Prop to determine if the select dropdown is hidden
+     */
+    hide: boolean;
+    /**
+     * Callback prop to update the visibility of the select dropdown
+     */
+    setHide: Function;
+    /**
+     * Prop indicating if the select is being hovered
+     */
+    isHovered: boolean;
+    /**
+     * Callback prop to update the hover state of the select
+     */
+    setIsHovered: Function;
+    /**
+     * Prop indicating if the select is currently focused
+     */
+    isFocused: boolean;
+    /**
+     * Callback prop to update the focus state of the select
+     */
+    setIsFocused: Function;
+}
+export interface SelectBoxProps {
+    /**
+     * The option that will be selected
+     */
+    selected?: string | Array<string>;
+    /**
+     * If true, the select will be unusable
+     */
+    isDisabled?: boolean;
+    /**
+     * A brief text or hint that appears in the field before the user enters any value
+     */
+    placeholder?: string;
+    /**
+     * Function to be called when clicked on close button
+     */
+    removeOption?: Function;
+    /**
+     * Css styles for the select box and dropdown
+     */
+    styles?: SelectStyles;
+    /**
+     * To set the select's height and width.
+     */
+    size?: Size;
+}
+export interface MultiSelectProps {
+    /**
+     * Option to be displayed
+     */
+    option: string;
+    /**
+     * Function to be called when clicked on close button
+     */
+    removeOption: Function;
+    /**
+     * To set the item's fontSize
+     */
+    size?: Size;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}
+export interface ItemProps {
+    /**
+     * Function that will be called when the option is clicked
+     */
+    callback?: Function;
+    /**
+     * Option to be displayed
+     */
+    option: string;
+    /**
+     * To set the item's fontSize
+     */
+    size?: Size;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}
+export interface HiddenSelectProps {
+    /**
+     * Identifier
+     */
+    id?: string;
+    /**
+     * The name of the field
+     */
+    name?: string;
+    /**
+     * The option that has been selected
+     */
+    selected: string | Array<string>;
+    /**
+     * If true, multiple options can be selected
+     */
+    isMulti?: boolean;
+    /**
+     * If true, select cannot be selected
+     */
+    isReadOnly?: boolean;
+    /**
+     * If true, the dropdown will be unusable
+     */
+    isDisabled?: boolean;
+    /**
+     * Handler when the field value changes
+     */
+    onChange?: (value: any) => void;
+    /**
+     * List of options
+     */
+    options: Array<string>;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}
+export interface DropDownProps {
+    /**
+     * To set the height and width of the item list.
+     */
+    size?: Size;
+    /**
+     * Function that will be called when the option is selected
+     */
+    callback?: Function;
+    /**
+     * List of options
+     */
+    options: Array<string>;
+    /**
+     * Css styles for the select container and label
+     */
+    styles?: SelectStyles;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SelectProps } from './Select.props';
+export declare const useSelectState: ({ placeholder, isMulti, options }: SelectProps) => {
+    selected: string | string[];
+    setSelected: React.Dispatch<React.SetStateAction<string | string[]>>;
+    hide: boolean;
+    setHide: React.Dispatch<React.SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isFocused: boolean;
+    setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const useItemState: () => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+};

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MultiSelectProps, SelectViewProps } from './Select.props';
+export declare const MultiSelect: React.FC<MultiSelectProps>;
+declare const SelectView: React.FC<SelectViewProps>;
+export default SelectView;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SelectProps } from './Select/Select.props';
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+export declare const Select: React.FC<SelectProps>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/Form/Select/examples/Multiple.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+import { Size, SwitchStyles } from './Switch.type';
+export interface SwitchProps {
+    /**
+     * The content to be rendered when the switch is active.
+     */
+    activeChild?: React.ReactNode;
+    /**
+     * Specifies the color scheme for the switch's background.
+     */
+    colorScheme?: string;
+    /**
+     * Specifies the unique identifier of the switch.
+     */
+    id?: string;
+    /**
+     * Indicates the initial value of the switch.
+     */
+    isChecked?: boolean;
+    /**
+     * If set to true, the switch is disabled and cannot be interacted with.
+     */
+    isDisabled?: boolean;
+    /**
+     * If set to true, the switch cannot be turned on or off and is in read-only mode.
+     */
+    isReadOnly?: boolean;
+    /**
+     * A callback function that is invoked when the switch's value changes.
+     */
+    onChange?: Function;
+    /**
+     * A callback function that is invoked when the switch's value changes on iOS and Android devices.
+     */
+    onValueChange?: (event: any) => void;
+    /**
+     * The name of the switch.
+     */
+    name?: string;
+    /**
+     * The content to be rendered when the switch is inactive.
+     */
+    inActiveChild?: React.ReactNode;
+    /**
+     * Custom CSS styles for the switch container and its components.
+     */
+    styles?: SwitchStyles;
+    /**
+     * Adds a shadow effect to the switch.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Specifies the size of the switch, affecting its height and width.
+     */
+    size?: Size;
+    /**
+     * Additional properties and attributes.
+     */
+    [x: string]: any;
+}
+export interface SwitchViewProps extends SwitchProps {
+    /** Prop indicating if the switch is being hovered */
+    isHovered: boolean;
+    /** Callback prop to update the hover state of the switch */
+    setIsHovered: Function;
+    /** Prop indicating the current state of the switch */
+    on?: boolean;
+    /** Callback prop to update the state of the switch */
+    setOn?: Function;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SwitchProps } from './Switch.props';
+export declare const useSwitchState: ({ isDisabled, isChecked }: SwitchProps) => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    on: boolean | undefined;
+    setOn: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+};

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

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import { Size } from './Switch.type';
+export declare const KnobSizes: Record<Size, CSSProperties>;
+export declare const SliderSizes: Record<Size, CSSProperties>;
+export declare const SliderPadding: Record<Size, Record<string, number>>;

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

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

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

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

package/dist/components/Form/Switch/examples/ChildSwitch.d.ts

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

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

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

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

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

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

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

package/dist/components/Form/Switch/examples/FormSwitch.d.ts

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

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

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

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

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

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

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

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

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

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

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