@x-plat/design-system 0.14.2 → 0.14.4

package/dist/components/index.js

@@ -2889,12 +2889,12 @@ var ChatInput_default = ChatInput;
 // src/tokens/colors.ts
 import { semantic } from "@x-plat/tokens-core";
 
-// src/tokens/index.ts
-import { cssVar } from "@x-plat/tokens-core";
-
 // src/tokens/interface/status.ts
 var normalizeStatus = (value) => value === "brand" ? "primary" : value;
 
+// src/tokens/index.ts
+import { cssVar } from "@x-plat/tokens-core";
+
 // src/components/CheckBox/CheckBox.tsx
 import { jsx as jsx309, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
@@ -3874,23 +3874,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React19.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = React19.useState("bottom");
+  const directionRef = React19.useRef("bottom");
   const calculatePosition = React19.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;
@@ -3900,7 +3899,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]);
   React19.useLayoutEffect(() => {
     if (!enabled) return;
@@ -3931,7 +3935,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -3969,7 +3973,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.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);
@@ -4005,7 +4009,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__ */ jsx322(
           "button",
@@ -5939,9 +5942,6 @@ var PopOver = (props) => {
               eventTrigger && "visible"
             ),
             ref: popRef,
-            style: {
-              ...position.position
-            },
             children: PopOverEl
           }
         ) })
@@ -6284,7 +6284,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__ */ jsx337("div", { className: "select-search", children: /* @__PURE__ */ jsx337(
@@ -7129,7 +7129,7 @@ var TimePicker = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   React40.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
@@ -7176,7 +7176,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__ */ jsx351(
           "div",

package/dist/index.cjs

@@ -401,6 +401,7 @@ __export(index_exports, {
   hasError: () => hasError,
   isInRange: () => isInRange,
   isSameDay: () => isSameDay,
+  normalizeStatus: () => normalizeStatus,
   semantic: () => import_tokens_core.semantic,
   useCalendar: () => useCalendar,
   useSideBarContext: () => useSideBarContext,
@@ -7402,12 +7403,12 @@ var gridColumns = {
 // 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) => {
@@ -8387,23 +8388,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;
@@ -8413,7 +8413,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;
@@ -8444,7 +8449,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8482,7 +8487,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);
@@ -8518,7 +8523,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",
@@ -10452,9 +10456,6 @@ var PopOver = (props) => {
               eventTrigger && "visible"
             ),
             ref: popRef,
-            style: {
-              ...position.position
-            },
             children: PopOverEl
           }
         ) })
@@ -10797,7 +10798,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)(
@@ -11642,7 +11643,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]);
@@ -11689,7 +11690,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",
@@ -12841,6 +12842,7 @@ var SideBar_default = SideBar;
   hasError,
   isInRange,
   isSameDay,
+  normalizeStatus,
   semantic,
   useCalendar,
   useSideBarContext,

package/dist/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/index.d.cts

@@ -56,9 +56,9 @@ export { Header } from './layout/Header/index.cjs';
 export { Layout } from './layout/Layout/index.cjs';
 export { SideBar, SideBarContext, useSideBarContext } from './layout/SideBar/index.cjs';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
+export { B as ButtonAttributes, I as InputAttributes, T as TextareaAttributes } from './attributes-DJIWir_0.cjs';
 export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColorProps, ColorToken, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, CallIcon as DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SemanticColorToken, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.cjs';
+export { L as LegacyStatusType, S as StatusType, a as StatusTypeInput, n as normalizeStatus } from './status-C70BBv2S.cjs';
+export { V as Validation, a as ValidationStatus } from './validation-BYpAI6Ct.cjs';
 import 'react';
-import './attributes-DJIWir_0.cjs';
-import './validation-Dqo1zqhT.cjs';
 import 'react/jsx-runtime';
-import './status-njWqQWFV.cjs';

package/dist/index.d.ts

