@uniai-fe/uds-primitives 0.3.5 → 0.3.7

package/dist/styles.css

@@ -316,6 +316,7 @@
   /* Layout presets */
   --input-width: 100%;
   --input-flex: 0 1 auto;
+  --input-layout-gap: var(--spacing-gap-3);
   /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
   --input-default-height-small: var(--theme-size-medium-1);
   --input-default-height-medium: var(--theme-size-medium-2);
@@ -323,10 +324,16 @@
   --input-tertiary-height-base: calc(var(--theme-size-medium-2) + 24px);
   --input-default-padding-inline: var(--spacing-padding-6);
   --input-default-padding-block: var(--spacing-padding-4);
+  --input-secondary-padding-block: var(--spacing-padding-4);
   --input-default-gap: var(--spacing-gap-4);
+  --input-affix-gap: var(--spacing-gap-3);
+  --input-utility-gap: var(--spacing-gap-2);
+  --input-tertiary-row-gap: var(--spacing-gap-1);
+  --input-tertiary-control-row-gap: var(--spacing-gap-1);
   --input-default-radius-base: var(--theme-radius-large-1);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
   --input-table-radius-base: 0;
+  --input-tertiary-element-min-height: var(--theme-size-medium-2);
   --input-table-text-small-size: var(--font-body-xxsmall-size);
   --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
   --input-table-text-small-weight: var(--font-body-xxsmall-weight);
@@ -340,13 +347,26 @@
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
   --input-label-error-color: var(--color-error);
+  --input-label-font-size: var(--font-label-small-size);
+  --input-label-line-height: var(--font-label-small-line-height);
+  --input-label-font-weight: var(--font-label-small-weight);
   --input-helper-color: var(--color-label-neutral);
   --input-helper-success-color: var(--color-success);
   --input-helper-error-color: var(--color-error);
   --input-helper-disabled-color: var(--color-label-disabled);
+  --input-helper-font-size: var(--font-label-small-size);
+  --input-helper-line-height: var(--font-label-small-line-height);
   /* Text & placeholder colors */
   --input-text-color: var(--color-label-strong);
+  --input-text-readonly-color: var(--color-label-strong);
+  --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
+  --input-placeholder-disabled-color: var(--color-label-disabled);
+  --input-placeholder-readonly-color: var(--input-placeholder-disabled-color);
+  --input-font-size: var(--font-body-medium-size);
+  --input-line-height: var(--font-body-medium-line-height);
+  --input-font-weight: 400;
+  --input-letter-spacing: 0px;
   /* Border tokens */
   --input-border-color: var(--color-border-standard-cool-gray);
   --input-border-width-default: 1px;
@@ -354,6 +374,8 @@
   --input-border-active-color: var(--color-blue-80);
   --input-border-success-color: var(--color-blue-80);
   --input-border-table-default-color: transparent;
+  --input-border-table-disabled-color: var(--input-border-table-default-color);
+  --input-border-table-readonly-color: var(--input-border-table-disabled-color);
   /* error는 Figma 44% alpha */
   --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
@@ -362,6 +384,15 @@
   --input-surface-color: var(--color-common-100);
   --input-surface-muted-color: var(--color-neutral-99);
   --input-surface-disabled-color: var(--color-neutral-95);
+  --input-table-surface-color: transparent;
+  --input-table-surface-disabled-color: var(--input-table-surface-color);
+  --input-table-surface-readonly-color: var(
+  --input-table-surface-disabled-color
+  );
+  --input-secondary-surface-color: transparent;
+  /* Status/affix colors */
+  --input-status-error-color: var(--color-error);
+  --input-status-success-color: var(--color-primary-default);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;
@@ -405,6 +436,8 @@
   /* layout presets */
   --select-width: 100%;
   --select-flex: 0 1 auto;
+  --select-layout-gap: var(--spacing-gap-2);
+  --select-value-gap: var(--spacing-gap-2);
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);
@@ -426,9 +459,16 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-readonly-color: var(
+  --select-table-border-disabled-color
+  );
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
+  --select-table-surface-readonly-color: var(
+  --select-table-surface-disabled-color
+  );
   --select-table-color-text: var(--input-text-color);
