@team-monolith/cds 1.114.2 → 1.115.1

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

@@ -15,6 +15,7 @@ import { css, useTheme } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
+const DEFAULT_CHECKBOX_SIZE = 16;
 export const checkboxInputClasses = {
     root: "CheckboxInput",
     checkbox: "CheckboxInput-checkbox",
@@ -39,6 +40,11 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
                 stroke: ${theme.color.background.primary};
               }
             }
+            input[type="checkbox"]:focus-visible + & {
+              rect {
+                stroke: ${theme.color.background.primary};
+              }
+            }
           `}
     `,
     checked: css `
@@ -66,6 +72,12 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
                 stroke: ${theme.color.background.primaryActive};
               }
             }
+            input[type="checkbox"]:focus-visible + & {
+              rect {
+                fill: ${theme.color.background.primaryActive};
+                stroke: ${theme.color.background.primaryActive};
+              }
+            }
           `}
     `,
     partial: css `
@@ -98,6 +110,15 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
                 stroke: none;
               }
             }
+            input[type="checkbox"]:focus-visible + & {
+              rect {
+                stroke: ${theme.color.background.primaryActive};
+              }
+              rect + rect {
+                fill: ${theme.color.background.primaryActive};
+                stroke: none;
+              }
+            }
           `}
     `,
 })[type];
@@ -105,7 +126,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 +137,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 +146,68 @@ 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 = DEFAULT_CHECKBOX_SIZE } = 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 })] })));
+    const clampedSize = Math.max(hitAreaSize, DEFAULT_CHECKBOX_SIZE);
+    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, size: clampedSize, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange, size: clampedSize })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
 });
-const CheckboxContainer = styled.span(({ spacer, disabled }) => css `
-    display: inline-flex;
+const CheckboxContainer = styled.span(({ theme, spacer, disabled, size }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
-    width: 16px;
-    height: 16px;
+    width: ${DEFAULT_CHECKBOX_SIZE}px;
+    height: ${DEFAULT_CHECKBOX_SIZE}px;
     cursor: ${disabled ? "default" : "pointer"};
     margin-bottom: ${spacer ? "8px" : "0"};
+
+    svg {
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    ${size > DEFAULT_CHECKBOX_SIZE &&
+    css `
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: ${size}px;
+        height: ${size}px;
+        border-radius: 50%;
+        background: ${theme.color.background.neutralAltActive};
+        opacity: 0;
+        pointer-events: none;
+      }
+    `}
+    ${!disabled &&
+    css `
+      &:hover::before,
+      &:focus-within::before {
+        opacity: 0.5; /* input 영역 hover 및 focus 시 표시 */
+      }
+    `}
+  `);
+const StyledInput = styled.input(({ size }) => css `
+    cursor: inherit;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    width: ${size}px;
+    height: ${size}px;
+    margin: 0;
+    padding: 0;
+    // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
+    z-index: ${ZINDEX.inputBase};
   `);
-const StyledInput = styled.input `
-  cursor: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 16px;
-  height: 16px;
-  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.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,