@app-studio/web 0.1.0

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

@@ -0,0 +1,74 @@
+import React, { CSSProperties } from 'react';
+import { Shape, Size, TextFieldStyles, Variant } from 'src/components/Layout/configs/Input.type';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+export interface ContentProps {
+    /**
+     * The color of the Content component.
+     */
+    color?: string;
+    /**
+     * Changes the color style of the field.
+     */
+    colorScheme?: string;
+    /**
+     * The content to be rendered inside the Content component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Indicates whether the field has an error.
+     */
+    error?: boolean;
+    /**
+     * Indicates whether the field has label
+     */
+    isWithLabel?: boolean;
+    /**
+     * Determines whether the Content component is disabled. Default value is false.
+     */
+    isDisabled?: boolean;
+    /**
+     * Determines wheter the field is focused or not.
+     */
+    isFocused?: boolean;
+    /**
+     * Determines whether the Content component is currently being hovered over.
+     */
+    isHovered?: boolean;
+    /**
+     * Determines whether the Content component is read-only. Default value is false.
+     */
+    isReadOnly?: boolean;
+    /**
+     * The label associated with the Content component.
+     */
+    label?: string;
+    /**
+     * The default value of the field.
+     */
+    value?: string | Array<string> | number;
+    /**
+     * Changes the Input style
+     */
+    variant?: Variant;
+    /**
+     * The shape of the Content component.
+     */
+    shape?: Shape;
+    /**
+     * The size of the Content component. Default value is "md".
+     */
+    size?: Size;
+    /**
+     * CSS styles applied to the Content component. Default value is an empty object.
+     */
+    styles?: TextFieldStyles;
+    /**
+     * The shadow effect applied to the Content component.
+     */
+    shadow?: Shadow | Elevation | CSSProperties;
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface FieldIconsProps {
+    /**
+     * The content to be rendered inside the Wrapper Field.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Size } from 'src/components/Layout/configs/Input.type';
+export interface LabelProps {
+    /**
+     * The content to be rendered inside the Label.
+     */
+    children?: React.ReactNode;
+    /**
+     * Indicates whether the field has an error.
+     */
+    error?: boolean;
+    /**
+     * The size of the Label
+     */
+    size?: Size;
+    /**
+     * The color of the Label
+     */
+    color?: string;
+    /**
+     * CSS styles applied to the Label
+     */
+    styles?: {
+        label: any;
+    };
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Size, TextFieldStyles } from 'src/components/Layout/configs/Input.type';
+export interface FieldProps {
+    /**
+     * The content to be rendered inside the Field.
+     */
+    children?: React.ReactNode;
+    /**
+     * The size of the field (default: "md").
+     */
+    size?: Size;
+    /**
+     * Determines if the field is disabled (default: false).
+     */
+    isDisabled?: boolean;
+    /**
+     * Determines if the field is read-only (default: false).
+     */
+    isReadOnly?: boolean;
+    /**
+     * CSS styles applied to the field (default: {}).
+     */
+    styles?: TextFieldStyles;
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface WrapperFieldProps {
+    /**
+     * The content to be rendered inside the Wrapper Field.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextFieldStyles } from 'src/components/Layout/configs/Input.type';
+export interface HelperTextProps {
+    /**
+     * The content to be rendered inside the HelperText.
+     */
+    children: React.ReactNode;
+    /**
+     * If true, changes the input style to indicate error.
+     */
+    error?: boolean;
+    /**
+     * CSS styles applied to the HelperText.
+     */
+    styles?: TextFieldStyles;
+    /**
+     * Additional properties and attributes for the field.
+     */
+    [x: string]: any;
+}

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

@@ -0,0 +1,7 @@
+export * from 'src/components/Layout/Input/FieldContainer/FieldContainer';
+export * from 'src/components/Layout/Input/FieldContent/FieldContent';
+export * from 'src/components/Layout/Input/FieldIcons/FieldIcons';
+export * from 'src/components/Layout/Input/FieldLabel/FieldLabel';
+export * from 'src/components/Layout/Input/FieldLayout/FieldLayout';
+export * from 'src/components/Layout/Input/FieldWrapper/FieldWrapper';
+export * from 'src/components/Layout/Input/HelperText/HelperText';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Justify, Wrap } from '../../configs/Input.type';
+export interface VerticalProps {
+    /**
+     * The layout content
+     */
+    children: React.ReactNode;
+    /**
+     * It aligns the elements of the container according to the available space.
+     */
+    justify?: Justify;
+    /**
+     * To specify, if the items should be wrap or not, based on available space on the line.
+     */
+    wrap?: Wrap;
+    /**
+     * If true, the items' position on the vertical axis is reversed.
+     */
+    isReversed?: boolean;
+    /**
+     * other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Layout/Vertical/Vertical/Vertical.type.d.ts

@@ -0,0 +1,2 @@
+export declare type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from '../Vertical';
+export * from './Default';
+export * from './Justify';
+export * from './Reversed';
+export * from './Wrap';

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

@@ -0,0 +1,2 @@
+export type { ViewProps } from 'app-studio';
+export { View } from 'app-studio';

package/dist/components/Layout/configs/Input.style.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { Shape, Size, Variant } from './Input.type';
+export declare const Shapes: Record<Shape, CSSProperties>;
+export declare const LabelSizes: Record<Size, number>;
+export declare const InputVariants: Record<Variant, CSSProperties>;
+export declare const PadddingWithLabel: {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+};
+export declare const PaddingWithoutLabel: {
+    paddingVertical: number;
+    paddingLeft: number;
+    paddingRight: number;
+};

package/dist/components/Layout/configs/Input.type.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export declare type Variant = 'outline' | 'default' | 'unStyled';
+export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type TextFieldStyles = {
+    box?: CSSProperties;
+    text?: CSSProperties;
+    label?: CSSProperties;
+    helperText?: CSSProperties;
+};
+export declare type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/dist/components/Link/Link/Link.props.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Size, Styles, TextDecorationStyle } from './Link.type';
+export interface LinkProps {
+    /**
+     * The content of the link.
+     */
+    children: React.ReactNode;
+    /**
+     * The style of text decoration for the link.
+     * Can be one of "default", "hover", or "underline".
+     */
+    underline?: TextDecorationStyle;
+    /**
+     * Indicates whether the link opens in a new tab.
+     */
+    isExternal?: boolean;
+    /**
+     * The size of the icon associated with the link.
+     */
+    iconSize?: Size;
+    /**
+     * Sets the color of the icon and text.
+     */
+    colorScheme?: string;
+    /**
+     * The URL or destination of the link.
+     */
+    href: string;
+    /**
+     * CSS styles for the  external icon.
+     */
+    styles?: Styles;
+    /**
+     * Additional props for customization.
+     */
+    [x: string]: any;
+}
+export interface LinkViewProps extends LinkProps {
+    /**
+     *  Indicates whether the link is currently being hovered
+     */
+    isHovered: boolean;
+    /**
+     *  Function to set the hovered state of the link
+     */
+    setIsHovered: Function;
+}

package/dist/components/Link/Link/Link.state.d.ts

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

package/dist/components/Link/Link/Link.style.d.ts

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

package/dist/components/Link/Link/Link.view.d.ts

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LinkProps } from './Link/Link.props';
+/**
+ * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
+ */
+export declare const Link: React.FC<LinkProps>;

