@uniai-fe/uds-primitives 0.2.8 → 0.2.10

package/dist/styles.css

@@ -228,6 +228,17 @@
   --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
   --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
   --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --tooltip-message-background: var(--color-cool-gray-20);
+  --tooltip-message-foreground: var(--color-common-100);
+  --tooltip-message-radius: var(--theme-radius-medium-3);
+  --tooltip-message-padding-inline: var(--spacing-padding-5);
+  --tooltip-message-padding-block: var(--spacing-padding-4);
+  --tooltip-message-font-size: var(--font-caption-large-size);
+  --tooltip-message-line-height: var(--font-caption-large-line-height);
+  --tooltip-message-letter-spacing: var(--font-caption-large-letter-spacing);
+  --tooltip-message-font-weight: 400;
+  --tooltip-trigger-icon-size: 16px;
+  --tooltip-trigger-icon-color: var(--color-label-alternative);
   /* Layout presets */
   --input-width: 100%;
   --input-flex: 0 1 auto;
@@ -241,6 +252,16 @@
   --input-default-gap: var(--spacing-gap-4);
   --input-default-radius-base: var(--theme-radius-large-1);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
+  --input-table-radius-base: 0;
+  --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);
+  --input-table-text-medium-size: var(--font-body-xsmall-size);
+  --input-table-text-medium-line-height: var(--font-body-xsmall-line-height);
+  --input-table-text-medium-weight: var(--font-body-xsmall-weight);
+  --input-table-text-large-size: var(--font-body-small-size);
+  --input-table-text-large-line-height: var(--font-body-small-line-height);
+  --input-table-text-large-weight: var(--font-body-small-weight);
   /* Label/helper colors */
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
@@ -258,6 +279,7 @@
   --input-border-width-emphasis: 1.4px;
   --input-border-active-color: var(--color-blue-80);
   --input-border-success-color: var(--color-blue-80);
+  --input-border-table-default-color: transparent;
   /* error는 Figma 44% alpha */
   --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
@@ -286,6 +308,32 @@
   --select-secondary-gap: var(--spacing-gap-2);
   --select-secondary-underline-width-default: 1px;
   --select-secondary-underline-width-focus: 1.4px;
+  --select-table-radius: var(--input-table-radius-base);
+  --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-surface-color: transparent;
+  --select-table-surface-disabled-color: var(--input-surface-disabled-color);
+  --select-table-color-text: var(--input-text-color);
+  --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);
+  --select-table-icon-color-disabled: var(--select-icon-color-disabled);
+  --select-table-text-small-size: var(--input-table-text-small-size);
+  --select-table-text-small-line-height: var(
+  --input-table-text-small-line-height
+  );
+  --select-table-text-small-weight: var(--input-table-text-small-weight);
+  --select-table-text-medium-size: var(--input-table-text-medium-size);
+  --select-table-text-medium-line-height: var(
+  --input-table-text-medium-line-height
+  );
+  --select-table-text-medium-weight: var(--input-table-text-medium-weight);
+  --select-table-text-large-size: var(--input-table-text-large-size);
+  --select-table-text-large-line-height: var(
+  --input-table-text-large-line-height
+  );
+  --select-table-text-large-weight: var(--input-table-text-large-weight);
   --select-text-small-size: 15px;
   --select-text-small-line-height: 1.4;
   --select-text-small-letter-spacing: 0.2px;
@@ -402,6 +450,28 @@
   --theme-radio-card-badge-color: var(--color-primary-default);
   --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;
+  --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(
+  --color-background-alternative-cool-gray
+  );
+  --table-cell-background-color: var(--color-surface-static-white);
+  --table-line-cell-height-head: 44px;
+  --table-line-cell-height-body: 56px;
+  --table-grid-cell-height: 48px;
+  --table-grid-border-radius: var(--theme-radius-large-1);
+  --table-line-cell-padding-inline: var(--spacing-padding-6);
+  --table-line-cell-padding-block: 9px;
+  --table-grid-cell-padding-inline: var(--spacing-padding-6);
+  --table-grid-cell-padding-block: 9px;
+  --table-th-text-color: var(--color-label-standard);
+  --table-th-text-size: 13px;
+  --table-th-text-weight: var(--font-label-small-weight);
+  --table-th-text-line-height: var(--font-label-small-line-height);
+  --table-td-text-color: var(--color-label-standard);
+  --table-td-text-size: 15px;
+  --table-td-text-weight: var(--font-body-xsmall-weight);
+  --table-td-text-line-height: var(--font-body-xsmall-line-height);
   --divider-width: 1px;
   --divider-height: 12px;
   --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
