@aic-kits/react 0.0.17 → 0.0.21

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

@@ -0,0 +1,37 @@
+import { Theme } from '../../theme';
+import { ConfigType } from './config';
+import { CustomBoxProps, FlexStyleProps, StyleProps } from './types';
+export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
+    [x: string]: string;
+} | {
+    [x: string]: number;
+} | undefined;
+export declare const mapStylePropToThemeValue: (theme: Theme, props: StyleProps) => {};
+export declare const configKeys: Array<keyof ConfigType>;
+export declare const genBoxStyle: (theme: Theme, props: StyleProps & FlexStyleProps & CustomBoxProps) => {
+    alignContent?: import("csstype").Property.AlignContent | undefined;
+    alignItems?: import("csstype").Property.AlignItems | undefined;
+    alignSelf?: import("csstype").Property.AlignSelf | undefined;
+    display?: import("csstype").Property.Display | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    flexBasis?: import("csstype").Property.FlexBasis<string | number> | undefined;
+    flexDirection?: import("csstype").Property.FlexDirection | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
+    flexShrink?: import("csstype").Property.FlexShrink | undefined;
+    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    position?: import("csstype").Property.Position | undefined;
+    top?: import("csstype").Property.Top<string | number> | undefined;
+    right?: import("csstype").Property.Right<string | number> | undefined;
+    bottom?: import("csstype").Property.Bottom<string | number> | undefined;
+    left?: import("csstype").Property.Left<string | number> | undefined;
+    overflow?: import("csstype").Property.Overflow | undefined;
+    width?: import("csstype").Property.Width<string | number> | undefined;
+    minWidth?: import("csstype").Property.MinWidth<string | number> | undefined;
+    maxWidth?: import("csstype").Property.MaxWidth<string | number> | undefined;
+    height?: import("csstype").Property.Height<string | number> | undefined;
+    minHeight?: import("csstype").Property.MinHeight<string | number> | undefined;
+    maxHeight?: import("csstype").Property.MaxHeight<string | number> | undefined;
+    opacity?: import("csstype").Property.Opacity | undefined;
+};
+export declare const StyledBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps & FlexStyleProps & CustomBoxProps>> & string;

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/Example.d.ts

@@ -1 +0,0 @@
-export declare const Example: () => import("react/jsx-runtime").JSX.Element;

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';

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

@@ -0,0 +1,49 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Color, FontSize, FontWeight, Typeface } from '../../theme';
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Size of the text.
+     */
+    fontSize?: FontSize;
+    /**
+     * Font weight of the text.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Visual color to apply to the text.
+     */
+    color?: Color;
+    /**
+     * Specifies the alignment of the text.
+     */
+    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    /**
+     * Transform the text.
+     */
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    /**
+     * Specifies the decoration of the text.
+     */
+    textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through';
+    /**
+     * Testing id of the component.
+     */
+    'data-testid'?: string;
+    /**
+     * The typeface to render the text in:
+     * - `neutral`: The default typeface for the platform.
+     */
+    typeface?: Typeface;
+    /**
+     * Whether to render the text with rich text formatting.
+     */
+    useRichText?: boolean;
+}
+export interface TagStyle {
+    pattern: RegExp;
+    props: Partial<TextProps>;
+}

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextProps } from './types';
+export declare const withRichText: (BaseText: React.ComponentType<TextProps>) => (props: TextProps & {
+    useRichText?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -1 +1,2 @@
-export * from './Example';
+export * from './Box';
+export * from './Text';