@stn-uiux/pub-ui 0.1.57 → 0.1.58

package/dist/index.js

@@ -42,7 +42,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "./chunk-P5V6SFR7.js";
+} from "./chunk-EDXSK54U.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -51,7 +51,7 @@ import {
 import {
   STN_SIZE_SEMANTIC_INTRO,
   STN_SIZE_SEMANTIC_ROWS
-} from "./chunk-L7DYM4V7.js";
+} from "./chunk-2FHXIAM3.js";
 import {
   STN_SLIDER_HTML,
   STN_SLIDER_INTRO,
@@ -130,7 +130,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-QT4HHVZH.js";
+} from "./chunk-XPARWRVD.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -384,7 +384,7 @@ import {
   STN_SEARCH_REQUIREMENT_SPEC,
   STN_SEARCH_REQUIREMENT_USAGE,
   STN_SEARCH_REQUIREMENT_USAGE_HTML
-} from "./chunk-4C7ABT2K.js";
+} from "./chunk-AE4CKAEK.js";
 import {
   STN_POPUP_INTRO,
   STN_POPUP_INVENTORY_ROWS,
@@ -399,7 +399,7 @@ import {
   STN_POPUP_USAGE,
   STN_POPUP_USAGE_HTML,
   resolveStnPopupSizeFromWidth
-} from "./chunk-Q3W7QA7N.js";
+} from "./chunk-75GHU6VI.js";
 import {
   STN_ELEVATION_Z_INDEX,
   STN_LAYER_DIM_MODAL_HTML,
@@ -469,7 +469,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "./chunk-WRGBYWRV.js";
+} from "./chunk-LKVTW54X.js";
 import {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,
@@ -478,7 +478,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "./chunk-GR76L7M7.js";
+} from "./chunk-EQVFEZEQ.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -494,7 +494,7 @@ import {
   STN_DATE_PICKER_USAGE,
   STN_DATE_PICKER_USAGE_HTML,
   STN_DATE_PICKER_WEEKDAYS
-} from "./chunk-S4YA4H2S.js";
+} from "./chunk-YBNEQ5LB.js";
 import {
   STN_DATE_RANGE_FIELD_DEMO,
   STN_DATE_RANGE_FIELD_FIGMA,
@@ -505,7 +505,7 @@ import {
   STN_DATE_RANGE_FIELD_USAGE,
   formatStnDateRangeFieldValue,
   parseStnDateRangeFieldValue
-} from "./chunk-THCCTVUM.js";
+} from "./chunk-5F63CMM7.js";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
@@ -517,7 +517,7 @@ import {
   STN_ALERT_CENTER_USAGE,
   STN_ALERT_CENTER_USAGE_HTML,
   STN_GNB_ALERT_INTEGRATION_USAGE
-} from "./chunk-ZI6EF4XD.js";
+} from "./chunk-2WKT7X65.js";
 import {
   STN_INFOMAP_LOGO
 } from "./chunk-4BPDBOR3.js";
@@ -528,17 +528,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "./chunk-OMCBVK57.js";
+} from "./chunk-J46EPVSY.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "./chunk-V7HD6SBG.js";
+} from "./chunk-PVF77NHZ.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-XZ3JOUX2.js";
+} from "./chunk-TDLGKV4C.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,

package/package.json

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

package/styles/@assets/svg/system/line/eye-off.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 12C18.6 16 15.6 18 12 18C8.4 18 5.4 16 3 12C5.4 8 8.4 6 12 6C15.6 6 18.6 8 21 12Z" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 3L21 21" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/styles/components/stn-btn.css

@@ -120,7 +120,7 @@
   --stn-btn-font-weight: var(--stn-btn-font-weight-xl);
 }
 
-/* LG (44px) */
+/* LG (40px) — 8px 그리드 표준 통일 스케일 */
 .stn-btn.lg {
   --stn-btn-height: var(--stn-btn-height-lg);
   --stn-btn-min-width: var(--stn-btn-min-width-lg);

package/styles/components/stn-date-picker.css

@@ -198,21 +198,29 @@
   display: flex;
   flex: 1;
   min-width: 0;
+  width: 100%;
   height: calc(var(--stn-size-28) * 6);
   max-height: calc(var(--stn-size-28) * 6);
   overflow: hidden;
 }
 
