colibri-ui 0.7.8 → 0.7.9

package/esm/Theme/themes/default.js

@@ -3,7 +3,6 @@ import Breakpoints from '../breakpoints.js';
 
 var ButtonThemeDefault = {
   base: {
-    color: Color.BLACK,
     borderRadius: "26px"
   },
   primary: {
@@ -12,12 +11,12 @@ var ButtonThemeDefault = {
       backgroundColor: Color.PRIMARY_4,
       borderColor: Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       color: Color.WHITE,
       backgroundColor: Color.PRIMARY_5,
       borderColor: Color.PRIMARY_5
     },
-    focus: {
+    focused: {
       color: Color.WHITE,
       backgroundColor: Color.PRIMARY_5,
       borderColor: Color.PRIMARY_5
@@ -39,12 +38,12 @@ var ButtonThemeDefault = {
       backgroundColor: Color.SECONDARY_4,
       borderColor: Color.SECONDARY_4
     },
-    hover: {
+    hovered: {
       color: Color.WHITE,
       backgroundColor: Color.SECONDARY_5,
       borderColor: Color.SECONDARY_5
     },
-    focus: {
+    focused: {
       color: Color.WHITE,
       backgroundColor: Color.SECONDARY_5,
       borderColor: Color.SECONDARY_5
@@ -66,7 +65,7 @@ var ButtonThemeDefault = {
       backgroundColor: Color.WHITE,
       borderColor: Color.WHITE
     },
-    hover: {
+    hovered: {
       color: Color.TRETIARY_5,
       backgroundColor: Color.TRETIARY_2,
       borderColor: Color.TRETIARY_2
@@ -83,15 +82,52 @@ var ButtonThemeDefault = {
     }
   }
 };
+var InputThemeDefault = {
+  placeholder: {
+    color: Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: Color.BG_3
+    },
+    hovered: {
+      borderColor: Color.PRIMARY_3,
+      boxShadow: "0px 0px 0px 2px ".concat(Color.PRIMARY_2)
+    },
+    focused: {
+      borderColor: Color.PRIMARY_4
+    },
+    disabled: {
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: Color.TRETIARY_2,
+        borderColor: Color.ALERT
+      },
+      hovered: {
+        backgroundColor: Color.WHITE,
+        borderColor: Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: Color.WHITE,
+        borderColor: Color.ALERT
+      }
+    }
+  }
+};
 var CheckboxThemeDefault = {
   primary: {
     normal: {
       backgroundColor: Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       backgroundColor: Color.PRIMARY_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(Color.PRIMARY_1)
     },
     checked: {
@@ -113,6 +149,9 @@ var TypographyThemeDefault = {
   },
   success: {
     color: Color.SUCCESS
+  },
+  secondary: {
+    color: Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -133,10 +172,11 @@ var SwitchThemeDefault = {
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
   button: ButtonThemeDefault,
+  input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
   "switch": SwitchThemeDefault,
   palette: Color
 };
 
-export { ButtonThemeDefault, CheckboxThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };
+export { ButtonThemeDefault, CheckboxThemeDefault, InputThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

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

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import Typography from '../../Typography/index.js';
+import { BaseContainer } from './styles.js';
+
+var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    hint = _a.hint,
+    children = _a.children,
+    error = _a.error,
+    className = _a.className;
+  return jsxs(BaseContainer, {
+    className: className,
+    ref: ref,
+    children: [label && jsx(Typography, {
+      tag: "label",
+      children: label
+    }), children, hint && jsx(Typography, {
+      variant: error ? "alert" : "secondary",
+      tag: "span",
+      children: hint
+    })]
+  });
+});
+
+export { FormField as default };

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

@@ -0,0 +1,12 @@
+import _styled from '@emotion/styled/base';
+import { __makeTemplateObject } from 'tslib';
+
+var BaseContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ex9vcr90"
+} : {
+  target: "ex9vcr90",
+  label: "BaseContainer"
+})(templateObject_1 || (templateObject_1 = __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;
+
+export { BaseContainer };

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

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseInputRoot, BaseIcon, BaseDisableWrapper } from './styles.js';
+
+var InputRoot = /*#__PURE__*/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 jsxs(BaseInputRoot, {
+    ref: ref,
+    className: className,
+    variant: variant,
+    isError: error ? 1 : 0,
+    disabled: disabled,
+    size: size,
+    children: [startIcon && jsx(BaseIcon, {
+      children: startIcon
+    }), children, endIcon && jsx(BaseIcon, {
+      children: endIcon
+    }), disabled && jsx(BaseDisableWrapper, {})]
+  });
+});
+
+export { InputRoot as default };

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