@@ -1782,6 +1852,10 @@ figure.chip {
   margin: 0;
 }
 
+.dropdown-menu-item-trigger.dropdown-menu-alt[data-disabled] {
+  cursor: default;
+}
+
 .dropdown-menu-item {
   width: 100%;
 }
@@ -1907,6 +1981,55 @@ figure.chip {
 
 
 
+.tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-template-trigger {
+  display: inline-flex;
+  width: var(--tooltip-trigger-icon-size);
+  height: var(--tooltip-trigger-icon-size);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--tooltip-trigger-icon-color);
+  cursor: pointer;
+}
+
+.tooltip-template-trigger svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.tooltip-message {
+  max-width: min(20rem, 100vw - 1.5rem);
+  box-sizing: border-box;
+  border-radius: var(--tooltip-message-radius);
+  background-color: var(--tooltip-message-background);
+  padding: var(--tooltip-message-padding-block) var(--tooltip-message-padding-inline);
+}
+
+.tooltip-message-text {
+  display: block;
+  color: var(--tooltip-message-foreground);
+  font-size: var(--tooltip-message-font-size);
+  line-height: var(--tooltip-message-line-height);
+  letter-spacing: var(--tooltip-message-letter-spacing);
+  font-weight: var(--tooltip-message-font-weight);
+  white-space: normal;
+}
+
+.tooltip-message-arrow {
+  fill: var(--tooltip-message-background);
+}
+
+
+
 .input {
   display: flex;
   flex-direction: column;
@@ -2039,6 +2162,11 @@ figure.chip {
   align-self: center;
   margin-left: 0;
 }
+.input-field[data-priority=table] {
+  border-radius: var(--input-table-radius-base);
+  border-color: var(--input-border-table-default-color);
+  background-color: transparent;
+}
 .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);
   border-width: var(--input-border-width-emphasis);
@@ -2121,6 +2249,24 @@ figure.chip {
   min-height: var(--theme-size-medium-2);
 }
 
