colibri-ui 0.7.8 → 0.7.10

package/{Button → components/Button}/index.props.d.ts

@@ -1,17 +1,12 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 import type { CSSObject } from "@emotion/react";
-export declare enum SIZE {
-    S = "s",
-    M = "m",
-    L = "l"
-}
 export declare enum VARIANT {
     PRIMARY = "primary",
     SECONDARY = "secondary",
     CLEAR = "clear"
 }
 type BaseStyles = {
-    color: CSSObject["color"];
+    color?: CSSObject["color"];
     borderRadius: CSSObject["borderRadius"];
     border?: CSSObject["border"];
 };
@@ -26,8 +21,8 @@ type VariantStyles = {
 };
 type VariantStates = {
     normal?: VariantStyles;
-    hover?: VariantStyles;
-    focus?: VariantStyles;
+    hovered?: VariantStyles;
+    focused?: VariantStyles;
     active?: VariantStyles;
     disabled?: VariantStyles;
 };
@@ -39,12 +34,13 @@ export type ButtonVariant = {
     [VARIANT.SECONDARY]: VariantStates;
     [VARIANT.CLEAR]: VariantStates;
 };
+export type ButtonSize = "s" | "m" | "l";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: keyof ButtonVariant;
     fullWidth?: boolean;
     icon?: ReactNode;
     iconStart?: ReactNode;
     iconEnd?: ReactNode;
-    size?: SIZE;
+    size?: ButtonSize;
 }
 export {};

package/{esm → components}/Button/styles.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ButtonVariant, SIZE } from "./index.props";
+import type { ButtonSize, ButtonVariant } from "./index.props";
 export declare const StyledButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -7,7 +7,7 @@ export declare const StyledButton: import("@emotion/styled").StyledComponent<{
     fullWidth?: boolean | undefined;
     variant: keyof ButtonVariant;
     icon?: ReactNode;
-    size?: SIZE | undefined;
+    size?: ButtonSize | undefined;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const StyledIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/{Checkbox → components/Checkbox}/index.props.d.ts

@@ -7,9 +7,9 @@ type VariantStyles = {
 };
 type VariantStates = {
     normal?: VariantStyles;
-    hover?: VariantStyles;
+    hovered?: VariantStyles;
     checked?: VariantStyles;
-    focus?: VariantStyles;
+    focused?: VariantStyles;
     active?: VariantStyles;
     disabled?: VariantStyles;
 };

package/{Icons → components/Icons}/index.d.ts

@@ -1,5 +1,3 @@
-export { default as Burger } from "./Burger";
-export { default as Check } from "./Check";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";
 export { default as EyeOpen } from "./EyeOpen";

package/components/Image/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ImageProps } from "./index.props";
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/components/Image/index.props.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+export interface BaseImageContainerProps {
+    fallbackSrc?: string;
+    ariaLabel?: string;
+    sources?: React.SourceHTMLAttributes<HTMLSourceElement>[];
+    "data-testid"?: string;
+}
+export interface ImageProps extends BaseImageContainerProps, React.ImgHTMLAttributes<HTMLImageElement> {
+}

package/components/Image/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BasePicture: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/components/Input/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputProps } from "./index.props";
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/components/Input/index.props.d.ts

@@ -0,0 +1,13 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import type { FormFieldProps } from "../base/FormField/index.props";
+import type { InputSize, InputVariant } from "../base/InputRoot/index.props";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+    variant?: keyof InputVariant;
+    size?: InputSize;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: boolean;
+}

package/components/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { RectProps, TextProps } from "./index.props";
+export declare const SkeletonRect: FC<RectProps>;
+export declare const SkeletonText: FC<TextProps>;

package/components/Skeleton/index.props.d.ts

@@ -0,0 +1,11 @@
+export type TextProps = {
+    className?: string;
+    width?: number | string;
+    size?: number;
+};
+export type RectProps = {
+    className?: string;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+};

package/components/Skeleton/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledRect: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/{Theme → components/Theme}/index.d.ts