+  --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
   --select-table-icon-color-default: var(--select-icon-color-default);
   --select-table-icon-color-focused: var(--select-icon-color-focused);
@@ -464,9 +504,11 @@
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;
   --select-primary-color-placeholder: var(--input-placeholder-color);
+  --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);
   --select-primary-color-text-disabled: var(--color-label-disabled);
+  --select-primary-color-text-readonly: var(--color-label-strong);
   --select-primary-color-border: var(--input-border-color);
   --select-primary-color-border-focused: var(--input-border-active-color);
   --select-primary-color-border-disabled: var(--input-border-disabled-color);
@@ -478,7 +520,15 @@
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-text-disabled: var(--color-label-disabled);
+  --select-secondary-color-text-readonly: var(
+  --select-primary-color-text-readonly
+  );
   --select-secondary-color-placeholder: var(--color-label-alternative);
+  --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
+  --select-secondary-color-placeholder-readonly: var(
+  --select-secondary-color-placeholder-disabled
+  );
   --select-color-surface-secondary: transparent;
   --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
   --select-color-surface-secondary-active: var(--color-surface-standard);
@@ -488,8 +538,10 @@
   --select-icon-color-disabled: var(--color-cool-gray-85);
   /* Multi select chip */
   --select-multiple-chip-gap: var(--spacing-gap-2);
+  --select-multiple-tag-label-gap: var(--spacing-gap-1);
   --select-multiple-chip-padding-inline: var(--spacing-padding-4);
   --select-multiple-chip-padding-block: 0px;
+  --select-multiple-chip-removable-padding-right: var(--spacing-padding-2);
   --select-multiple-chip-radius: var(--theme-radius-medium-2);
   --select-multiple-chip-font-size: var(--font-body-small-size);
   --select-multiple-chip-line-height: var(--font-body-small-line-height);
@@ -501,6 +553,7 @@
   --select-multiple-chip-border-color: transparent;
   --select-multiple-chip-remove-color: var(--color-label-strong);
   --select-multiple-chip-remove-hover-color: var(--color-label-strong);
+  --select-multiple-chip-remove-focus-outline-color: var(--color-border-strong);
   --select-multiple-chip-summary-color: var(--color-label-standard);
   --select-multiple-chip-summary-surface: var(--color-surface-standard);
   --select-multiple-chip-summary-border-color: transparent;
@@ -512,6 +565,8 @@
   --font-body-medium-line-height
   );
   --select-multiple-chip-summary-font-weight: 400;
+  /* Typography tokens */
+  --select-text-font-family: var(--font-body-medium-family);
   --table-border-color: var(--color-border-standard-cool-gray);
   --table-line-head-background-color: var(--color-surface-static-cool-gray);
   --table-grid-head-background-color: var(
@@ -522,6 +577,7 @@
   );
   --table-grid-row-highlight-background-color: rgba(229, 238, 255, 0.52);
   --table-cell-background-color: var(--color-surface-static-white);
+  --table-cell-content-gap: var(--spacing-gap-2);
   --table-line-cell-height-head: 44px;
   --table-line-cell-height-body: 56px;
   --table-grid-cell-height: 48px;
