@nexus-cross/design-system 2.0.0 → 2.0.2

package/dist/styles/.generated/built.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"built.d.ts","sourceRoot":"","sources":["../../../src/styles/.generated/built.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,GAAG,k8nJAAg+6H,CAAC;AAC1+6H,eAAe,GAAG,CAAC"}
+{"version":3,"file":"built.d.ts","sourceRoot":"","sources":["../../../src/styles/.generated/built.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,GAAG,y04JAAijmI,CAAC;AAC3jmI,eAAe,GAAG,CAAC"}

package/dist/styles/layer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3SCSND6S_js = require('../chunks/chunk-3SCSND6S.js');
+var chunkJICW6KWH_js = require('../chunks/chunk-JICW6KWH.js');
 
 // src/styles/inject-layer.ts
 var STYLE_ID = "__nexus-ds-layer__";
@@ -8,7 +8,7 @@ var __nexus_styles_injected__ = typeof document !== "undefined" && !document.get
   const style = document.createElement("style");
   style.id = STYLE_ID;
   style.textContent = `@layer nexus {
-${chunk3SCSND6S_js.built_default}
+${chunkJICW6KWH_js.built_default}
 }`;
   document.head.appendChild(style);
   return true;

package/dist/styles/layer.mjs

@@ -1,4 +1,4 @@
-import { built_default } from '../chunks/chunk-QWK4CLS2.mjs';
+import { built_default } from '../chunks/chunk-3NSJMG3G.mjs';
 
 // src/styles/inject-layer.ts
 var STYLE_ID = "__nexus-ds-layer__";

package/dist/styles.css

@@ -341,10 +341,12 @@
   gap: 0.25rem;
 }
 .nexus-text-input-field__label {
-  font-size: var(--text-text-sm, 0.875rem);
-  font-weight: 600;
-  color: var(--color-text-muted);
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈/색상. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   line-height: 1;
+  color: var(--color-text-tertiary);
 }
 .nexus-text-input-field__footer {
   display: flex;
@@ -353,7 +355,7 @@
 }
 .nexus-text-input-field__description {
   font-size: var(--text-text-xs, 0.75rem);
-  color: var(--color-text-muted);
+  color: var(--color-text-tertiary);
   line-height: 1.5;
   letter-spacing: -0.12px;
 }
@@ -362,7 +364,7 @@
 }
 .nexus-text-input-field__count {
   font-size: var(--text-text-xs, 0.75rem);
-  color: var(--color-text-muted);
+  color: var(--color-text-tertiary);
   margin-left: auto;
   flex-shrink: 0;
 }
@@ -486,8 +488,10 @@
   gap: 0.5rem;
 }
 .nexus-price-input-field__label {
-  font-size: var(--text-text-sm, 0.875rem);
-  font-weight: 600;
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   color: var(--color-text-tertiary);
   line-height: 1;
 }
@@ -644,8 +648,10 @@
   gap: 0.25rem;
 }
 .nexus-textarea-field__label {
-  font-size: var(--text-label-semibold-md, 0.875rem);
-  font-weight: 600;
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   color: var(--color-text-tertiary);
   line-height: 1;
 }
