sellmate-design-system-react 9.0.0-beta.71 → 9.0.0-beta.73

package/dist/components/SLogo/SLogo.d.ts

@@ -1,20 +1,40 @@
 import { type CSSProperties } from 'react';
 import { type SColor } from '../../lib/color';
-import { type SLogoName } from './logo.config';
+import { type SLogoDirection, type SLogoMode, type SLogoName } from './logo.config';
 export interface SLogoProps {
-    /** 로고명 */
+    /**
+     * 로고명 — 셀메이트 본체(`sellmate`) 또는 서비스(`wms` · `account` · `crm` …).
+     * 서비스 로고는 [셀메이트 워드마크 + 서비스 표기]가 한 덩어리로 나온다 — 앱이 표기를 잇지 않는다.
+     */
     name?: SLogoName;
     /**
-     * **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 워드마크 비율에서 저절로 나온다.
+     * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).
+     * 서비스 표기 색도 원본이 모드마다 정한 값으로 바뀐다.
+     */
+    mode?: SLogoMode;
+    /**
+     * 배치. `horizontal` 은 워드마크 오른쪽에 서비스 표기, `vertical` 은 워드마크 아래 가운데에 표기
+     * (로그인 카드처럼 폭이 좁고 로고가 가운데 서는 자리). `sellmate` 는 표기가 없어 어느 쪽이든 같다.
+     * 표기 색이 가로와 다른 로고도 있다(POS 세로는 light 에서도 `#4886FF`) — 원본을 따른다.
+     */
+    direction?: SLogoDirection;
+    /**
+     * **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 로고 비율에서 저절로 나온다.
      * `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다).
+     * `vertical` 은 두 줄 전체의 높이다 — 같은 `size` 면 워드마크가 가로보다 작게 선다.
+     *
+     * `'auto'` 면 높이를 정하지 않는다 — **부모 폭을 꽉 채우고 높이는 비율로 따라온다.**
+     * 로고 자리의 폭이 정해진 곳(`SGnb` `header="fix"` 의 로고 칸)에서 쓴다. 부모에 폭이 없으면
+     * 기준을 잃어 브라우저 기본 크기(300px)로 그려진다.
      */
-    size?: number | string;
+    size?: number | 'auto' | (string & {});
     /**
-     * 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **로고 전체가 이 한 색이 된다.**
+     * 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **워드마크와 서비스 표기가 모두
+     * 이 한 색이 된다.**
      *
-     * 미지정 시 **브랜드 기본색**이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다.
-     * 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다.
-     * 비활성처럼 물러나야 하는 자리에서만 색을 준다.
+     * 미지정 시 **브랜드 색**(`mode` 가 정한 워드마크 색 + 서비스 색)이다 — `SIcon` 과 달리
+     * currentColor 를 상속하지 않는다. 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다
+     * 달라지기 때문이다. 비활성처럼 물러나야 하는 자리에서만 색을 준다.
      */
     color?: SColor;
     /**
@@ -30,17 +50,22 @@ export interface SLogoProps {
  * SLogo — 브랜드 로고를 아이콘처럼 쓰는 컴포넌트.
  *
  * `SIcon` 과 같은 손맛(`name` · `size` · `color`)이지만 두 가지가 다르다.
- * - **`size` 는 높이다.** 로고는 가로로 긴 워드마크라 정사각으로 그리면 찌그러진다 — 폭은 비율에서 나온다.
- * - **색을 주지 않으면 브랜드 기본색이다.** currentColor 를 상속하지 않는다(위 `color` 참고).
+ * - **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 나온다.
+ *   `size="auto"` 면 거꾸로 부모 폭을 채우고 높이가 비율에서 나온다.
+ * - **색을 주지 않으면 브랜드 색이다.** currentColor 를 상속하지 않는다(위 `color` 참고).
+ *
+ * **서비스 이름을 넣으면 그 서비스 로고가 나온다.** 워드마크 오른쪽에 표기를 앱이 따로 잇지 않는다 —
+ * 원본 로고의 자간·색이 서비스마다 달라서, 이어 붙이면 원본과 어긋난다.
  *
- * **서비스 로고는 `sellmate` 하나뿐이다.** 서비스별 표기(WMS · Account · CRM …)는 이 워드마크
- * 오른쪽에 소비 앱이 자기 텍스트나 자기 로고로 붙인다 — 서비스가 늘어날 때마다 디자인 시스템을
- * 다시 배포하지 않으려는 것이다.
+ * 배경이 어두우면 `mode="dark"` 를 준다 — 워드마크가 흰색이 되고 서비스 표기도 원본의 dark 색으로 바뀐다.
  *
  * ```tsx
- * <SLogo />                                  // 브랜드색, 높이 24
- * <SLogo size={12} />                        // 런처 목록의 한 줄
- * <SLogo size={12} color="grey_45" />        // 아직 못 쓰는 서비스
+ * <SLogo />                                  // 셀메이트, 브랜드 색, 높이 24
+ * <SLogo name="wms" size={12} />             // 런처 목록의 한 줄
+ * <SLogo name="account" mode="dark" />       // 어두운 면 위
+ * <SLogo name="wms" direction="vertical" size={48} />  // 워드마크 아래에 표기
+ * <SLogo name="account" mode="dark" size="auto" />  // 폭이 정해진 로고 칸(fix GNB)을 채운다
+ * <SLogo name="crm" color="grey_45" />       // 아직 못 쓰는 서비스 — 로고 전체가 한 색
  * <SLogo size={32} label="Sellmate" />       // 로고가 그 자리의 유일한 이름일 때
  * ```
  */

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

@@ -1,2 +1,2 @@
 export { SLogo, type SLogoProps } from './SLogo';
-export { LOGO_DEFAULT_SIZE, LOGO_NAMES, type SLogoName } from './logo.config';
+export { LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, type SLogoDirection, type SLogoMode, type SLogoName, } from './logo.config';

package/dist/components/SLogo/logo.config.d.ts

@@ -4,9 +4,24 @@
  * 로고는 브랜드 자산이라 **색·비율이 토큰을 따르지 않는다** — 테마가 바뀌어도 로고는 그대로여야
  * 하고, 워드마크의 비율은 자산 자체가 정한다. 그래서 이 파일의 값은 토큰 참조가 아니다.
  */
-/** 담고 있는 로고. 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다 */
-export declare const LOGO_NAMES: readonly ["sellmate"];
+/**
+ * 담고 있는 로고 — 셀메이트 본체와 서비스들, 그리고 통합 콘솔. 로고 한 벌은 [셀메이트 워드마크 + 표기]다.
+ * 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다.
+ */
+export declare const LOGO_NAMES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos", "console"];
 export type SLogoName = (typeof LOGO_NAMES)[number];
+/**
+ * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).
+ * 서비스 표기 색도 모드마다 원본이 정한 값으로 바뀐다(Account·POS 는 dark 에서 더 밝다).
+ */
+export declare const LOGO_MODES: readonly ["light", "dark"];
+export type SLogoMode = (typeof LOGO_MODES)[number];
+/**
+ * 로고의 배치. `horizontal` 은 워드마크 오른쪽에 서비스 표기, `vertical` 은 워드마크 아래 가운데에 표기.
+ * 모든 서비스 로고가 세로 원본을 갖는다. 셀메이트 본체는 표기가 없어 세로여도 모양이 같다.
+ */
+export declare const LOGO_DIRECTIONS: readonly ["horizontal", "vertical"];
+export type SLogoDirection = (typeof LOGO_DIRECTIONS)[number];
 /**
  * 기본 높이(px). `SIcon` 과 같은 값이라 나란히 쓸 때 손에 익은 크기가 같다.
  * 폭은 주지 않는다 — 로고마다 다른 비율에서 저절로 나온다.

package/dist/components/SLogo/logos.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import type { SLogoDirection, SLogoMode, SLogoName } from './logo.config';
+interface LogoGlyphProps {
+    name: SLogoName;
+    mode: SLogoMode;
+    direction: SLogoDirection;
+    /** 로고 전체를 덮을 한 색. 비우면 원본 브랜드 색(워드마크 + 서비스 색)이다 */
+    color?: string;
+    style?: CSSProperties;
+}
+/**
+ * @internal
+ * 로고 글리프 하나. 높이는 `style` 로 받고 폭은 viewBox 비율에서 나온다. 접근성 이름은 `SLogo` 가 붙인다.
+ */
+export declare function LogoGlyph({ name, mode, direction, color, style }: LogoGlyphProps): import("react").JSX.Element | null;
+export {};

package/dist/components/STextLink/README.md

@@ -46,6 +46,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
 
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SPopover](../SPopover)
  - [STable](../STable)
 
@@ -62,6 +63,7 @@ graph TD;
   STextLink --> STag
   SChipFilter --> STextLink
   SChipInput --> STextLink
+  SLauncherListBox --> STextLink
   SPopover --> STextLink
   STable --> STextLink
   style STextLink fill:#f9f,stroke:#333,stroke-width:4px