@@ -56,9 +56,9 @@ export { Header } from './layout/Header/index.js';
 export { Layout } from './layout/Layout/index.js';
 export { SideBar, SideBarContext, useSideBarContext } from './layout/SideBar/index.js';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
+export { B as ButtonAttributes, I as InputAttributes, T as TextareaAttributes } from './attributes-DJIWir_0.js';
 export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColorProps, ColorToken, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, CallIcon as DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SemanticColorToken, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.js';
+export { L as LegacyStatusType, S as StatusType, a as StatusTypeInput, n as normalizeStatus } from './status-C70BBv2S.js';
+export { V as Validation, a as ValidationStatus } from './validation-BYpAI6Ct.js';
 import 'react';
-import './attributes-DJIWir_0.js';
-import './validation-Dqo1zqhT.js';
 import 'react/jsx-runtime';
-import './status-njWqQWFV.js';

package/dist/index.js

@@ -6992,12 +6992,12 @@ var gridColumns = {
 // src/tokens/colors.ts
 import { semantic } from "@x-plat/tokens-core";
 
-// src/tokens/index.ts
-import { cssVar } from "@x-plat/tokens-core";
-
 // src/tokens/interface/status.ts
 var normalizeStatus = (value) => value === "brand" ? "primary" : value;
 
+// src/tokens/index.ts
+import { cssVar } from "@x-plat/tokens-core";
+
 // src/components/CheckBox/CheckBox.tsx
 import { jsx as jsx309, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
@@ -7977,23 +7977,22 @@ var Portal_default = Portal;
 // src/tokens/hooks/useAutoPosition.ts
 import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React19.useState({
-    position: {},
-    direction: "bottom"
-  });
+  const [direction, setDirection] = React19.useState("bottom");
+  const directionRef = React19.useRef("bottom");
   const calculatePosition = React19.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;
@@ -8003,7 +8002,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]);
   React19.useLayoutEffect(() => {
     if (!enabled) return;
@@ -8034,7 +8038,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
-  return position;
+  return { direction };
 };
 var useAutoPosition_default = useAutoPosition;
 
@@ -8072,7 +8076,7 @@ var Dropdown = (props) => {
   const [visible, setVisible] = React21.useState(false);
   const triggerRef = React21.useRef(null);
   const menuRef = React21.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);
@@ -8108,7 +8112,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__ */ jsx322(
           "button",
@@ -10042,9 +10045,6 @@ var PopOver = (props) => {
               eventTrigger && "visible"
             ),
             ref: popRef,
-            style: {
-              ...position.position
-            },
             children: PopOverEl
           }
         ) })