package/dist/components/Link/examples/Default.d.ts

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

package/dist/components/Link/examples/IsExternal.d.ts

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

package/dist/components/Link/examples/Underline.d.ts

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

package/dist/components/Loader/Loader/Loader.props.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { LoaderType, Size, Speed, TextPosition } from './Loader.type';
+/**
+ * Props for the Loader component.
+ */
+export interface LoaderProps {
+    /**
+     * The text content.
+     */
+    children?: React.ReactNode;
+    /**
+     * The color of the loader.
+     */
+    loaderColor?: string;
+    /**
+     * The type of loader.
+     */
+    type?: LoaderType;
+    /**
+     * The color of the text.
+     */
+    textColor?: string;
+    /**
+     * The position where to place the children.
+     */
+    textPosition?: TextPosition;
+    /**
+     * The width and height of the loader.
+     */
+    size?: number | Size;
+    /**
+     * The rotation speed of the loader.
+     */
+    speed?: Speed;
+    /**
+     * Additional properties.
+     */
+    [x: string]: any;
+}
+export interface DefaultSpinnerProps {
+    /**
+     * To set the spinner height and width
+     */
+    size?: number | Size;
+    /**
+     * To set the rate at which the spinner moves
+     */
+    speed?: Speed;
+    /**
+     * To change the spinner color
+     */
+    color?: string;
+    /**
+     * Other props
+     *  */
+    [x: string]: any;
+}
+export interface DottedProps {
+    /**
+     * To set the spinner height and width
+     */
+    size?: number | Size;
+    /**
+     * To set the rate at which the spinner moves
+     */
+    speed?: Speed;
+    /**
+     * To change the spinner color
+     */
+    color?: string;
+    /**
+     * Other properties
+     */
+    [x: string]: any;
+}
+export interface QuarterProps {
+    /**
+     * To set the spinner height and width
+     */
+    size?: number | Size;
+    /**
+     * To set the rate at which the spinner moves
+     */
+    speed?: Speed;
+    /**
+     * To change the spinner color
+     */
+    color?: string;
+    /**
+     *Other properties
+     */
+    [x: string]: any;
+}

