@mondrianai/runyourai-design-system 0.0.31 → 0.0.32

package/dist/index.d.mts

@@ -193,8 +193,8 @@ type DropdownMenuItemConfig = {
     /** radio 아이템의 선택값 / React key. 미지정 시 문자열 label 또는 index를 사용 */
     value?: string;
     /**
-     * 현재 선택된 항목 강조. default 아이템에 selected 배경(bg-accent)을 적용한다.
-     * (checkbox/radio는 자체 체크 상태로 강조되므로 무시된다)
+     * default 항목의 선택 상태. 지정하면 체크 영역을 확보하고 선택 시 체크만 표시한다.
+     * 고정 선택 배경은 없다. checkbox/radio는 자체 checked/value를 사용한다.
      */
     selected?: boolean;
     icon?: React$1.ReactNode;
@@ -769,7 +769,7 @@ interface SegmentedControlProps<T extends string> {
     className?: string;
 }
 /**
- * 세그먼트 컨트롤(값/필터 선택) — Tabs `variant="pill"`과 동일 스타일.
+ * 세그먼트 컨트롤(값/필터 선택) — 결제 현황 기준의 공통 스타일.
  * 균등분할이 필요하면 `block`. 라벨이 칸보다 길면 말줄임되고, 그 경우에만 hover 시 툴팁으로 전체 표시.
  */
 declare function SegmentedControl<T extends string>({ value, onChange, items, block, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -193,8 +193,8 @@ type DropdownMenuItemConfig = {
     /** radio 아이템의 선택값 / React key. 미지정 시 문자열 label 또는 index를 사용 */
     value?: string;
     /**
-     * 현재 선택된 항목 강조. default 아이템에 selected 배경(bg-accent)을 적용한다.
-     * (checkbox/radio는 자체 체크 상태로 강조되므로 무시된다)
+     * default 항목의 선택 상태. 지정하면 체크 영역을 확보하고 선택 시 체크만 표시한다.
+     * 고정 선택 배경은 없다. checkbox/radio는 자체 checked/value를 사용한다.
      */
     selected?: boolean;
     icon?: React$1.ReactNode;
@@ -769,7 +769,7 @@ interface SegmentedControlProps<T extends string> {
     className?: string;
 }
 /**
- * 세그먼트 컨트롤(값/필터 선택) — Tabs `variant="pill"`과 동일 스타일.
+ * 세그먼트 컨트롤(값/필터 선택) — 결제 현황 기준의 공통 스타일.
  * 균등분할이 필요하면 `block`. 라벨이 칸보다 길면 말줄임되고, 그 경우에만 hover 시 툴팁으로 전체 표시.
  */
 declare function SegmentedControl<T extends string>({ value, onChange, items, block, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1489,7 +1489,7 @@ var TooltipContent = React7.forwardRef(
         sideOffset,
         className: cn(
           "z-50 w-max",
-          "bg-primary rounded-md px-2.5 py-1.5",
+          "min-h-7.5 rounded-xl border border-neutral-700 bg-neutral-800 px-2.5 py-1.5 shadow-dropdown",
           "animate-in fade-in-0 zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -1498,7 +1498,7 @@ var TooltipContent = React7.forwardRef(
         ),
         style: __spreadValues({ maxWidth }, style)
       }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block text-xs font-normal leading-snug tracking-tight text-primary-foreground whitespace-normal break-words", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block text-xs font-normal leading-4 tracking-tight text-neutral-50 whitespace-normal break-words", children })
       })
     ) });
   }
@@ -1558,10 +1558,16 @@ function TooltipWithIcon({
   ) });
 }
 
+// src/components/ui/menu-styles.ts
+var menuPanelClass = "rounded-xl";
+var menuListClass = "p-1";
+var menuItemClass = "min-h-8 rounded-md px-2 py-1.5 my-0 text-sm leading-5";
+
 // src/components/ui/dropdown-menu.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var baseItemClass = cn(
-  "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 my-0.5 text-sm outline-none",
+  menuItemClass,
+  "relative flex cursor-pointer select-none items-center gap-2 outline-none",
   "transition-colors duration-100",
   "focus:bg-accent focus:text-accent-foreground",
   "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