-.stn-date-picker-time__scroll {
-  flex: 1;
-  height: calc(var(--stn-size-28) * 6);
+/* StnScroll이 variant="arrows"일 때 생성하는 wrapper(.stn-scroll-shell)도 1/3씩 균등 확장 */
+.stn-date-picker-time__columns > .stn-scroll-shell {
+  flex: 1 1 0%;
+  min-width: 0;
+  height: 100%;
   border-left: var(--stn-size-1) solid var(--calendar-border);
 }
 
-.stn-date-picker-time__scroll:first-child {
+.stn-date-picker-time__columns > .stn-scroll-shell:first-child {
   border-left: none;
 }
 
+.stn-date-picker-time__scroll {
+  width: 100%;
+  height: calc(var(--stn-size-28) * 6);
+}
+
 .stn-date-picker-time__column {
   margin: var(--stn-space-0);
   padding: var(--stn-space-0);
@@ -223,7 +231,7 @@
   display: block;
   width: 100%;
   margin: var(--stn-space-0);
-  padding: var(--stn-space-4) var(--stn-space-0);
+  padding: var(--stn-space-4) var(--stn-space-4); /* 좌우 패딩 추가 — 숫자 가독성 개선 */
   border: none;
   background: transparent;
   font-size: var(--stn-text-body-small-size);

package/styles/components/stn-date-range-field.css

@@ -1,6 +1,6 @@
 /**
  * StnDateRangeField — Infomap datetime range trigger (Figma 40000042:186907)
- * S 24px · M 32px · L 40px — TextField / Dropdown과 동일 스케일
+ * sm 24px · md 32px · lg 40px · xl 56px — 8px 그리드 표준 스케일 (TextField / Dropdown과 동일)
  */
 
 :root {
@@ -35,6 +35,22 @@ button.stn-date-range-field:focus-visible {
   border: var(--stn-input-focus);
 }
 
+/* Variant: transparent (테두리·배경 없음 — StnLabelPrefix 등 래퍼 내부 조합용) */
+button.stn-date-range-field.transparent {
+  border: none;
+  background-color: transparent;
+}
+
+button.stn-date-range-field.transparent:focus-visible {
+  border: none;
+  outline: none;
+}
+
+button.stn-date-range-field.transparent[aria-invalid='true'],
+button.stn-date-range-field.transparent.stn-date-range-field--invalid {
+  border-bottom: var(--stn-size-1) solid var(--stn-feedback-error);
+}
+
 button.stn-date-range-field[aria-invalid='true'],
 button.stn-date-range-field.stn-date-range-field--invalid {
   border-color: var(--stn-feedback-error);
@@ -50,15 +66,19 @@ button.stn-date-range-field.w100p {
   align-items: center;
   min-width: 0;
   max-width: 100%;
+  overflow: hidden;
 }
 
 .stn-date-range-field__text {
   display: inline-flex;
   align-items: center;
   min-width: 0;
+  max-width: 100%;
   white-space: nowrap;
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-input-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .stn-date-range-field__value {
@@ -88,10 +108,10 @@ button.stn-date-range-field.w100p {
   color: var(--stn-input-placeholder);
 }
 
-/* S — 24px */
+/* sm — 24px */
 button.stn-date-range-field.sm {
-  min-width: var(--stn-size-280);
-  height: var(--stn-size-24);
+  min-width: min(100%, var(--stn-date-range-field-min-width-sm));
+  height: var(--stn-date-range-field-height-sm);
   padding: var(--stn-space-0) var(--stn-space-10);
   border-radius: var(--stn-radius-input-sm);
   font-size: var(--stn-text-body-small-size);
@@ -108,14 +128,14 @@ button.stn-date-range-field.sm .stn-date-range-field__text {
 }
 
 button.stn-date-range-field.sm .stn-date-range-field__icon {
-  width: var(--stn-size-14);
-  height: var(--stn-size-14);
+  width: var(--stn-date-range-field-icon-size-sm);
+  height: var(--stn-date-range-field-icon-size-sm);
 }
 
-/* M — 32px (Figma) */
+/* md — 32px (Figma 기본값) */
 button.stn-date-range-field.md {
-  min-width: calc(var(--stn-size-320) + var(--stn-size-20));
-  height: var(--stn-size-32);
+  min-width: min(100%, var(--stn-date-range-field-min-width-md));
+  height: var(--stn-date-range-field-height-md);
   padding: var(--stn-space-0) var(--stn-space-12);
   border-radius: var(--stn-radius-input-md);
   font-size: var(--stn-text-body-small-size);
@@ -132,14 +152,14 @@ button.stn-date-range-field.md .stn-date-range-field__text {
 }
 
 button.stn-date-range-field.md .stn-date-range-field__icon {
-  width: var(--stn-size-16);
-  height: var(--stn-size-16);
+  width: var(--stn-date-range-field-icon-size-md);
+  height: var(--stn-date-range-field-icon-size-md);
 }
 
-/* L — 40px */
+/* lg — 40px */
 button.stn-date-range-field.lg {
-  min-width: var(--stn-size-360);
-  height: var(--stn-size-40);
+  min-width: min(100%, var(--stn-date-range-field-min-width-lg));
+  height: var(--stn-date-range-field-height-lg);
   padding: var(--stn-space-0) var(--stn-space-12);
   border-radius: var(--stn-radius-input-lg);
   font-size: var(--stn-text-body-medium-size);
@@ -156,6 +176,123 @@ button.stn-date-range-field.lg .stn-date-range-field__text {
 }
 
 button.stn-date-range-field.lg .stn-date-range-field__icon {
-  width: var(--stn-size-16);
-  height: var(--stn-size-16);
+  width: var(--stn-date-range-field-icon-size-lg);
+  height: var(--stn-date-range-field-icon-size-lg);
+}
+
+/* xl — 56px */
+button.stn-date-range-field.xl {
+  min-width: min(100%, var(--stn-date-range-field-min-width-xl));
+  height: var(--stn-date-range-field-height-xl);
+  padding: var(--stn-space-0) var(--stn-space-16);
+  border-radius: var(--stn-radius-input-lg);
+  font-size: var(--stn-text-body-medium-size);
+  line-height: var(--stn-line-height-px-54);
+}
+
+button.stn-date-range-field.xl .stn-date-range-field__inner {
+  gap: var(--stn-space-10);
+}
+
+button.stn-date-range-field.xl .stn-date-range-field__text {
+  gap: var(--stn-space-12);
+  font-size: var(--stn-text-body-medium-size);
+}
+
+button.stn-date-range-field.xl .stn-date-range-field__icon {
+  width: var(--stn-date-range-field-icon-size-xl);
+  height: var(--stn-date-range-field-icon-size-xl);
+}
+
+/* ==========================================================================
+   Width Presets & Label Wrap Layout
+   ========================================================================== */
+:is(.stn-date-range-field, .stn-date-range-field-wrap):is(.full, .stn-date-range-field--full, .w100p) {
+  width: 100%;
+}
+
+.stn-date-range-field-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-shrink: 0;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.stn-date-range-field-wrap button.stn-date-range-field {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.stn-date-range-field-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.stn-date-range-field-wrap--row {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--stn-space-8);
+}
+
+.stn-date-range-field-wrap--row .stn-date-range-field-wrap__body {
+  width: auto;
+  flex: 1 1 auto;
+}
+
+.stn-date-range-field-wrap--col {
+  flex-direction: column;
+  gap: var(--stn-space-6);
+}
+
+.stn-date-range-field-wrap--col .stn-date-range-field-wrap__body {
+  width: 100%;
+}
+
+.stn-date-range-field__label {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-4);
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-body-small-size);
+  font-weight: var(--stn-font-weight-medium);
+  color: var(--stn-text-primary);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.stn-date-range-field__label-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-date-range-field__required {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold);
+  line-height: 1;
+  margin-inline-start: var(--stn-space-2);
+}
+
+.stn-date-range-field__helper {
+  font-size: var(--stn-text-body-small-size);
+  line-height: var(--stn-line-height-tight);
+  color: var(--stn-text-secondary);
+  word-break: break-word;
+  white-space: nowrap;
+  margin-top: var(--stn-space-4);
+}
+
+.stn-date-range-field__helper--error {
+  color: var(--stn-feedback-error);
 }