@stn-uiux/pub-ui 0.1.75 → 0.1.77

package/dist/chunk-3CYSR7V4.js

@@ -0,0 +1,149 @@
+import {
+  STN_LAYER0_BACKGROUND_DEMO_IMAGES
+} from "./chunk-NGUMR3D6.js";
+
+// src/data/stnLogin.ts
+var STN_LOGIN_FIGMA = "40004209:78293";
+var STN_LOGIN_ASSETS = {
+  backgroundLight: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginLight,
+  backgroundDark: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginDark
+};
+var STN_LOGIN_INTRO = "\uB85C\uADF8\uC778 \uD398\uC774\uC9C0\uB294 LoginPageScaffold(\uD398\uC774\uC9C0) + StnLayer0BackgroundPreset(\uBC14\uB2E5) + StnLoginCard(\uCE74\uB4DC)\uC785\uB2C8\uB2E4. \uBC30\uACBD\xB7\uB85C\uACE0\uB294 \uAC01 \uCEF4\uD3EC\uB10C\uD2B8\uC758 variant\uB97C \uBC14\uAFD4 \uC7A1\uC2B5\uB2C8\uB2E4. onLogin\uB9CC \uB118\uAE30\uBA74 \uAE30\uBCF8 \uC870\uB9BD(login \uBC30\uACBD \xB7 \uAC00\uB85C XL \uB85C\uACE0)\uC774 \uB4E4\uC5B4\uAC11\uB2C8\uB2E4.";
+var STN_LOGIN_USAGE = `import { useState, type FormEvent } from 'react'
+import {
+  LoginPageScaffold,
+  StnLayer0BackgroundPreset,
+  StnLoginCard,
+  StnLoginBrandStack,
+  StnLoginFormStack,
+  StnLoginFormFields,
+  StnLoginFormLinks,
+  StnLoginTextField,
+  StnLogo,
+  StnSegmented,
+  StnButton,
+} from '@stn-uiux/pub-ui-react'
+
+function LoginPage() {
+  const [mode, setMode] = useState<'normal' | 'social'>('normal')
+  const [userId, setUserId] = useState('')
+  const [password, setPassword] = useState('')
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    // \uB85C\uADF8\uC778 API \uD638\uCD9C
+  }
+
+  return (
+    <LoginPageScaffold
+      layer0={<StnLayer0BackgroundPreset variant="login" />}
+      cardGlow={true}
+    >
+      <StnLoginCard
+        glow={true}
+        brand={
+          <StnLoginBrandStack>
+            <StnLogo variant="vertical" size="xl" />
+            <p className="stn-login-card__caption">Server Resource Monitoring</p>
+          </StnLoginBrandStack>
+        }
+      >
+        <StnLoginFormStack onSubmit={handleSubmit}>
+          <StnSegmented
+            aria-label="\uB85C\uADF8\uC778 \uBC29\uC2DD"
+            value={mode}
+            onChange={(v) => setMode(v as 'normal' | 'social')}
+            options={[
+              { value: 'normal', label: '\uC77C\uBC18 \uB85C\uADF8\uC778' },
+              { value: 'social', label: '\uC18C\uC15C \uB85C\uADF8\uC778' },
+            ]}
+          />
+          {mode === 'normal' && (
+            <StnLoginFormFields>
+              <StnLoginTextField
+                icon="line/user"
+                name="username"
+                autoComplete="username"
+                placeholder="\uC544\uC774\uB514"
+                value={userId}
+                onChange={(e) => setUserId(e.target.value)}
+                aria-label="\uC544\uC774\uB514"
+              />
+              <StnLoginTextField
+                icon="line/lock"
+                type="password"
+                name="password"
+                autoComplete="current-password"
+                placeholder="\uBE44\uBC00\uBC88\uD638"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                aria-label="\uBE44\uBC00\uBC88\uD638"
+              />
+            </StnLoginFormFields>
+          )}
+          <StnButton type="submit" size="xl" fullWidth>
+            \uB85C\uADF8\uC778
+          </StnButton>
+          <StnLoginFormLinks>
+            <a href="#signup">\uD68C\uC6D0\uAC00\uC785</a>
+            <a href="#recover">\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30</a>
+          </StnLoginFormLinks>
+        </StnLoginFormStack>
+      </StnLoginCard>
+    </LoginPageScaffold>
+  )
+}`;
+var STN_LOGIN_HTML = `<div class="stn-wrap stn-page--login" data-stn-layer-mode="v2">
+  <div class="stn-layer0-bg image" aria-hidden="true"><!-- L0 login --></div>
+  <main class="stn-elev-1" data-stn-layer-role="content">
+    <div class="stn-login">
+      <div class="stn-login-card">
+        <div class="stn-login-card__brand">
+          <div class="stn-login-brand-stack">
+            <span class="stn-logo horizontal xl">
+              <img class="stn-logo__img light" src="/@assets/svg/brand/infomap-logo-full.png" alt="InfoMap SRM" />
+              <img class="stn-logo__img dark" src="/@assets/svg/brand/infomap-logo-full-dark.png" alt="" />
+            </span>
+            <p class="stn-login-card__caption">Server Resource Monitoring</p>
+          </div>
+        </div>
+        <div class="stn-login-card__form">
+          <form class="stn-login-form-stack">
+            <div class="stn-segmented" role="radiogroup" aria-label="\uB85C\uADF8\uC778 \uBC29\uC2DD">
+              <button type="button" class="stn-segmented__item active" role="radio" aria-checked="true">\uC77C\uBC18 \uB85C\uADF8\uC778</button>
+              <button type="button" class="stn-segmented__item" role="radio" aria-checked="false">\uC18C\uC15C \uB85C\uADF8\uC778</button>
+            </div>
+            <div class="stn-login-form-fields">
+              <div class="stn-login-text-field">
+                <span class="stn-icon-box md stn-login-text-field__icon-box" aria-hidden>
+                  <span class="stn-icon stn-icon--masked" style="background-color: currentColor; width: 16px; height: 16px;"></span>
+                </span>
+                <input type="text" class="stn-login-text-field__control" placeholder="\uC544\uC774\uB514" autocomplete="username" />
+              </div>
+              <div class="stn-login-text-field">
+                <span class="stn-icon-box md stn-login-text-field__icon-box" aria-hidden>
+                  <span class="stn-icon stn-icon--masked" style="background-color: currentColor; width: 16px; height: 16px;"></span>
+                </span>
+                <input type="password" class="stn-login-text-field__control" placeholder="\uBE44\uBC00\uBC88\uD638" autocomplete="current-password" />
+              </div>
+            </div>
+            <button type="submit" class="stn-btn contained xl full">\uB85C\uADF8\uC778</button>
+            <nav class="stn-login-form-links" aria-label="\uACC4\uC815 \uAD00\uB9AC \uB9C1\uD06C">
+              <a href="#signup">\uD68C\uC6D0\uAC00\uC785</a>
+              <a href="#recover">\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30</a>
+            </nav>
+          </form>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>`;
+
+export {
+  STN_LOGIN_FIGMA,
+  STN_LOGIN_ASSETS,
+  STN_LOGIN_INTRO,
+  STN_LOGIN_USAGE,
+  STN_LOGIN_HTML
+};
+//# sourceMappingURL=chunk-3CYSR7V4.js.map