@@ -1573,14 +1579,15 @@ var destructiveItemClass = cn(
   '[&_svg:not([class*="text-"])]:text-destructive!'
 );
 var indentItemClass = cn(
-  "relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 my-0.5 pr-2 pl-8 text-sm outline-none",
+  menuItemClass,
+  "relative flex cursor-pointer select-none items-center gap-2 pl-8 outline-none",
   "transition-colors duration-100",
   "focus:bg-accent focus:text-accent-foreground",
-  "data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
   "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
 );
 var subTriggerClass = cn(
-  "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 my-0.5 text-sm outline-none",
+  menuItemClass,
+  "relative flex cursor-pointer select-none items-center gap-2 outline-none",
   "transition-colors duration-100",
   "focus:bg-accent focus:text-accent-foreground",
   "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -1589,9 +1596,11 @@ var subTriggerClass = cn(
   '[&_svg:not([class*="text-"])]:text-muted-foreground'
 );
 var contentClass = cn(
+  menuPanelClass,
+  menuListClass,
   "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-44",
   "origin-(--radix-dropdown-menu-content-transform-origin)",
-  "overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+  "overflow-x-hidden overflow-y-auto border bg-popover text-popover-foreground shadow-md",
   "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
   "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
   "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -1658,10 +1667,7 @@ function renderItem(item, index) {
           onSelect: (e) => e.preventDefault(),
           className: indentItemClass,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.CheckIcon, { className: "size-4 text-foreground/20" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.CheckIcon, { className: "size-4" }) })
-            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.CheckIcon, { className: "size-4" }) }) }),
             item.label
           ]
         }
@@ -1680,10 +1686,11 @@ function renderItem(item, index) {
         "data-selected": item.selected || void 0,
         className: cn(
           baseItemClass,
-          item.selected && "bg-accent text-accent-foreground",
+          item.selected !== void 0 && "pl-8",
           item.variant === "destructive" && destructiveItemClass
         ),
         children: [
+          item.selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.CheckIcon, { className: "size-4 text-foreground" }) }),
           item.icon,
           item.label,
           item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ml-auto text-xs tracking-widest text-muted-foreground", children: item.shortcut })
@@ -1720,10 +1727,7 @@ function renderGroups(groups) {
                     onSelect: (e) => e.preventDefault(),
                     className: indentItemClass,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-2 rounded-full bg-foreground/20" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-2 rounded-full bg-current" }) })
-                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.CheckIcon, { className: "size-4" }) }) }),
                       item.label
                     ]
                   }