@@ -791,8 +797,10 @@
   margin-bottom: 4px;
 }
 .nexus-number-input__label {
-  font-size: var(--text-label-semibold-md, 0.875rem);
-  font-weight: var(--font-weight-label-semibold-md, 600);
+  /* label-semibold-sm 토큰 기준 (12px / 600). TextInput과 동일한 라벨 사이즈로 sync. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   line-height: 1;
   color: var(--color-text-tertiary);
 }
@@ -895,7 +903,6 @@
   border: none;
   background: transparent;
   outline: none;
-  font-size: var(--text-label-lg, 1rem);
   font-weight: var(--font-weight-label-lg, 500);
   line-height: 1;
   color: var(--color-text-primary);
@@ -911,26 +918,82 @@
   cursor: not-allowed;
 }
 
-/* ── Size: field padding (basic) ── */
-.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {
-  padding: var(--spacing-padding-sm, 0.75rem);
+/* ── Size: field padding + font-size ──
+ * TextInput과 동일한 사이즈 체계 (md / lg / xl).
+ * basic, bind 변형 모두 동일 padding/font를 사용 (variant는 좌우 컨트롤만 다름).
+ *
+ * :where()로 명시도 0 — 외부 className의 height/padding/font utility(`h-12`, `py-3`, `text-base`)
+ * 가 항상 우선해서 사이즈 오버라이드가 자연스럽게 동작한다.
+ */
+:where(.nexus-number-input--md) .nexus-number-input__field {
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
 }
-.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {
-  padding: var(--spacing-padding-md, 1rem);
+:where(.nexus-number-input--lg) .nexus-number-input__field {
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+:where(.nexus-number-input--xl) .nexus-number-input__field {
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px) var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+
+/* ── Prefix / Suffix icon (text or ReactNode) ──
+ * basic / bind variant 모두 공통.
+ * field padding과 자연스럽게 이어지도록 padding-inline은 size별 :where() 규칙 참고.
+ * 좌측 prefix는 field 좌측 padding을 줄여서 visual gap 통일.
+ */
+.nexus-number-input__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  font-size: inherit;
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+}
+:where(.nexus-number-input--md) .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+:where(.nexus-number-input--lg) .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+:where(.nexus-number-input--xl) .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+:where(.nexus-number-input__icon--suffix) {
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-padding-sm, 0.75rem);
+}
+:where(.nexus-number-input--xl .nexus-number-input__icon--suffix) {
+  padding-inline-end: var(--spacing-padding-md, 1rem);
+}
+/* prefix가 있으면 field 좌측 padding을 한번만 가지도록 (icon이 좌측 패딩 담당) */
+:where(.nexus-number-input__icon--prefix) ~ .nexus-number-input__field {
+  padding-inline-start: var(--spacing-padding-xs, 0.5rem);
+}
+.nexus-number-input--disabled .nexus-number-input__icon {
+  color: var(--color-text-muted);
 }
 
-/* ── Size: field padding (bind) ── */
+/* ── Bind variant: 좌우 ± 버튼이 들어갈 자리 ── */
 .nexus-number-input--bind .nexus-number-input__container {
   padding-inline: var(--spacing-padding-xs, 0.5rem);
 }
 .nexus-number-input--bind .nexus-number-input__field {
   text-align: center;
 }
-.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {
-  padding: var(--spacing-padding-sm, 0.75rem);
+/* bind variant에서는 ± 버튼이 padding 역할이므로 icon padding 살짝만 */
+.nexus-number-input--bind .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-2xs, 0.25rem);
 }
-.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {
-  padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);
+.nexus-number-input--bind .nexus-number-input__icon--suffix {
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-padding-2xs, 0.25rem);
 }
 
 /* ── Basic variant: chevron buttons column ── */
@@ -1004,7 +1067,17 @@
   color: var(--color-text-muted);
   cursor: not-allowed;
 }
-.nexus-number-input--xl .nexus-number-input__bind-btn {
+/* bind ± 버튼: 사이즈별로 가시 영역이 자연스럽게 늘어나도록.
+ * :where()로 명시도 0 — 외부 className으로 버튼 크기도 오버라이드 가능. */
+:where(.nexus-number-input--md) .nexus-number-input__bind-btn {
+  width: 20px;
+  height: 20px;
+}
+:where(.nexus-number-input--lg) .nexus-number-input__bind-btn {
+  width: 24px;
+  height: 24px;
+}
+:where(.nexus-number-input--xl) .nexus-number-input__bind-btn {
   width: 30px;
   height: 30px;
 }
@@ -1828,6 +1901,15 @@
   border-radius: var(--radius-corner-lg, 0.5rem);
   padding: 0.25rem;
 }