package/dist/chunk-3CYSR7V4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLogin.ts"],"sourcesContent":["/**\n * Pub login screen — Figma 40004209:78293\n * L0 image + L1 centered card · no L2 GNB\n */\n\nimport { STN_LAYER0_BACKGROUND_DEMO_IMAGES } from './stnLayer0BackgroundAssets'\n\nexport const STN_LOGIN_FIGMA = '40004209:78293'\n\nexport const STN_LOGIN_ASSETS = {\n  backgroundLight: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginLight,\n  backgroundDark: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginDark,\n} as const\n\nexport const STN_LOGIN_INTRO =\n  '로그인 페이지는 LoginPageScaffold(페이지) + StnLayer0BackgroundPreset(바닥) + StnLoginCard(카드)입니다. 배경·로고는 각 컴포넌트의 variant를 바꿔 잡습니다. onLogin만 넘기면 기본 조립(login 배경 · 가로 XL 로고)이 들어갑니다.'\n\nexport const STN_LOGIN_USAGE = `import { useState, type FormEvent } from 'react'\nimport {\n  LoginPageScaffold,\n  StnLayer0BackgroundPreset,\n  StnLoginCard,\n  StnLoginBrandStack,\n  StnLoginFormStack,\n  StnLoginFormFields,\n  StnLoginFormLinks,\n  StnLoginTextField,\n  StnLogo,\n  StnSegmented,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nfunction LoginPage() {\n  const [mode, setMode] = useState<'normal' | 'social'>('normal')\n  const [userId, setUserId] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    // 로그인 API 호출\n  }\n\n  return (\n    <LoginPageScaffold\n      layer0={<StnLayer0BackgroundPreset variant=\"login\" />}\n      cardGlow={true}\n    >\n      <StnLoginCard\n        glow={true}\n        brand={\n          <StnLoginBrandStack>\n            <StnLogo variant=\"vertical\" size=\"xl\" />\n            <p className=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </StnLoginBrandStack>\n        }\n      >\n        <StnLoginFormStack onSubmit={handleSubmit}>\n          <StnSegmented\n            aria-label=\"로그인 방식\"\n            value={mode}\n            onChange={(v) => setMode(v as 'normal' | 'social')}\n            options={[\n              { value: 'normal', label: '일반 로그인' },\n              { value: 'social', label: '소셜 로그인' },\n            ]}\n          />\n          {mode === 'normal' && (\n            <StnLoginFormFields>\n              <StnLoginTextField\n                icon=\"line/user\"\n                name=\"username\"\n                autoComplete=\"username\"\n                placeholder=\"아이디\"\n                value={userId}\n                onChange={(e) => setUserId(e.target.value)}\n                aria-label=\"아이디\"\n              />\n              <StnLoginTextField\n                icon=\"line/lock\"\n                type=\"password\"\n                name=\"password\"\n                autoComplete=\"current-password\"\n                placeholder=\"비밀번호\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                aria-label=\"비밀번호\"\n              />\n            </StnLoginFormFields>\n          )}\n          <StnButton type=\"submit\" size=\"xl\" fullWidth>\n            로그인\n          </StnButton>\n          <StnLoginFormLinks>\n            <a href=\"#signup\">회원가입</a>\n            <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n          </StnLoginFormLinks>\n        </StnLoginFormStack>\n      </StnLoginCard>\n    </LoginPageScaffold>\n  )\n}`\n\nexport const STN_LOGIN_HTML = `<div class=\"stn-wrap stn-page--login\" data-stn-layer-mode=\"v2\">\n  <div class=\"stn-layer0-bg image\" aria-hidden=\"true\"><!-- L0 login --></div>\n  <main class=\"stn-elev-1\" data-stn-layer-role=\"content\">\n    <div class=\"stn-login\">\n      <div class=\"stn-login-card\">\n        <div class=\"stn-login-card__brand\">\n          <div class=\"stn-login-brand-stack\">\n            <span class=\"stn-logo horizontal xl\">\n              <img class=\"stn-logo__img light\" src=\"/@assets/svg/brand/infomap-logo-full.png\" alt=\"InfoMap SRM\" />\n              <img class=\"stn-logo__img dark\" src=\"/@assets/svg/brand/infomap-logo-full-dark.png\" alt=\"\" />\n            </span>\n            <p class=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </div>\n        </div>\n        <div class=\"stn-login-card__form\">\n          <form class=\"stn-login-form-stack\">\n            <div class=\"stn-segmented\" role=\"radiogroup\" aria-label=\"로그인 방식\">\n              <button type=\"button\" class=\"stn-segmented__item active\" role=\"radio\" aria-checked=\"true\">일반 로그인</button>\n              <button type=\"button\" class=\"stn-segmented__item\" role=\"radio\" aria-checked=\"false\">소셜 로그인</button>\n            </div>\n            <div class=\"stn-login-form-fields\">\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"text\" class=\"stn-login-text-field__control\" placeholder=\"아이디\" autocomplete=\"username\" />\n              </div>\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"password\" class=\"stn-login-text-field__control\" placeholder=\"비밀번호\" autocomplete=\"current-password\" />\n              </div>\n            </div>\n            <button type=\"submit\" class=\"stn-btn contained xl full\">로그인</button>\n            <nav class=\"stn-login-form-links\" aria-label=\"계정 관리 링크\">\n              <a href=\"#signup\">회원가입</a>\n              <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n            </nav>\n          </form>\n        </div>\n      </div>\n    </div>\n  </main>\n</div>`\n"],"mappings":";;;;;AAOO,IAAM,kBAAkB;AAExB,IAAM,mBAAmB;AAAA,EAC9B,iBAAiB,kCAAkC;AAAA,EACnD,gBAAgB,kCAAkC;AACpD;AAEO,IAAM,kBACX;AAEK,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqFxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-VC72NQIU.js → chunk-EKPLU5KT.js}