@@ -2316,7 +2320,8 @@ function Combobox({
         sideOffset: 4,
         style: { width: "var(--radix-popover-trigger-width)" },
         className: cn(
-          "z-50 overflow-hidden rounded-md border border-border bg-popover",
+          menuPanelClass,
+          "z-50 overflow-hidden border border-border bg-popover",
           "shadow-dropdown",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -2337,7 +2342,7 @@ function Combobox({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-1 flex flex-col overflow-y-auto", style: { maxHeight: 384 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(menuListClass, "flex flex-col overflow-y-auto"), style: { maxHeight: 384 }, children: [
             filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "px-2 py-1.5 text-sm text-muted-foreground text-center", children: "\uACB0\uACFC \uC5C6\uC74C" }) : filtered.map((opt) => {
               const isSelected = opt.value === value;
               return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -2346,10 +2351,10 @@ function Combobox({
                   type: "button",
                   onClick: () => handleSelect(opt.value),
                   className: cn(
-                    "flex w-full items-center gap-2 rounded-sm px-2 py-1.5",
-                    "text-sm font-normal leading-5 tracking-tight",
+                    menuItemClass,
+                    "flex w-full items-center gap-2 font-normal tracking-tight",
                     "cursor-pointer transition-colors",
-                    isSelected ? "bg-accent text-accent-foreground" : "text-popover-foreground hover:bg-accent hover:text-accent-foreground"
+                    "text-popover-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"
                   ),
                   children: [
                     opt.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 flex items-center", children: opt.icon }),
@@ -2368,7 +2373,7 @@ function Combobox({
                   footer.onClick();
                   setOpen(false);
                 },
-                className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-normal leading-5 tracking-tight text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors",
+                className: cn(menuItemClass, "flex w-full items-center gap-2 font-normal tracking-tight text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors"),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "plus", className: "size-4 text-muted-foreground" }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-1 min-w-0 truncate text-left", children: footer.label })
@@ -4820,12 +4825,13 @@ function Segment({
     {
       ref,
       type: "button",
+      "aria-pressed": isActive,
       onClick,
       className: cn(
-        "cursor-pointer truncate rounded-md px-3 py-1.5 text-sm font-medium tracking-tight transition-all",
+        "h-7 cursor-pointer truncate rounded-md px-4 py-1 text-sm leading-5 tracking-tight transition-colors",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         block && "min-w-0 flex-1",
-        isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+        isActive ? "bg-background font-medium text-foreground shadow-segmented" : "font-normal text-muted-foreground hover:text-foreground"
       ),
       children: item.label
     }
@@ -4842,7 +4848,7 @@ function SegmentedControl({
     "div",
     {
       className: cn(
-        "items-center gap-1 rounded-lg bg-muted p-1",
+        "h-8.5 items-center gap-0 rounded-lg bg-secondary p-0.75",
         block ? "flex w-full" : "inline-flex",
         className
       ),
@@ -5052,6 +5058,7 @@ function Select(props) {
     return map;
   }, [options, baseId]);
   const [activeValue, setActiveValue] = React23.useState(null);
+  const [keyboardNavigation, setKeyboardNavigation] = React23.useState(false);
   const activeIndex = activeValue ? options.findIndex((o) => o.value === activeValue) : -1;
   const activeId = activeValue && optionIds.has(activeValue) ? optionIds.get(activeValue) : void 0;
   React23.useEffect(() => {
@@ -5098,6 +5105,9 @@ function Select(props) {
   function handleListKeyDown(e) {
     const count = options.length;
     if (count === 0) return;
+    if (["ArrowDown", "ArrowUp", "Home", "End", "Enter", " "].includes(e.key) || e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      setKeyboardNavigation(true);
+    }
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
@@ -5129,6 +5139,7 @@ function Select(props) {
   }
   function handleTriggerKeyDown(e) {
     if (disabled || open) return;
+    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) setKeyboardNavigation(true);
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
       setOpen(true);
@@ -5144,6 +5155,7 @@ function Select(props) {
         "aria-expanded": open,
         "aria-controls": open ? listboxId : void 0,
         onKeyDown: handleTriggerKeyDown,
+        onPointerDown: () => setKeyboardNavigation(false),
         disabled,
         className: cn(
           "flex h-9 w-full items-center justify-between rounded-lg border border-border px-3 py-2",
@@ -5172,10 +5184,7 @@ function Select(props) {
             Icon,
             {
               name: "chevron-down",
-              className: cn(
-                "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
-                open && "rotate-180"
-              )
+              className: "size-4 shrink-0 text-muted-foreground"
             }
           )
         ]
@@ -5192,8 +5201,9 @@ function Select(props) {
           (_a2 = listRef.current) == null ? void 0 : _a2.focus();
         },
         className: cn(
+          menuPanelClass,
           "min-w-[var(--radix-popover-trigger-width)] max-w-80",
-          "z-50 rounded-lg border border-border bg-popover overflow-hidden",
+          "z-50 border border-border bg-popover overflow-hidden",
           "shadow-dropdown",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -5210,7 +5220,7 @@ function Select(props) {
             "aria-activedescendant": activeId,
             tabIndex: -1,
             onKeyDown: handleListKeyDown,
-            className: "p-1 flex flex-col max-h-96 overflow-y-auto outline-none [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300",
+            className: cn(menuListClass, "flex flex-col max-h-96 overflow-y-auto outline-none [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300"),
             children: groups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
               "div",
               {
@@ -5230,14 +5240,17 @@ function Select(props) {
                         id: optionIds.get(opt.value),
                         role: "option",
                         "aria-selected": isSelected,
-                        "data-active": isActive || void 0,
+                        "data-active": isActive && keyboardNavigation || void 0,
                         onClick: () => handleSelect(opt.value),
-                        onPointerMove: () => setActiveValue(opt.value),
+                        onPointerMove: () => {
+                          setKeyboardNavigation(false);
+                          setActiveValue(opt.value);
+                        },
                         className: cn(
-                          "flex w-full items-center justify-between rounded-sm px-2 py-1.5",
-                          "text-sm font-normal leading-5 tracking-tight",
+                          menuItemClass,
+                          "flex w-full items-center justify-between font-normal tracking-tight",
                           "cursor-pointer transition-colors outline-none",
-                          isSelected ? "bg-accent text-accent-foreground" : "text-popover-foreground",
+                          "text-popover-foreground",
                           "data-[active]:bg-accent data-[active]:text-accent-foreground",
                           "hover:bg-accent hover:text-accent-foreground"
                         ),
@@ -5839,7 +5852,7 @@ var Slider = React25.forwardRef(
                     visibleSet.has(i) ? "opacity-100" : "opacity-0"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "block rounded-md bg-primary px-2.5 py-1.5 text-xs font-normal leading-snug tracking-tight text-primary-foreground whitespace-nowrap", children: val }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "block min-h-7.5 rounded-xl border border-neutral-700 bg-neutral-800 px-2.5 py-1.5 text-xs font-normal leading-4 tracking-tight text-neutral-50 whitespace-nowrap shadow-dropdown", children: val }),
                     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "svg",
                       {
@@ -5855,7 +5868,7 @@ var Slider = React25.forwardRef(
                           "path",
                           {
                             d: "M9.29289 4.29289L5 0H15L10.7071 4.29289C10.3166 4.68342 9.68342 4.68342 9.29289 4.29289Z",
-                            className: "fill-primary"
+                            className: "fill-neutral-800"
                           }
                         )
                       }