+.input-field[data-priority=table][data-size=small] .input-element {
+  font-size: var(--input-table-text-small-size);
+  line-height: var(--input-table-text-small-line-height);
+  font-weight: var(--input-table-text-small-weight);
+}
+
+.input-field[data-priority=table][data-size=medium] .input-element {
+  font-size: var(--input-table-text-medium-size);
+  line-height: var(--input-table-text-medium-line-height);
+  font-weight: var(--input-table-text-medium-weight);
+}
+
+.input-field[data-priority=table][data-size=large] .input-element {
+  font-size: var(--input-table-text-large-size);
+  line-height: var(--input-table-text-large-line-height);
+  font-weight: var(--input-table-text-large-weight);
+}
+
 .input-helper-text {
   color: var(--input-helper-color);
   font-size: var(--font-label-small-size);
@@ -2207,6 +2353,9 @@ figure.chip {
 .input[data-state=disabled] .input-field[data-priority=secondary] {
   background-color: transparent;
 }
+.input[data-state=disabled] .input-field[data-priority=table] {
+  background-color: transparent;
+}
 
 .input-side {
   display: flex;
@@ -2322,6 +2471,21 @@ figure.chip {
   pointer-events: none;
 }
 
+.input-date-trigger-input.input-priority-table .input-field {
+  padding-inline: var(--spacing-padding-4);
+}
+.input-date-trigger-input.input-priority-table .input-field-control {
+  gap: var(--spacing-gap-3);
+}
+.input-date-trigger-input.input-priority-table .input-element {
+  font-size: var(--font-body-xsmall-size);
+  line-height: var(--font-body-xsmall-line-height);
+  font-weight: var(--font-body-xsmall-weight);
+}
+.input-date-trigger-input.input-priority-table .input-date-trigger-icon {
+  color: var(--color-label-alternative);
+}
+
 .input-date-footer-template {
   display: grid;
   gap: var(--spacing-gap-5);
@@ -2517,11 +2681,22 @@ figure.chip {
   color: var(--color-label-disabled);
   cursor: not-allowed;
 }
+.select-button[data-priority=table] {
+  border-radius: var(--select-table-radius);
+  border-color: var(--select-table-border-default-color);
+  background-color: var(--select-table-surface-color);
+  --select-icon-fill: var(--select-table-icon-color-default);
+}
 .select-button:not([data-priority=secondary])[data-state=focused], .select-button:not([data-priority=secondary])[data-open=true], .select-button:not([data-priority=secondary]):focus-visible {
   border-color: var(--select-primary-color-border-focused);
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-icon-color-focused);
 }
+.select-button[data-priority=table][data-state=focused], .select-button[data-priority=table][data-open=true], .select-button[data-priority=table]:focus-visible {
+  border-color: var(--select-table-border-focus-color);
+  border-width: var(--select-primary-border-width-focus);
+  --select-icon-fill: var(--select-table-icon-color-focused);
+}
 .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);
@@ -2536,6 +2711,12 @@ figure.chip {
   background-color: var(--select-color-border-secondary-disabled);
   height: var(--select-secondary-underline-width-default);
 }
+.select-button[data-priority=table][data-state=disabled], .select-button[data-priority=table]:disabled {
+  border-color: var(--select-table-border-disabled-color);
+  background-color: var(--select-table-surface-disabled-color);
+  cursor: not-allowed;
+  --select-icon-fill: var(--select-table-icon-color-disabled);
+}
 
 .select-value {
   flex: 1 1 auto;
@@ -2561,6 +2742,9 @@ figure.chip {
 .select-button[data-priority=secondary] .select-label {
   color: var(--select-secondary-color-text);
 }
+.select-button[data-priority=table] .select-label {
+  color: var(--select-table-color-text);
+}
 .select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
   color: var(--select-primary-color-text-focused);
 }
@@ -2577,6 +2761,9 @@ figure.chip {
 .select-button[data-priority=secondary] .select-label-placeholder {
   color: var(--select-secondary-color-placeholder);
 }
+.select-button[data-priority=table] .select-label-placeholder {
+  color: var(--select-table-color-placeholder);
+}
 
 .select-button[data-size=small] .select-label {
   font-size: var(--select-text-small-size);
@@ -2585,6 +2772,12 @@ figure.chip {
   font-weight: var(--select-text-small-weight);
 }
 
+.select-button[data-priority=table][data-size=small] .select-label {
+  font-size: var(--select-table-text-small-size);
+  line-height: var(--select-table-text-small-line-height);
+  font-weight: var(--select-table-text-small-weight);
+}
+
 .select-button[data-size=large] .select-label {
   font-size: var(--select-text-large-size);
   line-height: var(--select-text-large-line-height);
@@ -2592,6 +2785,18 @@ figure.chip {
   font-weight: var(--select-text-large-weight);
 }
 
+.select-button[data-priority=table][data-size=medium] .select-label {
+  font-size: var(--select-table-text-medium-size);
+  line-height: var(--select-table-text-medium-line-height);
+  font-weight: var(--select-table-text-medium-weight);
+}
+
+.select-button[data-priority=table][data-size=large] .select-label {
+  font-size: var(--select-table-text-large-size);
+  line-height: var(--select-table-text-large-line-height);
+  font-weight: var(--select-table-text-large-weight);
+}
+
 .select-button[data-priority=secondary][data-size=large] .select-label {
   font-weight: 600;
 }
@@ -3555,6 +3760,220 @@ figure.chip {
   padding: var(--spacing-padding-6) 0;
 }
 
+
+
+.table.table-container {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table.table-container .table-native-cell.table-th,
+.table.table-container .table-native-cell.table-td {
+  vertical-align: middle;
+  background-color: var(--table-cell-background-color);
+  text-align: left;
+}
+
+.table.table-container[data-layout=line] .table-native-cell.table-th,
+.table.table-container[data-layout=line] .table-native-cell.table-td {
+  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+  --table-cell-padding-block: var(--table-line-cell-padding-block);
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout=line] .table-head .table-native-cell.table-th {
+  height: var(--table-line-cell-height-head);
+  border-top: 1px solid var(--table-border-color);
+  background-color: var(--table-line-head-background-color);
+}
+
+.table.table-container[data-layout=line] .table-body .table-native-cell.table-td,
+.table.table-container[data-layout=line] .table-foot .table-native-cell.table-td {
+  height: var(--table-line-cell-height-body);
+}
+
+.table.table-container[data-layout=grid] .table-native-cell.table-th,
+.table.table-container[data-layout=grid] .table-native-cell.table-td {
+  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+  --table-cell-padding-block: var(--table-grid-cell-padding-block);
+  border: 1px solid var(--table-border-color);
+  height: var(--table-grid-cell-height);
+}
+
+.table.table-container[data-layout=grid] {
+  border-radius: var(--table-grid-border-radius);
+  overflow: hidden;
+}
+
+.table.table-container[data-layout=grid] .table-head .table-native-cell.table-th {
+  background-color: var(--table-grid-head-background-color);
+}
+
+.table-native-cell.table-th .table-native-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-native-cell.table-td .table-native-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+.table-cell-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-inline: var(--table-cell-padding-inline);
+  padding-block: var(--table-cell-padding-block);
+}
+
+.table-cell-content[data-padding=none] {
+  padding: 0;
+}
+
+.table-cell-content[data-no-padding=true] {
+  padding: 0;
+}
+
+.table-cell-content[data-padding=default] .input[data-priority=table] {
+  width: calc(100% + var(--table-cell-padding-inline) * 2);
+  height: 100%;
+  min-height: calc(100% + var(--table-cell-padding-block) * 2);
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-box),
+.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-field) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding=default] .input-date-field {
+  width: calc(100% + var(--table-cell-padding-inline) * 2);
+  height: 100%;
+  min-height: calc(100% + var(--table-cell-padding-block) * 2);
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+}
+
+.table-cell-content[data-padding=default] :where(.select.select-container) {
+  width: calc(100% + var(--table-cell-padding-inline) * 2);
+  height: 100%;
+  min-height: calc(100% + var(--table-cell-padding-block) * 2);
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding=default] :where(.select.select-container .select-button) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding=none] :where(.input[data-priority=table],
+.input[data-priority=table] .input-box,
+.input[data-priority=table] .input-field,
+.input-date-field,
+.select.select-container,
+.select.select-container .select-button),
+.table-cell-content[data-no-padding=true] :where(.input[data-priority=table],
+.input[data-priority=table] .input-box,
+.input[data-priority=table] .input-field,
+.input-date-field,
+.select.select-container,
+.select.select-container .select-button) {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+.table-cell-content .table-cell-text {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.table-cell-content[data-align-x=left],
+.table-cell-content[data-align=left] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.table-cell-content[data-align-x=center],
+.table-cell-content[data-align=center] {
+  justify-content: center;
+  text-align: center;
+}
+
+.table-cell-content[data-align-x=right],
+.table-cell-content[data-align=right] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.table-cell-content[data-align-y=top] {
+  align-items: flex-start;
+}
+
+.table-cell-content[data-align-y=center] {
+  align-items: center;
+}
+
+.table-cell-content[data-align-y=bottom] {
+  align-items: flex-end;
+}
+
+.table-cell.table-head-cell .table-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-cell .input[data-priority=table] .input-element,
+.table-cell .select.select-container .select-button[data-priority=table] .select-label,
+.table-cell .select.select-container .select-button[data-priority=table] .select-label-placeholder {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+.table-cell.table-head-cell .radio-label-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-cell.table-body-cell .table-cell-text,
+.table-cell.table-foot-cell .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+.table-cell.table-body-cell .radio-label-text,
+.table-cell.table-foot-cell .radio-label-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
 /* Divider 토큰도 전역 :root 범위에 선언한다. */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -72,6 +72,7 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",

package/src/components/calendar/types/calendar.ts

@@ -35,6 +35,7 @@ export type CalendarOnChange = (value: CalendarValue) => void;
 /**
  * Mantine DatePicker 공개 옵션.
  * @property {Partial<Record<DatePickerStylesNames, string>>} [classNames] Mantine 내부 스타일 클래스 매핑
+ * @property {string} [valueFormat] DatePicker 표시 포맷
  */
 export type CalendarDatePickerProps = Partial<
   Omit<
@@ -48,6 +49,10 @@ export type CalendarDatePickerProps = Partial<
     | "styles"
   >
 > & {
+  /**
+   * DatePicker 표시 포맷
+   */
+  valueFormat?: string;
   /**
    * Mantine 내부 스타일 classNames override.
    */

package/src/components/dropdown/markup/Template.tsx

@@ -12,6 +12,16 @@ import DropdownTrigger from "./foundation/Trigger";
  * Dropdown reference template; trigger/panel/menu 조합을 제공한다.
  * @component
  * @param {DropdownTemplateProps} props Dropdown template props
+ * @param {ReactNode} props.trigger trigger 요소
+ * @param {DropdownTemplateItem[]} props.items 렌더링할 menu item 리스트
+ * @param {string[]} [props.selectedIds] 선택된 item id 배열
+ * @param {(item: DropdownTemplateItem) => void} [props.onSelect] item 선택 콜백
+ * @param {"small" | "medium" | "large"} [props.size="medium"] menu size scale
+ * @param {"match" | "fit-content" | "max-content" | string | number} [props.width="match"] panel width 옵션
+ * @param {DropdownMenuProps} [props.rootProps] Dropdown.Root 전달 props
+ * @param {DropdownContainerProps} [props.containerProps] Dropdown.Container 전달 props
+ * @param {DropdownMenuListProps} [props.menuListProps] Dropdown.Menu.List 전달 props
+ * @param {ReactNode} [props.alt] empty 상태 대체 콘텐츠
  */
 const DropdownTemplate = ({
   trigger,
@@ -23,31 +33,45 @@ const DropdownTemplate = ({
   rootProps,
   containerProps,
   menuListProps,
+  alt,
 }: DropdownTemplateProps) => {
+  const hasItems = items.length > 0;
+
   return (
     <DropdownRoot {...rootProps}>
       <DropdownTrigger asChild>{trigger}</DropdownTrigger>
       <DropdownContainer {...containerProps} size={size} width={width}>
         <DropdownMenuList {...menuListProps}>
-          {items.map(item => (
+          {hasItems ? (
+            <>
+              {items.map(item => (
+                <DropdownMenuItem
+                  key={item.id}
+                  label={item.label}
+                  description={item.description}
+                  disabled={item.disabled}
+                  left={item.left}
+                  right={item.right}
+                  multiple={item.multiple}
+                  isSelected={selectedIds?.includes(item.id)}
+                  onSelect={event => {
+                    if (item.disabled) {
+                      event.preventDefault();
+                      return;
+                    }
+                    onSelect?.(item);
+                  }}
+                />
+              ))}
+            </>
+          ) : (
             <DropdownMenuItem
-              key={item.id}
-              label={item.label}
-              description={item.description}
-              disabled={item.disabled}
-              left={item.left}
-              right={item.right}
-              multiple={item.multiple}
-              isSelected={selectedIds?.includes(item.id)}
-              onSelect={event => {
-                if (item.disabled) {
-                  event.preventDefault();
-                  return;
-                }
-                onSelect?.(item);
-              }}
+              // 변경: 사용처 1회 상수 대신 인라인 fallback으로 empty label을 처리한다.
+              label={alt ?? "데이터가 없습니다."}
+              disabled
+              className="dropdown-menu-alt"
             />
-          ))}
+          )}
         </DropdownMenuList>
       </DropdownContainer>
     </DropdownRoot>

package/src/components/dropdown/markup/foundation/Container.tsx

@@ -8,11 +8,23 @@ import type { DropdownContainerProps } from "../../types/props";
 import { useDropdownContext } from "./Provider";
 
 /**
- * Dropdown container; trigger width 동기화 및 portal 관리
+ * Dropdown Foundation; Container 패널 렌더링 컴포넌트
  * @component
  * @param {DropdownContainerProps} props Dropdown container props
- * @param {DropdownPanelWidth} [props.width="match"] panel width 옵션
+ * @param {React.ReactNode} props.children dropdown panel 콘텐츠
+ * @param {string} [props.className] panel className
  * @param {DropdownSize} [props.size="medium"] option height scale
+ * @param {DropdownPanelWidth} [props.width="match"] panel width 옵션
+ * @param {HTMLElement | null} [props.portalContainer] portal 컨테이너
+ * @param {"start" | "center" | "end"} [props.align="start"] 정렬 기준
+ * @param {"top" | "right" | "bottom" | "left"} [props.side="bottom"] 패널 위치
+ * @param {number} [props.sideOffset=4] trigger 와 패널 사이 간격
+ * @param {number} [props.alignOffset] 정렬 보정값
+ * @param {React.CSSProperties} [props.style] 인라인 스타일
+ * @example
+ * <DropdownContainer width="match">
+ *   <Dropdown.Menu.List />
+ * </DropdownContainer>
  */
 const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
   (