package/dist/components/Loader/Loader/Loader.style.d.ts

@@ -0,0 +1,4 @@
+import { Size, Speed } from './Loader.type';
+export declare const DefaultEllipsisSpeeds: Record<Speed, number>;
+export declare const DefaultSizes: Record<Size, number>;
+export declare const DefaultSpeeds: Record<Speed, number>;

package/dist/components/Loader/Loader/Loader.view.d.ts

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

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LoaderProps } from './Loader/Loader.props';
+/**
+ * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
+ */
+export declare const Loading: React.FC<LoaderProps>;

package/dist/components/Loader/examples/ColorLoader.d.ts

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

package/dist/components/Loader/examples/DefaultLoader.d.ts

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

package/dist/components/Loader/examples/PositionLoader.d.ts

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

package/dist/components/Loader/examples/SizeLoader.d.ts

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

package/dist/components/Loader/examples/SpeedLoader.d.ts

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

package/dist/components/Loader/examples/TextLoader.d.ts

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

package/dist/components/Loader/examples/VariantLoader.d.ts

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

package/dist/components/Loader/examples/index.d.ts

@@ -0,0 +1,7 @@
+export { StyleLoader } from 'src/components/Loader/examples/ColorLoader';
+export { DefaultLoader } from 'src/components/Loader/examples/DefaultLoader';
+export { PositionLoader } from 'src/components/Loader/examples/PositionLoader';
+export { SizeLoader } from 'src/components/Loader/examples/SizeLoader';
+export { SpeedLoader } from 'src/components/Loader/examples/SpeedLoader';
+export { TextLoader } from 'src/components/Loader/examples/TextLoader';
+export { TypeLoader } from 'src/components/Loader/examples/VariantLoader';

package/dist/components/Modal/Examples/BlurModal.d.ts

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

package/dist/components/Modal/Examples/CloseButtonModal.d.ts

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

package/dist/components/Modal/Examples/DefaultModal.d.ts

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

package/dist/components/Modal/Examples/FullScreenModal.d.ts

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

package/dist/components/Modal/Examples/ModalPosition.d.ts

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

package/dist/components/Modal/Examples/PreventCloseModal.d.ts

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

package/dist/components/Modal/Examples/ScrollModal.d.ts

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

package/dist/components/Modal/Examples/ShadowModal.d.ts

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

package/dist/components/Modal/Examples/VariantModal.d.ts

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

package/dist/components/Modal/Examples/index.d.ts

@@ -0,0 +1,9 @@
+export * from 'src/components/Modal/Examples/BlurModal';
+export * from 'src/components/Modal/Examples/CloseButtonModal';
+export * from 'src/components/Modal/Examples/DefaultModal';
+export * from 'src/components/Modal/Examples/FullScreenModal';
+export * from 'src/components/Modal/Examples/ModalPosition';
+export * from 'src/components/Modal/Examples/PreventCloseModal';
+export * from 'src/components/Modal/Examples/ScrollModal';
+export * from 'src/components/Modal/Examples/ShadowModal';
+export * from 'src/components/Modal/Examples/VariantModal';