@uniai-fe/uds-primitives 0.2.9 → 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);
@@ -1911,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;
@@ -2043,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);
@@ -2125,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);
@@ -2211,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;
@@ -2326,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);
@@ -2521,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);
@@ -2540,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;
@@ -2565,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);
 }
@@ -2581,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);
@@ -2589,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);
@@ -2596,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;
 }
@@ -3559,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.9",
+  "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/input/markup/date/Template.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ChangeEvent, MouseEvent as ReactMouseEvent } from "react";
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useUncontrolled } from "@mantine/hooks";
 import clsx from "clsx";
 import { Calendar } from "../../../calendar";
@@ -19,8 +19,13 @@ import {
 import InputDateFooterTemplate from "./footer/Template";
 import InputDateTrigger from "./Trigger";
 
+const INPUT_DATE_TABLE_FORMAT = "YY-MM-DD";
+
 /**
  * Input Date Template; trigger + calendar 조합.
+ * priority가 table이면 trigger 표시 포맷/DatePicker 기본 valueFormat을 `YY-MM-DD`로 맞춘다.
+ * placeholder는 format과 별도 props로 처리되며, format 변경으로 placeholder가 자동 치환되지는 않는다.
+ * 단, `datePickerProps.valueFormat`이 주어지면 해당 포맷을 우선한다.
  * @component
  * @param {InputCalendarProps} props
  * @param {CalendarMode} [props.mode="date"] 날짜/시간 모드
@@ -35,6 +40,7 @@ import InputDateTrigger from "./Trigger";
  * @param {string} [props.name] form name/RHF name
  * @param {UseFormRegisterReturn} [props.register] RHF register
  * @param {string} [props.placeholder="YYYY-MM-DD"] placeholder
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] trigger input priority
  * @param {ReactNode} [props.header] 패널 header 콘텐츠
  * @param {ReactNode} [props.footer] 패널 footer 콘텐츠
  * @param {unknown} [props.timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
@@ -60,6 +66,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       name,
       register,
       placeholder = "YYYY-MM-DD",
+      priority = "primary",
       className,
       header,
       footer,
@@ -71,6 +78,10 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
     },
     ref,
   ) => {
+    // 기본(비제어) calendar open 상태를 관리한다.
+    const [internalCalendarOpen, setInternalCalendarOpen] = useState(false);
+    const resolvedCalendarOpen = calendarOpened ?? internalCalendarOpen;
+
     // useUncontrolled로 제어형/비제어 값을 모두 허용한다.
     const [calendarValue, setCalendarValue] = useUncontrolled<CalendarValue>({
       value,
@@ -113,10 +124,25 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
     );
 
     const triggerValue = useMemo(
-      () => formatTriggerValue(calendarValue) ?? "",
-      [calendarValue],
+      () =>
+        formatTriggerValue(
+          calendarValue,
+          priority === "table" ? INPUT_DATE_TABLE_FORMAT : undefined,
+        ) ?? "",
+      [calendarValue, priority],
     );
 
+    const resolvedDatePickerProps = useMemo(() => {
+      if (priority !== "table" || datePickerProps?.valueFormat) {
+        return datePickerProps;
+      }
+      // table priority는 yy-MM-dd 포맷을 기본값으로 둔다.
+      return {
+        ...datePickerProps,
+        valueFormat: INPUT_DATE_TABLE_FORMAT,
+      };
+    }, [datePickerProps, priority]);
+
     const handleTriggerClick = (event: ReactMouseEvent<Element>) => {
       triggerOnClick?.(event);
     };
@@ -131,6 +157,8 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         disabled={disabled}
         onClear={() => updateValue(createEmptyValue())}
         onToday={() => updateValue(getTodayValue())}
+        // 변경: Apply 버튼 클릭 시 calendar를 닫는다.
+        onApply={() => setInternalCalendarOpen(false)}
       />
     );
 
@@ -141,6 +169,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       displayValue: triggerValue,
       disabled,
       onClick: handleTriggerClick,
+      priority,
     };
 
     const triggerNode = trigger ?? renderTrigger?.(triggerRenderProps) ?? (
@@ -152,6 +181,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         displayValue={triggerValue}
         disabled={disabled}
         onClick={handleTriggerClick}
+        priority={priority}
       />
     );
 
@@ -165,10 +195,11 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         readOnly={readOnly}
         value={calendarValue}
         onChange={handleCalendarChange}
-        datePickerProps={datePickerProps}
+        datePickerProps={resolvedDatePickerProps}
         header={header}
         footer={footerContent}
-        open={calendarOpened}
+        open={resolvedCalendarOpen}
+        onOpenChange={setInternalCalendarOpen}
       >
         {triggerNode}
       </Calendar.Root>