@mondrianai/runyourai-design-system 0.0.32 → 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 (7) hide show
  1. package/dist/index.d.mts +11 -2
  2. package/dist/index.d.ts +11 -2
  3. package/dist/index.js +49 -38
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +49 -38
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -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[]>;
package/dist/index.d.ts CHANGED
@@ -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[]>;
package/dist/index.js CHANGED
@@ -2940,7 +2940,7 @@ function FieldDivider({ className }) {
2940
2940
  var React14 = __toESM(require("react"));
2941
2941
  var import_radix_ui11 = require("radix-ui");
2942
2942
  var import_jsx_runtime23 = require("react/jsx-runtime");
2943
- 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";
2944
2944
  function DropdownSectionLabel({ children }) {
2945
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 }) });
2946
2946
  }
@@ -2953,7 +2953,8 @@ function DropdownMenuRow({
2953
2953
  className
2954
2954
  }) {
2955
2955
  const itemClassName = cn(
2956
- "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",
2957
2958
  "text-sm font-normal tracking-tight",
2958
2959
  "transition-colors focus:bg-accent data-[highlighted]:bg-accent",
2959
2960
  variant === "destructive" ? "text-destructive" : "text-popover-foreground",
@@ -2971,12 +2972,16 @@ function DropdownMenuRow({
2971
2972
  function Header({
2972
2973
  logo,
2973
2974
  brandName = "",
2975
+ brandHref,
2976
+ onBrandClick,
2974
2977
  navItems = [],
2975
2978
  upgradeLabel = "",
2976
2979
  onUpgrade,
2977
2980
  userEmail = "",
2978
2981
  userMenuSections = [],
2982
+ accountControl,
2979
2983
  notifications = [],
2984
+ notificationsEmptyContent,
2980
2985
  onViewAllNotifications,
2981
2986
  hasNotification = false,
2982
2987
  languages = [],
@@ -2984,20 +2989,21 @@ function Header({
2984
2989
  onLanguageChange,
2985
2990
  className
2986
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
+ ] });
2987
2996
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2988
2997
  "header",
2989
2998
  {
2990
2999
  className: cn(
2991
- "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",
2992
3001
  "bg-background border-b border-border z-10",
2993
3002
  className
2994
3003
  ),
2995
3004
  children: [
2996
3005
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
2997
- (logo || brandName) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2.5 shrink-0", children: [
2998
- logo,
2999
- brandName && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-xl font-bold tracking-tight text-foreground whitespace-nowrap", children: brandName })
3000
- ] }),
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 })),
3001
3007
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { className: "flex items-center gap-2", "aria-label": "\uC8FC\uC694 \uBA54\uB274", children: navItems.map(
3002
3008
  (item) => {
3003
3009
  var _a;
@@ -3078,7 +3084,7 @@ function Header({
3078
3084
  ]
3079
3085
  }
3080
3086
  ),
3081
- /* @__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: [
3082
3088
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3083
3089
  import_radix_ui11.DropdownMenu.Trigger,
3084
3090
  {
@@ -3173,26 +3179,29 @@ function Header({
3173
3179
  }
3174
3180
  )
3175
3181
  ] }),
3176
- /* @__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: [
3177
- 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" }) }),
3178
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3179
- "div",
3180
- {
3181
- className: "flex flex-col gap-4 rounded-md p-3 cursor-pointer transition-colors hover:bg-secondary",
3182
- children: [
3183
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between", children: [
3184
- 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 }),
3185
- n.date && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-normal tracking-tight text-muted-foreground", children: n.date })
3186
- ] }),
3187
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
3188
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-base font-medium tracking-tight text-foreground whitespace-nowrap", children: n.title }),
3189
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "line-clamp-2 text-sm font-normal tracking-tight text-muted-foreground", children: n.description })
3190
- ] })
3191
- ]
3192
- }
3193
- )
3194
- ] }, n.id)) }),
3195
- /* @__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)(
3196
3205
  "button",
3197
3206
  {
3198
3207
  type: "button",
@@ -3236,18 +3245,20 @@ function Header({
3236
3245
  style: { maxHeight: "416px" },
3237
3246
  children: [
3238
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" }) }),
3239
- languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3240
- 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,
3241
3250
  {
3242
- onSelect: () => onLanguageChange == null ? void 0 : onLanguageChange(lang.code),
3251
+ value: lang.code,
3252
+ disabled: lang.disabled,
3243
3253
  className: cn(
3244
- "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",
3245
3256
  "text-sm font-normal tracking-tight text-popover-foreground",
3246
- "transition-colors focus:bg-accent data-[highlighted]:bg-accent",
3247
- 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"
3248
3258
  ),
3249
3259
  children: [
3250
- /* @__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)(
3251
3262
  "span",
3252
3263
  {
3253
3264
  className: "flex size-4 shrink-0 items-center justify-center overflow-hidden text-sm leading-none",
@@ -3259,7 +3270,7 @@ function Header({
3259
3270
  ]
3260
3271
  },
3261
3272
  lang.code
3262
- ))
3273
+ )) })
3263
3274
  ]
3264
3275
  }
3265
3276
  ) })
@@ -7413,10 +7424,10 @@ function RyaiDsProvider({ children }) {
7413
7424
  // src/components/icons/brand/ryai-logo.tsx
7414
7425
  var import_jsx_runtime56 = require("react/jsx-runtime");
7415
7426
  function RyaiLogoIcon() {
7416
- 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)(
7417
7428
  "svg",
7418
7429
  {
7419
- 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",
7420
7431
  viewBox: "0 0 15 18",
7421
7432
  fill: "none",
7422
7433
  preserveAspectRatio: "none",