@aic-kits/react 0.0.18 → 0.1.0

package/dist/components/Box/config.d.ts

@@ -0,0 +1,478 @@
+import { CSSProperties } from 'react';
+declare const colors: {
+    readonly bgColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly backgroundColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly borderColor: {
+        readonly property: "borderColor";
+        readonly scale: "colors";
+    };
+    readonly borderTopColor: {
+        readonly property: "borderTopColor";
+        readonly scale: "colors";
+    };
+    readonly borderBottomColor: {
+        readonly property: "borderBottomColor";
+        readonly scale: "colors";
+    };
+    readonly borderLeftColor: {
+        readonly property: "borderLeftColor";
+        readonly scale: "colors";
+    };
+    readonly borderRightColor: {
+        readonly property: "borderRightColor";
+        readonly scale: "colors";
+    };
+};
+declare const spaces: {
+    readonly m: {
+        readonly property: "margin";
+        readonly scale: "space";
+    };
+    readonly mt: {
+        readonly property: "marginTop";
+        readonly scale: "space";
+    };
+    readonly mb: {
+        readonly property: "marginBottom";
+        readonly scale: "space";
+    };
+    readonly ml: {
+        readonly property: "marginLeft";
+        readonly scale: "space";
+    };
+    readonly mr: {
+        readonly property: "marginRight";
+        readonly scale: "space";
+    };
+    readonly mx: {
+        readonly property: "marginInline";
+        readonly scale: "space";
+    };
+    readonly my: {
+        readonly property: "marginBlock";
+        readonly scale: "space";
+    };
+    readonly p: {
+        readonly property: "padding";
+        readonly scale: "space";
+    };
+    readonly pt: {
+        readonly property: "paddingTop";
+        readonly scale: "space";
+    };
+    readonly pb: {
+        readonly property: "paddingBottom";
+        readonly scale: "space";
+    };
+    readonly pl: {
+        readonly property: "paddingLeft";
+        readonly scale: "space";
+    };
+    readonly pr: {
+        readonly property: "paddingRight";
+        readonly scale: "space";
+    };
+    readonly px: {
+        readonly property: "paddingInline";
+        readonly scale: "space";
+    };
+    readonly py: {
+        readonly property: "paddingBlock";
+        readonly scale: "space";
+    };
+    readonly margin: {
+        readonly property: "margin";
+        readonly scale: "space";
+    };
+    readonly marginBottom: {
+        readonly property: "marginBottom";
+        readonly scale: "space";
+    };
+    readonly marginLeft: {
+        readonly property: "marginLeft";
+        readonly scale: "space";
+    };
+    readonly marginRight: {
+        readonly property: "marginRight";
+        readonly scale: "space";
+    };
+    readonly marginTop: {
+        readonly property: "marginTop";
+        readonly scale: "space";
+    };
+    readonly marginX: {
+        readonly property: "marginInline";
+        readonly scale: "space";
+    };
+    readonly marginY: {
+        readonly property: "marginBlock";
+        readonly scale: "space";
+    };
+    readonly padding: {
+        readonly property: "padding";
+        readonly scale: "space";
+    };
+    readonly paddingBottom: {
+        readonly property: "paddingBottom";
+        readonly scale: "space";
+    };
+    readonly paddingLeft: {
+        readonly property: "paddingLeft";
+        readonly scale: "space";
+    };
+    readonly paddingRight: {
+        readonly property: "paddingRight";
+        readonly scale: "space";
+    };
+    readonly paddingTop: {
+        readonly property: "paddingTop";
+        readonly scale: "space";
+    };
+    readonly paddingX: {
+        readonly property: "paddingInline";
+        readonly scale: "space";
+    };
+    readonly paddingY: {
+        readonly property: "paddingBlock";
+        readonly scale: "space";
+    };
+    readonly gap: {
+        readonly property: "gap";
+        readonly scale: "space";
+    };
+};
+declare const radii: {
+    readonly bbl: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly bbr: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly btl: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly btr: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly r: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly radius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomLeftRadius: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomRightRadius: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopLeftRadius: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopRightRadius: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+};
+declare const borderWidths: {
+    readonly b: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bb: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bt: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bl: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly br: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderWidth: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomWidth: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderTopWidth: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderLeftWidth: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderRightWidth: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+};
+declare const config: {
+    readonly b: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bb: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bt: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bl: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly br: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderWidth: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomWidth: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderTopWidth: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderLeftWidth: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderRightWidth: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly bbl: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly bbr: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly btl: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly btr: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly r: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly radius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomLeftRadius: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomRightRadius: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopLeftRadius: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopRightRadius: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly m: {
+        readonly property: "margin";
+        readonly scale: "space";
+    };
+    readonly mt: {
+        readonly property: "marginTop";
+        readonly scale: "space";
+    };
+    readonly mb: {
+        readonly property: "marginBottom";
+        readonly scale: "space";
+    };
+    readonly ml: {
+        readonly property: "marginLeft";
+        readonly scale: "space";
+    };
+    readonly mr: {
+        readonly property: "marginRight";
+        readonly scale: "space";
+    };
+    readonly mx: {
+        readonly property: "marginInline";
+        readonly scale: "space";
+    };
+    readonly my: {
+        readonly property: "marginBlock";
+        readonly scale: "space";
+    };
+    readonly p: {
+        readonly property: "padding";
+        readonly scale: "space";
+    };
+    readonly pt: {
+        readonly property: "paddingTop";
+        readonly scale: "space";
+    };
+    readonly pb: {
+        readonly property: "paddingBottom";
+        readonly scale: "space";
+    };
+    readonly pl: {
+        readonly property: "paddingLeft";
+        readonly scale: "space";
+    };
+    readonly pr: {
+        readonly property: "paddingRight";
+        readonly scale: "space";
+    };
+    readonly px: {
+        readonly property: "paddingInline";
+        readonly scale: "space";
+    };
+    readonly py: {
+        readonly property: "paddingBlock";
+        readonly scale: "space";
+    };
+    readonly margin: {
+        readonly property: "margin";
+        readonly scale: "space";
+    };
+    readonly marginBottom: {
+        readonly property: "marginBottom";
+        readonly scale: "space";
+    };
+    readonly marginLeft: {
+        readonly property: "marginLeft";
+        readonly scale: "space";
+    };
+    readonly marginRight: {
+        readonly property: "marginRight";
+        readonly scale: "space";
+    };
+    readonly marginTop: {
+        readonly property: "marginTop";
+        readonly scale: "space";
+    };
+    readonly marginX: {
+        readonly property: "marginInline";
+        readonly scale: "space";
+    };
+    readonly marginY: {
+        readonly property: "marginBlock";
+        readonly scale: "space";
+    };
+    readonly padding: {
+        readonly property: "padding";
+        readonly scale: "space";
+    };
+    readonly paddingBottom: {
+        readonly property: "paddingBottom";
+        readonly scale: "space";
+    };
+    readonly paddingLeft: {
+        readonly property: "paddingLeft";
+        readonly scale: "space";
+    };
+    readonly paddingRight: {
+        readonly property: "paddingRight";
+        readonly scale: "space";
+    };
+    readonly paddingTop: {
+        readonly property: "paddingTop";
+        readonly scale: "space";
+    };
+    readonly paddingX: {
+        readonly property: "paddingInline";
+        readonly scale: "space";
+    };
+    readonly paddingY: {
+        readonly property: "paddingBlock";
+        readonly scale: "space";
+    };
+    readonly gap: {
+        readonly property: "gap";
+        readonly scale: "space";
+    };
+    readonly bgColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly backgroundColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly borderColor: {
+        readonly property: "borderColor";
+        readonly scale: "colors";
+    };
+    readonly borderTopColor: {
+        readonly property: "borderTopColor";
+        readonly scale: "colors";
+    };
+    readonly borderBottomColor: {
+        readonly property: "borderBottomColor";
+        readonly scale: "colors";
+    };
+    readonly borderLeftColor: {
+        readonly property: "borderLeftColor";
+        readonly scale: "colors";
+    };
+    readonly borderRightColor: {
+        readonly property: "borderRightColor";
+        readonly scale: "colors";
+    };
+};
+export declare const flexPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "position", "top", "right", "bottom", "left", "overflow", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "opacity"];
+export declare const customBoxPropsKey: readonly ["fullWidth", "fullHeight", "fw", "fh"];
+export type ColorPropsKeyType = keyof typeof colors;
+export type SpacePropsKeyType = keyof typeof spaces;
+export type RadiiPropsKeyType = keyof typeof radii;
+export type BorderWidthsPropsKeyType = keyof typeof borderWidths;
+export type ConfigType = typeof config;
+export type FlexPropsKeyType = (typeof flexPropsKey)[number];
+export type CustomBoxPropsKeyType = (typeof customBoxPropsKey)[number];
+export declare const customBoxPropsConfig: Record<CustomBoxPropsKeyType, CSSProperties>;
+export default config;

