@team-monolith/cds 0.2.12 → 0.3.1

package/dist/components/Button.d.ts

@@ -17,8 +17,6 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     endIcon?: React.ReactNode;
     /** 컴포넌트 내 표기될 문자열 */
     label: string;
-    /** 버튼 클릭 시 호출될 콜백 함수 */
-    onClick?: () => void;
 }
 export type ButtonProps<RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
 export interface ButtonTypeMap<RootComponentType extends React.ElementType = "button"> {

package/dist/components/Button.js

@@ -56,13 +56,13 @@ var SIZE_TO_LABEL_STYLE = {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
 var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "onClick"]);
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label"]);
     var theme = useTheme();
     return (_jsxs(Component, __assign({}, other, { className: className, ref: ref, css: [
             css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "]))),
             COLOR_TO_BUTTON_STYLE(theme, color),
             SIZE_TO_BUTTON_STYLE[size],
-        ], disabled: disabled, onClick: onClick }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
+        ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
 });
 var Label = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
     var size = _a.size;

package/dist/components/Input.js

@@ -51,7 +51,8 @@ var SIZE_TO_FONT_STYLES = function (size) {
  */
 var Input = React.forwardRef(function (props, ref) {
     var label = props.label, hintText = props.hintText, hintIcon = props.hintIcon, className = props.className, color = props.color, size = props.size, placeholder = props.placeholder, disabled = props.disabled, startIcon = props.startIcon, startLabel = props.startLabel, endLabel = props.endLabel, endIcon = props.endIcon, inputProps = props.inputProps, inputRef = props.inputRef, fullWidth = props.fullWidth, onChange = props.onChange, onClear = props.onClear, defaultValue = props.defaultValue, value = props.value, other = __rest(props, ["label", "hintText", "hintIcon", "className", "color", "size", "placeholder", "disabled", "startIcon", "startLabel", "endLabel", "endIcon", "inputProps", "inputRef", "fullWidth", "onChange", "onClear", "defaultValue", "value"]);
-    return (_jsxs(InputWrapper, __assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: props.disabled }, { children: [label, " ", _jsx(InputBase, __assign({}, props))] }))) : (_jsx(InputBase, __assign({}, props))), hintText && (_jsxs(Hint, __assign({ color: props.color, disabled: props.disabled }, { children: [hintIcon, hintText] })))] })));
+    var _className = props.className, inputBaseProps = __rest(props, ["className"]);
+    return (_jsxs(InputWrapper, __assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: props.disabled }, { children: [label, " ", _jsx(InputBase, __assign({}, inputBaseProps))] }))) : (_jsx(InputBase, __assign({}, inputBaseProps))), hintText && (_jsxs(Hint, __assign({ color: props.color, disabled: props.disabled }, { children: [hintIcon, hintText] })))] })));
 });
 var InputWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"])), function (_a) {
     var size = _a.size;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -13,29 +13,45 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { useContext } from "react";
 import Button from "../../components/Button";
 import shadows from "../../foundation/shadows";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import styled from "@emotion/styled";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export function SegmentedControlButton(props) {
+    var onClick = props.onClick, other = __rest(props, ["onClick"]);
     var context = useContext(SegmentedControlGroupPropsContext);
-    var isActive = context.multiSelect ? context.value.includes(props.value) : context.value === props.value;
-    return (_jsx(StyledButton, __assign({}, props, { isActive: isActive, color: isActive ? "primary" : "textNeutral", size: context.size, onClick: function () {
-            var _a, _b;
-            (_a = context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, props.value);
-            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
-        } })));
+    var handleClick = function (e) {
+        var _a;
+        (_a = context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, props.value);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    var isActive = context.multiSelect
+        ? context.value.includes(props.value)
+        : context.value === props.value;
+    return (_jsx(StyledButton, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        justify-content: center;\n        flex-grow: 1;\n        ", "\n      "], ["\n        display: flex;\n        justify-content: center;\n        flex-grow: 1;\n        ", "\n      "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, props, { isActive: isActive, color: isActive ? "primary" : "textNeutral", size: context.size, onClick: handleClick })));
 }
 var StyledButton = styled(Button, {
     shouldForwardProp: function (prop) { return prop !== "isActive"; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  ", "\n"])), function (_a) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  ", "\n"])), function (_a) {
     var isActive = _a.isActive;
     return isActive && "box-shadow: ".concat(shadows.shadow04, ";");
 });
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.2.12",
+  "version": "0.3.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
-    "copyfiles": "^2.4.1"
+    "copyfiles": "^2.4.1",
+    "rimraf": "^5.0.1"
   }
 }