@@ -6,11 +6,11 @@ var STN_TYPE_SCALE_ROWS = [
     category: "Display",
     name: "Display 1",
     weights: "Medium, Bold",
-    sizePx: 60,
-    sizeRem: "4rem",
+    sizePx: 52,
+    sizeRem: "3.25rem",
     lineHeight: "130%",
     role: "\uCD5C\uC0C1\uC704 \uD5E4\uB4DC\uB77C\uC778 (PC\uAD8C\uC7A5)",
-    pubSizeToken: "pub.font-size.60",
+    pubSizeToken: "pub.font-size.52",
     semanticToken: "pub.text.display.xlarge"
   },
   {
@@ -18,11 +18,11 @@ var STN_TYPE_SCALE_ROWS = [
     category: "Display",
     name: "Display 2",
     weights: "Medium, Bold",
-    sizePx: 40,
-    sizeRem: "2.67rem",
+    sizePx: 44,
+    sizeRem: "2.75rem",
     lineHeight: "130%",
     role: "\uBA54\uC778 \uD0C0\uC774\uD2C0 (PC \uAD8C\uC7A5)",
-    pubSizeToken: "pub.font-size.40",
+    pubSizeToken: "pub.font-size.44",
     semanticToken: "pub.text.display.large"
   },
   {
@@ -30,11 +30,11 @@ var STN_TYPE_SCALE_ROWS = [
     category: "Display",
     name: "Display 3",
     weights: "Medium, Bold",
-    sizePx: 36,
-    sizeRem: "2.4rem",
+    sizePx: 40,
+    sizeRem: "2.5rem",
     lineHeight: "148%",
     role: "\uAC15\uC870\uD615 \uD5E4\uB4DC\uB77C\uC778",
-    pubSizeToken: "pub.font-size.36",
+    pubSizeToken: "pub.font-size.40",
     semanticToken: "pub.text.display.medium"
   },
   {
@@ -137,6 +137,7 @@ var STN_TYPE_SCALE_ROWS = [
     lineHeight: "148% / 158%",
     role: "\uBCF8\uBB38 \uD14D\uC2A4\uD2B8",
     pubSizeToken: "pub.font-size.15",
+    semanticToken: "pub.text.body.medium-large",
     pubHtmlExample: "dashboard_map \xB7 GNB 1Depth \xB7 \uD14C\uC774\uBE14 \uD5E4\uB354"
   },
   {
@@ -253,6 +254,27 @@ var STN_TYPE_SCALE_ROWS = [
     pubHtmlExample: "dashboard_map \xB7 node_icon \uB77C\uBCA8 \xB7 gnb_alert \uD0DC\uADF8"
   }
 ];
+var STN_TYPE_SCALE_CLASS = {
+  "display-1": { className: "stn-text-display-1", variant: "display-1" },
+  "display-2": { className: "stn-text-display-2", variant: "display-2" },
+  "display-3": { className: "stn-text-display-3", variant: "display-3" },
+  "heading-1": { className: "stn-text-heading-1", variant: "heading-1" },
+  "heading-2": { className: "stn-text-heading-2", variant: "heading-2" },
+  "heading-3": { className: "stn-text-heading-3", variant: "heading-3" },
+  "title-1": { className: "stn-text-title-1", variant: "title-1" },
+  "title-2": { className: "stn-text-title-2", variant: "title-2" },
+  "title-3": { className: "stn-text-title-3", variant: "title-3" },
+  "body-1": { className: "stn-text-body-1", variant: "body-1" },
+  "body-2": { className: "stn-text-body-2", variant: "body-2" },
+  "body-3": { className: "stn-text-body-3", variant: "body-3" },
+  "body-small": { className: "stn-text-body-small", variant: "body-small" },
+  "label-1": { className: "stn-text-label-1", variant: "label-1" },
+  "label-2": { className: "stn-text-label-2", variant: "label-2" },
+  "label-3": { className: "stn-text-label-3", variant: "label-3" },
+  "label-4": { className: "stn-text-label-4", variant: "label-4" },
+  "caption-large": { className: "stn-text-caption-large", variant: "caption-large" },
+  caption: { className: "stn-text-caption", variant: "caption" }
+};
 var WEIGHT_LABEL = {
   300: "Regular",
   500: "Medium",
@@ -273,7 +295,8 @@ function typeScalePill(scaleName, sizePx, weight) {
 export {
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
+  STN_TYPE_SCALE_CLASS,
   resolveTypeScaleName,
   typeScalePill
 };
-//# sourceMappingURL=chunk-VC72NQIU.js.map
+//# sourceMappingURL=chunk-EKPLU5KT.js.map

package/dist/chunk-EKPLU5KT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnTypeScale.ts"],"sourcesContent":["/**\n * Figma Type Scale — Display / Heading / Title / Body / Label / Caption\n * Pub HTML은 primitive(font-size·weight)로 조합하며, semantic samples는 일부만 시연합니다.\n */\n\nexport type StnTypeScaleCategory =\n  | 'Display'\n  | 'Heading'\n  | 'Title'\n  | 'Body'\n  | 'Label'\n  | 'Caption'\n  | 'Pub extension'\n\nexport type StnTypeScaleRow = {\n  id: string\n  category: StnTypeScaleCategory\n  name: string\n  weights: string\n  sizePx: number\n  sizeRem: string\n  lineHeight: string\n  role: string\n  pubSizeToken: string\n  /** Tokens 탭 semantic (있으면) */\n  semanticToken?: string\n  /** dashboard_map.html 등 실제 화면 예 (있을 때만) */\n  pubHtmlExample?: string\n}\n\nexport const STN_TYPE_SCALE_INTRO =\n  'Display, Heading, Title, Body, Label, Caption으로 정의한 6단계 위계에 맞게 조합하여 사용합니다.'\n\nexport const STN_TYPE_SCALE_ROWS: StnTypeScaleRow[] = [\n  {\n    id: 'display-1',\n    category: 'Display',\n    name: 'Display 1',\n    weights: 'Medium, Bold',\n    sizePx: 52,\n    sizeRem: '3.25rem',\n    lineHeight: '130%',\n    role: '최상위 헤드라인 (PC권장)',\n    pubSizeToken: 'pub.font-size.52',\n    semanticToken: 'pub.text.display.xlarge',\n  },\n  {\n    id: 'display-2',\n    category: 'Display',\n    name: 'Display 2',\n    weights: 'Medium, Bold',\n    sizePx: 44,\n    sizeRem: '2.75rem',\n    lineHeight: '130%',\n    role: '메인 타이틀 (PC 권장)',\n    pubSizeToken: 'pub.font-size.44',\n    semanticToken: 'pub.text.display.large',\n  },\n  {\n    id: 'display-3',\n    category: 'Display',\n    name: 'Display 3',\n    weights: 'Medium, Bold',\n    sizePx: 40,\n    sizeRem: '2.5rem',\n    lineHeight: '148%',\n    role: '강조형 헤드라인',\n    pubSizeToken: 'pub.font-size.40',\n    semanticToken: 'pub.text.display.medium',\n  },\n  {\n    id: 'heading-1',\n    category: 'Heading',\n    name: 'Heading 1',\n    weights: 'Medium, Bold',\n    sizePx: 32,\n    sizeRem: '2.133rem',\n    lineHeight: '148%',\n    role: '페이지 상위 제목',\n    pubSizeToken: 'pub.font-size.32',\n    semanticToken: 'pub.text.heading.large',\n    pubHtmlExample: 'dashboard_map · converged-header 페이지명',\n  },\n  {\n    id: 'heading-2',\n    category: 'Heading',\n    name: 'Heading 2',\n    weights: 'Medium, Bold',\n    sizePx: 24,\n    sizeRem: '1.6rem',\n    lineHeight: '148%',\n    role: '하위 제목',\n    pubSizeToken: 'pub.font-size.24',\n    semanticToken: 'pub.text.heading.medium',\n    pubHtmlExample: 'dashboard_map · 장애 등급 수치(24px Bold)',\n  },\n  {\n    id: 'heading-3',\n    category: 'Heading',\n    name: 'Heading 3',\n    weights: 'Medium, Bold',\n    sizePx: 22,\n    sizeRem: '1.47rem',\n    lineHeight: '148%',\n    role: '소제목, 그룹 제목',\n    pubSizeToken: 'pub.font-size.22',\n    semanticToken: 'pub.text.heading.small',\n  },\n  {\n    id: 'title-1',\n    category: 'Title',\n    name: 'Title 1',\n    weights: 'Medium, Bold',\n    sizePx: 20,\n    sizeRem: '1.33rem',\n    lineHeight: '148%',\n    role: '콘텐츠 타이틀',\n    pubSizeToken: 'pub.font-size.20',\n    semanticToken: 'pub.text.title.large',\n    pubHtmlExample: 'dashboard_map · 헤더 시계(#time)',\n  },\n  {\n    id: 'title-2',\n    category: 'Title',\n    name: 'Title 2',\n    weights: 'Medium, Semibold, Bold',\n    sizePx: 18,\n    sizeRem: '1.2rem',\n    lineHeight: '148%',\n    role: '서브 페이지 제목',\n    pubSizeToken: 'pub.font-size.18',\n    semanticToken: 'pub.text.title.medium',\n    pubHtmlExample: 'alert_center · 모달 타이틀「알림센터」',\n  },\n  {\n    id: 'title-3',\n    category: 'Title',\n    name: 'Title 3',\n    weights: 'Medium',\n    sizePx: 16,\n    sizeRem: '1.07rem',\n    lineHeight: '148%',\n    role: '서브 타이틀 · 헤더',\n    pubSizeToken: 'pub.font-size.16',\n    semanticToken: 'pub.text.title.small',\n    pubHtmlExample: 'stn-header · stn-widget 헤더',\n  },\n  {\n    id: 'body-1',\n    category: 'Body',\n    name: 'Body 1',\n    weights: 'Regular, Medium, Semibold, Bold',\n    sizePx: 16,\n    sizeRem: '1.07rem',\n    lineHeight: '148% / 170%',\n    role: '본문 텍스트 (PC 권장)',\n    pubSizeToken: 'pub.font-size.16',\n    semanticToken: 'pub.text.body.large',\n    pubHtmlExample: 'dashboard_map · fault_table 본문 셀',\n  },\n  {\n    id: 'body-2',\n    category: 'Body',\n    name: 'Body 2',\n    weights: 'Regular, Medium, Semibold, Bold',\n    sizePx: 15,\n    sizeRem: '1rem',\n    lineHeight: '148% / 158%',\n    role: '본문 텍스트',\n    pubSizeToken: 'pub.font-size.15',\n    semanticToken: 'pub.text.body.medium-large',\n    pubHtmlExample: 'dashboard_map · GNB 1Depth · 테이블 헤더',\n  },\n  {\n    id: 'body-3',\n    category: 'Body',\n    name: 'Body 3',\n    weights: 'Regular, Medium, Semibold, Bold',\n    sizePx: 14,\n    sizeRem: '0.933rem',\n    lineHeight: '148% / 158%',\n    role: '본문 소형 텍스트',\n    pubSizeToken: 'pub.font-size.14',\n    semanticToken: 'pub.text.body.medium',\n    pubHtmlExample: 'Pub reset 기본 · 위젯 타이틀·GNB 하단·헤더 날짜',\n  },\n  {\n    id: 'body-small',\n    category: 'Body',\n    name: 'Body Small',\n    weights: 'Regular',\n    sizePx: 13,\n    sizeRem: '0.87rem',\n    lineHeight: '148%',\n    role: '본문 소형 · 입력·드롭다운·테이블',\n    pubSizeToken: 'pub.font-size.13',\n    semanticToken: 'pub.text.body.small',\n    pubHtmlExample: 'stn-table · stn-dropdown · stn-text-field · stn-btn(sm)',\n  },\n  {\n    id: 'label-1',\n    category: 'Label',\n    name: 'Label 1',\n    weights: 'Medium',\n    sizePx: 17,\n    sizeRem: '1.133rem',\n    lineHeight: '148%',\n    role: '버튼 라벨 (PC 권장)',\n    pubSizeToken: 'pub.font-size.17',\n    semanticToken: 'pub.text.label.large',\n  },\n  {\n    id: 'label-2',\n    category: 'Label',\n    name: 'Label 2',\n    weights: 'SemiBold',\n    sizePx: 15,\n    sizeRem: '1rem',\n    lineHeight: '148%',\n    role: '버튼, 입력 폼',\n    pubSizeToken: 'pub.font-size.15',\n    semanticToken: 'pub.text.label.medium',\n  },\n  {\n    id: 'label-3',\n    category: 'Label',\n    name: 'Label 3',\n    weights: 'Medium, Semibold',\n    sizePx: 13,\n    sizeRem: '0.87rem',\n    lineHeight: '148%',\n    role: '입력 레이블',\n    pubSizeToken: 'pub.font-size.13',\n    semanticToken: 'pub.text.label.small',\n    pubHtmlExample: 'dashboard_map · GNB 2Depth · 장애 요약',\n  },\n  {\n    id: 'label-4',\n    category: 'Label',\n    name: 'Label 4',\n    weights: 'Medium, Semibold, Bold',\n    sizePx: 10,\n    sizeRem: '0.625rem',\n    lineHeight: 'Auto',\n    role: '바텀 아이콘 레이블',\n    pubSizeToken: 'pub.font-size.10',\n    semanticToken: 'pub.text.label.xsmall',\n  },\n  {\n    id: 'caption-large',\n    category: 'Caption',\n    name: 'Caption Large',\n    weights: 'Regular',\n    sizePx: 14,\n    sizeRem: '0.933rem',\n    lineHeight: '130%',\n    role: '캡션 대형 · 로그인 카드 서브캡션',\n    pubSizeToken: 'pub.font-size.14',\n    semanticToken: 'pub.text.caption.large',\n    pubHtmlExample: 'stn-login-card 서브캡션',\n  },\n  {\n    id: 'caption',\n    category: 'Caption',\n    name: 'Caption',\n    weights: 'Medium, SemiBold',\n    sizePx: 12,\n    sizeRem: '0.8rem',\n    lineHeight: '148%',\n    role: '툴팁, 보조 설명',\n    pubSizeToken: 'pub.font-size.12',\n    semanticToken: 'pub.text.caption.medium',\n    pubHtmlExample: 'alert_center 목록 · dashboard_map 등급 라벨·위젯 소제목',\n  },\n  {\n    id: 'pub-11',\n    category: 'Pub extension',\n    name: '11px (Pub)',\n    weights: 'Bold',\n    sizePx: 11,\n    sizeRem: '0.73rem',\n    lineHeight: '148%',\n    role: '지도 노드·알림 등급 태그 등 Pub 전용',\n    pubSizeToken: 'pub.font-size.11',\n    pubHtmlExample: 'dashboard_map · node_icon 라벨 · gnb_alert 태그',\n  },\n]\n\n/** Type Scale id → 유틸리티 클래스 (styles/foundations/stn-typography.css) · StnText variant */\nexport const STN_TYPE_SCALE_CLASS: Record<string, { className: string; variant: string }> = {\n  'display-1': { className: 'stn-text-display-1', variant: 'display-1' },\n  'display-2': { className: 'stn-text-display-2', variant: 'display-2' },\n  'display-3': { className: 'stn-text-display-3', variant: 'display-3' },\n  'heading-1': { className: 'stn-text-heading-1', variant: 'heading-1' },\n  'heading-2': { className: 'stn-text-heading-2', variant: 'heading-2' },\n  'heading-3': { className: 'stn-text-heading-3', variant: 'heading-3' },\n  'title-1': { className: 'stn-text-title-1', variant: 'title-1' },\n  'title-2': { className: 'stn-text-title-2', variant: 'title-2' },\n  'title-3': { className: 'stn-text-title-3', variant: 'title-3' },\n  'body-1': { className: 'stn-text-body-1', variant: 'body-1' },\n  'body-2': { className: 'stn-text-body-2', variant: 'body-2' },\n  'body-3': { className: 'stn-text-body-3', variant: 'body-3' },\n  'body-small': { className: 'stn-text-body-small', variant: 'body-small' },\n  'label-1': { className: 'stn-text-label-1', variant: 'label-1' },\n  'label-2': { className: 'stn-text-label-2', variant: 'label-2' },\n  'label-3': { className: 'stn-text-label-3', variant: 'label-3' },\n  'label-4': { className: 'stn-text-label-4', variant: 'label-4' },\n  'caption-large': { className: 'stn-text-caption-large', variant: 'caption-large' },\n  caption: { className: 'stn-text-caption', variant: 'caption' },\n}\n\nconst WEIGHT_LABEL: Record<number, string> = {\n  300: 'Regular',\n  500: 'Medium',\n  700: 'Bold',\n}\n\n/** px(+weight) → Type Scale 이름 (가장 가까운 스케일) */\nexport function resolveTypeScaleName(sizePx: number, weight = 400): {\n  scale: string\n  weightLabel: string\n  pill: string\n} {\n  const w = weight >= 600 ? 700 : weight >= 500 ? 500 : 300\n  const weightLabel = WEIGHT_LABEL[w] ?? `${weight}`\n  const row =\n    STN_TYPE_SCALE_ROWS.find((r) => r.sizePx === sizePx) ??\n    STN_TYPE_SCALE_ROWS.find((r) => Math.abs(r.sizePx - sizePx) <= 1)\n  const scale = row?.name ?? `${sizePx}px`\n  const pill = `${scale} (${sizePx}, ${w})`\n  return { scale, weightLabel, pill }\n}\n\n/** dashboard_map Use case — Type Scale 기준 라벨 */\nexport function typeScalePill(\n  scaleName: string,\n  sizePx: number,\n  weight: number,\n): string {\n  return `${scaleName} (${sizePx}, ${weight})`\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-RSKMNZIS.js

@@ -0,0 +1,9 @@
+// src/data/stnPackageVersion.ts
+var STN_UI_VERSION = "0.1.77";
+var STN_UI_VERSION_LABEL = "v0.1.77";
+
+export {
+  STN_UI_VERSION,
+  STN_UI_VERSION_LABEL
+};
+//# sourceMappingURL=chunk-RSKMNZIS.js.map

package/dist/chunk-RSKMNZIS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.77'\nexport const STN_UI_VERSION_LABEL = 'v0.1.77'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}

package/dist/data/index.d.ts

@@ -59,7 +59,7 @@ export { STN_THEME_SEMANTIC_DARK_ROWS, STN_THEME_SEMANTIC_LIGHT_ROWS, StnThemeSe
 export { STN_TOAST_DEMO_MSG, STN_TOAST_ICON_SLUG, STN_TOAST_INTRO, STN_TOAST_KINDS, STN_TOAST_REACT_USAGE, STN_TOAST_SETUP, STN_TOAST_TOKEN_ROWS, STN_TOAST_USAGE_HTML, StnToastKind } from './stnToast.js';
 export { STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT, STN_TOGGLE_BUTTON_PLAYGROUND_INTRO, STN_TOGGLE_BUTTON_PLAYGROUND_PROPERTIES, STN_TOGGLE_BUTTON_REACT_USAGE, STN_TOGGLE_BUTTON_USAGE_HTML, StnToggleButtonPlaygroundConfig, countToggleButtonPlaygroundCombinations, describeToggleButtonPlaygroundReact, listToggleButtonPlaygroundMatrix } from './stnToggleButton.js';
 export { STN_TREE_DEMO, STN_TREE_FIGMA, STN_TREE_INTRO, STN_TREE_PARTS, STN_TREE_PATTERN_PLAYGROUND_DEFAULT, STN_TREE_PATTERN_PLAYGROUND_PROPERTIES, STN_TREE_REACT_EXAMPLE, STN_TREE_SECTION_SIDE_FIGMA, STN_TREE_USAGE_HTML, StnTreeDemoNode, StnTreePatternPlaygroundConfig, describeTreePatternReact } from './stnTree.js';
-export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './stnTypeScale.js';
+export { STN_TYPE_SCALE_CLASS, STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './stnTypeScale.js';
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './stnTypography.js';
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardSeverity, StnCardVariant } from './stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './stnWidget.js';

package/dist/data/index.js

@@ -10,11 +10,12 @@ import {
   listToggleButtonPlaygroundMatrix
 } from "../chunk-7AMA6OZ6.js";
 import {
+  STN_TYPE_SCALE_CLASS,
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
   resolveTypeScaleName,
   typeScalePill
-} from "../chunk-VC72NQIU.js";
+} from "../chunk-EKPLU5KT.js";
 import {
   STN_FONT_FAMILY_ROWS,
   STN_FONT_SIZE_ROWS,
@@ -118,7 +119,7 @@ import {
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "../chunk-AWJXDCX2.js";
+} from "../chunk-3CYSR7V4.js";
 import {
   STN_MAP_DASHBOARD_OPTION_ROWS
 } from "../chunk-3DAZMM4T.js";
@@ -136,7 +137,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-M4MX76BY.js";
+} from "../chunk-RSKMNZIS.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -891,6 +892,7 @@ export {
   STN_TREE_REACT_EXAMPLE,
   STN_TREE_SECTION_SIDE_FIGMA,
   STN_TREE_USAGE_HTML,
+  STN_TYPE_SCALE_CLASS,
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
   STN_TYPOGRAPHY_PRIMITIVE_GROUPS,

package/dist/data/stnLogin.d.ts

@@ -4,8 +4,8 @@
  */
 declare const STN_LOGIN_FIGMA = "40004209:78293";
 declare const STN_LOGIN_ASSETS: {
-    readonly backgroundLight: string;
-    readonly backgroundDark: string;
+    readonly backgroundLight: "https://stn-design.vercel.app/images/layer0/login-light.png";
+    readonly backgroundDark: "https://stn-design.vercel.app/images/layer0/login-dark.png";
 };
 declare const STN_LOGIN_INTRO = "\uB85C\uADF8\uC778 \uD398\uC774\uC9C0\uB294 LoginPageScaffold(\uD398\uC774\uC9C0) + StnLayer0BackgroundPreset(\uBC14\uB2E5) + StnLoginCard(\uCE74\uB4DC)\uC785\uB2C8\uB2E4. \uBC30\uACBD\u00B7\uB85C\uACE0\uB294 \uAC01 \uCEF4\uD3EC\uB10C\uD2B8\uC758 variant\uB97C \uBC14\uAFD4 \uC7A1\uC2B5\uB2C8\uB2E4. onLogin\uB9CC \uB118\uAE30\uBA74 \uAE30\uBCF8 \uC870\uB9BD(login \uBC30\uACBD \u00B7 \uAC00\uB85C XL \uB85C\uACE0)\uC774 \uB4E4\uC5B4\uAC11\uB2C8\uB2E4.";
 declare const STN_LOGIN_USAGE = "import { useState, type FormEvent } from 'react'\nimport {\n  LoginPageScaffold,\n  StnLayer0BackgroundPreset,\n  StnLoginCard,\n  StnLoginBrandStack,\n  StnLoginFormStack,\n  StnLoginFormFields,\n  StnLoginFormLinks,\n  StnLoginTextField,\n  StnLogo,\n  StnSegmented,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nfunction LoginPage() {\n  const [mode, setMode] = useState<'normal' | 'social'>('normal')\n  const [userId, setUserId] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    // \uB85C\uADF8\uC778 API \uD638\uCD9C\n  }\n\n  return (\n    <LoginPageScaffold\n      layer0={<StnLayer0BackgroundPreset variant=\"login\" />}\n      cardGlow={true}\n    >\n      <StnLoginCard\n        glow={true}\n        brand={\n          <StnLoginBrandStack>\n            <StnLogo variant=\"vertical\" size=\"xl\" />\n            <p className=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </StnLoginBrandStack>\n        }\n      >\n        <StnLoginFormStack onSubmit={handleSubmit}>\n          <StnSegmented\n            aria-label=\"\uB85C\uADF8\uC778 \uBC29\uC2DD\"\n            value={mode}\n            onChange={(v) => setMode(v as 'normal' | 'social')}\n            options={[\n              { value: 'normal', label: '\uC77C\uBC18 \uB85C\uADF8\uC778' },\n              { value: 'social', label: '\uC18C\uC15C \uB85C\uADF8\uC778' },\n            ]}\n          />\n          {mode === 'normal' && (\n            <StnLoginFormFields>\n              <StnLoginTextField\n                icon=\"line/user\"\n                name=\"username\"\n                autoComplete=\"username\"\n                placeholder=\"\uC544\uC774\uB514\"\n                value={userId}\n                onChange={(e) => setUserId(e.target.value)}\n                aria-label=\"\uC544\uC774\uB514\"\n              />\n              <StnLoginTextField\n                icon=\"line/lock\"\n                type=\"password\"\n                name=\"password\"\n                autoComplete=\"current-password\"\n                placeholder=\"\uBE44\uBC00\uBC88\uD638\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                aria-label=\"\uBE44\uBC00\uBC88\uD638\"\n              />\n            </StnLoginFormFields>\n          )}\n          <StnButton type=\"submit\" size=\"xl\" fullWidth>\n            \uB85C\uADF8\uC778\n          </StnButton>\n          <StnLoginFormLinks>\n            <a href=\"#signup\">\uD68C\uC6D0\uAC00\uC785</a>\n            <a href=\"#recover\">\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30</a>\n          </StnLoginFormLinks>\n        </StnLoginFormStack>\n      </StnLoginCard>\n    </LoginPageScaffold>\n  )\n}";

package/dist/data/stnLogin.js

@@ -4,7 +4,8 @@ import {
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "../chunk-AWJXDCX2.js";
+} from "../chunk-3CYSR7V4.js";
+import "../chunk-NGUMR3D6.js";
 export {
   STN_LOGIN_ASSETS,
   STN_LOGIN_FIGMA,

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.75";
-declare const STN_UI_VERSION_LABEL = "v0.1.75";
+declare const STN_UI_VERSION = "0.1.77";
+declare const STN_UI_VERSION_LABEL = "v0.1.77";
 
 export { STN_UI_VERSION, STN_UI_VERSION_LABEL };

package/dist/data/stnPackageVersion.js

@@ -1,7 +1,7 @@
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-M4MX76BY.js";
+} from "../chunk-RSKMNZIS.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/data/stnTypeScale.d.ts

@@ -20,6 +20,11 @@ type StnTypeScaleRow = {
 };
 declare const STN_TYPE_SCALE_INTRO = "Display, Heading, Title, Body, Label, Caption\uC73C\uB85C \uC815\uC758\uD55C 6\uB2E8\uACC4 \uC704\uACC4\uC5D0 \uB9DE\uAC8C \uC870\uD569\uD558\uC5EC \uC0AC\uC6A9\uD569\uB2C8\uB2E4.";
 declare const STN_TYPE_SCALE_ROWS: StnTypeScaleRow[];
+/** Type Scale id → 유틸리티 클래스 (styles/foundations/stn-typography.css) · StnText variant */
+declare const STN_TYPE_SCALE_CLASS: Record<string, {
+    className: string;
+    variant: string;
+}>;
 /** px(+weight) → Type Scale 이름 (가장 가까운 스케일) */
 declare function resolveTypeScaleName(sizePx: number, weight?: number): {
     scale: string;
@@ -29,4 +34,4 @@ declare function resolveTypeScaleName(sizePx: number, weight?: number): {
 /** dashboard_map Use case — Type Scale 기준 라벨 */
 declare function typeScalePill(scaleName: string, sizePx: number, weight: number): string;
 
-export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, type StnTypeScaleCategory, type StnTypeScaleRow, resolveTypeScaleName, typeScalePill };
+export { STN_TYPE_SCALE_CLASS, STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, type StnTypeScaleCategory, type StnTypeScaleRow, resolveTypeScaleName, typeScalePill };

package/dist/data/stnTypeScale.js

@@ -1,10 +1,12 @@
 import {
+  STN_TYPE_SCALE_CLASS,
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
   resolveTypeScaleName,
   typeScalePill
-} from "../chunk-VC72NQIU.js";
+} from "../chunk-EKPLU5KT.js";
 export {
+  STN_TYPE_SCALE_CLASS,
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
   resolveTypeScaleName,

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export { STN_THEME_SEMANTIC_DARK_ROWS, STN_THEME_SEMANTIC_LIGHT_ROWS, StnThemeSe
 export { STN_TOAST_DEMO_MSG, STN_TOAST_ICON_SLUG, STN_TOAST_INTRO, STN_TOAST_KINDS, STN_TOAST_REACT_USAGE, STN_TOAST_SETUP, STN_TOAST_TOKEN_ROWS, STN_TOAST_USAGE_HTML, StnToastKind } from './data/stnToast.js';
 export { STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT, STN_TOGGLE_BUTTON_PLAYGROUND_INTRO, STN_TOGGLE_BUTTON_PLAYGROUND_PROPERTIES, STN_TOGGLE_BUTTON_REACT_USAGE, STN_TOGGLE_BUTTON_USAGE_HTML, StnToggleButtonPlaygroundConfig, countToggleButtonPlaygroundCombinations, describeToggleButtonPlaygroundReact, listToggleButtonPlaygroundMatrix } from './data/stnToggleButton.js';
 export { STN_TREE_DEMO, STN_TREE_FIGMA, STN_TREE_INTRO, STN_TREE_PARTS, STN_TREE_PATTERN_PLAYGROUND_DEFAULT, STN_TREE_PATTERN_PLAYGROUND_PROPERTIES, STN_TREE_REACT_EXAMPLE, STN_TREE_SECTION_SIDE_FIGMA, STN_TREE_USAGE_HTML, StnTreeDemoNode, StnTreePatternPlaygroundConfig, describeTreePatternReact } from './data/stnTree.js';
-export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './data/stnTypeScale.js';
+export { STN_TYPE_SCALE_CLASS, STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTypeScaleRow, resolveTypeScaleName, typeScalePill } from './data/stnTypeScale.js';
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './data/stnTypography.js';
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_SEVERITIES, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardSeverity, StnCardVariant } from './data/stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './data/stnWidget.js';

package/dist/index.js

@@ -15,11 +15,12 @@ import {
   listToggleButtonPlaygroundMatrix
 } from "./chunk-7AMA6OZ6.js";
 import {
+  STN_TYPE_SCALE_CLASS,
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
   resolveTypeScaleName,
   typeScalePill
-} from "./chunk-VC72NQIU.js";
+} from "./chunk-EKPLU5KT.js";
 import {
   STN_FONT_FAMILY_ROWS,
   STN_FONT_SIZE_ROWS,
@@ -123,7 +124,7 @@ import {
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "./chunk-AWJXDCX2.js";
+} from "./chunk-3CYSR7V4.js";
 import {
   STN_MAP_DASHBOARD_OPTION_ROWS
 } from "./chunk-3DAZMM4T.js";
@@ -141,7 +142,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-M4MX76BY.js";
+} from "./chunk-RSKMNZIS.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -896,6 +897,7 @@ export {
   STN_TREE_REACT_EXAMPLE,
   STN_TREE_SECTION_SIDE_FIGMA,
   STN_TREE_USAGE_HTML,
+  STN_TYPE_SCALE_CLASS,
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
   STN_TYPOGRAPHY_PRIMITIVE_GROUPS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [