@x-plat/design-system 0.1.4 → 0.1.5

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(

package/dist/components/Switch/index.cjs

@@ -186,6 +186,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -220,6 +221,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/dist/components/Switch/index.css

@@ -1,15 +1,46 @@
 /* src/components/Switch/switch.scss */
 .lib-xplat-switch {
   position: relative;
-  width: 4rem;
-  height: 2rem;
-  border-radius: 1rem;
+  border-radius: 9999px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
   background-color: #D4D4D4;
   border-color: #D4D4D4;
 }
+.lib-xplat-switch.sm {
+  width: 2rem;
+  height: 1.125rem;
+}
+.lib-xplat-switch.sm > .knob {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.lib-xplat-switch.sm > .knob.checked {
+  transform: translateY(-50%) translateX(0.875rem);
+}
+.lib-xplat-switch.md {
+  width: 3rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.md > .knob {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+.lib-xplat-switch.md > .knob.checked {
+  transform: translateY(-50%) translateX(1.375rem);
+}
+.lib-xplat-switch.lg {
+  width: 3.5rem;
+  height: 1.875rem;
+}
+.lib-xplat-switch.lg > .knob {
+  width: 1.625rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.lg > .knob.checked {
+  transform: translateY(-50%) translateX(1.625rem);
+}
 .lib-xplat-switch.disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -767,14 +798,9 @@
   position: absolute;
   top: 50%;
   left: 0;
-  width: 1.75rem;
-  height: 1.75rem;
   background-color: #FFFFFF;
   border-radius: 9999px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
   transition: transform 0.25s;
 }
-.lib-xplat-switch > .knob.checked {
-  transform: translateY(-50%) translateX(2rem);
-}

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

@@ -1,8 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
 
+type SwitchSize = "sm" | "md" | "lg";
 interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
     value: boolean;
+    size?: SwitchSize;
     disabled?: boolean;
     className?: string;
     onChange?: (value: boolean) => void;

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

@@ -1,8 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
 
+type SwitchSize = "sm" | "md" | "lg";
 interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
     value: boolean;
+    size?: SwitchSize;
     disabled?: boolean;
     className?: string;
     onChange?: (value: boolean) => void;

package/dist/components/Switch/index.js

@@ -150,6 +150,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -184,6 +185,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/dist/components/index.cjs

@@ -2766,6 +2766,7 @@ var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value: valueProp,
     onChange,
     children,
     disabled = false,
@@ -2774,8 +2775,15 @@ var SelectRoot = (props) => {
   const itemChildren = import_react17.default.Children.toArray(children).filter(
     (child) => import_react17.default.isValidElement(child) && child.type === SelectItem_default
   );
+  const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = import_react17.default.useState(false);
-  const [selectedLabel, setSelectedLabel] = import_react17.default.useState(null);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react17.default.useState(null);
+  const controlledLabel = import_react17.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_react17.default.useRef(null);
   const contentRef = import_react17.default.useRef(null);
   const [mounted, setMounted] = import_react17.default.useState(false);
@@ -2799,13 +2807,15 @@ var SelectRoot = (props) => {
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = import_react17.default.useCallback(
-    (label, value2) => {
-      setSelectedLabel(label);
-      onChange?.(value2, label);
+    (label, itemValue) => {
+      if (!isControlled) {
+        setUncontrolledLabel(label);
+      }
+      onChange?.(itemValue, label);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  const value = import_react17.default.useMemo(
+  const ctxValue = import_react17.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -2826,7 +2836,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(context_default.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -3460,6 +3470,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -3494,6 +3505,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/dist/components/index.css

@@ -7267,15 +7267,46 @@
 /* src/components/Switch/switch.scss */
 .lib-xplat-switch {
   position: relative;
-  width: 4rem;
-  height: 2rem;
-  border-radius: 1rem;
+  border-radius: 9999px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
   background-color: #D4D4D4;
   border-color: #D4D4D4;
 }
+.lib-xplat-switch.sm {
+  width: 2rem;
+  height: 1.125rem;
+}
+.lib-xplat-switch.sm > .knob {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.lib-xplat-switch.sm > .knob.checked {
+  transform: translateY(-50%) translateX(0.875rem);
+}
+.lib-xplat-switch.md {
+  width: 3rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.md > .knob {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+.lib-xplat-switch.md > .knob.checked {
+  transform: translateY(-50%) translateX(1.375rem);
+}
+.lib-xplat-switch.lg {
+  width: 3.5rem;
+  height: 1.875rem;
+}
+.lib-xplat-switch.lg > .knob {
+  width: 1.625rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.lg > .knob.checked {
+  transform: translateY(-50%) translateX(1.625rem);
+}
 .lib-xplat-switch.disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -8033,17 +8064,12 @@
   position: absolute;
   top: 50%;
   left: 0;
-  width: 1.75rem;
-  height: 1.75rem;
   background-color: #FFFFFF;
   border-radius: 9999px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
   transition: transform 0.25s;
 }
-.lib-xplat-switch > .knob.checked {
-  transform: translateY(-50%) translateX(2rem);
-}
 
 /* src/components/Tab/tab.scss */
 .lib-xplat-tab {

package/dist/components/index.js

@@ -2695,6 +2695,7 @@ var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value: valueProp,
     onChange,
     children,
     disabled = false,
@@ -2703,8 +2704,15 @@ var SelectRoot = (props) => {
   const itemChildren = React16.Children.toArray(children).filter(
     (child) => React16.isValidElement(child) && child.type === SelectItem_default
   );
+  const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = React16.useState(false);
-  const [selectedLabel, setSelectedLabel] = React16.useState(null);
+  const [uncontrolledLabel, setUncontrolledLabel] = React16.useState(null);
+  const controlledLabel = React16.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 = React16.useRef(null);
   const contentRef = React16.useRef(null);
   const [mounted, setMounted] = React16.useState(false);
@@ -2728,13 +2736,15 @@ var SelectRoot = (props) => {
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = React16.useCallback(
-    (label, value2) => {
-      setSelectedLabel(label);
-      onChange?.(value2, label);
+    (label, itemValue) => {
+      if (!isControlled) {
+        setUncontrolledLabel(label);
+      }
+      onChange?.(itemValue, label);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  const value = React16.useMemo(
+  const ctxValue = React16.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -2755,7 +2765,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx319(context_default.Provider, { value, children: /* @__PURE__ */ jsxs203(
+  return /* @__PURE__ */ jsx319(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs203(
     "div",
     {
       className: clsx_default(
@@ -3389,6 +3399,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -3423,6 +3434,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/dist/index.cjs

@@ -7304,6 +7304,7 @@ var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value: valueProp,
     onChange,
     children,
     disabled = false,
@@ -7312,8 +7313,15 @@ var SelectRoot = (props) => {
   const itemChildren = import_react17.default.Children.toArray(children).filter(
     (child) => import_react17.default.isValidElement(child) && child.type === SelectItem_default
   );
+  const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = import_react17.default.useState(false);
-  const [selectedLabel, setSelectedLabel] = import_react17.default.useState(null);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react17.default.useState(null);
+  const controlledLabel = import_react17.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_react17.default.useRef(null);
   const contentRef = import_react17.default.useRef(null);
   const [mounted, setMounted] = import_react17.default.useState(false);
@@ -7337,13 +7345,15 @@ var SelectRoot = (props) => {
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = import_react17.default.useCallback(
-    (label, value2) => {
-      setSelectedLabel(label);
-      onChange?.(value2, label);
+    (label, itemValue) => {
+      if (!isControlled) {
+        setUncontrolledLabel(label);
+      }
+      onChange?.(itemValue, label);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  const value = import_react17.default.useMemo(
+  const ctxValue = import_react17.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -7364,7 +7374,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(context_default.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -7998,6 +8008,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -8032,6 +8043,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/dist/index.css

@@ -7269,15 +7269,46 @@
 /* src/components/Switch/switch.scss */
 .lib-xplat-switch {
   position: relative;
-  width: 4rem;
-  height: 2rem;
-  border-radius: 1rem;
+  border-radius: 9999px;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
   background-color: #D4D4D4;
   border-color: #D4D4D4;
 }
+.lib-xplat-switch.sm {
+  width: 2rem;
+  height: 1.125rem;
+}
+.lib-xplat-switch.sm > .knob {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.lib-xplat-switch.sm > .knob.checked {
+  transform: translateY(-50%) translateX(0.875rem);
+}
+.lib-xplat-switch.md {
+  width: 3rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.md > .knob {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+.lib-xplat-switch.md > .knob.checked {
+  transform: translateY(-50%) translateX(1.375rem);
+}
+.lib-xplat-switch.lg {
+  width: 3.5rem;
+  height: 1.875rem;
+}
+.lib-xplat-switch.lg > .knob {
+  width: 1.625rem;
+  height: 1.625rem;
+}
+.lib-xplat-switch.lg > .knob.checked {
+  transform: translateY(-50%) translateX(1.625rem);
+}
 .lib-xplat-switch.disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -8035,17 +8066,12 @@
   position: absolute;
   top: 50%;
   left: 0;
-  width: 1.75rem;
-  height: 1.75rem;
   background-color: #FFFFFF;
   border-radius: 9999px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
   transition: transform 0.25s;
 }
-.lib-xplat-switch > .knob.checked {
-  transform: translateY(-50%) translateX(2rem);
-}
 
 /* src/components/Tab/tab.scss */
 .lib-xplat-tab {

package/dist/index.js

@@ -6926,6 +6926,7 @@ var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value: valueProp,
     onChange,
     children,
     disabled = false,
@@ -6934,8 +6935,15 @@ var SelectRoot = (props) => {
   const itemChildren = React16.Children.toArray(children).filter(
     (child) => React16.isValidElement(child) && child.type === SelectItem_default
   );
+  const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = React16.useState(false);
-  const [selectedLabel, setSelectedLabel] = React16.useState(null);
+  const [uncontrolledLabel, setUncontrolledLabel] = React16.useState(null);
+  const controlledLabel = React16.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 = React16.useRef(null);
   const contentRef = React16.useRef(null);
   const [mounted, setMounted] = React16.useState(false);
@@ -6959,13 +6967,15 @@ var SelectRoot = (props) => {
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
   const setSelected = React16.useCallback(
-    (label, value2) => {
-      setSelectedLabel(label);
-      onChange?.(value2, label);
+    (label, itemValue) => {
+      if (!isControlled) {
+        setUncontrolledLabel(label);
+      }
+      onChange?.(itemValue, label);
     },
-    [onChange]
+    [isControlled, onChange]
   );
-  const value = React16.useMemo(
+  const ctxValue = React16.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -6986,7 +6996,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx319(context_default.Provider, { value, children: /* @__PURE__ */ jsxs203(
+  return /* @__PURE__ */ jsx319(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs203(
     "div",
     {
       className: clsx_default(
@@ -7620,6 +7630,7 @@ var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
     value,
+    size = "md",
     disabled,
     onChange,
     colorNamespace = "xplat",
@@ -7654,6 +7665,7 @@ var Switch = (props) => {
     {
       className: clsx_default(
         "lib-xplat-switch",
+        size,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "XPLAT UI Design System package",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",