+/* fullWidth: 모든 트리거를 균등 분할해서 부모 너비를 채움. :where()로 specificity 0
+   → 사용처에서 className(w-*, flex-*)으로 자유롭게 오버라이드 가능. */
+:where(.nexus-tab-list--full-width) {
+  width: 100%;
+}
+:where(.nexus-tab-list--full-width) .nexus-tab-trigger {
+  flex: 1;
+  justify-content: center;
+}
 .nexus-tab-trigger {
   position: relative;
   display: inline-flex;
@@ -1915,7 +1997,10 @@
 
 .nexus-spinner {
   animation: nexus-spin 1s linear infinite;
-  color: currentColor;
+}
+/* default color: brand primary (semantic). :where()로 specificity 0 → 외부 className(text-*, color)이 항상 우선 override 가능. */
+:where(.nexus-spinner) {
+  color: var(--color-accent-primary);
 }
 
 /* ═══════════════════════════════════════════
@@ -2141,16 +2226,17 @@
 .nexus-select-trigger--outline {
   background: var(--color-surface-default);
 }
-.nexus-select-trigger--sm {
+/* size variant width: :where() 로 명시도 0 — 외부 className 의 w- / min-w- / max-w- 유틸이 항상 우선. */
+:where(.nexus-select-trigger--sm) {
   width: 4rem;
 }
-.nexus-select-trigger--md {
+:where(.nexus-select-trigger--md) {
   width: 8rem;
 }
-.nexus-select-trigger--lg {
+:where(.nexus-select-trigger--lg) {
   width: 12rem;
 }
-.nexus-select-trigger--full {
+:where(.nexus-select-trigger--full) {
   width: 100%;
 }
 .nexus-select-trigger--justify-end {
@@ -2226,17 +2312,19 @@
     transform: translateY(-4px) scaleY(0.96);
   }
 }
-.nexus-select-content--sm {
-  width: 4rem;
-}
-.nexus-select-content--md {
-  width: 8rem;
-}
-.nexus-select-content--lg {
-  width: 12rem;
-}
-.nexus-select-content--full {
+/* Content는 size variant와 무관하게 항상 trigger 너비를 추종한다.
+ * - size는 트리거 크기만 결정. content는 anchor-width로 자동 동기화 → 외부 className으로
+ *   Select 하나만 늘리면 드롭다운/Item도 자연스럽게 같이 늘어난다.
+ * - SelectItem이 anchor-width보다 더 크면 min-width가 그대로라 content가 자식 너비만큼 자연
+ *   확장된다.
+ * - 별도 너비를 원하면 `contentClassName`으로 명시적으로 오버라이드 (외부 className은 :where()
+ *   덕분에 항상 우선). */
+:where(.nexus-select-content--sm),
+:where(.nexus-select-content--md),
+:where(.nexus-select-content--lg),
+:where(.nexus-select-content--full) {
   width: var(--radix-popper-anchor-width);
+  min-width: var(--radix-popper-anchor-width);
 }
 .nexus-select-viewport {
   padding: 0.25rem;
@@ -2245,7 +2333,6 @@
 .nexus-select-item {
   position: relative;
   display: flex;
-  width: 100%;
   cursor: pointer;
   align-items: center;
   border-radius: var(--radius-corner-sm, 0.25rem);
@@ -2257,6 +2344,10 @@
   outline: none;
   user-select: none;
 }
+/* width 만 :where()로 명시도 0 — 외부 className 의 w-* 가 항상 우선. */
+:where(.nexus-select-item) {
+  width: 100%;
+}
 .nexus-select-item:hover,
 .nexus-select-item:focus,
 .nexus-select-item[data-highlighted] {
@@ -4579,6 +4670,53 @@
   height: 16px;
 }
 
+/* ─── ImageUpload: previewMode="cover" — 박스 가득 채우는 풀 이미지 ─── */
+.nexus-image-upload--preview-cover {
+  position: relative;
+  display: block;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-style: solid;
+  background: var(--color-surface-strong);
+  cursor: pointer;
+  /* X 버튼이 모서리 밖으로 살짝 튀어나올 수 있도록 visible. 이미지는 아래 clip wrapper가 라운드 처리. */
+  overflow: visible;
+}
+.nexus-image-upload--preview-cover:hover {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+/* 이미지 클리핑 — 박스 border-radius와 동일하게 라운드. */
+.nexus-image-upload__preview-cover-clip {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--radius-corner-md, 8px);
+}
+.nexus-image-upload__preview-cover-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  pointer-events: none;
+}
+.nexus-image-upload__preview-cover-img--contain {
+  object-fit: contain;
+}
+/* cover 모드의 X 버튼 — card preview와 동일하게 우측 상단 모서리에 걸치는 형태. */
+.nexus-image-upload__remove--cover {
+  top: -6px;
+  right: -6px;
+  background: var(--color-surface-inverted);
+  color: var(--color-icon-inverted);
+}
+.nexus-image-upload__remove--cover:hover {
+  opacity: 0.85;
+  background: var(--color-surface-inverted);
+}
+
 .nexus-image-upload__info {
   display: flex;
   flex-direction: column;
@@ -4616,10 +4754,11 @@
   gap: var(--spacing-gap-xs, 0.25rem);
 }
 .nexus-image-upload-field__label {
-  font-size: var(--text-label-semibold-md);
-  font-weight: var(--font-weight-label-semibold-md, 600);
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
   line-height: 1;
-  letter-spacing: var(--letter-spacing-label-semibold-md, 0);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   color: var(--color-text-tertiary);
 }
 .nexus-image-upload-field__description {
@@ -4830,8 +4969,10 @@
   gap: var(--spacing-gap-xs, 0.25rem);
 }
 .nexus-combobox-field__label {
-  font-size: var(--text-label-semibold-md);
-  font-weight: var(--font-weight-label-semibold-md, 600);
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   line-height: 1;
   color: var(--color-text-tertiary);
 }

package/dist/styles.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk3SCSND6S_js = require('./chunks/chunk-3SCSND6S.js');
+var chunkJICW6KWH_js = require('./chunks/chunk-JICW6KWH.js');
 
 // src/styles/inject.ts
 var STYLE_ID = "__nexus-ds__";
 var __nexus_styles_injected__ = typeof document !== "undefined" && !document.getElementById(STYLE_ID) ? (() => {
   const style = document.createElement("style");
   style.id = STYLE_ID;
-  style.textContent = chunk3SCSND6S_js.built_default;
+  style.textContent = chunkJICW6KWH_js.built_default;
   document.head.appendChild(style);
   return true;
 })() : false;