@@ -4,6 +4,43 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        input: {
+            placeholder: {
+                color: string;
+            };
+            primary: {
+                normal: {
+                    borderColor: string;
+                };
+                hovered: {
+                    borderColor: string;
+                    boxShadow: string;
+                };
+                focused: {
+                    borderColor: string;
+                };
+                disabled: {
+                    color: string;
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                error: {
+                    normal: {
+                        backgroundColor: string;
+                        borderColor: string;
+                    };
+                    hovered: {
+                        backgroundColor: string;
+                        borderColor: string;
+                        boxShadow: string;
+                    };
+                    focused: {
+                        backgroundColor: string;
+                        borderColor: string;
+                    };
+                };
+            };
+        };
         checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
             alert: {
@@ -12,6 +49,9 @@ export declare const THEMES: {
             success: {
                 color: string;
             };
+            secondary: {
+                color: string;
+            };
         };
         switch: {
             circle: {
@@ -79,6 +119,43 @@ export declare const THEMES: {
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        input: {
+            placeholder: {
+                color: string;
+            };
+            primary: {
+                normal: {
+                    borderColor: string;
+                };
+                hovered: {
+                    borderColor: string;
+                    boxShadow: string;
+                };
+                focused: {
+                    borderColor: string;
+                };
+                disabled: {
+                    color: string;
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                error: {
+                    normal: {
+                        backgroundColor: string;
+                        borderColor: string;
+                    };
+                    hovered: {
+                        backgroundColor: string;
+                        borderColor: string;
+                        boxShadow: string;
+                    };
+                    focused: {
+                        backgroundColor: string;
+                        borderColor: string;
+                    };
+                };
+            };
+        };
         checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
             alert: {
@@ -87,6 +164,9 @@ export declare const THEMES: {
             success: {
                 color: string;
             };
+            secondary: {
+                color: string;
+            };
         };
         switch: {
             circle: {

package/{Theme → components/Theme}/index.props.d.ts

@@ -1,3 +1,4 @@
+import type { InputVariant, PlaceholderProps } from "../base/InputRoot/index.props";
 import type { CheckboxVariant } from "../Checkbox/index.props";
 import type { ColorsTheme } from "./color";
 import type { BreakpointsTheme } from "./breakpoints";
@@ -9,6 +10,7 @@ export type ThemeProps = {
     checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;
+    input: InputVariant & PlaceholderProps;
     switch: SwitchStates;
     palette: ColorsTheme;
 };

package/{esm → components}/Theme/themes/buenos_aires.d.ts

@@ -1,6 +1,43 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
+export declare const InputThemeBA: {
+    placeholder: {
+        color: string;
+    };
+    primary: {
+        normal: {
+            borderColor: string;
+        };
+        hovered: {
+            borderColor: string;
+            boxShadow: string;
+        };
+        focused: {
+            borderColor: string;
+        };
+        disabled: {
+            color: string;
+            backgroundColor: string;
+            borderColor: string;
+        };
+        error: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            hovered: {
+                backgroundColor: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            focused: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+    };
+};
 export declare const CheckboxThemeBA: CheckboxVariant;
 export declare const TypographyThemeBA: {
     alert: {
@@ -9,6 +46,9 @@ export declare const TypographyThemeBA: {
     success: {
         color: string;
     };
+    secondary: {
+        color: string;
+    };
 };
 export declare const SwitchThemeDefault: {
     circle: {
@@ -28,6 +68,43 @@ export declare const SwitchThemeDefault: {
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    input: {
+        placeholder: {
+            color: string;
+        };
+        primary: {
+            normal: {
+                borderColor: string;
+            };
+            hovered: {
+                borderColor: string;
+                boxShadow: string;
+            };
+            focused: {
+                borderColor: string;
+            };
+            disabled: {
+                color: string;
+                backgroundColor: string;
+                borderColor: string;
+            };
+            error: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                hovered: {
+                    backgroundColor: string;
+                    borderColor: string;
+                    boxShadow: string;
+                };
+                focused: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+        };
+    };
     checkbox: CheckboxVariant;
     typography: {
         alert: {
@@ -36,6 +113,9 @@ export declare const THEME_BA: {
         success: {
             color: string;
         };
+        secondary: {
+            color: string;
+        };
     };
     switch: {
         circle: {

package/{esm → components}/Theme/themes/default.d.ts

@@ -1,6 +1,43 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
+export declare const InputThemeDefault: {
+    placeholder: {
+        color: string;
+    };
+    primary: {
+        normal: {
+            borderColor: string;
+        };
+        hovered: {
+            borderColor: string;
+            boxShadow: string;
+        };
+        focused: {
+            borderColor: string;
+        };
+        disabled: {
+            color: string;
+            backgroundColor: string;
+            borderColor: string;
+        };
+        error: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            hovered: {
+                backgroundColor: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            focused: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+    };
+};
 export declare const CheckboxThemeDefault: CheckboxVariant;
 export declare const TypographyThemeDefault: {
     alert: {
@@ -9,6 +46,9 @@ export declare const TypographyThemeDefault: {
     success: {
         color: string;
     };
+    secondary: {
+        color: string;
+    };
 };
 export declare const SwitchThemeDefault: {
     circle: {
@@ -28,6 +68,43 @@ export declare const SwitchThemeDefault: {
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    input: {
+        placeholder: {
+            color: string;
+        };
+        primary: {
+            normal: {
+                borderColor: string;
+            };
+            hovered: {
+                borderColor: string;
+                boxShadow: string;
+            };
+            focused: {
+                borderColor: string;
+            };
+            disabled: {
+                color: string;
+                backgroundColor: string;
+                borderColor: string;
+            };
+            error: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                hovered: {
+                    backgroundColor: string;
+                    borderColor: string;
+                    boxShadow: string;
+                };
+                focused: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+        };
+    };
     checkbox: CheckboxVariant;
     typography: {
         alert: {
@@ -36,6 +113,9 @@ export declare const THEME_DEFAULT: {
         success: {
             color: string;
         };
+        secondary: {
+            color: string;
+        };
     };
     switch: {
         circle: {

package/{esm → components}/Typography/index.props.d.ts

@@ -1,18 +1,15 @@
 import type { CSSObject } from "@emotion/react";
-export declare enum VARIANT {
-    ALERT = "alert",
-    SUCCESS = "success"
-}
 type VariantStyles = {
     color?: CSSObject["color"];
 };
 export type TypographyVariant = {
-    [VARIANT.ALERT]: VariantStyles;
-    [VARIANT.SUCCESS]: VariantStyles;
+    alert: VariantStyles;
+    success: VariantStyles;
+    secondary: VariantStyles;
 };
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type TypographyTag = "span" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
+export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
 export type TypographyProps = {
     className?: string;
     tag?: TypographyTag;

package/components/base/FormField/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FormFieldProps } from "./index.props";
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormField;

package/components/base/FormField/index.props.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type FormFieldProps = {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: boolean;
+    className?: string;
+    children: ReactNode;
+};

package/components/base/FormField/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BaseContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/base/InputRoot/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputProps } from "./index.props";
+declare const InputRoot: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default InputRoot;

package/components/base/InputRoot/index.props.d.ts

@@ -0,0 +1,41 @@
+import type { CSSObject } from "@emotion/react";
+import type { ReactNode } from "react";
+export type InputSize = "s" | "m" | "l";
+type VariantStyles = {
+    color?: CSSObject["color"];
+    backgroundColor?: CSSObject["backgroundColor"];
+    borderColor?: CSSObject["borderColor"];
+    boxShadow?: CSSObject["boxShadow"];
+};
+type PlaceholderStyles = {
+    color?: CSSObject["color"];
+};
+type VariantStates = {
+    normal?: VariantStyles;
+    hovered?: VariantStyles;
+    focused?: VariantStyles;
+    active?: VariantStyles;
+    disabled?: VariantStyles;
+    error?: {
+        normal?: VariantStyles;
+        hovered?: VariantStyles;
+        focused?: VariantStyles;
+    };
+};
+export type InputVariant = {
+    primary: VariantStates;
+};
+export type PlaceholderProps = {
+    placeholder: PlaceholderStyles;
+};
+export type InputProps = {
+    variant?: keyof InputVariant;
+    disabled: boolean;
+    error?: boolean;
+    className?: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    children: ReactNode;
+    size?: InputSize;
+};
+export {};

package/components/base/InputRoot/styles.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { InputSize, InputVariant } from "./index.props";
+export declare const BaseInputRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    disabled: boolean;
+    isError?: number | undefined;
+    size?: InputSize | undefined;
+    variant: keyof InputVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BaseInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BasePlaceholder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const BaseIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BaseDisableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/{esm → components}/index.d.ts

@@ -2,6 +2,9 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Grid } from "./Grid";
+export { default as Image } from "./Image";
+export { default as Input } from "./Input";
+export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";
 export { default as Typography } from "./Typography";

package/esm/Button/index.props.js

@@ -1,9 +1,3 @@
-var SIZE;
-(function (SIZE) {
-  SIZE["S"] = "s";
-  SIZE["M"] = "m";
-  SIZE["L"] = "l";
-})(SIZE || (SIZE = {}));
 var VARIANT;
 (function (VARIANT) {
   VARIANT["PRIMARY"] = "primary";
@@ -11,4 +5,4 @@ var VARIANT;
   VARIANT["CLEAR"] = "clear";
 })(VARIANT || (VARIANT = {}));
 
-export { SIZE, VARIANT };
+export { VARIANT };