sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/components/SGnb/gnb.config.d.ts

@@ -0,0 +1,87 @@
+import type { SIconName } from '../SIcon';
+import type { STagColor } from '../STag';
+/** 메뉴 스타일: box = 라운드/좁은 들여쓰기, belt = 풀폭 행/넓은 들여쓰기 */
+export type SGnbType = 'box' | 'belt';
+/** 상단바 구조: fix = GNB 폭에 고정, full = 레이아웃 전폭 */
+export type SGnbHeader = 'fix' | 'full';
+/** 색상(테마): light / dark */
+export type SGnbColor = 'light' | 'dark';
+/** GNB 메뉴 아이템 (재귀 트리). depth1 → depth2 → depth3. */
+export interface SGnbMenuItem {
+    /** 표시 텍스트 */
+    label: string;
+    /** 고유 식별값 (선택 상태 비교 기준) */
+    value: string;
+    /** depth1 전용 아이콘명 */
+    icon?: SIconName;
+    /** 우측 Tag 뱃지 텍스트 */
+    tag?: string;
+    /** 뱃지 색. 미지정 시 blue. */
+    tagColor?: STagColor;
+    /** 비활성 여부 */
+    disabled?: boolean;
+    /** 하위 아이템 (있으면 펼침/접힘 대상) */
+    children?: SGnbMenuItem[];
+}
+/**
+ * 상단바(header 축). fix → gnbBelt-top-* 토큰, full → gnbBox-* 토큰.
+ * 배치까지 이 축이 정한다 — fix 는 GNB 컬럼 안, full 은 레이아웃 전폭.
+ */
+export declare const GNB_HEADER: Record<SGnbHeader, {
+    topHeight: string;
+    topPaddingX: string;
+    topGap: string;
+    logoHeight: string;
+}>;
+/** 메뉴(type 축). box → --cmp-gnbBox-*, belt → --cmp-gnbBelt-* */
+export declare const GNB_MENU: Record<SGnbType, {
+    bodyPaddingY: string;
+    itemMarginX: string;
+    itemPaddingY: string;
+    itemPaddingRight: string;
+    itemGap: string;
+    itemRadius: string;
+    itemArrow: string;
+    depth1PaddingLeft: string;
+    depth2PaddingLeft: string;
+    depth3PaddingLeft: string;
+    depth1Icon: string;
+    depth1FontSize: number;
+    depth1LineHeight: number;
+    depth1FontWeight: number;
+    itemFontSize: number;
+    itemLineHeight: number;
+}>;
+/**
+ * 색상(color 축). light → --cmp-light-* 색, dark → --cmp-dark-* 색 (gnb colortype 토큰)
+ * 상단바 아이콘 색(--cmp-*-top-icon)은 SGhostButton 이 자체 intent 토큰으로 칠한다:
+ * light → --cmp-ghostButton-default-content, dark → --cmp-ghostButton-inverse-content (값 동일).
+ */
+export declare const GNB_COLORS: Record<SGnbColor, {
+    panelBg: string;
+    topBorder: string;
+    itemBgDefault: string;
+    itemBgHover: string;
+    itemBgSelected: string;
+    itemColorDefault: string;
+    itemColorHover: string;
+    itemColorActive: string;
+    itemChevron: string;
+}>;
+/** 축과 무관한 공통 레이아웃. */
+export declare const GNB_COMMON: {
+    /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
+    foldWidth: string;
+    /**
+     * 상단바 아이콘 버튼 사이 간격. fix 레일(세로 스택)의 gap·상하 여백에 쓴다.
+     * 레일 전용 여백 토큰이 따로 없어 같은 값(8px)인 이 토큰으로 재해석했다.
+     */
+    buttonGap: string;
+};
+/**
+ * 메뉴 고정 폭. 두 header 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
+ * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
+ */
+export declare const GNB_MENU_WIDTH = 240;
+/** value 로 선택된 아이템의 조상 value 목록(자기 자신 제외)을 반환 → 자동 펼침용 */
+export declare function findGnbAncestors(items: SGnbMenuItem[], value: string): string[];

package/dist/components/SGnb/index.d.ts

@@ -0,0 +1,2 @@
+export { SGnb, type SGnbProps } from './SGnb';
+export { GNB_HEADER, GNB_MENU, GNB_COLORS, GNB_COMMON, GNB_MENU_WIDTH, findGnbAncestors, type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem, } from './gnb.config';

package/dist/components/SGuide/SGuide.cjs

@@ -2993,9 +2993,12 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -3018,6 +3021,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -3025,6 +3030,7 @@ function SGhostButton({
       disabled,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
       tabIndex: disabled ? -1 : void 0,
       onClick: (e) => {
         if (disabled) {
@@ -3058,13 +3064,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxRuntime.jsxs(RPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RPopover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,