package/dist/components/Box/index.d.ts

@@ -0,0 +1,9 @@
+import { ForwardedRef } from 'react';
+import { BoxProps } from './types';
+declare function PlainBox({ children, style, 'data-testid': testId, ...otherProps }: BoxProps, ref: ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Box: (props: BoxProps & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof PlainBox>;
+export * from './config';
+export * from './types';
+export * from './StyledBox';

package/dist/components/Box/types.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+import { BorderWidth, Color, Radius, Space } from '../../theme';
+import { ConfigType, FlexPropsKeyType } from './config';
+export interface ThemeScale {
+    colors: Color;
+    space: Space;
+    radii: Radius;
+    borderWidths: BorderWidth;
+}
+type ConfigKeyType = keyof ConfigType;
+export type StyleProps = {
+    [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
+};
+export type FlexStyleProps = Pick<CSSProperties, FlexPropsKeyType>;
+export interface CustomBoxProps {
+    /**
+     * If true, the box will take the full width of its parent.
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the box will take the full height of its parent.
+     */
+    fullHeight?: boolean;
+    /**
+     * If true, the box will take the full width of its parent.
+     */
+    fw?: boolean;
+    /**
+     * If true, the box will take the full height of its parent.
+     */
+    fh?: boolean;
+}
+export interface BoxHTMLProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Box's content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional styles.
+     */
+    style?: CSSProperties;
+    /**
+     * Testing id of the component.
+     */
+    'data-testid'?: string;
+}
+export interface BoxProps extends StyleProps, FlexStyleProps, CustomBoxProps, BoxHTMLProps {
+}
+export {};

package/dist/components/Button/StyledButton.d.ts

@@ -0,0 +1,25 @@
+import { Color } from '../../theme/common';
+type ButtonContainerProps = {
+    backgroundColor: Color | 'disabled';
+    borderRadius: string;
+};
+declare const StyledButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonContainerProps>> & string;
+type ButtonTextProps = {
+    themeColor: Color | 'disabled';
+    themeTextColor?: Color;
+    disabled?: boolean;
+};
+declare const StyledButtonText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TextProps & {
+    useRichText?: boolean;
+}, ButtonTextProps>> & string & Omit<(props: import('..').TextProps & {
+    useRichText?: boolean;
+}) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+type ButtonIconWrapperProps = {
+    themePosition: 'left' | 'right';
+};
+declare const StyledButtonIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, ButtonIconWrapperProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, };

package/dist/components/Button/index.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+export interface ButtonProps {
+    /**
+     * Disable state of button.
+     */
+    disabled?: boolean;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    icon?: React.ReactNode;
+    /**
+     * Visual color to apply to button.
+     */
+    color?: Color;
+    /**
+     * Visual color to apply to button's text.
+     */
+    textColor?: Color;
+    /**
+     * Loading state of button.
+     */
+    loading?: boolean;
+    /**
+     * Set the handler to handle click event.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Corner style of button.
+     */
+    corner?: 'circle' | 'rounded' | 'square';
+    /**
+     * Additional style.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Testing id of the component.
+     */
+    'data-testid'?: string;
+    /**
+     * Button text.
+     */
+    text: React.ReactNode;
+    /**
+     * For flex layout
+     */
+    flex?: number | string;
+}
+export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
+export * from './utils';

package/dist/components/Button/utils.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '../../theme';
+import { Color } from '../../theme/common';
+export declare const getTextColor: (theme: Theme, backgroundColor: Color | "disabled", textColor?: Color) => string;

package/dist/components/Loading/StyledLoading.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledLoadingContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, never>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledSpinner: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: string;
+    color: string;
+    strokeWidth: string;
+}>> & string;

