@x-plat/design-system 0.1.3 → 0.1.5

package/dist/components/Radio/index.css

@@ -19,7 +19,7 @@
   justify-content: center;
   cursor: pointer;
   background-color: #FFFFFF;
-  transition: border-color 0.2s, background-color 0.2s;
+  transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
 .lib-xplat-radio:hover .lib-xplat-radio > .circle:not(.checked) {
   border-color: #525252;

package/dist/components/Select/index.cjs

@@ -1062,6 +1062,7 @@ var ANIMATION_DURATION_MS = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value: valueProp,
     onChange,
     children,
     disabled = false,
@@ -1070,8 +1071,15 @@ var SelectRoot = (props) => {
   const itemChildren = import_react5.default.Children.toArray(children).filter(
     (child) => import_react5.default.isValidElement(child) && child.type === SelectItem_default
   );
+  const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = import_react5.default.useState(false);
-  const [selectedLabel, setSelectedLabel] = import_react5.default.useState(null);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react5.default.useState(null);
+  const controlledLabel = import_react5.default.useMemo(() => {
+    if (!isControlled) return null;
+    const match = itemChildren.find((child) => child.props.value === valueProp);
+    return match ? match.props.children : null;
+  }, [isControlled, valueProp, itemChildren]);
+  const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
   const triggerRef = import_react5.default.useRef(null);
   const contentRef = import_react5.default.useRef(null);
   const [mounted, setMounted] = import_react5.default.useState(false);
@@ -1095,13 +1103,15 @@ var SelectRoot = (props) => {
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = import_react5.default.useCallback(
-    (label, value2) => {
-      setSelectedLabel(label);
-      onChange?.(value2, label);
+    (label, itemValue) => {
+      if (!isControlled) {
+        setUncontrolledLabel(label);
+      }
+      onChange?.(itemValue, label);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  const value = import_react5.default.useMemo(
+  const ctxValue = import_react5.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -1122,7 +1132,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(context_default.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
     "div",
     {
       className: clsx_default(

package/dist/components/Select/index.d.cts

@@ -22,6 +22,8 @@ type SelectChangeHandler = (value: string | number | undefined, label: React.Rea
 interface SelectProps {
     /** 선택 전 표시할 문구 */
     placeholder?: string;
+    /** 현재 선택된 값 (controlled) */
+    value?: string | number;
     /** 값이 바뀔 때 호출 */
     onChange?: SelectChangeHandler;
     /** Select.Item 만 허용 */

package/dist/components/Select/index.d.ts

@@ -22,6 +22,8 @@ type SelectChangeHandler = (value: string | number | undefined, label: React.Rea
 interface SelectProps {
     /** 선택 전 표시할 문구 */
     placeholder?: string;
+    /** 현재 선택된 값 (controlled) */
+    value?: string | number;
     /** 값이 바뀔 때 호출 */
     onChange?: SelectChangeHandler;
     /** Select.Item 만 허용 */

package/dist/components/Select/index.js

@@ -1025,6 +1025,7 @@ var ANIMATION_DURATION_MS = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value: valueProp,
     onChange,
     children,
     disabled = false,
@@ -1033,8 +1034,15 @@ var SelectRoot = (props) => {
   const itemChildren = React5.Children.toArray(children).filter(
     (child) => React5.isValidElement(child) && child.type === SelectItem_default
   );
+  const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = React5.useState(false);
-  const [selectedLabel, setSelectedLabel] = React5.useState(null);
+  const [uncontrolledLabel, setUncontrolledLabel] = React5.useState(null);
+  const controlledLabel = React5.useMemo(() => {
+    if (!isControlled) return null;
+    const match = itemChildren.find((child) => child.props.value === valueProp);
+    return match ? match.props.children : null;
+  }, [isControlled, valueProp, itemChildren]);
+  const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
   const triggerRef = React5.useRef(null);
   const contentRef = React5.useRef(null);
   const [mounted, setMounted] = React5.useState(false);
@@ -1058,13 +1066,15 @@ var SelectRoot = (props) => {
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = React5.useCallback(
-    (label, value2) => {
-      setSelectedLabel(label);
-      onChange?.(value2, label);
+    (label, itemValue) => {
+      if (!isControlled) {
+        setUncontrolledLabel(label);
+      }
+      onChange?.(itemValue, label);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  const value = React5.useMemo(
+  const ctxValue = React5.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -1085,7 +1095,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx296(context_default.Provider, { value, children: /* @__PURE__ */ jsxs189(
+  return /* @__PURE__ */ jsx296(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs189(
     "div",
     {
       className: clsx_default(