package/src/cds/components/Button.tsx

@@ -172,9 +172,6 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
 
   /** 컴포넌트 내 표기될 문자열 */
   label: string;
-
-  /** 버튼 클릭 시 호출될 콜백 함수 */
-  onClick?: () => void;
 }
 
 export type ButtonProps<
@@ -210,7 +207,6 @@ const Button: ButtonComponent = React.forwardRef(function Button<
     startIcon,
     endIcon,
     label,
-    onClick,
     ...other
   } = props;
   const theme = useTheme();
@@ -242,7 +238,6 @@ const Button: ButtonComponent = React.forwardRef(function Button<
         SIZE_TO_BUTTON_STYLE[size],
       ]}
       disabled={disabled}
-      onClick={onClick}
     >
       {startIcon}
       <Label size={size}>{label}</Label>

package/src/cds/components/Input.tsx

@@ -104,6 +104,11 @@ const Input = React.forwardRef<any, InputProps>(
       ...other
     } = props;
 
+    const {
+      className: _className,
+      ...inputBaseProps
+    } = props;
+
     return (
       <InputWrapper
         className={props.className}
@@ -114,10 +119,10 @@ const Input = React.forwardRef<any, InputProps>(
       >
         {label ? (
           <Label disabled={props.disabled}>
-            {label} <InputBase {...props} />
+            {label} <InputBase {...inputBaseProps} />
           </Label>
         ) : (
-          <InputBase {...props} />
+          <InputBase {...inputBaseProps} />
         )}
         {hintText && (
           <Hint color={props.color} disabled={props.disabled}>

package/src/cds/foundation/shadows.ts

@@ -14,4 +14,4 @@ const shadows = {
     "0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22)",
 };
 
-export default shadows;
+export default shadows;

package/src/cds/patterns/SegmentedControl/SegmentedControlButton.tsx

@@ -1,11 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { useContext } from "react";
 import Button, { ButtonProps } from "../../components/Button";
 import shadows from "../../foundation/shadows";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import styled from "@emotion/styled";
 
-export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+export interface SegmentedControlButtonProps
+  extends Omit<ButtonProps, "color" | "size"> {
   value: string;
 }
 
@@ -13,20 +15,32 @@ export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" |
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export function SegmentedControlButton(props: SegmentedControlButtonProps) {
+  const { onClick, ...other } = props;
+
   const context = useContext(SegmentedControlGroupPropsContext);
 
-  const isActive = context.multiSelect ? context.value.includes(props.value) : context.value === props.value;
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    context.onClick?.(props.value);
+    onClick?.(e);
+  };
+
+  const isActive = context.multiSelect
+    ? context.value.includes(props.value)
+    : context.value === props.value;
 
   return (
     <StyledButton
+      css={css`
+        display: flex;
+        justify-content: center;
+        flex-grow: 1;
+        ${isActive && `box-shadow: ${shadows.shadow04};`}
+      `}
       {...props}
       isActive={isActive}
       color={isActive ? "primary" : "textNeutral"}
       size={context.size}
-      onClick={() => {
-        context.onClick?.(props.value);
-        props.onClick?.();
-      }}
+      onClick={handleClick}
     />
   );
 }
@@ -38,4 +52,4 @@ const StyledButton = styled(Button, {
   justify-content: center;
   flex-grow: 1;
   ${({ isActive }) => isActive && `box-shadow: ${shadows.shadow04};`}
-`;
+`;