@bolttech/atoms-checkbox 0.2.2 → 0.3.1

package/index.cjs

@@ -1098,13 +1098,15 @@ $({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign },
 const CheckboxContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "atoms-checkboxstyles__CheckboxContainer",
   componentId: "sc-1gq944z-0"
-})(["display:flex;flex-direction:row;"]);
+})(["display:flex;flex-direction:row;gap:", ";"], ({
+  theme
+}) => theme.components.checkbox.gap);
 const Input = /*#__PURE__*/styled__default["default"].input.attrs({
   type: 'checkbox'
 }).withConfig({
   displayName: "atoms-checkboxstyles__Input",
   componentId: "sc-1gq944z-1"
-})(["appearance:none;margin:0;cursor:pointer;width:18px;height:18px;border:1px solid ", ";transform:translateY(-0.075em);display:grid;place-content:center;&:checked{background-color:", ";&::before{content:'';width:12px;height:12px;transform:scale(0);clip-path:polygon(11% 38%,0 53%,49% 90%,100% 24%,87% 11%,47% 65%);box-shadow:inset 12px 12px ", ";}&:not(:disabled){&:hover{background-color:", ";}}}&:focus{box-shadow:0 0 0 1px ", ",0 0 0 2px ", ";border:none;}&:not(:disabled){&:focus{box-shadow:0 0 0 1px ", ",0 0 0 2px ", ";border:none;}&:not(:checked){&:hover::before{content:'';width:12px;height:12px;transform:scale(1);box-shadow:inset 12px 12px ", ";}}}&:checked::before{transform:scale(1);}:disabled{border:1px solid ", ";cursor:not-allowed;&:checked{background-color:", ";&::before{box-shadow:inset 12px 12px ", ";}}}"], ({
+})(["appearance:none;margin:0;flex-shrink:0;cursor:pointer;width:14px;height:14px;outline:1px solid ", ";outline-offset:-1px;transform:translateY(0.15em);display:grid;place-content:center;&:checked{background-color:", ";&::before{content:'';width:8px;height:8px;transform:scale(0);clip-path:polygon(11% 38%,0 53%,49% 90%,100% 24%,87% 11%,47% 65%);box-shadow:inset 12px 12px ", ";}&:not(:disabled){&:hover{background-color:", ";}}}&:focus{box-shadow:0 0 0 1px ", ",0 0 0 2px ", ";outline:none;}&:not(:disabled){&:focus{box-shadow:0 0 0 1px ", ",0 0 0 2px ", ";outline:none;}&:not(:checked){&:hover::before{content:'';width:8px;height:8px;transform:scale(1);box-shadow:inset 8px 8px ", ";}}}&:checked::before{transform:scale(1);}:disabled{outline:1px solid ", ";cursor:not-allowed;&:checked{background-color:", ";&::before{box-shadow:inset 12px 12px ", ";}}}"], ({
   theme,
   error
 }) => error ? theme.components.checkbox.square.color.error : theme.components.checkbox.square.color.default, ({
@@ -1133,7 +1135,7 @@ const Input = /*#__PURE__*/styled__default["default"].input.attrs({
 const Label = /*#__PURE__*/styled__default["default"].label.withConfig({
   displayName: "atoms-checkboxstyles__Label",
   componentId: "sc-1gq944z-2"
-})(["color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";padding-left:", ";"], ({
+})(["color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";"], ({
   theme,
   disabled
 }) => disabled ? theme.components.checkbox.text.color.textLabel.disable : theme.components.checkbox.text.color.textLabel.default, ({
@@ -1144,9 +1146,7 @@ const Label = /*#__PURE__*/styled__default["default"].label.withConfig({
   theme
 }) => theme.components.checkbox.fieldLabel.fontSize, ({
   theme
-}) => theme.components.checkbox.fieldLabel.letterSpacing, ({
-  theme
-}) => theme.components.checkbox.gap);
+}) => theme.components.checkbox.fieldLabel.letterSpacing);
 const CheckboxContainerError = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "atoms-checkboxstyles__CheckboxContainerError",
   componentId: "sc-1gq944z-3"
@@ -1173,7 +1173,9 @@ function Checkbox({
   errorMessage,
   ref = null,
   checked,
-  onChange
+  onChange,
+  onBlur,
+  onFocus
 }) {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(CheckboxContainer, {
@@ -1185,7 +1187,9 @@ function Checkbox({
         ref: ref,
         type: "checkbox",
         "data-testid": `${id}-test`,
-        onChange: onChange
+        onChange: onChange,
+        onBlur: onBlur,
+        onFocus: onFocus
       }), jsxRuntime.jsx(Label, Object.assign({
         htmlFor: id,
         disabled: disabled

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bolttech/atoms-checkbox",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@edirect/frontend-foundations": "0.0.51",
+    "@edirect/frontend-foundations": "0.0.55",
     "react": "18.2.0",
     "styled-components": "5.3.6"
   },

package/src/lib/atoms-checkbox.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckboxProps } from './atoms-checkbox.type';
-export declare function Checkbox({ id, label, disabled, errorMessage, ref, checked, onChange, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ id, label, disabled, errorMessage, ref, checked, onChange, onBlur, onFocus, }: CheckboxProps): JSX.Element;

package/src/lib/atoms-checkbox.type.d.ts

@@ -7,4 +7,6 @@ export interface CheckboxProps {
     checked?: boolean;
     ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: ChangeEventHandler<HTMLInputElement>;
+    onFocus?: ChangeEventHandler<HTMLInputElement>;
 }