@x-plat/design-system 0.14.2 → 0.14.4

package/dist/components/Select/index.css

@@ -199,7 +199,7 @@
   letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-select-content {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   padding: var(--spacing-space-1) 0;
   border-radius: var(--spacing-radius-md);

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 interface SelectItemProps {
     children: React.ReactNode;

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 interface SelectItemProps {
     children: React.ReactNode;

package/dist/components/Select/index.js

@@ -13,23 +13,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = React.useState("bottom");
+  const directionRef = React.useRef("bottom");
   const calculatePosition = React.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
     if (!enabled) return;
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -1377,7 +1381,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, width: triggerRef.current?.offsetWidth },
+            style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: [
               searchable && /* @__PURE__ */ jsx297("div", { className: "select-search", children: /* @__PURE__ */ jsx297(

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
 
 type SpinnerSize = "sm" | "md" | "lg";
 /** Spinner 의 상태 색 */

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
 
 type SpinnerSize = "sm" | "md" | "lg";
 /** Spinner 의 상태 색 */

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { S as StatusTypeInput } from '../../status-njWqQWFV.cjs';
+import { a as StatusTypeInput } from '../../status-C70BBv2S.cjs';
 
 type StatSize = "sm" | "md" | "lg";
 type TrendDirection = "up" | "down" | "flat";

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { S as StatusTypeInput } from '../../status-njWqQWFV.js';
+import { a as StatusTypeInput } from '../../status-C70BBv2S.js';
 
 type StatSize = "sm" | "md" | "lg";
 type TrendDirection = "up" | "down" | "flat";

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
 
 interface StepItem {
     title: string;

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
 
 interface StepItem {
     title: string;

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 type SwitchSize = "sm" | "md" | "lg";
 /** Switch 의 상태 색 */

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { L as LegacyStatusType } from '../../status-C70BBv2S.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 type SwitchSize = "sm" | "md" | "lg";
 /** Switch 의 상태 색 */

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 type TextAreaSize = "sm" | "md" | "lg";
 type TextAreaResize = "none" | "vertical" | "horizontal" | "both";

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 type TextAreaSize = "sm" | "md" | "lg";
 type TextAreaResize = "none" | "vertical" | "horizontal" | "both";

package/dist/components/TimePicker/index.cjs

@@ -49,23 +49,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react.default.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = import_react.default.useState("bottom");
+  const directionRef = import_react.default.useRef("bottom");
   const calculatePosition = import_react.default.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -75,7 +74,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
@@ -106,7 +110,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -371,7 +375,7 @@ var TimePicker = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   import_react4.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
@@ -418,7 +422,7 @@ var TimePicker = (props) => {
       {
         ref: contentRef,
         className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
-        style: { ...position.position, width: triggerRef.current?.offsetWidth },
+        style: { width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",

package/dist/components/TimePicker/index.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /* src/components/FieldMessage/fieldMessage.scss */
 .lib-xplat-field {
   display: flex;
@@ -116,7 +118,7 @@
   color: var(--semantic-text-disabled);
 }
 .lib-xplat-time-picker-content {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   max-height: 220px;
   overflow-y: auto;

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+import { V as Validation } from '../../validation-BYpAI6Ct.cjs';
 
 type TimePickerSize = "sm" | "md" | "lg";
 interface TimePickerProps {

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { V as Validation } from '../../validation-Dqo1zqhT.js';
+import { V as Validation } from '../../validation-BYpAI6Ct.js';
 
 type TimePickerSize = "sm" | "md" | "lg";
 interface TimePickerProps {

package/dist/components/TimePicker/index.js

@@ -13,23 +13,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = React.useState("bottom");
+  const directionRef = React.useRef("bottom");
   const calculatePosition = React.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -39,7 +38,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
     if (!enabled) return;
@@ -70,7 +74,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -335,7 +339,7 @@ var TimePicker = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   React4.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
@@ -382,7 +386,7 @@ var TimePicker = (props) => {
       {
         ref: contentRef,
         className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
-        style: { ...position.position, width: triggerRef.current?.offsetWidth },
+        style: { width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ jsx5(
           "div",

package/dist/components/index.cjs

@@ -2991,12 +2991,12 @@ var ChatInput_default = ChatInput;
 // src/tokens/colors.ts
 var import_tokens_core = require("@x-plat/tokens-core");
 
-// src/tokens/index.ts
-var import_tokens_core2 = require("@x-plat/tokens-core");
-
 // src/tokens/interface/status.ts
 var normalizeStatus = (value) => value === "brand" ? "primary" : value;
 
+// src/tokens/index.ts
+var import_tokens_core2 = require("@x-plat/tokens-core");
+
 // src/components/CheckBox/CheckBox.tsx
 var import_jsx_runtime309 = require("react/jsx-runtime");
 var CheckBox = (props) => {
@@ -3976,23 +3976,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 var import_react19 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react19.default.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = import_react19.default.useState("bottom");
+  const directionRef = import_react19.default.useRef("bottom");
   const calculatePosition = import_react19.default.useCallback(() => {
-    if (!triggerRef.current || !popRef.current) return;
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = popRef.current.offsetWidth;
-    const popH = popRef.current.offsetHeight;
+    const popW = pop.offsetWidth;
+    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
     if (popH === 0 || popW === 0) return;
-    let direction = "bottom";
+    let next = "bottom";
     let top;
     let left;
     if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
-      direction = "top";
+      next = "top";
       top = triggerRect.top - popH;
     } else {
       top = triggerRect.bottom;
@@ -4002,7 +4001,12 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       left = triggerRect.right - popW;
     }
     if (left < 8) left = 8;
-    setPosition({ position: { top, left }, direction });
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    if (next !== directionRef.current) {
+      directionRef.current = next;
+      setDirection(next);
+    }
   }, [triggerRef, popRef]);
   import_react19.default.useLayoutEffect(() => {
     if (!enabled) return;
@@ -4033,7 +4037,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -4071,7 +4075,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = import_react21.default.useState(false);
   const triggerRef = import_react21.default.useRef(null);
   const menuRef = import_react21.default.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
@@ -4107,7 +4111,6 @@ var Dropdown = (props) => {
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
-        style: { top: position.top, left: position.left },
         role: "menu",
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
           "button",
@@ -6041,9 +6044,6 @@ var PopOver = (props) => {
               eventTrigger && "visible"
             ),
             ref: popRef,
-            style: {
-              ...position.position
-            },
             children: PopOverEl
           }
         ) })
@@ -6386,7 +6386,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, width: triggerRef.current?.offsetWidth },
+            style: { width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: [
               searchable && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: "select-search", children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
@@ -7231,7 +7231,7 @@ var TimePicker = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   import_react40.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
@@ -7278,7 +7278,7 @@ var TimePicker = (props) => {
       {
         ref: contentRef,
         className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
-        style: { ...position.position, width: triggerRef.current?.offsetWidth },
+        style: { width: triggerRef.current?.offsetWidth },
         role: "listbox",
         children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
           "div",

package/dist/components/index.css

@@ -3273,7 +3273,7 @@
   cursor: pointer;
 }
 .lib-xplat-dropdown-menu {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   min-width: 160px;
   background: var(--semantic-surface-neutral-primary);
@@ -4160,7 +4160,7 @@
   user-select: none;
 }
 .lib-xplat-pop-over-content {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
@@ -4500,7 +4500,7 @@
   letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-select-content {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   padding: var(--spacing-space-1) 0;
   border-radius: var(--spacing-radius-md);
@@ -5620,7 +5620,7 @@
   color: var(--semantic-text-disabled);
 }
 .lib-xplat-time-picker-content {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
   max-height: 220px;
   overflow-y: auto;

package/dist/components/index.d.cts

@@ -49,6 +49,6 @@ export { Tooltip } from './Tooltip/index.cjs';
 export { Video, VideoProps } from './Video/index.cjs';
 import 'react';
 import '../attributes-DJIWir_0.cjs';
-import '../validation-Dqo1zqhT.cjs';
+import '../validation-BYpAI6Ct.cjs';
 import 'react/jsx-runtime';
-import '../status-njWqQWFV.cjs';
+import '../status-C70BBv2S.cjs';

package/dist/components/index.d.ts

@@ -49,6 +49,6 @@ export { Tooltip } from './Tooltip/index.js';
 export { Video, VideoProps } from './Video/index.js';
 import 'react';
 import '../attributes-DJIWir_0.js';
-import '../validation-Dqo1zqhT.js';
+import '../validation-BYpAI6Ct.js';
 import 'react/jsx-runtime';
-import '../status-njWqQWFV.js';
+import '../status-C70BBv2S.js';