@stn-uiux/pub-ui-react 0.1.68 → 0.1.69

package/dist/index.d.ts

@@ -1493,12 +1493,22 @@ type StnCardProps = StnWithoutStyle<HTMLAttributes<HTMLDivElement>> & {
     padding?: StnCardPadding;
     /** 마우스 호버 및 클릭 인터랙션 활성화 여부 @default false */
     interactive?: boolean;
+    /** 너비 100% 채움 여부 @default false */
+    fullWidth?: boolean;
+    /** 높이 100% 채움 여부 @default false */
+    fullHeight?: boolean;
     className?: string;
 };
+type StnCardTitleSize = 'sm' | 'md' | 'lg';
+type StnCardTitleWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 type StnCardHeaderProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLDivElement>, 'title'>> & {
     children?: ReactNode;
     /** 간편 타이틀 전달용 */
     title?: ReactNode;
+    /** 타이틀 크기 ('sm': 14px, 'md': 16px 기본, 'lg': 18px) @default 'md' */
+    titleSize?: StnCardTitleSize;
+    /** 타이틀 굵기 ('regular': 400, 'medium': 500, 'semibold': 600 기본, 'bold': 700) @default 'semibold' */
+    titleWeight?: StnCardTitleWeight;
     /** 우측 액션 버튼 등 추가 요소 */
     extra?: ReactNode;
     className?: string;
@@ -1511,7 +1521,7 @@ type StnCardFooterProps = StnWithoutStyle<HTMLAttributes<HTMLDivElement>> & {
     children?: ReactNode;
     className?: string;
 };
-declare function StnCardHeader({ children, title, extra, className, ...rest }: StnCardHeaderProps): react_jsx_runtime.JSX.Element;
+declare function StnCardHeader({ children, title, titleSize, titleWeight, extra, className, ...rest }: StnCardHeaderProps): react_jsx_runtime.JSX.Element;
 declare function StnCardBody({ children, className, ...rest }: StnCardBodyProps): react_jsx_runtime.JSX.Element;
 declare function StnCardFooter({ children, className, ...rest }: StnCardFooterProps): react_jsx_runtime.JSX.Element;
 interface StnCardComponent extends React.ForwardRefExoticComponent<StnCardProps & React.RefAttributes<HTMLDivElement>> {
@@ -2760,6 +2770,8 @@ declare function StnTopologyNodePreview({ width, height, size, showLabel, showSt
 type StnWidgetBackground = boolean | StnWidgetBackgroundMode;
 type StnWidgetStatus = 'default' | 'critical' | 'major' | 'minor' | 'warning';
 type StnWidgetPadding = 'default' | 'compact' | 'none';
+type StnWidgetTitleSize = 'sm' | 'md' | 'lg';
+type StnWidgetTitleWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 type StnWidgetProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> & {
     className?: string;
     /** Pub 위젯 셸 — card | fault-panel | board | board-item | canvas (맵/토폴로지 마운트 셸) */
@@ -2783,6 +2795,10 @@ type StnWidgetProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'
     /** 위젯 종류 id (sample PNG 파일명 · data-stn-widget-kind) */
     kind?: string;
     title?: ReactNode;
+    /** 타이틀 크기 ('sm': 14px, 'md': 16px 기본, 'lg': 18px) @default 'md' */
+    titleSize?: StnWidgetTitleSize;
+    /** 타이틀 굵기 ('regular': 400, 'medium': 500, 'semibold': 600 기본, 'bold': 700) @default 'semibold' */
+    titleWeight?: StnWidgetTitleWeight;
     /** 타이틀 우측에 붙는 뱃지 슬롯 (예: <StnStatus.Severity />) */
     badge?: ReactNode;
     titleActions?: ReactNode;
@@ -2841,13 +2857,17 @@ declare function StnWidgetPeriodPager({ label, className, onPrev, onNext, prevLa
     prevLabel?: string;
     nextLabel?: string;
 } & HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function StnWidgetRoot({ shell: shellProp, variant, appearance, background, status, isCritical, kind, title, badge, titleActions, showHeaderIcon, headerIconName, headerIcon, periodLabel, periodActions, children, className, contentClassName, padding, noPadding, loading, empty, emptyMessage, footer, banner, interactive, docHover, fullWidth, fullHeight, wrapActions, style, ...rest }: StnWidgetProps): react_jsx_runtime.JSX.Element;
+declare function StnWidgetRoot({ shell: shellProp, variant, appearance, background, status, isCritical, kind, title, titleSize, titleWeight, badge, titleActions, showHeaderIcon, headerIconName, headerIcon, periodLabel, periodActions, children, className, contentClassName, padding, noPadding, loading, empty, emptyMessage, footer, banner, interactive, docHover, fullWidth, fullHeight, wrapActions, style, ...rest }: StnWidgetProps): react_jsx_runtime.JSX.Element;
 type StnWidgetHeaderProps = HTMLAttributes<HTMLDivElement> & {
     /** 헤더 우측 컨트롤이 많을 때 아랫줄로 개행(2행 구조) 허용 여부 */
     wrap?: boolean;
 };
 declare function StnWidgetHeader({ className, wrap, children, ...rest }: StnWidgetHeaderProps): react_jsx_runtime.JSX.Element;
-declare function StnWidgetTitle({ className, children, title, ...rest }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+type StnWidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+    size?: StnWidgetTitleSize;
+    weight?: StnWidgetTitleWeight;
+};
+declare function StnWidgetTitle({ className, children, title, size, weight, ...rest }: StnWidgetTitleProps): react_jsx_runtime.JSX.Element;
 declare function StnWidgetActions({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 type StnWidgetBodyProps = HTMLAttributes<HTMLDivElement> & {
     /** 본문 내부 여백 규격 — 기본 12px, compact 8px, none 0px */

package/dist/index.js

@@ -2806,9 +2806,17 @@ var StnTree = forwardRef14(function StnTree2({
 // src/components/StnCard.tsx
 import { forwardRef as forwardRef15 } from "react";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
-function StnCardHeader({ children, title, extra, className, ...rest }) {
+function StnCardHeader({
+  children,
+  title,
+  titleSize = "md",
+  titleWeight = "semibold",
+  extra,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsxs14("div", { className: cn("stn-card__header", className), ...rest, children: [
-    title ? /* @__PURE__ */ jsx20("div", { className: "stn-card__header-title", children: title }) : null,
+    title ? /* @__PURE__ */ jsx20("div", { className: cn("stn-card__header-title", titleSize, titleWeight), children: title }) : null,
     children,
     extra ? /* @__PURE__ */ jsx20("div", { className: "stn-card__header-extra", children: extra }) : null
   ] });
@@ -2825,6 +2833,8 @@ var StnCard = forwardRef15(function StnCard2({
   radius = "md",
   padding = "md",
   interactive = false,
+  fullWidth = false,
+  fullHeight = false,
   className,
   role,
   tabIndex,
@@ -2843,6 +2853,8 @@ var StnCard = forwardRef15(function StnCard2({
         `radius-${radius}`,
         `pad-${padding}`,
         isClickable && "interactive",
+        fullWidth && "is-full-width",
+        fullHeight && "is-full-height",
         className
       ),
       ...rest,
@@ -3224,7 +3236,7 @@ function StnChip(props) {
   const resolvedShape = rawShape === "rounded" || rawShape === "square" ? "square" : rawShape;
   const isOutline = variant === "outline" || variant === "outlined" || variant === "border";
   const isSubtle = bgOpacity === 50 || bgOpacity === "50" || bgOpacity === "50%" || bgOpacity === 0.5 || variant === "subtle" || variant === "soft" || variant === "tinted" || variant === "contained-50" || variant === "filled-50";
-  const variantClass7 = isOutline ? "outline" : isSubtle ? "subtle contained-50 bg-50" : "filled";
+  const variantClass7 = isOutline ? "outline" : isSubtle ? "soft" : "filled";
   const resolvedColor = color ?? grade;
   let content = children ?? label;
   if (!content && grade && STN_GRADE_SOURCE[grade]) {
@@ -3245,8 +3257,8 @@ function StnChip(props) {
       onClick?.(e);
     }
   };
-  const iconElement = icon ? /* @__PURE__ */ jsx26("span", { className: "stn-chip__icon", children: icon }) : null;
-  const contentElement = /* @__PURE__ */ jsx26("span", { className: "stn-chip__label", children: content });
+  const iconElement = icon ? /* @__PURE__ */ jsx26("span", { className: "stn-chip__icon", children: icon }, "icon") : null;
+  const contentElement = /* @__PURE__ */ jsx26("span", { className: "stn-chip__label", children: content }, "content");
   const deleteElement = onDelete ? /* @__PURE__ */ jsx26(
     "button",
     {
@@ -3258,7 +3270,8 @@ function StnChip(props) {
         onDelete(e);
       },
       children: deleteIcon ?? /* @__PURE__ */ jsx26(DefaultDeleteIcon, {})
-    }
+    },
+    "delete"
   ) : null;
   const elements = [];
   if (deleteElement && deleteIconPosition === "left") {
@@ -3742,6 +3755,7 @@ function variantClass(variant = "outline") {
   if (variant === "standard") return "standard";
   if (variant === "filled") return "filled";
   if (variant === "transparent") return "transparent";
+  if (variant === "translucent") return "translucent";
   return "outline";
 }
 function useControllable(controlled, defaultValue, onChange) {
@@ -5345,6 +5359,12 @@ function StnLayer0Background({
     if (variant === "dashboard") {
       src = src ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.dashboard;
       srcDark = srcDark ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.dashboardDark;
+    } else if (variant === "infomap") {
+      src = src ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.infomap;
+      srcDark = srcDark ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.infomapDark;
+    } else if (variant === "infomap-none") {
+      src = src ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.infomapNone;
+      srcDark = srcDark ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.infomapNoneDark;
     } else if (variant === "showroom-a") {
       src = src ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.showroomA;
       srcDark = srcDark ?? STN_LAYER0_BACKGROUND_DEMO_IMAGES.showroomADark;
@@ -5379,7 +5399,15 @@ function StnLayer0Background({
               className: cn("stn-layer0-bg__img", paired && "light"),
               src,
               alt,
-              decoding: "async"
+              decoding: "async",
+              onError: (e) => {
+                if (src && src.startsWith("http") && src.includes("/images/layer0/")) {
+                  const fallback = src.substring(src.indexOf("/images/layer0/"));
+                  if (typeof window !== "undefined" && e.currentTarget.src !== window.location.origin + fallback) {
+                    e.currentTarget.src = fallback;
+                  }
+                }
+              }
             }
           ) : null,
           srcDark ? /* @__PURE__ */ jsx43(
@@ -5388,7 +5416,15 @@ function StnLayer0Background({
               className: cn("stn-layer0-bg__img", paired ? "dark" : void 0),
               src: srcDark,
               alt,
-              decoding: "async"
+              decoding: "async",
+              onError: (e) => {
+                if (srcDark && srcDark.startsWith("http") && srcDark.includes("/images/layer0/")) {
+                  const fallback = srcDark.substring(srcDark.indexOf("/images/layer0/"));
+                  if (typeof window !== "undefined" && e.currentTarget.src !== window.location.origin + fallback) {
+                    e.currentTarget.src = fallback;
+                  }
+                }
+              }
             }
           ) : null,
           overlay != null && overlay > 0 ? /* @__PURE__ */ jsx43("div", { className: "stn-layer0-bg__overlay", "aria-hidden": "true" }) : null,
@@ -6531,6 +6567,8 @@ function StnWidgetPeriodPager({
 function StnWidgetHeaderInner({
   appearance,
   title,
+  titleSize = "md",
+  titleWeight = "semibold",
   badge,
   titleActions,
   periodLabel,
@@ -6540,12 +6578,17 @@ function StnWidgetHeaderInner({
   headerIcon,
   wrapActions = false
 }) {
+  const hasStart = showHeaderIcon || title != null || badge != null;
+  const hasEnd = titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "";
+  if (!hasStart && !hasEnd) {
+    return null;
+  }
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
   return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
     /* @__PURE__ */ jsxs40("div", { className: "stn-widget__head-start", children: [
       showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx49(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx49(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
       title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs40("div", { className: "stn-widget__title-wrap", children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: "stn-widget__title", title, children: title }) : null,
+        typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
         badge
       ] }) : /* @__PURE__ */ jsxs40(Fragment5, { children: [
         title,
@@ -6564,6 +6607,8 @@ function StnWidgetRoot({
   isCritical = false,
   kind,
   title,
+  titleSize = "md",
+  titleWeight = "semibold",
   badge,
   titleActions,
   showHeaderIcon,
@@ -6596,7 +6641,8 @@ function StnWidgetRoot({
   const defaultBg = isCanvas ? false : true;
   const bgMode = resolveStnWidgetBackground(background ?? defaultBg);
   const pubShell = SHELL_PUB_CLASS[shell];
-  const resolvedShowIcon = showHeaderIcon ?? (isFigmaShell && !isCanvas);
+  const hasHeaderContent = title != null || badge != null || titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "";
+  const resolvedShowIcon = showHeaderIcon ?? (isFigmaShell && !isCanvas && hasHeaderContent);
   const resolvedCritical = isCritical || status === "critical";
   const emptyText = typeof empty === "string" ? empty : emptyMessage;
   const isEmptyState = Boolean(empty);
@@ -6640,6 +6686,8 @@ function StnWidgetRoot({
     {
       appearance,
       title,
+      titleSize,
+      titleWeight,
       badge,
       titleActions,
       periodLabel,
@@ -6651,7 +6699,7 @@ function StnWidgetRoot({
     }
   ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
     /* @__PURE__ */ jsxs40("div", { className: "stn-widget__head-start", children: [
-      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: "stn-widget__title", title, children: title }) : title : null,
+      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
       badge
     ] }),
     titleActions ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head-end", children: titleActions }) : null
@@ -6685,9 +6733,16 @@ function StnWidgetHeader({ className, wrap = false, children, ...rest }) {
   return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetHeader, "header");
-function StnWidgetTitle({ className, children, title, ...rest }) {
+function StnWidgetTitle({
+  className,
+  children,
+  title,
+  size = "md",
+  weight = "semibold",
+  ...rest
+}) {
   const titleAttr = title ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", className), title: titleAttr, ...rest, children });
+  return /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
 }
 function StnWidgetActions({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head-end", className), ...rest, children });