colibri-ui 0.7.8 → 0.7.9

package/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/Theme/themes/default.js

@@ -5,7 +5,6 @@ var breakpoints = require('../breakpoints.js');
 
 var ButtonThemeDefault = {
   base: {
-    color: color.Color.BLACK,
     borderRadius: "26px"
   },
   primary: {
@@ -14,12 +13,12 @@ var ButtonThemeDefault = {
       backgroundColor: color.Color.PRIMARY_4,
       borderColor: color.Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_5,
       borderColor: color.Color.PRIMARY_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_5,
       borderColor: color.Color.PRIMARY_5
@@ -41,12 +40,12 @@ var ButtonThemeDefault = {
       backgroundColor: color.Color.SECONDARY_4,
       borderColor: color.Color.SECONDARY_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_5,
       borderColor: color.Color.SECONDARY_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_5,
       borderColor: color.Color.SECONDARY_5
@@ -68,7 +67,7 @@ var ButtonThemeDefault = {
       backgroundColor: color.Color.WHITE,
       borderColor: color.Color.WHITE
     },
-    hover: {
+    hovered: {
       color: color.Color.TRETIARY_5,
       backgroundColor: color.Color.TRETIARY_2,
       borderColor: color.Color.TRETIARY_2
@@ -85,15 +84,52 @@ var ButtonThemeDefault = {
     }
   }
 };
+var InputThemeDefault = {
+  placeholder: {
+    color: color.Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: color.Color.BG_3
+    },
+    hovered: {
+      borderColor: color.Color.PRIMARY_3,
+      boxShadow: "0px 0px 0px 2px ".concat(color.Color.PRIMARY_2)
+    },
+    focused: {
+      borderColor: color.Color.PRIMARY_4
+    },
+    disabled: {
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: color.Color.TRETIARY_2,
+        borderColor: color.Color.ALERT
+      },
+      hovered: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(color.Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT
+      }
+    }
+  }
+};
 var CheckboxThemeDefault = {
   primary: {
     normal: {
       backgroundColor: color.Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       backgroundColor: color.Color.PRIMARY_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_1)
     },
     checked: {
@@ -115,6 +151,9 @@ var TypographyThemeDefault = {
   },
   success: {
     color: color.Color.SUCCESS
+  },
+  secondary: {
+    color: color.Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -135,6 +174,7 @@ var SwitchThemeDefault = {
 var THEME_DEFAULT = {
   breakpoints: breakpoints.default,
   button: ButtonThemeDefault,
+  input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
   "switch": SwitchThemeDefault,
@@ -143,6 +183,7 @@ var THEME_DEFAULT = {
 
 exports.ButtonThemeDefault = ButtonThemeDefault;
 exports.CheckboxThemeDefault = CheckboxThemeDefault;
+exports.InputThemeDefault = InputThemeDefault;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_DEFAULT = THEME_DEFAULT;
 exports.TypographyThemeDefault = TypographyThemeDefault;

package/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/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/base/FormField/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var index = require('../../Typography/index.js');
+var styles = require('./styles.js');
+
+var FormField = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var label = _a.label,
+    hint = _a.hint,
+    children = _a.children,
+    error = _a.error,
+    className = _a.className;
+  return jsxRuntime.jsxs(styles.BaseContainer, {
+    className: className,
+    ref: ref,
+    children: [label && jsxRuntime.jsx(index.default, {
+      tag: "label",
+      children: label
+    }), children, hint && jsxRuntime.jsx(index.default, {
+      variant: error ? "alert" : "secondary",
+      tag: "span",
+      children: hint
+    })]
+  });
+});
+
+exports.default = FormField;

package/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/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/base/FormField/styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var BaseContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "ex9vcr90"
+} : {
+  target: "ex9vcr90",
+  label: "BaseContainer"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSwgW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSkpKTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSwgW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSkpKTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")])));
+var templateObject_1;
+
+exports.BaseContainer = BaseContainer;

package/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/base/InputRoot/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var styles = require('./styles.js');
+
+var InputRoot = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    disabled = _a.disabled,
+    error = _a.error,
+    size = _a.size;
+  return jsxRuntime.jsxs(styles.BaseInputRoot, {
+    ref: ref,
+    className: className,
+    variant: variant,
+    isError: error ? 1 : 0,
+    disabled: disabled,
+    size: size,
+    children: [startIcon && jsxRuntime.jsx(styles.BaseIcon, {
+      children: startIcon
+    }), children, endIcon && jsxRuntime.jsx(styles.BaseIcon, {
+      children: endIcon
+    }), disabled && jsxRuntime.jsx(styles.BaseDisableWrapper, {})]
+  });
+});
+
+exports.default = InputRoot;

package/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/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>, {}>;