colibri-ui 0.7.30 → 0.7.31

package/Checkbox/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var index = require('../Typography/index.js');
 var styles = require('./styles.js');
 
 var Checkbox = function Checkbox(_a) {
@@ -10,6 +11,7 @@ var Checkbox = function Checkbox(_a) {
     name = _a.name,
     value = _a.value,
     label = _a.label,
+    hint = _a.hint,
     checked = _a.checked,
     onChange = _a.onChange,
     onFocus = _a.onFocus,
@@ -19,29 +21,35 @@ var Checkbox = function Checkbox(_a) {
     className = _a.className,
     disabled = _a.disabled,
     isError = _a.isError;
-  var control = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(styles.Control, {
-      className: className,
-      type: "checkbox",
-      id: id,
-      variant: variant,
-      name: name,
-      value: value,
-      checked: checked,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      disabled: disabled
-    }), jsxRuntime.jsx(styles.FakeCheckbox, {
-      variant: variant,
-      checked: checked,
-      isError: isError
-    }), jsxRuntime.jsx(styles.Text, {
-      children: label
-    })]
+  var control = jsxRuntime.jsx(styles.Label, {
+    children: jsxRuntime.jsxs(styles.Wrapper, {
+      children: [jsxRuntime.jsx(styles.Control, {
+        className: className,
+        type: "checkbox",
+        id: id,
+        variant: variant,
+        name: name,
+        value: value,
+        checked: checked,
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        disabled: disabled
+      }), jsxRuntime.jsx(styles.FakeCheckbox, {
+        variant: variant,
+        checked: checked,
+        isError: isError
+      }), jsxRuntime.jsx(styles.Text, {
+        children: label
+      })]
+    })
   });
-  return jsxRuntime.jsx(styles.Label, {
-    children: control
+  return jsxRuntime.jsxs(styles.Root, {
+    children: [control, hint && jsxRuntime.jsx(index.default, {
+      variant: isError ? "alert" : "secondary",
+      tag: "span",
+      children: hint
+    })]
   });
 };
 

package/Checkbox/index.props.d.ts

@@ -23,6 +23,7 @@ export interface CheckboxProps {
     name?: string;
     value?: string | number;
     label?: ReactNode;
+    hint?: ReactNode;
     checked?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;

package/Checkbox/styles.d.ts

@@ -1,5 +1,13 @@
 /// <reference types="react" />
 import type { CheckboxVariant } from "./index.props";
+export declare const Root: 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 Wrapper: 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 Label: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;