@x-plat/design-system 0.14.1 → 0.14.3

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}px`;
+    pop.style.left = `${left}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.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}px`;
+    pop.style.left = `${left}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/layout/Layout/index.d.cts

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Header } from '../Header/index.cjs';
 
-interface SidebarChildProps {
-    handleSwitchSideBar: () => void;
-    [key: string]: unknown;
-}
 interface LayoutProps {
-    header?: React.ReactElement<typeof Header>;
-    sideBar?: React.ReactElement<SidebarChildProps>;
+    /**
+     * 화면 위쪽 머리말. 보통 `Header` 를 넣는다.
+     *
+     * 한때 `ReactElement<typeof Header>` 로 좁혀 두었는데 그건 잘못된 표기였다 —
+     * `ReactElement<P>` 의 `P` 는 **그 엘리먼트의 props** 지 컴포넌트 타입이
+     * 아니다. `<Header />` 를 그대로 넘겨도 통과하지 않았다.
+     */
+    header?: React.ReactNode;
+    /**
+     * 왼쪽 옆띠. 보통 `SideBar` 를 넣는다.
+     *
+     * 여는·닫는 상태는 `SideBar` 가 자기 안의 컨텍스트로 들고 있다. Layout 은
+     * 아무것도 주입하지 않으므로 슬롯을 좁힐 이유가 없다.
+     */
+    sideBar?: React.ReactNode;
     children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;

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

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Header } from '../Header/index.js';
 
-interface SidebarChildProps {
-    handleSwitchSideBar: () => void;
-    [key: string]: unknown;
-}
 interface LayoutProps {
-    header?: React.ReactElement<typeof Header>;
-    sideBar?: React.ReactElement<SidebarChildProps>;
+    /**
+     * 화면 위쪽 머리말. 보통 `Header` 를 넣는다.
+     *
+     * 한때 `ReactElement<typeof Header>` 로 좁혀 두었는데 그건 잘못된 표기였다 —
+     * `ReactElement<P>` 의 `P` 는 **그 엘리먼트의 props** 지 컴포넌트 타입이
+     * 아니다. `<Header />` 를 그대로 넘겨도 통과하지 않았다.
+     */
+    header?: React.ReactNode;
+    /**
+     * 왼쪽 옆띠. 보통 `SideBar` 를 넣는다.
+     *
+     * 여는·닫는 상태는 `SideBar` 가 자기 안의 컨텍스트로 들고 있다. Layout 은
+     * 아무것도 주입하지 않으므로 슬롯을 좁힐 이유가 없다.
+     */
+    sideBar?: React.ReactNode;
     children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;

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.1",
+  "version": "0.14.3",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",