@team-monolith/cds 1.114.2 → 1.115.0

package/dist/components/CheckboxInput.d.ts

@@ -24,6 +24,8 @@ export interface CheckboxInputProps {
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
     /** HTML input 태그에 전달될 props */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** 클릭 가능한 영역의 한 변의 길이(px). 기본값은 16px */
+    hitAreaSize?: number;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)

package/dist/components/CheckboxInput.js

@@ -105,7 +105,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)
  */
 export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref) {
-    const { className, checked, label, spacer, disabled, partial, onChange, onClick: _onClick, inputProps } = props, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "partial", "onChange", "onClick", "inputProps"]);
+    const { className, checked, label, spacer, disabled, partial, onChange, onClick: _onClick, inputProps, hitAreaSize } = props, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "partial", "onChange", "onClick", "inputProps", "hitAreaSize"]);
     if (!label) {
         return _jsx(Checkbox, Object.assign({}, props, { ref: ref }));
     }
@@ -116,6 +116,7 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
         partial,
         onChange,
         inputProps,
+        hitAreaSize,
     };
     return (_jsxs(Label, Object.assign({ className: [checkboxInputClasses.root, className]
             .filter(Boolean)
@@ -124,35 +125,37 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
         `, children: label })] })));
 });
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
-    const { className, checked, partial, disabled = false, spacer = false, onChange, onClick, inputProps } = props, other = __rest(props, ["className", "checked", "partial", "disabled", "spacer", "onChange", "onClick", "inputProps"]);
+    const { className, checked, partial, disabled = false, spacer = false, onChange, onClick, inputProps, hitAreaSize = 16 } = props, other = __rest(props, ["className", "checked", "partial", "disabled", "spacer", "onChange", "onClick", "inputProps", "hitAreaSize"]);
     const type = checked
         ? "checked"
         : partial
             ? "partial"
             : "default";
-    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
+    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, size: hitAreaSize, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange, size: hitAreaSize })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
 });
-const CheckboxContainer = styled.span(({ spacer, disabled }) => css `
-    display: inline-flex;
+const CheckboxContainer = styled.span(({ spacer, disabled, size }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
-    width: 16px;
-    height: 16px;
+    width: ${size}px;
+    height: ${size}px;
     cursor: ${disabled ? "default" : "pointer"};
     margin-bottom: ${spacer ? "8px" : "0"};
   `);
-const StyledInput = styled.input `
+const StyledInput = styled.input(({ size }) => css `
   cursor: inherit;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
-  width: 16px;
-  height: 16px;
+  width: ${size}px;
+  height: ${size}px;
   margin: 0;
   padding: 0;
   // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
   z-index: ${ZINDEX.inputBase};
-`;
+`);
 const Label = styled.label `
   display: flex;
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.114.2",
+  "version": "1.115.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,