@x-plat/design-system 0.13.0 → 0.14.1

package/dist/components/index.js

@@ -3876,10 +3876,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();
@@ -3902,18 +3900,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);
@@ -3979,7 +3969,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);
@@ -4014,7 +4004,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(
@@ -5946,7 +5936,6 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
-              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,
@@ -6293,7 +6282,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",
@@ -7186,7 +7175,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(
@@ -7306,9 +7295,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;
@@ -7413,7 +7426,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",
     {
@@ -7427,7 +7440,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,
@@ -7435,8 +7448,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 })
             ]
           }
         ) })
@@ -7449,10 +7462,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";
@@ -7633,7 +7646,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,
@@ -7654,7 +7667,7 @@ var Video = React43.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx354(
+        showCenterPlay && /* @__PURE__ */ jsx355(
           "button",
           {
             type: "button",
@@ -7666,11 +7679,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",
@@ -7688,28 +7701,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",
@@ -7729,7 +7742,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",
@@ -7745,7 +7758,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",
@@ -7759,7 +7772,7 @@ var Video = React43.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx354(
+            showCaptions && /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
@@ -7767,37 +7780,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, {})
               }
             )
           ] })
@@ -7868,6 +7881,7 @@ export {
   TextArea_default as TextArea,
   TimePicker_default as TimePicker,
   ToastProvider,
+  ToggleChip_default as ToggleChip,
   Tooltip_default as Tooltip,
   Video_default as Video,
   hasError,