@stn-uiux/pub-ui 0.1.77 → 0.1.79

package/dist/index.js

@@ -3,7 +3,10 @@ import {
   STN_UI_COMPONENTS,
   STN_UI_FOUNDATIONS
 } from "./chunk-N46UQH6L.js";
-import "./chunk-O77GW7PM.js";
+import "./chunk-WKQLAHIG.js";
+import {
+  STN_TEXT_COLOR_ROWS
+} from "./chunk-4HUY6TN4.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -31,6 +34,11 @@ import {
   typographyPrimitivesToJson,
   typographySemanticsToJson
 } from "./chunk-6FEWLKVE.js";
+import {
+  STN_SPACING_SEMANTIC_INTRO,
+  STN_SPACING_SEMANTIC_ROWS,
+  spacingSemanticToJson
+} from "./chunk-XBY73BTI.js";
 import {
   STN_SPACING_USECASE_INTRO,
   STN_SPACING_USECASE_ROWS
@@ -47,8 +55,11 @@ import {
   STN_TEXT_AREA_USAGE
 } from "./chunk-VNQUWGQ7.js";
 import {
-  STN_TEXT_COLOR_ROWS
-} from "./chunk-4HUY6TN4.js";
+  STN_SEGMENTED_FIGMA,
+  STN_SEGMENTED_HTML,
+  STN_SEGMENTED_INTRO,
+  STN_SEGMENTED_USAGE
+} from "./chunk-TKS725I7.js";
 import {
   STN_NAV_MENU_SUB_ICON,
   STN_SIDE_NAV_ITEM_INTRO,
@@ -75,10 +86,13 @@ import {
   spaceTokensToJson
 } from "./chunk-2TUC7FFY.js";
 import {
-  STN_SPACING_SEMANTIC_INTRO,
-  STN_SPACING_SEMANTIC_ROWS,
-  spacingSemanticToJson
-} from "./chunk-XBY73BTI.js";
+  STN_PROGRESS_BAR_PLAYGROUND_DEFAULT,
+  STN_PROGRESS_BAR_PLAYGROUND_PROPERTIES,
+  STN_PROGRESS_BAR_REACT_USAGE,
+  STN_PROGRESS_BAR_TONES,
+  STN_PROGRESS_BAR_USAGE_HTML,
+  describeProgressBarPlaygroundReact
+} from "./chunk-I677MVNJ.js";
 import {
   STN_RADIO_DEMO_OPTIONS,
   STN_RADIO_FIGMA,
@@ -111,20 +125,14 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "./chunk-7YKAIENZ.js";
-import {
-  STN_SEGMENTED_FIGMA,
-  STN_SEGMENTED_HTML,
-  STN_SEGMENTED_INTRO,
-  STN_SEGMENTED_USAGE
-} from "./chunk-TKS725I7.js";
+} from "./chunk-RVYQ7WL3.js";
 import {
   STN_LOGIN_ASSETS,
   STN_LOGIN_FIGMA,
   STN_LOGIN_HTML,
   STN_LOGIN_INTRO,
   STN_LOGIN_USAGE
-} from "./chunk-3CYSR7V4.js";
+} from "./chunk-QGC3IK52.js";
 import {
   STN_MAP_DASHBOARD_OPTION_ROWS
 } from "./chunk-3DAZMM4T.js";
