@mondrianai/runyourai-design-system 0.0.31 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +14 -5
  2. package/dist/index.d.ts +14 -5
  3. package/dist/index.js +100 -76
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +100 -76
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles/tailwind-theme.css +2 -0
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -193,8 +193,8 @@ type DropdownMenuItemConfig = {
193
193
  /** radio 아이템의 선택값 / React key. 미지정 시 문자열 label 또는 index를 사용 */
194
194
  value?: string;
195
195
  /**
196
- * 현재 선택된 항목 강조. default 아이템에 selected 배경(bg-accent)을 적용한다.
197
- * (checkbox/radio는 자체 체크 상태로 강조되므로 무시된다)
196
+ * default 항목의 선택 상태. 지정하면 체크 영역을 확보하고 선택 시 체크만 표시한다.
197
+ * 고정 선택 배경은 없다. checkbox/radio는 자체 checked/value를 사용한다.
198
198
  */
199
199
  selected?: boolean;
200
200
  icon?: React$1.ReactNode;
@@ -506,17 +506,26 @@ interface LanguageItem {
506
506
  code: string;
507
507
  label: string;
508
508
  /** 국기 이모지 */
509
- flag: string;
509
+ flag?: string;
510
+ disabled?: boolean;
510
511
  }
511
512
  interface HeaderProps {
512
513
  logo?: React$1.ReactNode;
513
514
  brandName?: string;
515
+ /** 소비 앱의 메인 화면 주소. 생략하면 기존 비링크 브랜드 영역을 유지합니다. */
516
+ brandHref?: string;
517
+ /** SPA 라우터 사용 시 소비 앱에서 기본 이동을 처리할 수 있습니다. */
518
+ onBrandClick?: React$1.MouseEventHandler<HTMLAnchorElement>;
514
519
  navItems?: HeaderNavItem[];
515
520
  upgradeLabel?: string;
516
521
  onUpgrade?: () => void;
517
522
  userEmail?: string;
518
523
  userMenuSections?: UserMenuSection[];
524
+ /** 기본 사용자 메뉴 대신 표시할 기관·워크스페이스 선택 컨트롤 */
525
+ accountControl?: React$1.ReactNode;
519
526
  notifications?: NotificationItem[];
527
+ /** 알림이 없을 때 소비 앱이 제공하는 안내 */
528
+ notificationsEmptyContent?: React$1.ReactNode;
520
529
  onViewAllNotifications?: () => void;
521
530
  hasNotification?: boolean;
522
531
  languages?: LanguageItem[];
@@ -524,7 +533,7 @@ interface HeaderProps {
524
533
  onLanguageChange?: (code: string) => void;
525
534
  className?: string;
526
535
  }
527
- declare function Header({ logo, brandName, navItems, upgradeLabel, onUpgrade, userEmail, userMenuSections, notifications, onViewAllNotifications, hasNotification, languages, currentLanguage, onLanguageChange, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
536
+ declare function Header({ logo, brandName, brandHref, onBrandClick, navItems, upgradeLabel, onUpgrade, userEmail, userMenuSections, accountControl, notifications, notificationsEmptyContent, onViewAllNotifications, hasNotification, languages, currentLanguage, onLanguageChange, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
528
537
 
529
538
  type IconNode = [string, Record<string, string>, ...IconNode[]];
530
539
  declare const ICON_NODES: Record<string, IconNode[]>;
@@ -769,7 +778,7 @@ interface SegmentedControlProps<T extends string> {
769
778
  className?: string;
770
779
  }
771
780
  /**
772
- * 세그먼트 컨트롤(값/필터 선택) — Tabs `variant="pill"`과 동일 스타일.
781
+ * 세그먼트 컨트롤(값/필터 선택) — 결제 현황 기준의 공통 스타일.
773
782
  * 균등분할이 필요하면 `block`. 라벨이 칸보다 길면 말줄임되고, 그 경우에만 hover 시 툴팁으로 전체 표시.
774
783
  */
775
784
  declare function SegmentedControl<T extends string>({ value, onChange, items, block, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -193,8 +193,8 @@ type DropdownMenuItemConfig = {
193
193
  /** radio 아이템의 선택값 / React key. 미지정 시 문자열 label 또는 index를 사용 */
194
194
  value?: string;
195
195
  /**
196
- * 현재 선택된 항목 강조. default 아이템에 selected 배경(bg-accent)을 적용한다.
197
- * (checkbox/radio는 자체 체크 상태로 강조되므로 무시된다)
196
+ * default 항목의 선택 상태. 지정하면 체크 영역을 확보하고 선택 시 체크만 표시한다.
197
+ * 고정 선택 배경은 없다. checkbox/radio는 자체 checked/value를 사용한다.
198
198
  */
199
199
  selected?: boolean;
200
200
  icon?: React$1.ReactNode;
@@ -506,17 +506,26 @@ interface LanguageItem {
506
506
  code: string;
507
507
  label: string;
508
508
  /** 국기 이모지 */
509
- flag: string;
509
+ flag?: string;
510
+ disabled?: boolean;
510
511
  }
511
512
  interface HeaderProps {
512
513
  logo?: React$1.ReactNode;
513
514
  brandName?: string;
515
+ /** 소비 앱의 메인 화면 주소. 생략하면 기존 비링크 브랜드 영역을 유지합니다. */
516
+ brandHref?: string;
517
+ /** SPA 라우터 사용 시 소비 앱에서 기본 이동을 처리할 수 있습니다. */
518
+ onBrandClick?: React$1.MouseEventHandler<HTMLAnchorElement>;
514
519
  navItems?: HeaderNavItem[];
515
520
  upgradeLabel?: string;
516
521
  onUpgrade?: () => void;
517
522
  userEmail?: string;
518
523
  userMenuSections?: UserMenuSection[];
524
+ /** 기본 사용자 메뉴 대신 표시할 기관·워크스페이스 선택 컨트롤 */
525
+ accountControl?: React$1.ReactNode;
519
526
  notifications?: NotificationItem[];
527
+ /** 알림이 없을 때 소비 앱이 제공하는 안내 */
528
+ notificationsEmptyContent?: React$1.ReactNode;
520
529
  onViewAllNotifications?: () => void;
521
530
  hasNotification?: boolean;
522
531
  languages?: LanguageItem[];
@@ -524,7 +533,7 @@ interface HeaderProps {
524
533
  onLanguageChange?: (code: string) => void;
525
534
  className?: string;
526
535
  }
527
- declare function Header({ logo, brandName, navItems, upgradeLabel, onUpgrade, userEmail, userMenuSections, notifications, onViewAllNotifications, hasNotification, languages, currentLanguage, onLanguageChange, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
536
+ declare function Header({ logo, brandName, brandHref, onBrandClick, navItems, upgradeLabel, onUpgrade, userEmail, userMenuSections, accountControl, notifications, notificationsEmptyContent, onViewAllNotifications, hasNotification, languages, currentLanguage, onLanguageChange, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
528
537
 
529
538
  type IconNode = [string, Record<string, string>, ...IconNode[]];
530
539
  declare const ICON_NODES: Record<string, IconNode[]>;
@@ -769,7 +778,7 @@ interface SegmentedControlProps<T extends string> {
769
778
  className?: string;
770
779
  }
771
780
  /**
772
- * 세그먼트 컨트롤(값/필터 선택) — Tabs `variant="pill"`과 동일 스타일.
781
+ * 세그먼트 컨트롤(값/필터 선택) — 결제 현황 기준의 공통 스타일.
773
782
  * 균등분할이 필요하면 `block`. 라벨이 칸보다 길면 말줄임되고, 그 경우에만 hover 시 툴팁으로 전체 표시.
774
783
  */
775
784
  declare function SegmentedControl<T extends string>({ value, onChange, items, block, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -1489,7 +1489,7 @@ var TooltipContent = React7.forwardRef(
1489
1489
  sideOffset,
1490
1490
  className: cn(
1491
1491
  "z-50 w-max",
1492
- "bg-primary rounded-md px-2.5 py-1.5",
1492
+ "min-h-7.5 rounded-xl border border-neutral-700 bg-neutral-800 px-2.5 py-1.5 shadow-dropdown",
1493
1493
  "animate-in fade-in-0 zoom-in-95",
1494
1494
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
1495
1495
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -1498,7 +1498,7 @@ var TooltipContent = React7.forwardRef(
1498
1498
  ),
1499
1499
  style: __spreadValues({ maxWidth }, style)
1500
1500
  }, props), {
1501
- 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 })
1501
+ 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 })
1502
1502
  })
1503
1503
  ) });
1504
1504
  }
@@ -1558,10 +1558,16 @@ function TooltipWithIcon({
1558
1558
  ) });
1559
1559
  }
1560
1560
 
1561
+ // src/components/ui/menu-styles.ts
1562
+ var menuPanelClass = "rounded-xl";
1563
+ var menuListClass = "p-1";
1564
+ var menuItemClass = "min-h-8 rounded-md px-2 py-1.5 my-0 text-sm leading-5";
1565
+
1561
1566
  // src/components/ui/dropdown-menu.tsx
1562
1567
  var import_jsx_runtime13 = require("react/jsx-runtime");
1563
1568
  var baseItemClass = cn(
1564
- "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 my-0.5 text-sm outline-none",
1569
+ menuItemClass,
1570
+ "relative flex cursor-pointer select-none items-center gap-2 outline-none",
1565
1571
  "transition-colors duration-100",
1566
1572
  "focus:bg-accent focus:text-accent-foreground",
1567
1573
  "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
@@ -1573,14 +1579,15 @@ var destructiveItemClass = cn(
1573
1579
  '[&_svg:not([class*="text-"])]:text-destructive!'
1574
1580
  );
1575
1581
  var indentItemClass = cn(
1576
- "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",
1582
+ menuItemClass,
1583
+ "relative flex cursor-pointer select-none items-center gap-2 pl-8 outline-none",
1577
1584
  "transition-colors duration-100",
1578
1585
  "focus:bg-accent focus:text-accent-foreground",
1579
- "data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
1580
1586
  "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
1581
1587
  );
1582
1588
  var subTriggerClass = cn(
1583
- "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 my-0.5 text-sm outline-none",
1589
+ menuItemClass,
1590
+ "relative flex cursor-pointer select-none items-center gap-2 outline-none",
1584
1591
  "transition-colors duration-100",
1585
1592
  "focus:bg-accent focus:text-accent-foreground",
1586
1593
  "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -1589,9 +1596,11 @@ var subTriggerClass = cn(
1589
1596
  '[&_svg:not([class*="text-"])]:text-muted-foreground'
1590
1597
  );
1591
1598
  var contentClass = cn(
1599
+ menuPanelClass,
1600
+ menuListClass,
1592
1601
  "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-44",
1593
1602
  "origin-(--radix-dropdown-menu-content-transform-origin)",
1594
- "overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
1603
+ "overflow-x-hidden overflow-y-auto border bg-popover text-popover-foreground shadow-md",
1595
1604
  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
1596
1605
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
1597
1606
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -1658,10 +1667,7 @@ function renderItem(item, index) {
1658
1667
  onSelect: (e) => e.preventDefault(),
1659
1668
  className: indentItemClass,
1660
1669
  children: [
1661
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: [
1662
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.CheckIcon, { className: "size-4 text-foreground/20" }),
1663
- /* @__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" }) })
1664
- ] }),
1670
+ /* @__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" }) }) }),
1665
1671
  item.label
1666
1672
  ]
1667
1673
  }
@@ -1680,10 +1686,11 @@ function renderItem(item, index) {
1680
1686
  "data-selected": item.selected || void 0,
1681
1687
  className: cn(
1682
1688
  baseItemClass,
1683
- item.selected && "bg-accent text-accent-foreground",
1689
+ item.selected !== void 0 && "pl-8",
1684
1690
  item.variant === "destructive" && destructiveItemClass
1685
1691
  ),
1686
1692
  children: [
1693
+ 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" }) }),
1687
1694
  item.icon,
1688
1695
  item.label,
1689
1696
  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) {
1720
1727
  onSelect: (e) => e.preventDefault(),
1721
1728
  className: indentItemClass,
1722
1729
  children: [
1723
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: [
1724
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-2 rounded-full bg-foreground/20" }),
1725
- /* @__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" }) })
1726
- ] }),
1730
+ /* @__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" }) }) }),
1727
1731
  item.label
1728
1732
  ]
1729
1733
  }
@@ -2316,7 +2320,8 @@ function Combobox({
2316
2320
  sideOffset: 4,
2317
2321
  style: { width: "var(--radix-popover-trigger-width)" },
2318
2322
  className: cn(
2319
- "z-50 overflow-hidden rounded-md border border-border bg-popover",
2323
+ menuPanelClass,
2324
+ "z-50 overflow-hidden border border-border bg-popover",
2320
2325
  "shadow-dropdown",
2321
2326
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
2322
2327
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -2337,7 +2342,7 @@ function Combobox({
2337
2342
  }
2338
2343
  )
2339
2344
  ] }),
2340
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-1 flex flex-col overflow-y-auto", style: { maxHeight: 384 }, children: [
2345
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(menuListClass, "flex flex-col overflow-y-auto"), style: { maxHeight: 384 }, children: [
2341
2346
  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) => {
2342
2347
  const isSelected = opt.value === value;
2343
2348
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -2346,10 +2351,10 @@ function Combobox({
2346
2351
  type: "button",
2347
2352
  onClick: () => handleSelect(opt.value),
2348
2353
  className: cn(
2349
- "flex w-full items-center gap-2 rounded-sm px-2 py-1.5",
2350
- "text-sm font-normal leading-5 tracking-tight",
2354
+ menuItemClass,
2355
+ "flex w-full items-center gap-2 font-normal tracking-tight",
2351
2356
  "cursor-pointer transition-colors",
2352
- isSelected ? "bg-accent text-accent-foreground" : "text-popover-foreground hover:bg-accent hover:text-accent-foreground"
2357
+ "text-popover-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"
2353
2358
  ),
2354
2359
  children: [
2355
2360
  opt.icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 flex items-center", children: opt.icon }),
@@ -2368,7 +2373,7 @@ function Combobox({
2368
2373
  footer.onClick();
2369
2374
  setOpen(false);
2370
2375
  },
2371
- 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",
2376
+ 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"),
2372
2377
  children: [
2373
2378
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "plus", className: "size-4 text-muted-foreground" }),
2374
2379
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-1 min-w-0 truncate text-left", children: footer.label })
@@ -2935,7 +2940,7 @@ function FieldDivider({ className }) {
2935
2940
  var React14 = __toESM(require("react"));
2936
2941
  var import_radix_ui11 = require("radix-ui");
2937
2942
  var import_jsx_runtime23 = require("react/jsx-runtime");
2938
- var PANEL_CLS = "z-50 overflow-hidden rounded-md border border-border bg-popover shadow-dropdown animate-in fade-in-0 zoom-in-95 duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-150";
2943
+ var PANEL_CLS = menuPanelClass + " z-50 overflow-hidden border border-border bg-popover shadow-dropdown animate-in fade-in-0 zoom-in-95 duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-150";
2939
2944
  function DropdownSectionLabel({ children }) {
2940
2945
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-8 items-center px-2 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium tracking-tight text-popover-foreground", children }) });
2941
2946
  }
@@ -2948,7 +2953,8 @@ function DropdownMenuRow({
2948
2953
  className
2949
2954
  }) {
2950
2955
  const itemClassName = cn(
2951
- "flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 outline-none",
2956
+ menuItemClass,
2957
+ "flex cursor-pointer select-none items-center gap-2 outline-none",
2952
2958
  "text-sm font-normal tracking-tight",
2953
2959
  "transition-colors focus:bg-accent data-[highlighted]:bg-accent",
2954
2960
  variant === "destructive" ? "text-destructive" : "text-popover-foreground",
@@ -2966,12 +2972,16 @@ function DropdownMenuRow({
2966
2972
  function Header({
2967
2973
  logo,
2968
2974
  brandName = "",
2975
+ brandHref,
2976
+ onBrandClick,
2969
2977
  navItems = [],
2970
2978
  upgradeLabel = "",
2971
2979
  onUpgrade,
2972
2980
  userEmail = "",
2973
2981
  userMenuSections = [],
2982
+ accountControl,
2974
2983
  notifications = [],
2984
+ notificationsEmptyContent,
2975
2985
  onViewAllNotifications,
2976
2986
  hasNotification = false,
2977
2987
  languages = [],
@@ -2979,20 +2989,21 @@ function Header({
2979
2989
  onLanguageChange,
2980
2990
  className
2981
2991
  }) {
2992
+ const brand = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
2993
+ logo,
2994
+ brandName && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-lg font-semibold tracking-tight text-foreground whitespace-nowrap", children: brandName })
2995
+ ] });
2982
2996
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2983
2997
  "header",
2984
2998
  {
2985
2999
  className: cn(
2986
- "flex w-full items-center justify-between px-6 py-4 shrink-0",
3000
+ "flex w-full items-center justify-between p-3 shrink-0",
2987
3001
  "bg-background border-b border-border z-10",
2988
3002
  className
2989
3003
  ),
2990
3004
  children: [
2991
3005
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
2992
- (logo || brandName) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2.5 shrink-0", children: [
2993
- logo,
2994
- brandName && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xl font-bold tracking-tight text-foreground whitespace-nowrap", children: brandName })
2995
- ] }),
3006
+ (logo || brandName) && (brandHref ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: brandHref, onClick: onBrandClick, className: "flex shrink-0 items-center gap-2 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring", children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: brand })),
2996
3007
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { className: "flex items-center gap-2", "aria-label": "\uC8FC\uC694 \uBA54\uB274", children: navItems.map(
2997
3008
  (item) => {
2998
3009
  var _a;
@@ -3073,7 +3084,7 @@ function Header({
3073
3084
  ]
3074
3085
  }
3075
3086
  ),
3076
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_radix_ui11.DropdownMenu.Root, { children: [
3087
+ accountControl != null ? accountControl : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_radix_ui11.DropdownMenu.Root, { children: [
3077
3088
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3078
3089
  import_radix_ui11.DropdownMenu.Trigger,
3079
3090
  {
@@ -3168,26 +3179,29 @@ function Header({
3168
3179
  }
3169
3180
  )
3170
3181
  ] }),
3171
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col", children: notifications.map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React14.Fragment, { children: [
3172
- i > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("hr", { className: "w-full border-border" }) }),
3173
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3174
- "div",
3175
- {
3176
- className: "flex flex-col gap-4 rounded-md p-3 cursor-pointer transition-colors hover:bg-secondary",
3177
- children: [
3178
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between", children: [
3179
- n.badge && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex h-5.5 items-center rounded-lg bg-amber-50 px-2.5 py-0.5 text-xs font-medium tracking-tight text-amber-700 whitespace-nowrap", children: n.badge }),
3180
- n.date && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-normal tracking-tight text-muted-foreground", children: n.date })
3181
- ] }),
3182
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
3183
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-base font-medium tracking-tight text-foreground whitespace-nowrap", children: n.title }),
3184
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "line-clamp-2 text-sm font-normal tracking-tight text-muted-foreground", children: n.description })
3185
- ] })
3186
- ]
3187
- }
3188
- )
3189
- ] }, n.id)) }),
3190
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3182
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col", children: [
3183
+ notifications.length === 0 && notificationsEmptyContent,
3184
+ notifications.map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React14.Fragment, { children: [
3185
+ i > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("hr", { className: "w-full border-border" }) }),
3186
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3187
+ "div",
3188
+ {
3189
+ className: "flex flex-col gap-4 rounded-md p-3 cursor-pointer transition-colors hover:bg-secondary",
3190
+ children: [
3191
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between", children: [
3192
+ n.badge && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex h-5.5 items-center rounded-lg bg-amber-50 px-2.5 py-0.5 text-xs font-medium tracking-tight text-amber-700 whitespace-nowrap", children: n.badge }),
3193
+ n.date && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-normal tracking-tight text-muted-foreground", children: n.date })
3194
+ ] }),
3195
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
3196
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-base font-medium tracking-tight text-foreground whitespace-nowrap", children: n.title }),
3197
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "line-clamp-2 text-sm font-normal tracking-tight text-muted-foreground", children: n.description })
3198
+ ] })
3199
+ ]
3200
+ }
3201
+ )
3202
+ ] }, n.id))
3203
+ ] }),
3204
+ onViewAllNotifications && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3191
3205
  "button",
3192
3206
  {
3193
3207
  type: "button",
@@ -3231,18 +3245,20 @@ function Header({
3231
3245
  style: { maxHeight: "416px" },
3232
3246
  children: [
3233
3247
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_radix_ui11.DropdownMenu.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropdownSectionLabel, { children: "\uC5B8\uC5B4" }) }),
3234
- languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3235
- import_radix_ui11.DropdownMenu.Item,
3248
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_radix_ui11.DropdownMenu.RadioGroup, { value: currentLanguage, onValueChange: onLanguageChange, children: languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3249
+ import_radix_ui11.DropdownMenu.RadioItem,
3236
3250
  {
3237
- onSelect: () => onLanguageChange == null ? void 0 : onLanguageChange(lang.code),
3251
+ value: lang.code,
3252
+ disabled: lang.disabled,
3238
3253
  className: cn(
3239
- "flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 outline-none",
3254
+ menuItemClass,
3255
+ "flex cursor-pointer select-none items-center gap-2 outline-none",
3240
3256
  "text-sm font-normal tracking-tight text-popover-foreground",
3241
- "transition-colors focus:bg-accent data-[highlighted]:bg-accent",
3242
- lang.code === currentLanguage && "bg-accent/50"
3257
+ "transition-colors focus:bg-accent data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
3243
3258
  ),
3244
3259
  children: [
3245
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3260
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: lang.code === currentLanguage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check", className: "size-4 text-foreground" }) }),
3261
+ lang.flag && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3246
3262
  "span",
3247
3263
  {
3248
3264
  className: "flex size-4 shrink-0 items-center justify-center overflow-hidden text-sm leading-none",
@@ -3254,7 +3270,7 @@ function Header({
3254
3270
  ]
3255
3271
  },
3256
3272
  lang.code
3257
- ))
3273
+ )) })
3258
3274
  ]
3259
3275
  }
3260
3276
  ) })
@@ -4820,12 +4836,13 @@ function Segment({
4820
4836
  {
4821
4837
  ref,
4822
4838
  type: "button",
4839
+ "aria-pressed": isActive,
4823
4840
  onClick,
4824
4841
  className: cn(
4825
- "cursor-pointer truncate rounded-md px-3 py-1.5 text-sm font-medium tracking-tight transition-all",
4842
+ "h-7 cursor-pointer truncate rounded-md px-4 py-1 text-sm leading-5 tracking-tight transition-colors",
4826
4843
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
4827
4844
  block && "min-w-0 flex-1",
4828
- isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
4845
+ isActive ? "bg-background font-medium text-foreground shadow-segmented" : "font-normal text-muted-foreground hover:text-foreground"
4829
4846
  ),
4830
4847
  children: item.label
4831
4848
  }
@@ -4842,7 +4859,7 @@ function SegmentedControl({
4842
4859
  "div",
4843
4860
  {
4844
4861
  className: cn(
4845
- "items-center gap-1 rounded-lg bg-muted p-1",
4862
+ "h-8.5 items-center gap-0 rounded-lg bg-secondary p-0.75",
4846
4863
  block ? "flex w-full" : "inline-flex",
4847
4864
  className
4848
4865
  ),
@@ -5052,6 +5069,7 @@ function Select(props) {
5052
5069
  return map;
5053
5070
  }, [options, baseId]);
5054
5071
  const [activeValue, setActiveValue] = React23.useState(null);
5072
+ const [keyboardNavigation, setKeyboardNavigation] = React23.useState(false);
5055
5073
  const activeIndex = activeValue ? options.findIndex((o) => o.value === activeValue) : -1;
5056
5074
  const activeId = activeValue && optionIds.has(activeValue) ? optionIds.get(activeValue) : void 0;
5057
5075
  React23.useEffect(() => {
@@ -5098,6 +5116,9 @@ function Select(props) {
5098
5116
  function handleListKeyDown(e) {
5099
5117
  const count = options.length;
5100
5118
  if (count === 0) return;
5119
+ if (["ArrowDown", "ArrowUp", "Home", "End", "Enter", " "].includes(e.key) || e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
5120
+ setKeyboardNavigation(true);
5121
+ }
5101
5122
  switch (e.key) {
5102
5123
  case "ArrowDown":
5103
5124
  e.preventDefault();
@@ -5129,6 +5150,7 @@ function Select(props) {
5129
5150
  }
5130
5151
  function handleTriggerKeyDown(e) {
5131
5152
  if (disabled || open) return;
5153
+ if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) setKeyboardNavigation(true);
5132
5154
  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
5133
5155
  e.preventDefault();
5134
5156
  setOpen(true);
@@ -5144,6 +5166,7 @@ function Select(props) {
5144
5166
  "aria-expanded": open,
5145
5167
  "aria-controls": open ? listboxId : void 0,
5146
5168
  onKeyDown: handleTriggerKeyDown,
5169
+ onPointerDown: () => setKeyboardNavigation(false),
5147
5170
  disabled,
5148
5171
  className: cn(
5149
5172
  "flex h-9 w-full items-center justify-between rounded-lg border border-border px-3 py-2",
@@ -5172,10 +5195,7 @@ function Select(props) {
5172
5195
  Icon,
5173
5196
  {
5174
5197
  name: "chevron-down",
5175
- className: cn(
5176
- "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
5177
- open && "rotate-180"
5178
- )
5198
+ className: "size-4 shrink-0 text-muted-foreground"
5179
5199
  }
5180
5200
  )
5181
5201
  ]
@@ -5192,8 +5212,9 @@ function Select(props) {
5192
5212
  (_a2 = listRef.current) == null ? void 0 : _a2.focus();
5193
5213
  },
5194
5214
  className: cn(
5215
+ menuPanelClass,
5195
5216
  "min-w-[var(--radix-popover-trigger-width)] max-w-80",
5196
- "z-50 rounded-lg border border-border bg-popover overflow-hidden",
5217
+ "z-50 border border-border bg-popover overflow-hidden",
5197
5218
  "shadow-dropdown",
5198
5219
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
5199
5220
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -5210,7 +5231,7 @@ function Select(props) {
5210
5231
  "aria-activedescendant": activeId,
5211
5232
  tabIndex: -1,
5212
5233
  onKeyDown: handleListKeyDown,
5213
- 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",
5234
+ 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"),
5214
5235
  children: groups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
5215
5236
  "div",
5216
5237
  {
@@ -5230,14 +5251,17 @@ function Select(props) {
5230
5251
  id: optionIds.get(opt.value),
5231
5252
  role: "option",
5232
5253
  "aria-selected": isSelected,
5233
- "data-active": isActive || void 0,
5254
+ "data-active": isActive && keyboardNavigation || void 0,
5234
5255
  onClick: () => handleSelect(opt.value),
5235
- onPointerMove: () => setActiveValue(opt.value),
5256
+ onPointerMove: () => {
5257
+ setKeyboardNavigation(false);
5258
+ setActiveValue(opt.value);
5259
+ },
5236
5260
  className: cn(
5237
- "flex w-full items-center justify-between rounded-sm px-2 py-1.5",
5238
- "text-sm font-normal leading-5 tracking-tight",
5261
+ menuItemClass,
5262
+ "flex w-full items-center justify-between font-normal tracking-tight",
5239
5263
  "cursor-pointer transition-colors outline-none",
5240
- isSelected ? "bg-accent text-accent-foreground" : "text-popover-foreground",
5264
+ "text-popover-foreground",
5241
5265
  "data-[active]:bg-accent data-[active]:text-accent-foreground",
5242
5266
  "hover:bg-accent hover:text-accent-foreground"
5243
5267
  ),
@@ -5839,7 +5863,7 @@ var Slider = React25.forwardRef(
5839
5863
  visibleSet.has(i) ? "opacity-100" : "opacity-0"
5840
5864
  ),
5841
5865
  children: [
5842
- /* @__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 }),
5866
+ /* @__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 }),
5843
5867
  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
5844
5868
  "svg",
5845
5869
  {
@@ -5855,7 +5879,7 @@ var Slider = React25.forwardRef(
5855
5879
  "path",
5856
5880
  {
5857
5881
  d: "M9.29289 4.29289L5 0H15L10.7071 4.29289C10.3166 4.68342 9.68342 4.68342 9.29289 4.29289Z",
5858
- className: "fill-primary"
5882
+ className: "fill-neutral-800"
5859
5883
  }
5860
5884
  )
5861
5885
  }
@@ -7400,10 +7424,10 @@ function RyaiDsProvider({ children }) {
7400
7424
  // src/components/icons/brand/ryai-logo.tsx
7401
7425
  var import_jsx_runtime56 = require("react/jsx-runtime");
7402
7426
  function RyaiLogoIcon() {
7403
- return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "relative size-6 overflow-clip shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
7427
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "relative size-5 overflow-clip shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
7404
7428
  "svg",
7405
7429
  {
7406
- className: "-translate-x-1/2 absolute left-[calc(50%+0.5px)] top-[12.5%] bottom-[12.5%] w-3.75",
7430
+ className: "-translate-x-1/2 absolute left-[calc(50%+0.5px)] top-[12.5%] bottom-[12.5%] w-5/8",
7407
7431
  viewBox: "0 0 15 18",
7408
7432
  fill: "none",
7409
7433
  preserveAspectRatio: "none",