@@ -2317,7 +2373,7 @@ figure.chip {
 .input {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-3);
+  gap: var(--input-layout-gap);
   width: var(--input-width);
   flex: var(--input-flex);
   min-width: 0;
@@ -2347,9 +2403,9 @@ figure.chip {
 
 .input-label {
   color: var(--input-label-color);
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
-  font-weight: var(--font-label-small-weight);
+  font-size: var(--input-label-font-size);
+  line-height: var(--input-label-line-height);
+  font-weight: var(--input-label-font-weight);
 }
 
 .input-label--visually-hidden {
@@ -2395,8 +2451,8 @@ figure.chip {
   border-bottom: var(--input-border-width-default) solid var(--input-border-color);
   border-radius: 0;
   padding-inline: 0;
-  padding-block: var(--spacing-padding-4);
-  background-color: transparent;
+  padding-block: var(--input-secondary-padding-block);
+  background-color: var(--input-secondary-surface-color);
 }
 .input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
   border-bottom-color: var(--input-border-active-color);
@@ -2418,7 +2474,7 @@ figure.chip {
   border-radius: var(--input-tertiary-radius-base);
   background-color: var(--input-surface-color);
   min-height: var(--input-tertiary-height-base);
-  row-gap: var(--spacing-gap-1);
+  row-gap: var(--input-tertiary-row-gap);
   column-gap: var(--input-default-gap);
   flex-wrap: wrap;
   align-items: center;
@@ -2427,7 +2483,7 @@ figure.chip {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   column-gap: var(--input-default-gap);
-  row-gap: var(--spacing-gap-1);
+  row-gap: var(--input-tertiary-control-row-gap);
   align-items: center;
   flex: 1 1 auto;
   min-width: 0;
@@ -2438,7 +2494,7 @@ figure.chip {
   align-self: flex-start;
 }
 .input-field[data-priority=tertiary] .input-element {
-  min-height: var(--theme-size-medium-2);
+  min-height: var(--input-tertiary-element-min-height);
   width: auto;
   flex: 1 1 auto;
 }
@@ -2449,7 +2505,15 @@ figure.chip {
 .input-field[data-priority=table] {
   border-radius: var(--input-table-radius-base);
   border-color: var(--input-border-table-default-color);
-  background-color: transparent;
+  background-color: var(--input-table-surface-color);
+}
+.input-field[data-priority=table][data-state=disabled] {
+  border-color: var(--input-border-table-disabled-color);
+  background-color: var(--input-table-surface-disabled-color);
+}
+.input-field[data-priority=table][data-readonly=true] {
+  border-color: var(--input-border-table-readonly-color);
+  background-color: var(--input-table-surface-readonly-color);
 }
 .input-field:not([data-priority=secondary])[data-state=active], .input-field:not([data-priority=secondary])[data-state=focused] {
   border-color: var(--input-border-active-color);
@@ -2468,6 +2532,11 @@ figure.chip {
   border-width: var(--input-border-width-default);
   background-color: var(--input-surface-disabled-color); /* disabled 배경 토큰 */
 }
+.input-field:not([data-priority=secondary])[data-readonly=true] {
+  border-color: var(--input-border-disabled-color);
+  border-width: var(--input-border-width-default);
+  background-color: var(--input-surface-disabled-color);
+}
 
 .input-element {
   flex: 1 1 auto;
@@ -2476,10 +2545,10 @@ figure.chip {
   background: transparent;
   color: var(--input-text-color);
   caret-color: var(--input-text-color);
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: 400;
-  letter-spacing: 0px;
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+  font-weight: var(--input-font-weight);
+  letter-spacing: var(--input-letter-spacing);
   outline: none;
   box-shadow: none;
   min-width: 0;
@@ -2487,11 +2556,18 @@ figure.chip {
 .input-element::placeholder {
   color: var(--input-placeholder-color);
 }
+.input-element:read-only {
+  color: var(--input-text-readonly-color);
+  caret-color: var(--input-text-readonly-color);
+}
+.input-element:read-only::placeholder {
+  color: var(--input-placeholder-readonly-color);
+}
 .input-element:disabled {
-  color: var(--color-label-disabled);
+  color: var(--input-text-disabled-color);
 }
 .input-element:disabled::placeholder {
-  color: var(--color-label-disabled);
+  color: var(--input-placeholder-disabled-color);
 }
 .input-element:focus, .input-element:focus-visible, .input-element:focus-within {
   outline: none;
@@ -2509,9 +2585,9 @@ figure.chip {
 .input-field-utilities {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-2);
+  gap: var(--input-utility-gap);
   flex-shrink: 0;
-  margin-left: var(--spacing-gap-3);
+  margin-left: var(--input-affix-gap);
 }
 .input-field-utilities .input-affix {
   margin-left: 0;
@@ -2520,8 +2596,8 @@ figure.chip {
 .input-inline-label {
   order: -2;
   flex-basis: 100%;
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
+  font-size: var(--input-label-font-size);
+  line-height: var(--input-label-line-height);
   color: var(--input-label-color);
 }
 
@@ -2530,7 +2606,7 @@ figure.chip {
 }
 
 .input-field[data-priority=tertiary] .input-element {
-  min-height: var(--theme-size-medium-2);
+  min-height: var(--input-tertiary-element-min-height);
 }
 
 .input-field[data-priority=table][data-size=small] .input-element {
@@ -2553,8 +2629,8 @@ figure.chip {
 
 .input-helper-text {
   color: var(--input-helper-color);
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
+  font-size: var(--input-helper-font-size);
+  line-height: var(--input-helper-line-height);
 }
 [data-state=error] .input-helper-text {
   color: var(--input-border-error-color);
@@ -2572,19 +2648,19 @@ figure.chip {
 }
 .input-affix-left {
   order: -1;
-  margin-right: var(--spacing-gap-3);
+  margin-right: var(--input-affix-gap);
 }
 .input-affix-right, .input-affix-clear, .input-affix-status {
-  margin-left: var(--spacing-gap-3);
+  margin-left: var(--input-affix-gap);
 }
 .input-affix-clear, .input-affix-status {
   color: var(--input-text-color);
 }
 .input-affix-status[data-state=error] {
-  color: var(--color-error);
+  color: var(--input-status-error-color);
 }
 .input-affix-status[data-state=success] {
-  color: var(--color-primary-default);
+  color: var(--input-status-success-color);
 }
 
 .input-field[data-priority=secondary] {
@@ -2606,6 +2682,10 @@ figure.chip {
   border-bottom-color: var(--input-border-underline-disabled-color);
   border-bottom-width: var(--input-border-width-default);
 }
+.input-field[data-priority=secondary][data-readonly=true] {
+  border-bottom-color: var(--input-border-underline-disabled-color);
+  border-bottom-width: var(--input-border-width-default);
+}
 
 .input[data-state=active] .input-label,
 .input[data-state=active] .input-inline-label,
@@ -2635,11 +2715,16 @@ figure.chip {
   background-color: var(--input-surface-disabled-color);
 }
 .input[data-state=disabled] .input-field[data-priority=secondary] {
-  background-color: transparent;
+  background-color: var(--input-secondary-surface-color);
 }
 .input[data-state=disabled] .input-field[data-priority=table] {
-  background-color: transparent;
-  border-color: var(--input-border-table-default-color);
+  background-color: var(--input-table-surface-disabled-color);
+  border-color: var(--input-border-table-disabled-color);
+}
+
+.input[data-readonly=true] .input-field[data-priority=table] {
+  background-color: var(--input-table-surface-readonly-color);
+  border-color: var(--input-border-table-readonly-color);
 }
 
 .input-side {
@@ -3496,7 +3581,7 @@ figure.chip {
   width: var(--select-width);
   flex: var(--select-flex);
   flex-direction: column;
-  gap: var(--spacing-gap-2);
+  gap: var(--select-layout-gap);
   min-width: 0;
 }
 
@@ -3535,7 +3620,7 @@ figure.chip {
   padding: var(--select-primary-padding-block) var(--select-primary-padding-inline);
   border: var(--select-primary-border-width-default) solid var(--select-primary-color-border);
   border-radius: var(--select-primary-radius-medium);
-  background-color: var(--input-surface-color);
+  background-color: var(--select-primary-color-surface);
   cursor: pointer;
   transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
   text-align: left;
@@ -3580,7 +3665,7 @@ figure.chip {
   background-color: var(--select-color-border-secondary-focused);
 }
 .select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
-  color: var(--color-label-disabled);
+  color: var(--select-secondary-color-text-disabled);
   cursor: not-allowed;
 }
 .select-button[data-priority=table] {
@@ -3599,6 +3684,27 @@ figure.chip {
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-table-icon-color-focused);
 }
+.select-button:not([data-priority=secondary])[data-readonly=true] {
+  border-color: var(--select-primary-color-border-disabled);
+  background-color: var(--select-primary-color-surface-disabled);
+  cursor: default;
+  --select-icon-fill: var(--select-icon-color-disabled);
+}
+.select-button[data-priority=secondary][data-readonly=true] {
+  border-color: transparent;
+  background-color: var(--select-color-surface-secondary-disabled);
+  cursor: default;
+}
+.select-button[data-priority=secondary][data-readonly=true]::after {
+  background-color: var(--select-color-border-secondary-disabled);
+  height: var(--select-secondary-underline-width-default);
+}
+.select-button[data-priority=table][data-readonly=true] {
+  border-color: var(--select-table-border-readonly-color);
+  background-color: var(--select-table-surface-readonly-color);
+  cursor: not-allowed;
+  --select-icon-fill: var(--select-table-icon-color-disabled);
+}
 .select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
   border-color: var(--select-primary-color-border-disabled);
   background-color: var(--select-primary-color-surface-disabled);
@@ -3625,13 +3731,13 @@ figure.chip {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-2);
+  gap: var(--select-value-gap);
 }
 
 .select-label {
   flex: 1 1 auto;
   min-width: 0;
-  font-family: var(--font-body-medium-family);
+  font-family: var(--select-text-font-family);
   font-size: var(--select-text-medium-size);
   font-weight: var(--select-text-medium-weight);
   line-height: var(--select-text-medium-line-height);
@@ -3647,14 +3753,23 @@ figure.chip {
 .select-button[data-priority=table] .select-label {
   color: var(--select-table-color-text);
 }
+.select-button[data-priority=table][data-readonly=true] .select-label {
+  color: var(--select-table-color-text-readonly);
+}
 .select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
   color: var(--select-primary-color-text-focused);
 }
 .select-button[data-state=disabled] .select-label {
   color: var(--select-primary-color-text-disabled);
 }
+.select-button[data-readonly=true] .select-label {
+  color: var(--select-primary-color-text-readonly);
+}
 .select-button[data-priority=secondary][data-state=disabled] .select-label {
-  color: var(--color-label-disabled);
+  color: var(--select-secondary-color-text-disabled);
+}
+.select-button[data-priority=secondary][data-readonly=true] .select-label {
+  color: var(--select-secondary-color-text-readonly);
 }
 
 .select-label-placeholder {
@@ -3666,6 +3781,12 @@ figure.chip {
 .select-button[data-priority=table] .select-label-placeholder {
   color: var(--select-table-color-placeholder);
 }
+.select-button[data-state=disabled] .select-label-placeholder, .select-button[data-readonly=true] .select-label-placeholder {
+  color: var(--select-primary-color-text-disabled);
+}
+.select-button[data-priority=secondary][data-state=disabled] .select-label-placeholder, .select-button[data-priority=secondary][data-readonly=true] .select-label-placeholder {
+  color: var(--select-secondary-color-placeholder-disabled);
+}
 
 .select-button[data-size=small] .select-label {
   font-size: var(--select-text-small-size);
@@ -3718,7 +3839,7 @@ figure.chip {
   gap: var(--select-multiple-chip-gap);
   padding: var(--select-multiple-chip-padding-block) var(--select-multiple-chip-padding-inline);
   border-radius: var(--select-multiple-chip-radius);
-  border: 1px solid var(--select-multiple-chip-border-color, var(--color-border-standard-cool-gray));
+  border: 1px solid var(--select-multiple-chip-border-color);
   background-color: var(--select-multiple-chip-surface);
   color: var(--select-multiple-chip-color);
   font-size: var(--select-multiple-chip-font-size);
@@ -3731,7 +3852,7 @@ figure.chip {
   border-color: var(--select-color-border-secondary-focused);
 }
 .select-tag[data-removable=true] {
-  padding-right: var(--spacing-padding-2);
+  padding-right: var(--select-multiple-chip-removable-padding-right);
 }
 
 .select-tag[data-kind=summary],
@@ -3750,7 +3871,7 @@ figure.chip {
 .select-tag-label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-1);
+  gap: var(--select-multiple-tag-label-gap);
   min-width: 0;
 }
 
@@ -3776,7 +3897,7 @@ figure.chip {
   transition: color 150ms ease;
 }
 .select-tag-remove:focus-visible {
-  outline: 0.2rem solid var(--color-border-strong);
+  outline: 0.2rem solid var(--select-multiple-chip-remove-focus-outline-color);
   outline-offset: 0.1rem;
 }
 .select-tag-remove:hover {
@@ -4094,6 +4215,7 @@ figure.chip {
   height: 100%;
   justify-content: flex-start;
   box-sizing: border-box;
+  gap: var(--table-cell-content-gap);
   padding-inline: var(--table-cell-padding-inline);
   padding-block: var(--table-cell-padding-block);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -53,7 +53,8 @@
     "module:typecheck": "pnpm typecheck",
     "module:build": "pnpm build",
     "design-primitives:build": "pnpm run build",
-    "design-primitives:dev": "pnpm run dev"
+    "design-primitives:dev": "pnpm run dev",
+    "publish:public": "bash ../../../scripts/npm-publish.sh"
   },
   "peerDependencies": {
     "@mantine/core": "^8",

package/src/components/input/markup/address/Template.tsx

@@ -52,6 +52,8 @@ export default function AddressFieldTemplate({
 }: AddressTemplateProps) {
   const formContext = useFormContext<FieldValues>();
   const inputSize = inputStyle?.size ?? "medium";
+  // 변경: 템플릿 루트 disabled가 선언되면 하위 컨트롤에 우선 적용한다.
+  const isRootDisabled = disabled === true;
 
   const resolvedAddressFieldName = addressFieldName
     ? (addressFieldName as Path<FieldValues>)
@@ -84,6 +86,11 @@ export default function AddressFieldTemplate({
     : detailInput?.register;
   const detailName =
     detailInput?.name ?? detailFieldName ?? resolvedDetailFieldName;
+  const isAddressFieldDisabled =
+    isRootDisabled || Boolean(addressInput?.disabled);
+  const isDetailFieldDisabled =
+    isRootDisabled || Boolean(detailInput?.disabled);
+  const isFindButtonDisabled = isRootDisabled || Boolean(buttonProps?.disabled);
 
   return (
     <div className={clsx("input-address-container", className)}>
@@ -95,7 +102,7 @@ export default function AddressFieldTemplate({
           value={resolvedAddress.text}
           width="fill"
           readOnly
-          disabled
+          disabled={isAddressFieldDisabled}
           className="input-address-field input-address-field-base"
         />
         <AddressFindButton
@@ -115,7 +122,7 @@ export default function AddressFieldTemplate({
                 ? "large"
                 : "medium")
           }
-          disabled={disabled ?? buttonProps?.disabled}
+          disabled={isFindButtonDisabled}
         />
       </div>
       {detailInput && (
@@ -126,6 +133,8 @@ export default function AddressFieldTemplate({
             register={detailRegister}
             name={detailName}
             width="full"
+            // 변경: 루트 disabled가 선언되면 상세 주소 입력도 비활성화한다.
+            disabled={isDetailFieldDisabled}
             className="input-address-field input-address-field-detail"
           />
         </div>

package/src/components/input/markup/foundation/Input.tsx

@@ -86,6 +86,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     },
     ref,
   ) => {
+    const isReadOnly = restProps.readOnly === true;
     // table priority는 width 지정이 없으면 셀 가로폭을 기본으로 채운다.
     const isTablePriority = priority === "table";
     const resolvedBlock = block || (isTablePriority && width === undefined);
@@ -104,8 +105,9 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
         : false;
     });
     useEffect(() => {
-      if (disabled || stateProp === "disabled") setIsFocused(false);
-    }, [disabled, stateProp]);
+      if (disabled || stateProp === "disabled" || isReadOnly)
+        setIsFocused(false);
+    }, [disabled, isReadOnly, stateProp]);
 
     useEffect(() => {
       if (value !== undefined && value !== null)
@@ -129,6 +131,10 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     );
 
     const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+      if (isReadOnly) {
+        onFocus?.(event);
+        return;
+      }
       setIsFocused(true);
       onFocus?.(event);
     };
@@ -203,6 +209,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
         data-priority={priority}
         data-size={size}
         data-state={visualState}
+        data-readonly={isReadOnly ? "true" : undefined}
         data-block={resolvedBlock ? "true" : undefined}
         {...(simulatedState ? { "data-simulated-state": simulatedState } : {})}
         data-width={widthAttr}
@@ -224,6 +231,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             data-state={visualState}
             data-priority={priority}
             data-size={size}
+            data-readonly={isReadOnly ? "true" : undefined}
             data-block={resolvedBlock ? "true" : undefined}
           >
             {/* 필드 컨트롤 wrapper; 슬롯과 input 정렬 */}