@@ -142,7 +150,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-RSKMNZIS.js";
+} from "./chunk-SGILJA4O.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -156,13 +164,16 @@ import {
   STN_PAGINATION_REACT
 } from "./chunk-PE4ZB5QC.js";
 import {
-  STN_PROGRESS_BAR_PLAYGROUND_DEFAULT,
-  STN_PROGRESS_BAR_PLAYGROUND_PROPERTIES,
-  STN_PROGRESS_BAR_REACT_USAGE,
-  STN_PROGRESS_BAR_TONES,
-  STN_PROGRESS_BAR_USAGE_HTML,
-  describeProgressBarPlaygroundReact
-} from "./chunk-I677MVNJ.js";
+  STN_HEADER_TITLE_DEMO,
+  STN_HEADER_TITLE_FIGMA,
+  STN_HEADER_TITLE_FRAME,
+  STN_HEADER_TITLE_GRADIENT,
+  STN_HEADER_TITLE_HTML,
+  STN_HEADER_TITLE_INTRO,
+  STN_HEADER_TITLE_PARTS,
+  STN_HEADER_TITLE_SPEC_ROWS,
+  STN_HEADER_TITLE_USAGE
+} from "./chunk-7YNWSFGA.js";
 import {
   STN_ICONOGRAPHY_INTRO,
   STN_ICONOGRAPHY_PRIMITIVE_ROWS,
@@ -186,6 +197,12 @@ import {
   STN_LIST_TABLE_OPTION_ROWS,
   STN_LIST_TABLE_PAGE_SIZE_OPTIONS
 } from "./chunk-5DGK35SP.js";
+import {
+  STN_DIVIDER_INTRO,
+  STN_DIVIDER_ORIENTATIONS,
+  STN_DIVIDER_TEXT_ALIGNS,
+  STN_DIVIDER_VARIANTS
+} from "./chunk-W54SOSHJ.js";
 import {
   STN_ELEVATION_LAYER_BG_INTRO,
   STN_ELEVATION_LAYER_INTRO,
@@ -205,17 +222,6 @@ import {
   STN_GRADIENT_ROWS_DARK,
   STN_GRADIENT_ROWS_LIGHT
 } from "./chunk-BMMVI6IA.js";
-import {
-  STN_HEADER_TITLE_DEMO,
-  STN_HEADER_TITLE_FIGMA,
-  STN_HEADER_TITLE_FRAME,
-  STN_HEADER_TITLE_GRADIENT,
-  STN_HEADER_TITLE_HTML,
-  STN_HEADER_TITLE_INTRO,
-  STN_HEADER_TITLE_PARTS,
-  STN_HEADER_TITLE_SPEC_ROWS,
-  STN_HEADER_TITLE_USAGE
-} from "./chunk-7YNWSFGA.js";
 import {
   STN_BUTTON_ICON_ONLY_INTRO,
   STN_BUTTON_ICON_ONLY_ROWS,
@@ -298,36 +304,6 @@ import {
   STN_GRADE_SEMANTIC_ROWS,
   STN_GRADE_SOURCE
 } from "./chunk-E26XJXQY.js";
-import {
-  STN_TEXT_FIELD_FIGMA,
-  STN_TEXT_FIELD_HTML,
-  STN_TEXT_FIELD_INTRO,
-  STN_TEXT_FIELD_SIZE_ROWS,
-  STN_TEXT_FIELD_STATES,
-  STN_TEXT_FIELD_USAGE
-} from "./chunk-YJLOIDKY.js";
-import {
-  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
-} from "./chunk-SOEBXG3T.js";
-import {
-  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,
-  describeTreePatternReact
-} from "./chunk-AOS3IX4T.js";
 import {
   STN_ALERT_CENTER_DASHBOARD_USAGE,
   STN_ALERT_CENTER_DASHBOARD_WIDGETS,
@@ -360,6 +336,36 @@ import {
   resolveStnWidgetKindBodySlot,
   stnWidgetSampleUrl
 } from "./chunk-JBOXRPR7.js";
+import {
+  STN_TEXT_FIELD_FIGMA,
+  STN_TEXT_FIELD_HTML,
+  STN_TEXT_FIELD_INTRO,
+  STN_TEXT_FIELD_SIZE_ROWS,
+  STN_TEXT_FIELD_STATES,
+  STN_TEXT_FIELD_USAGE
+} from "./chunk-YJLOIDKY.js";
+import {
+  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
+} from "./chunk-SOEBXG3T.js";
+import {
+  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,
+  describeTreePatternReact
+} from "./chunk-AOS3IX4T.js";
 import {
   STN_TABLE_EXAMPLE,
   STN_TABLE_EXAMPLE_HTML,
@@ -398,6 +404,13 @@ import {
   STN_SEARCH_REQUIREMENT_USAGE,
   STN_SEARCH_REQUIREMENT_USAGE_HTML
 } from "./chunk-AE4CKAEK.js";
+import {
+  STN_LOADING_SKELETON_COLORS,
+  STN_LOADING_SKELETON_INTRO,
+  STN_LOADING_SKELETON_PARTS,
+  STN_LOADING_SKELETON_USAGE,
+  STN_LOADING_SKELETON_USAGE_HTML
+} from "./chunk-5BGXBJXN.js";
 import {
   STN_POPUP_INTRO,
   STN_POPUP_INVENTORY_ROWS,
@@ -412,7 +425,7 @@ import {
   STN_POPUP_USAGE,
   STN_POPUP_USAGE_HTML,
   resolveStnPopupSizeFromWidth
-} from "./chunk-75GHU6VI.js";
+} from "./chunk-G4SOYIHZ.js";
 import {
   STN_ELEVATION_Z_INDEX,
   STN_LAYER_DIM_MODAL_HTML,
@@ -423,14 +436,13 @@ import {
   STN_LAYER_SURFACE_ROWS
 } from "./chunk-EQ6LUBD6.js";
 import {
-  STN_LAYER0_BACKGROUND_FIGMA,
   STN_LAYER0_BACKGROUND_INTRO,
   STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS,
   STN_LAYER0_BACKGROUND_USAGE,
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "./chunk-FSSMH6VS.js";
+} from "./chunk-TEK632EJ.js";
 import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
@@ -465,14 +477,7 @@ import {
   applyLnbSideToModifiers,
   pubContentAreaClasses,
   pubLayoutRegionClass
-} from "./chunk-2ZYBBVBT.js";
-import {
-  STN_LOADING_SKELETON_COLORS,
-  STN_LOADING_SKELETON_INTRO,
-  STN_LOADING_SKELETON_PARTS,
-  STN_LOADING_SKELETON_USAGE,
-  STN_LOADING_SKELETON_USAGE_HTML
-} from "./chunk-5BGXBJXN.js";
+} from "./chunk-36QC3ZAD.js";
 import {
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,
@@ -630,6 +635,10 @@ export {
   STN_DATE_RANGE_FIELD_NAME,
   STN_DATE_RANGE_FIELD_SIZE_ROWS,
   STN_DATE_RANGE_FIELD_USAGE,
+  STN_DIVIDER_INTRO,
+  STN_DIVIDER_ORIENTATIONS,
+  STN_DIVIDER_TEXT_ALIGNS,
+  STN_DIVIDER_VARIANTS,
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,
   STN_DROPDOWN_INTRO,
@@ -688,7 +697,6 @@ export {
   STN_INPUT_WIDTH_PRESETS,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
-  STN_LAYER0_BACKGROUND_FIGMA,
   STN_LAYER0_BACKGROUND_INTRO,
   STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS,
   STN_LAYER0_BACKGROUND_USAGE,

package/package.json

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

package/styles/components/stn-divider.css

@@ -0,0 +1,153 @@
+@charset "utf-8";
+/**
+ * STN Components — StnDivider
+ *
+ * 표준 1px 구분선 컴포넌트:
+ * - 가로/세로 방향 (orientation: 'horizontal' | 'vertical')
+ * - 레이아웃 변형 (variant: 'fullWidth' | 'inset' | 'middle')
+ * - Flex 컨테이너 높이 맞춤 (flexItem)
+ * - 텍스트/칩 내장 및 정렬 (with-children, textAlign: 'left' | 'center' | 'right')
+ * - li 태그 다형성 대응 (list-style: none)
+ */
+
+.stn-divider {
+  margin: 0;
+  flex-shrink: 0;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--stn-divider-border);
+  box-sizing: border-box;
+}
+
+/* li 태그로 렌더링될 때 기본 불릿 제거 */
+li.stn-divider {
+  list-style: none;
+}
+
+/* ==========================================================================
+   1. Horizontal Divider (가로 구분선, 기본값)
+   ========================================================================== */
+
+.stn-divider--horizontal {
+  display: block;
+  width: 100%;
+  border-bottom-width: var(--stn-divider-thickness);
+}
+
+/* 1-1. Full Width (기본) */
+.stn-divider--horizontal.stn-divider--full-width {
+  width: 100%;
+}
+
+/* 1-2. Inset (좌측 시작 인덴트) */
+.stn-divider--horizontal.stn-divider--inset {
+  margin-left: var(--stn-divider-inset-margin);
+  width: calc(100% - var(--stn-divider-inset-margin));
+}
+
+/* 1-3. Middle (양쪽 여백 인덴트) */
+.stn-divider--horizontal.stn-divider--middle {
+  margin-left: var(--stn-divider-middle-margin);
+  margin-right: var(--stn-divider-middle-margin);
+  width: calc(100% - (var(--stn-divider-middle-margin) * 2));
+}
+
+/* ==========================================================================
+   2. Vertical Divider (세로 구분선)
+   ========================================================================== */
+
+.stn-divider--vertical {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  min-height: var(--stn-divider-vertical-height);
+  border-right-width: var(--stn-divider-thickness);
+  vertical-align: middle;
+}
+
+/* 2-1. Vertical Inset */
+.stn-divider--vertical.stn-divider--inset {
+  margin-top: var(--stn-space-16);
+  height: calc(100% - var(--stn-space-16));
+}
+
+/* 2-2. Vertical Middle */
+.stn-divider--vertical.stn-divider--middle {
+  margin-top: var(--stn-space-8);
+  margin-bottom: var(--stn-space-8);
+  height: calc(100% - (var(--stn-space-8) * 2));
+}
+
+/* 2-3. flexItem (Flex 부모 내 자동 세로 스트레칭) */
+.stn-divider--vertical.stn-divider--flex-item,
+.stn-divider--flex-item {
+  align-self: stretch;
+  height: auto;
+}
+
+/* ==========================================================================
+   3. Divider with Children (텍스트 / 칩 내장)
+   ========================================================================== */
+
+.stn-divider--with-children {
+  display: flex;
+  align-items: center;
+  border: 0;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.stn-divider--with-children::before,
+.stn-divider--with-children::after {
+  content: '';
+  border-top: var(--stn-divider-thickness) solid var(--stn-divider-border);
+}
+
+/* 3-1. Text Align Center */
+.stn-divider--text-center::before,
+.stn-divider--text-center::after {
+  flex: 1 1 0%;
+}
+
+/* 3-2. Text Align Left */
+.stn-divider--text-left::before {
+  flex: 0 0 var(--stn-divider-text-offset);
+}
+
+.stn-divider--text-left::after {
+  flex: 1 1 0%;
+}
+
+/* 3-3. Text Align Right */
+.stn-divider--text-right::before {
+  flex: 1 1 0%;
+}
+
+.stn-divider--text-right::after {
+  flex: 0 0 var(--stn-divider-text-offset);
+}
+
+/* 3-4. Inset / Middle 적용 시 with-children 너비 보정 */
+.stn-divider--with-children.stn-divider--inset {
+  margin-left: var(--stn-divider-inset-margin);
+  width: calc(100% - var(--stn-divider-inset-margin));
+}
+
+.stn-divider--with-children.stn-divider--middle {
+  margin-left: var(--stn-divider-middle-margin);
+  margin-right: var(--stn-divider-middle-margin);
+  width: calc(100% - (var(--stn-divider-middle-margin) * 2));
+}
+
+/* 3-5. 라벨 / 칩 래퍼 */
+.stn-divider__wrapper {
+  display: inline-flex;
+  align-items: center;
+  padding-left: var(--stn-divider-text-gap);
+  padding-right: var(--stn-divider-text-gap);
+  font-family: var(--stn-font-family);
+  font-size: var(--stn-text-caption-size, 12px);
+  font-weight: var(--stn-font-weight-medium, 500);
+  color: var(--stn-text-muted);
+  line-height: var(--stn-text-caption-line-height, 1.4);
+}

package/styles/components/stn-label-prefix.css

@@ -45,7 +45,7 @@
 .stn-label-prefix:has(.stn-dropdown.on),
 .stn-label-prefix:has(.stn-date-picker-popup),
 .stn-label-prefix:focus-within:has(.select_option) {
-  overflow: visible !important;
+  overflow: visible;
 }
 
 /* StnLabelPrefix 내부 드롭다운: 컨트롤 영역 기준으로 팝업 정렬 (방안 1) */
@@ -175,6 +175,8 @@
   background-color: var(--stn-input-bg);
 }
 
+
+
 /* 6-2. Filled (배경 채움) */
 .stn-label-prefix.filled {
   border: var(--stn-size-1, 1px) solid var(--stn-input-filled-border, transparent);
@@ -202,7 +204,7 @@
 /* 6-5. Translucent (반투명 블러 배경) */
 .stn-label-prefix.translucent {
   border: var(--stn-size-1, 1px) solid var(--stn-label-prefix-border-translucent, var(--stn-border-subtle));
-  background-color: var(--stn-label-prefix-bg-translucent, var(--stn-opacity-black-60));
+  background-color: var(--stn-label-prefix-bg-translucent, var(--stn-opacity-black-30));
   backdrop-filter: blur(var(--stn-label-prefix-translucent-blur, 8px));
   -webkit-backdrop-filter: blur(var(--stn-label-prefix-translucent-blur, 8px));
 }