@x-plat/design-system 0.13.0 → 0.14.1

package/dist/index.js

@@ -7979,10 +7979,8 @@ import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React19.useState({
     position: {},
-    direction: "bottom",
-    repositioning: false
+    direction: "bottom"
   });
-  const placedRef = React19.useRef(false);
   const calculatePosition = React19.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -8005,18 +8003,10 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({
-      position: { top, left },
-      direction,
-      repositioning: placedRef.current
-    });
-    placedRef.current = true;
+    setPosition({ position: { top, left }, direction });
   }, [triggerRef, popRef]);
   React19.useLayoutEffect(() => {
-    if (!enabled) {
-      placedRef.current = false;
-      return;
-    }
+    if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -8082,7 +8072,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.useRef(null);
-  const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -8117,7 +8107,7 @@ var Dropdown = (props) => {
       "div",
       {
         ref: menuRef,
-        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ jsx322(
@@ -10049,7 +10039,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -10396,7 +10385,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ jsx337(Portal_default, { children: /* @__PURE__ */ jsxs216(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
@@ -11289,7 +11278,7 @@ var TimePicker = (props) => {
       "div",
       {
         ref: contentRef,
-        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
         style: { ...position.position, width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ jsx351(
@@ -11409,9 +11398,33 @@ var ToastProvider = ({
 };
 ToastProvider.displayName = "ToastProvider";
 
+// src/components/ToggleChip/ToggleChip.tsx
+import { jsx as jsx353 } from "react/jsx-runtime";
+var ToggleChip = (props) => {
+  const { children, selected = false, onClick, disabled = false, size = "md" } = props;
+  return /* @__PURE__ */ jsx353(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "lib-xplat-chip",
+        "lib-xplat-toggle-chip",
+        size,
+        selected ? "selected" : "unselected"
+      ),
+      "aria-pressed": selected,
+      disabled,
+      onClick,
+      children
+    }
+  );
+};
+ToggleChip.displayName = "ToggleChip";
+var ToggleChip_default = ToggleChip;
+
 // src/components/Tooltip/Tooltip.tsx
 import React42 from "react";
-import { Fragment as Fragment6, jsx as jsx353, jsxs as jsxs224 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -11516,7 +11529,7 @@ var Tooltip = (props) => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ jsx353(Fragment6, { children });
+  if (!title && !description) return /* @__PURE__ */ jsx354(Fragment6, { children });
   return /* @__PURE__ */ jsxs224(
     "div",
     {
@@ -11530,7 +11543,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx353(Portal_default, { children: /* @__PURE__ */ jsxs224(
+        visible && /* @__PURE__ */ jsx354(Portal_default, { children: /* @__PURE__ */ jsxs224(
           "div",
           {
             ref: tooltipRef,
@@ -11538,8 +11551,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx353("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx353("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx354("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx354("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -11552,10 +11565,10 @@ var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
 import React43 from "react";
-import { jsx as jsx354, jsxs as jsxs225 } from "react/jsx-runtime";
+import { jsx as jsx355, jsxs as jsxs225 } from "react/jsx-runtime";
 var PipIcon = () => /* @__PURE__ */ jsxs225("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx354("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx354("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+  /* @__PURE__ */ jsx355("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx355("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -11736,7 +11749,7 @@ var Video = React43.forwardRef((props, ref) => {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx354(
+        /* @__PURE__ */ jsx355(
           "video",
           {
             ref: setRefs,
@@ -11757,7 +11770,7 @@ var Video = React43.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx354(
+        showCenterPlay && /* @__PURE__ */ jsx355(
           "button",
           {
             type: "button",
@@ -11769,11 +11782,11 @@ var Video = React43.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx354("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx354(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx355("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx355(PlayCircleIcon_default, {}) })
           }
         ),
         showControls && /* @__PURE__ */ jsxs225("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx354(
+          /* @__PURE__ */ jsx355(
             "input",
             {
               type: "range",
@@ -11791,28 +11804,28 @@ var Video = React43.forwardRef((props, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs225("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx354(
+            /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx354(PauseIcon_default, {}) : /* @__PURE__ */ jsx354(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx355(PauseIcon_default, {}) : /* @__PURE__ */ jsx355(PlayIcon_default, {})
               }
             ),
             /* @__PURE__ */ jsxs225("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx354(
+              /* @__PURE__ */ jsx355(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx354(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx355(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx354(
+              /* @__PURE__ */ jsx355(
                 "input",
                 {
                   type: "range",
@@ -11832,7 +11845,7 @@ var Video = React43.forwardRef((props, ref) => {
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx354("div", { className: "controls-spacer" }),
+            /* @__PURE__ */ jsx355("div", { className: "controls-spacer" }),
             playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs225("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
               /* @__PURE__ */ jsxs225(
                 "button",
@@ -11848,7 +11861,7 @@ var Video = React43.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx354("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx354("li", { children: /* @__PURE__ */ jsxs225(
+              rateMenuOpen && /* @__PURE__ */ jsx355("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx355("li", { children: /* @__PURE__ */ jsxs225(
                 "button",
                 {
                   type: "button",
@@ -11862,7 +11875,7 @@ var Video = React43.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx354(
+            showCaptions && /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
@@ -11870,37 +11883,37 @@ var Video = React43.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx354(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx355(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx354(
+            showPip && pipSupported && /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx354(PipIcon, {})
+                children: /* @__PURE__ */ jsx355(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx354(
+            showDownload && /* @__PURE__ */ jsx355(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx354(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx355(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx354(
+            /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx354(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx354(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx355(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx355(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -11913,7 +11926,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx355 } from "react/jsx-runtime";
+import { jsx as jsx356 } from "react/jsx-runtime";
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -11926,13 +11939,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ jsx355("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ jsx356("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx356 } from "react/jsx-runtime";
+import { jsx as jsx357 } from "react/jsx-runtime";
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -11945,13 +11958,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ jsx356("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ jsx357("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx357 } from "react/jsx-runtime";
+import { jsx as jsx358 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -11968,35 +11981,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx357("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx358("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-import { jsx as jsx358, jsxs as jsxs226 } from "react/jsx-runtime";
+import { jsx as jsx359, jsxs as jsxs226 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
   return /* @__PURE__ */ jsxs226("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx358("div", { children: logo }),
-    /* @__PURE__ */ jsx358("div", { children: centerContent }),
-    /* @__PURE__ */ jsx358("div", { children: rightContent })
+    /* @__PURE__ */ jsx359("div", { children: logo }),
+    /* @__PURE__ */ jsx359("div", { children: centerContent }),
+    /* @__PURE__ */ jsx359("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment7, jsx as jsx359, jsxs as jsxs227 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx360, jsxs as jsxs227 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx359("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx359(Fragment7, { children: sideBar }),
+  return /* @__PURE__ */ jsx360("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx360(Fragment7, { children: sideBar }),
     /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx359("div", { className: "lib-xplat-layout-conent-header", children: header }),
+      header && /* @__PURE__ */ jsx360("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -12018,18 +12031,18 @@ var useSideBarContext = () => {
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx360 } from "react/jsx-runtime";
+import { jsx as jsx361 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
   const [isOpen, setIsOpen] = React45.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx360(
+  return /* @__PURE__ */ jsx361(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx360(
+      children: /* @__PURE__ */ jsx361(
         "div",
         {
           className: clsx_default(
@@ -12363,6 +12376,7 @@ export {
   ThumbsUpIcon_default as ThumbsUpIcon,
   TimePicker_default as TimePicker,
   ToastProvider,
+  ToggleChip_default as ToggleChip,
   ToggleLeftIcon_default as ToggleLeftIcon,
   ToggleRightIcon_default as ToggleRightIcon,
   ToolIcon_default as ToolIcon,

package/dist/layout/Grid/Item/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { b as GridColumnConfig } from '../../../breakpoints-DsXkJgdl.cjs';
+import { G as GridColumnConfig } from '../../../breakpoints-CKkNxA-y.cjs';
 
 /**
  * Grid column span — 브레이크포인트별 컬럼 수.

package/dist/layout/Grid/Item/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { b as GridColumnConfig } from '../../../breakpoints-DsXkJgdl.js';
+import { G as GridColumnConfig } from '../../../breakpoints-CKkNxA-y.js';
 
 /**
  * Grid column span — 브레이크포인트별 컬럼 수.

package/dist/layout/Grid/index.d.cts

@@ -1,5 +1,5 @@
 export { FullGrid } from './FullGrid/index.cjs';
 export { FullScreen } from './FullScreen/index.cjs';
 export { GridItem } from './Item/index.cjs';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../../breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../../breakpoints-CKkNxA-y.cjs';
 import 'react';

package/dist/layout/Grid/index.d.ts

@@ -1,5 +1,5 @@
 export { FullGrid } from './FullGrid/index.js';
 export { FullScreen } from './FullScreen/index.js';
 export { GridItem } from './Item/index.js';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../../breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../../breakpoints-CKkNxA-y.js';
 import 'react';

package/dist/layout/index.d.cts

@@ -1,7 +1,7 @@
 export { FullGrid } from './Grid/FullGrid/index.cjs';
 export { FullScreen } from './Grid/FullScreen/index.cjs';
 export { GridItem } from './Grid/Item/index.cjs';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../breakpoints-CKkNxA-y.cjs';
 export { Header } from './Header/index.cjs';
 export { Layout } from './Layout/index.cjs';
 export { SideBar, SideBarContext, useSideBarContext } from './SideBar/index.cjs';

package/dist/layout/index.d.ts

@@ -1,7 +1,7 @@
 export { FullGrid } from './Grid/FullGrid/index.js';
 export { FullScreen } from './Grid/FullScreen/index.js';
 export { GridItem } from './Grid/Item/index.js';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../breakpoints-CKkNxA-y.js';
 export { Header } from './Header/index.js';
 export { Layout } from './Layout/index.js';
 export { SideBar, SideBarContext, useSideBarContext } from './SideBar/index.js';

package/dist/tokens/index.d.cts

@@ -1,4 +1,4 @@
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-CKkNxA-y.cjs';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
 import React from 'react';
 

package/dist/tokens/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-CKkNxA-y.js';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
 import React from 'react';
 

package/guidelines/Guidelines.md

@@ -55,7 +55,7 @@ React 기반 디자인 시스템 라이브러리이다. Figma Make Kit과 1:1
    - [피드백](./components/feedback.md) - Alert, Toast, NotificationBadge
    - [오버레이](./components/overlay.md) - Modal, Drawer, PopOver, Tooltip
    - [폼 컨트롤](./components/form.md) - CheckBox, Radio, Switch
-   - [Chip & Tag](./components/chip-tag.md)
+   - [Chip & ToggleChip & Tag](./components/chip-tag.md)
    - [내비게이션](./components/navigation.md) - Tab, CardTab, Breadcrumb, Pagination, Steps
    - [DatePicker](./components/datepicker.md) - Calendar, DatePicker 4종
    - [Accordion](./components/accordion.md)

package/guidelines/MIGRATION.md

@@ -6,6 +6,33 @@
 - 최신본 URL: `https://unpkg.com/@x-plat/design-system/guidelines/MIGRATION.md`
 - 자기 버전부터 아래로 읽어 내려가면 된다.
 
+## 먼저: 지금 내가 위험한가
+
+**`0.x` 에서 캐럿(`^`)은 마이너를 고정한다.** 메이저가 0 이면 npm 은 마이너 번호를
+메이저처럼 다룬다.
+
+```
+^0.12.0  ≡  >=0.12.0 <0.13.0      ← 0.13.0 은 안 온다
+^0.5.42  ≡  >=0.5.42 <0.6.0       ← 0.6.0 은 안 온다
+```
+
+그래서 **`install` 을 다시 돌려도 아래 변경들은 오지 않는다.** 전부
+`package.json` 의 명시 버전을 직접 올리는 순간에 한꺼번에 온다.
+
+이 말은 두 가지를 뜻한다.
+
+1. **당장 안 올릴 거면 이 문서를 읽지 않아도 된다.** 지금 화면은 안 깨진다.
+2. **올릴 때는 건너뛴 구간의 절을 전부 읽어야 한다.** 한 마이너씩 올라가는 게
+   아니라 여러 마이너를 한 번에 건너뛰게 되기 때문이다.
+
+특히 오래 머물러 있던 저장소는 **성격이 다른 변경 둘을 한꺼번에 맞는다.**
+`0.5.x` 에서 최신으로 올리면 [0.6.0 CSS 변수 개명](#05x--060--css-변수-이름-전면-교체)과
+[0.13.0 `label` 의미 변경](#0120--0130--fileupload--imageselector-의-label-뜻이-바뀜)을
+같이 겪는다. **둘 다 타입이나 빌드가 잡아 주지 않고 화면만 바뀐다.** 이관 후
+눈으로 확인할 것.
+
+---
+
 ## 이 문서를 믿어도 되는 범위
 
 각 항목은 **커밋 해시**를 달아 뒀다. 커밋 제목만 보고 판단하지 말 것 —
@@ -233,6 +260,30 @@ HTML 을 검색 색인에 넣는다면 **닫는 태그를 공백이나 줄바꿈
 직접 넘기는 구조라 라벨이 가리킬 대상이 없고, 후자는 `role="menu"` 인 액션
 메뉴라 검증할 값이 없다.
 
+## 0.12.0 ~ 0.14.0 — 오버레이 열림/닫힘 애니메이션이 죽어 있었다 (0.14.1 에서 고침)
+
+**`e80f4df` 가 넣고 `0.14.1` 이 걷어냈다. 이 구간을 쓰고 있었다면 Select ·
+Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어나왔다.**
+
+0.12.0 에서 "열린 오버레이가 스크롤 중 미끄러진다" 를 고치면서 원인을 둘로
+봤는데 하나가 틀렸다.
+
+- **맞았던 것** — 스크롤 이벤트마다 `setState` 가 돌아 팝업이 한 프레임씩
+  뒤따라왔다. rAF 로 묶어 고쳤고, 이쪽은 그대로 남아 있다.
+- **틀렸던 것** — "방향이 뒤집히면 열림 애니메이션이 다시 발동한다" 고 보고
+  `.repositioning { transition: none }` 을 넣었다. 그런데 자리는 `top`/`left`
+  로 옮기는데 전환은 `transform`/`opacity` 에만 걸려 있어 자리 이동은 애초에
+  전환을 타지 않고, 방향이 뒤집혀도 `.top.visible` 과 `.bottom.visible` 이
+  같은 `transform` 을 주므로 바뀌는 값이 없다.
+
+게다가 그 플래그는 첫 계산 직후 켜진 뒤 **닫힐 때까지 꺼지지 않았다.** 여는
+순간 `useLayoutEffect` → `rAF` → `ResizeObserver` 가 연달아 계산하므로 첫
+프레임 안에 `transition: none` 이 붙고, 그 뒤에 `.visible` 이 와도 전환이
+없다. 닫힘(`.exit`)도 같다.
+
+**올리기만 하면 된다. 쓰는 쪽에서 고칠 것은 없다.** `.repositioning` 클래스를
+직접 잡는 CSS 를 쓰고 있었다면 그 규칙만 지우면 된다.
+
 ---
 
 ## 실제 이관에서 걸린 것 / 안 걸린 것

package/guidelines/components/chip-tag.md

@@ -1,4 +1,4 @@
-# Chip & Tag
+# Chip & ToggleChip & Tag
 
 ## Chip
 
@@ -41,9 +41,87 @@
 
 ---
 
+## ToggleChip
+
+**눌러서 고르는** 칩이다. 켜짐/꺼짐을 다룬다 — `Tag` 의 클릭은 삭제이고, 이쪽은
+삭제가 아니다.
+
+```tsx
+<ToggleChip selected={picked.has("ko")} onClick={() => toggle("ko")}>
+  한국어
+</ToggleChip>
+```
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children | `ReactNode` | — | 내용 |
+| selected | `boolean` | `false` | 켜진 상태. `aria-pressed` 도 함께 바뀐다 |
+| onClick | `() => void` | — | 누를 때 |
+| disabled | `boolean` | `false` | 흐리게 하고 못 누르게 한다 |
+| size | `"sm" \| "md" \| "lg"` | `"md"` | `Chip` 과 같은 눈금 |
+
+**여러 개 고르기와 한 개 고르기 양쪽에 쓴다.** 몇 개까지 켤 수 있는지, 마지막
+하나를 뗄 수 있는지 같은 규칙은 쓰는 쪽 사정이라 여기서 정하지 않는다. 묶어
+주는 껍데기도 없다 — 낱개로 늘어놓고 상태만 쥐고 있으면 된다.
+
+```tsx
+// 여러 개 고르기
+const [picked, setPicked] = useState<Set<string>>(new Set());
+const toggle = (v: string) =>
+  setPicked((prev) => {
+    const next = new Set(prev);
+    next.has(v) ? next.delete(v) : next.add(v);
+    return next;
+  });
+
+{OPTIONS.map((o) => (
+  <ToggleChip key={o.value} selected={picked.has(o.value)} onClick={() => toggle(o.value)}>
+    {o.label}
+  </ToggleChip>
+))}
+
+// 한 개 고르기 (거르개)
+{FILTERS.map((f) => (
+  <ToggleChip key={f} selected={filter === f} onClick={() => setFilter(f)}>
+    {f}
+  </ToggleChip>
+))}
+```
+
+> **곁에 깔린 `Chip` 과 같은 `size` 를 쓸 것.** 고르는 칩은 거의 항상 표시용
+> 칩 옆에 놓이는데, 양쪽 기본값이 `md` 라고 안심하고 두면 앱이 표시용 칩을
+> `sm` 으로 통일해 쓰는 경우 고르는 칩만 한 눈금 커진다. 모양을 맞춰 놔도
+> 크기가 어긋나면 똑같이 겉돈다.
+
+`Chip` 과 **같은 알약 모양·같은 크기 눈금**을 쓴다. 두 CSS 가 따로 있는 게
+아니라 `ToggleChip` 이 `.lib-xplat-chip` 을 그대로 입고 상호작용분만 얹으므로
+둘이 따로 놀 수 없다. 거르개 칩 아래에 표시용 `Chip` 이 깔리는 화면에서
+겉돌지 않는다.
+
+색은 `Chip` 의 상태 색(primary·success…)을 받지 않는다. **고른 것과 안 고른 것**
+두 가지뿐이라 상태 색 어휘가 끼어들 자리가 없다. 고른 것은 옅은 브랜드 바탕에
+브랜드 테두리다 — 여러 개를 한꺼번에 켜는 쓰임이 더 많은데 진한 채움이 여럿이면
+화면이 시끄럽고 곁의 버튼과 구분이 안 된다.
+
+---
+
 ## 의사결정
 
 | 상황 | 사용할 것 |
 |------|----------|
-| 상태/분류 라벨 (삭제 불필요) | Chip |
+| 상태/분류 라벨 (누를 일 없음) | Chip |
+| 눌러서 고르기 (켜짐/꺼짐) | **ToggleChip** |
 | 사용자가 제거할 수 있는 태그 | Tag |
+| 개수·점 표시 | NotificationBadge |
+
+셋이 비슷하게 생겼으므로 **무엇이 일어나는가**로 고른다.
+
+| | 누르면 | 렌더 |
+|---|---|---|
+| `Chip` | 아무 일도 없다 | `<div>` |
+| `ToggleChip` | 켜지거나 꺼진다 | `<button aria-pressed>` |
+| `Tag` | (X 를 누르면) 사라진다 | `<span>` + 닫기 `<button>` |
+
+> 고르는 칩을 `Chip` 을 `<button>` 으로 감싸서 만들지 말 것. 커서·초점 테두리·
+> `aria-pressed` 가 빠지고, 실제로 그렇게 만든 화면들에서 **아무도 누를 수 있는
+> 줄 몰랐다.** `ToggleChip` 이 그 셋을 기본으로 갖는다.

package/package.json

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