@team-monolith/cds 1.115.0 → 1.115.2

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];
@@ -125,37 +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, hitAreaSize = 16 } = props, other = __rest(props, ["className", "checked", "partial", "disabled", "spacer", "onChange", "onClick", "inputProps", "hitAreaSize"]);
+    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, 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 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, size }) => css `
+const CheckboxContainer = styled.span(({ theme, spacer, disabled, size }) => css `
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    width: ${size}px;
-    height: ${size}px;
+    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-visible::before {
+        opacity: 0.5; /* input 영역 hover 및 focus 시 표시 */
+      }
+    `}
   `);
 const StyledInput = styled.input(({ size }) => css `
-  cursor: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: ${size}px;
-  height: ${size}px;
-  margin: 0;
-  padding: 0;
-  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
-  z-index: ${ZINDEX.inputBase};
-`);
+    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 Label = styled.label `
   display: flex;
   position: relative;

package/package.json

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