@@ -10387,7 +10387,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__ */ jsx337("div", { className: "select-search", children: /* @__PURE__ */ jsx337(
@@ -11232,7 +11232,7 @@ var TimePicker = (props) => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
-  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  useAutoPosition_default(triggerRef, contentRef, mounted);
   React40.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
@@ -11279,7 +11279,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__ */ jsx351(
           "div",
@@ -12430,6 +12430,7 @@ export {
   hasError,
   isInRange,
   isSameDay,
+  normalizeStatus,
   semantic,
   useCalendar,
   useSideBarContext,

package/dist/{status-njWqQWFV.d.cts → status-C70BBv2S.d.cts}

@@ -16,5 +16,7 @@ type StatusType = "primary" | "success" | "error" | "warning" | "info";
 type LegacyStatusType = "brand";
 /** 컴포넌트가 받는 타입. 새 이름과 예전 이름을 모두 허용한다 */
 type StatusTypeInput = StatusType | LegacyStatusType;
+/** `brand` 로 들어온 값을 `primary` 로 정규화한다 */
+declare const normalizeStatus: <T extends string>(value: T | LegacyStatusType) => Exclude<T, LegacyStatusType> | "primary";
 
-export type { LegacyStatusType as L, StatusTypeInput as S };
+export { type LegacyStatusType as L, type StatusType as S, type StatusTypeInput as a, normalizeStatus as n };

package/dist/{status-njWqQWFV.d.ts → status-C70BBv2S.d.ts}

@@ -16,5 +16,7 @@ type StatusType = "primary" | "success" | "error" | "warning" | "info";
 type LegacyStatusType = "brand";
 /** 컴포넌트가 받는 타입. 새 이름과 예전 이름을 모두 허용한다 */
 type StatusTypeInput = StatusType | LegacyStatusType;
+/** `brand` 로 들어온 값을 `primary` 로 정규화한다 */
+declare const normalizeStatus: <T extends string>(value: T | LegacyStatusType) => Exclude<T, LegacyStatusType> | "primary";
 
-export type { LegacyStatusType as L, StatusTypeInput as S };
+export { type LegacyStatusType as L, type StatusType as S, type StatusTypeInput as a, normalizeStatus as n };

package/dist/tokens/index.cjs

@@ -319,6 +319,7 @@ __export(tokens_exports, {
   breakpoints: () => breakpoints,
   cssVar: () => import_tokens_core2.cssVar,
   gridColumns: () => gridColumns,
+  normalizeStatus: () => normalizeStatus,
   semantic: () => import_tokens_core.semantic
 });
 module.exports = __toCommonJS(tokens_exports);
@@ -339,6 +340,9 @@ var gridColumns = {
 // src/tokens/colors.ts
 var import_tokens_core = require("@x-plat/tokens-core");
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -6110,5 +6114,6 @@ var import_tokens_core2 = require("@x-plat/tokens-core");
   breakpoints,
   cssVar,
   gridColumns,
+  normalizeStatus,
   semantic
 });

package/dist/tokens/index.d.cts

@@ -1,5 +1,8 @@
 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';
+export { B as ButtonAttributes, I as InputAttributes, T as TextareaAttributes } from '../attributes-DJIWir_0.cjs';
+export { L as LegacyStatusType, S as StatusType, a as StatusTypeInput, n as normalizeStatus } from '../status-C70BBv2S.cjs';
+export { V as Validation, a as ValidationStatus } from '../validation-BYpAI6Ct.cjs';
 import React from 'react';
 
 type SemanticTextToken = "semantic-text-primary" | "semantic-text-secondary" | "semantic-text-tertiary" | "semantic-text-brand-primary" | "semantic-text-brand-secondary" | "semantic-text-disabled" | "semantic-text-inverse" | "semantic-text-success" | "semantic-text-error" | "semantic-text-warning" | "semantic-text-info" | "semantic-text-link" | "semantic-text-accent-red" | "semantic-text-accent-blue";

package/dist/tokens/index.d.ts

@@ -1,5 +1,8 @@
 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';
+export { B as ButtonAttributes, I as InputAttributes, T as TextareaAttributes } from '../attributes-DJIWir_0.js';
+export { L as LegacyStatusType, S as StatusType, a as StatusTypeInput, n as normalizeStatus } from '../status-C70BBv2S.js';
+export { V as Validation, a as ValidationStatus } from '../validation-BYpAI6Ct.js';
 import React from 'react';
 
 type SemanticTextToken = "semantic-text-primary" | "semantic-text-secondary" | "semantic-text-tertiary" | "semantic-text-brand-primary" | "semantic-text-brand-secondary" | "semantic-text-disabled" | "semantic-text-inverse" | "semantic-text-success" | "semantic-text-error" | "semantic-text-warning" | "semantic-text-info" | "semantic-text-link" | "semantic-text-accent-red" | "semantic-text-accent-blue";

package/dist/tokens/index.js

@@ -14,6 +14,9 @@ var gridColumns = {
 // src/tokens/colors.ts
 import { semantic } from "@x-plat/tokens-core";
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var CopyIcon = () => /* @__PURE__ */ jsxs(
@@ -5784,5 +5787,6 @@ export {
   breakpoints,
   cssVar,
   gridColumns,
+  normalizeStatus,
   semantic
 };

package/dist/{validation-Dqo1zqhT.d.cts → validation-BYpAI6Ct.d.cts}

@@ -10,4 +10,4 @@ interface Validation {
     message: string;
 }
 
-export type { Validation as V };
+export type { Validation as V, ValidationStatus as a };

package/dist/{validation-Dqo1zqhT.d.ts → validation-BYpAI6Ct.d.ts}

@@ -10,4 +10,4 @@ interface Validation {
     message: string;
 }
 
-export type { Validation as V };
+export type { Validation as V, ValidationStatus as a };

package/guidelines/MIGRATION.md

@@ -286,6 +286,44 @@ Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어
 
 ---
 
+## Next.js App Router 에서 반드시 걸리는 것
+
+**DS 는 `'use client'` 를 달고 나가지 않는다.** 컴포넌트들이 `useState` ·
+`useEffect` · `useId` · 컨텍스트를 쓰므로 **서버 컴포넌트가 DS 를 끌어가면
+터진다.** 버전과 무관하게 항상 그렇다.
+
+곧장 import 하는 것은 금방 알아채지만, **진짜 어려운 것은 배럴을 타고 들어가는
+경우다.**
+
+```ts
+// shared/context/index.ts  — 배럴이 DS 를 재수출한다
+export * from "./AuthContext";
+export { SideBar } from "@x-plat/design-system";   // ← 이 한 줄이
+
+// app/layout.tsx  — 서버 컴포넌트
+import { AuthProvider } from "@/shared/context";   // ← 여기를 터뜨린다
+```
+
+`AuthProvider` 만 가져왔는데도 배럴 전체가 평가되면서 DS 가 딸려 온다. 증상이
+"DS 를 쓴 화면이 안 된다" 가 아니라 **"그 배럴을 쓰는 서버 컴포넌트가 안 된다"**
+로 나타나서 원인을 찾기 어렵다.
+
+**해결은 DS 를 감싸는 파일 한 곳을 두고 거기에만 `'use client'` 를 다는 것이다.**
+
+```ts
+// shared/ui/ds.ts
+"use client";
+export { Button, Input, Select, SideBar /* 쓰는 것만 */ } from "@x-plat/design-system";
+```
+
+앱은 이 파일에서만 가져다 쓴다. `agent-admin` 과 `xplat-template` 이 둘 다
+이 방식으로 해결했다.
+
+> 일반 배럴(`shared/context` 같은 것)에서 DS 를 재수출하지 말 것. 그 배럴을
+> 쓰는 서버 컴포넌트가 전부 클라이언트로 끌려간다.
+
+---
+
 ## 실제 이관에서 걸린 것 / 안 걸린 것
 
 `xplat-shop-templat` (pnpm 모노레포, 워크스페이스 4개) 을 **0.6.1 → 0.12.0** 으로
@@ -308,7 +346,18 @@ Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어
 
 ---
 
-## 아직 확인되지 않은 것
+## 확인 상태
+
+이 저장소를 만지는 에이전트 세션들에는 브라우저가 없다. 빌드·타입·lint·
+정적 검사까지는 돌지만 **눈으로 본 것과 추론한 것은 다르다.** 어느 쪽인지
+적어 둔다.
+
+| | 상태 |
+|---|---|
+| 오버레이 열림/닫힘 애니메이션 (0.14.2) | **사람이 화면에서 확인함** — 셀렉트가 부드럽게 내려온다 |
+| `Layout` 타입 (0.14.2) | 소비자 흉내 프로젝트로 타입 검사 통과 |
+| `ToggleChip` 커서·초점 테두리 | 마크업·CSS 만 확인. 눌러 본 사람 없음 |
+| Editor | 아래 |
 
 **Editor 는 브라우저에서 검증되지 않았다.** `contentEditable`·`execCommand`·IME 는
 자동 테스트로 흉내 낼 수 없다. 특히 아래 넷은 직접 눌러 봐야 한다.

package/package.json

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