package/dist/components/Loading/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { LoadingProps } from './types';
+export declare const Loading: React.FC<LoadingProps>;
+export * from './types';

package/dist/components/Loading/types.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { Color } from '../../theme';
+import { LoadingSize } from '../../theme/components/loading';
+import { BoxProps } from '../Box';
+export interface LoadingProps extends BoxProps {
+    /**
+     * Size of the loading indicator
+     */
+    size: LoadingSize | string;
+    /**
+     * Loading state of the loading indicator
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * Color of the loading indicator
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * Children of the loading indicator (will be shown when loading is false)
+     */
+    children?: React.ReactNode;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}

package/dist/components/Text/StyledText.d.ts

@@ -0,0 +1,12 @@
+import { Color, FontSize, FontWeight, Typeface } from '../../theme';
+interface StyledTextProps {
+    themeFontSize: FontSize;
+    themeFontWeight: FontWeight;
+    themeColor: Color;
+    themeTypeface: Typeface;
+    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through';
+}
+declare const StyledText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, StyledTextProps>> & string;
+export { StyledText };

package/dist/components/Text/constants.d.ts

@@ -0,0 +1,2 @@
+import { TagStyle } from './types';
+export declare const SUPPORTED_RICH_TEXT_TAGS: TagStyle[];

package/dist/components/Text/index.d.ts

@@ -0,0 +1,6 @@
+import { TextProps } from './types';
+export declare const Text: (props: TextProps & {
+    useRichText?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export type { TextProps };
+export * from './constants';