@uniai-fe/uds-primitives 0.2.8 → 0.2.10

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

@@ -9,11 +9,20 @@ import { Checkbox } from "../../../checkbox/markup/Checkbox";
 import type { CheckboxProps } from "../../../checkbox/types";
 
 /**
- * Dropdown menu item; label/description/slot 구성을 처리한다.
+ * Dropdown Foundation; Menu Item 옵션 렌더링 컴포넌트
  * @component
  * @param {DropdownMenuItemProps} props dropdown menu option props
- * @param {boolean} [props.isSelected] 선택 상태
- * @param {boolean} [props.multiple] multi select 스타일 여부
+ * @param {React.ReactNode} [props.label] 옵션 라벨
+ * @param {React.ReactNode} [props.description] 보조 텍스트
+ * @param {React.ReactNode} [props.left] 좌측 콘텐츠
+ * @param {React.ReactNode} [props.right] 우측 콘텐츠
+ * @param {boolean} [props.isSelected=false] 선택 상태
+ * @param {boolean} [props.multiple=false] multi select 스타일 여부
+ * @param {CheckboxProps} [props.checkboxProps] multiple 시 checkbox props
+ * @param {React.ReactNode} [props.children] label 미지정 시 fallback 콘텐츠
+ * @param {string} [props.className] Dropdown item className
+ * @example
+ * <DropdownMenuItem label="옵션 A" isSelected />
  */
 const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   (
@@ -33,6 +42,13 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
     ref,
   ) => {
     const labelContent = label ?? children;
+    // 변경: label/children이 string|number일 때만 준비된 label span으로 매핑하고, 그 외 ReactNode는 그대로 렌더링한다.
+    const resolvedLabelContent =
+      typeof labelContent === "string" || typeof labelContent === "number" ? (
+        <span className="dropdown-menu-item-label">{labelContent}</span>
+      ) : (
+        labelContent
+      );
     const hasDescription = Boolean(description);
     const shouldRenderCheckbox = multiple && !left;
 
@@ -84,9 +100,7 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
         >
           {renderLeft()}
           <span className="dropdown-menu-item-body">
-            {labelContent ? (
-              <span className="dropdown-menu-item-label">{labelContent}</span>
-            ) : null}
+            {resolvedLabelContent}
             {description ? (
               <span className="dropdown-menu-item-description">
                 {description}

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

@@ -7,11 +7,18 @@ import type { ReactNode } from "react";
 import { DropdownProvider } from "./Provider";
 
 /**
- * Dropdown root; Provider와 Radix Root를 래핑한다.
+ * Dropdown Foundation; Root Provider 래핑 컴포넌트
  * @component
  * @param {DropdownMenuProps} props Dropdown Root props
  * @param {ReactNode} props.children Dropdown 하위 node
  * @param {boolean} [props.modal=false] Radix modal 모드
+ * @param {boolean} [props.open] 제어형 open 상태
+ * @param {boolean} [props.defaultOpen] 비제어형 초기 open 상태
+ * @param {(open: boolean) => void} [props.onOpenChange] open 변경 콜백
+ * @example
+ * <DropdownRoot>
+ *   <Dropdown.Trigger>열기</Dropdown.Trigger>
+ * </DropdownRoot>
  */
 const DropdownRoot = ({
   children,

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

@@ -8,10 +8,16 @@ import { mergeRefs } from "../../utils";
 import { useDropdownContext } from "./Provider";
 
 /**
- * Dropdown trigger; trigger ref를 context에 공유한다.
+ * Dropdown Foundation; Trigger ref 공유 컴포넌트
  * @component
  * @param {DropdownMenuTriggerProps} props Dropdown trigger props
  * @param {boolean} [props.asChild=true] asChild 패턴 유지 여부
+ * @param {React.ReactNode} props.children Trigger 하위 node
+ * @param {string} [props.className] Trigger className
+ * @example
+ * <DropdownTrigger asChild>
+ *   <button type="button">열기</button>
+ * </DropdownTrigger>
  */
 const DropdownTrigger = forwardRef<HTMLElement, DropdownMenuTriggerProps>(
   ({ asChild = true, children, ...rest }, ref) => {

package/src/components/dropdown/styles/dropdown.scss

@@ -47,6 +47,10 @@
   margin: 0;
 }
 
+.dropdown-menu-item-trigger.dropdown-menu-alt[data-disabled] {
+  cursor: default;
+}
+
 .dropdown-menu-item {
   width: 100%;
 }

package/src/components/dropdown/types/props.ts

@@ -138,6 +138,7 @@ export interface DropdownTemplateItem {
  * @property {DropdownMenuProps} [rootProps] Root 에 전달할 props
  * @property {DropdownContainerProps} [containerProps] Container 에 전달할 props
  * @property {DropdownMenuListProps} [menuListProps] MenuList 에 전달할 props
+ * @property {ReactNode} [alt] item이 비어 있을 때 렌더링할 alternate 콘텐츠
  */
 export interface DropdownTemplateProps {
   trigger: ReactNode;
@@ -159,4 +160,8 @@ export interface DropdownTemplateProps {
    * MenuList 에 전달할 props
    */
   menuListProps?: DropdownMenuListProps;
+  /**
+   * item이 비어 있을 때 렌더링할 alternate 콘텐츠
+   */
+  alt?: ReactNode;
 }

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>

package/src/components/input/markup/date/Trigger.tsx

@@ -9,6 +9,8 @@ import type { InputCalendarTriggerViewProps } from "../../types";
 
 /**
  * Input Date trigger field.
+ * priority가 table인 경우 아이콘을 left 슬롯에 배치하고,
+ * 그 외 priority에서는 기존처럼 right 슬롯을 유지한다.
  * @component
  * @param {InputCalendarTriggerViewProps} props
  * @param {string} [props.className] trigger className
@@ -16,6 +18,7 @@ import type { InputCalendarTriggerViewProps } from "../../types";
  * @param {string} [props.displayValue] 표시 문자열
  * @param {(event: MouseEvent<Element>) => void} [props.onClick] 클릭 핸들러
  * @param {boolean} [props.disabled] disabled 여부
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority] trigger input priority
  * @param {string} [props.id] input id
  * @param {string} [props.name] form name
  * @param {UseFormRegisterReturn} [props.register] RHF register
@@ -31,6 +34,7 @@ const InputDateTrigger = forwardRef<
       displayValue,
       onClick,
       disabled,
+      priority,
       id,
       name,
       register,
@@ -55,19 +59,33 @@ const InputDateTrigger = forwardRef<
         {...restProps}
         ref={ref}
         value={displayValue}
+        // PopOver.Trigger(asChild)가 주입한 `type="button"`으로 placeholder가 사라지는 문제를 막기 위해
+        // Date trigger는 항상 readOnly text input으로 고정한다.
+        type="text"
         readOnly
         disabled={disabled}
         id={id}
         name={name ?? register?.name}
         register={register}
+        priority={priority}
         placeholder={placeholder}
         className={clsx("input-date-trigger-input", className)}
         onClick={handleInputClick}
+        // table priority는 icon을 왼쪽 슬롯에 배치한다.
+        left={
+          priority === "table" ? (
+            <figure className="input-date-trigger-icon" aria-hidden="true">
+              <Calendar.Icon.Calendar />
+            </figure>
+          ) : undefined
+        }
+        // 기본(priority != table)은 기존처럼 icon을 오른쪽 슬롯에 유지한다.
         right={
-          // 토글 인터랙션은 input 단일 경로로 유지하고, 오른쪽 아이콘은 장식 요소로만 둔다.
-          <figure className="input-date-trigger-icon" aria-hidden="true">
-            <Calendar.Icon.Calendar />
-          </figure>
+          priority === "table" ? undefined : (
+            <figure className="input-date-trigger-icon" aria-hidden="true">
+              <Calendar.Icon.Calendar />
+            </figure>
+          )
         }
       />
     );

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

@@ -29,15 +29,16 @@ import InputBaseUtil from "./Utility";
  *
  * @component
  * @param {InputProps} props Input 컴포넌트 공통 props
- * @param {"primary" | "secondary" | "tertiary"} [props.priority="primary"] 디자인 토큰 우선순위
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] 디자인 토큰 우선순위
  * @param {"small" | "medium" | "large"} [props.size="medium"] 높이/타이포 세트
- * @param {"default" | "active" | "focused" | "success" | "error" | "disabled"} [props.state="default"] 시각 상태
- * @param {boolean} [props.block=false] true면 width 100%
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] 시각 상태
+ * @param {boolean} [props.block=false] true면 width 100% (`priority="table"`은 width 미지정 시 full 기본)
+ * @param {FormFieldWidth} [props.width] width preset
  * @param {React.ReactNode} [props.left] 입력 왼쪽 슬롯(아이콘/텍스트)
  * @param {React.ReactNode} [props.right] 입력 오른쪽 슬롯
- * @param {React.ReactNode} [props.clearIcon] 입력값 초기화 아이콘. 지정하지 않으면 기본 Reset 아이콘
- * @param {React.ReactNode} [props.successIcon] success 상태 아이콘 override
- * @param {React.ReactNode} [props.errorIcon] error 상태 아이콘 override
+ * @param {React.ReactNode} [props.clear] 입력값 초기화 아이콘. 지정하지 않으면 기본 Reset 아이콘
+ * @param {React.ReactNode} [props.success] success 상태 아이콘 override
+ * @param {React.ReactNode} [props.error] error 상태 아이콘 override
  * @param {string} [props.inputClassName] 실제 `<input>` 요소 className
  * @param {string} [props.boxClassName] `.input-box` className
  * @param {boolean} [props.disabled] native disabled
@@ -52,6 +53,7 @@ import InputBaseUtil from "./Utility";
  * @param {string | number | readonly string[]} [props.value] 제어형 값
  * @param {string | number | readonly string[]} [props.defaultValue] 비제어 초기값
  * @param {string} [props.type="text"] native input type
+ * @param {boolean} [props.readOnly] native readOnly
  */
 const InputBase = forwardRef<HTMLInputElement, InputProps>(
   (
@@ -84,6 +86,10 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     },
     ref,
   ) => {
+    // table priority는 width 지정이 없으면 셀 가로폭을 기본으로 채운다.
+    const isTablePriority = priority === "table";
+    const resolvedBlock = block || (isTablePriority && width === undefined);
+
     const generatedId = useId();
     const registerRef = register?.ref;
     const registerOnChange = register?.onChange;
@@ -174,7 +180,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     const widthAttr =
       width !== undefined
         ? getFormFieldWidthAttr(width)
-        : block
+        : resolvedBlock
           ? "full"
           : undefined;
     const widthValue =
@@ -191,13 +197,13 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
           `input-priority-${priority}`,
           `input-size-${size}`,
           `input-state-${visualState}`,
-          block && "input-block",
+          resolvedBlock && "input-block",
           className,
         )}
         data-priority={priority}
         data-size={size}
         data-state={visualState}
-        data-block={block ? "true" : undefined}
+        data-block={resolvedBlock ? "true" : undefined}
         {...(simulatedState ? { "data-simulated-state": simulatedState } : {})}
         data-width={widthAttr}
         style={containerStyle}
@@ -208,7 +214,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             `input-box-priority-${priority}`,
             `input-box-size-${size}`,
             `input-box-state-${visualState}`,
-            block && "input-box-block",
+            resolvedBlock && "input-box-block",
             boxClassNameProp,
           )}
           data-slot="box"
@@ -218,7 +224,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             data-state={visualState}
             data-priority={priority}
             data-size={size}
-            data-block={block ? "true" : undefined}
+            data-block={resolvedBlock ? "true" : undefined}
           >
             {/* 필드 컨트롤 wrapper; 슬롯과 input 정렬 */}
             <div className="input-field-control">
@@ -242,6 +248,8 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
             <InputBaseUtil
+              // table priority는 success/error 상태 아이콘 대신 border만으로 상태를 표현한다.
+              priority={priority}
               state={currentState}
               isDisabled={isDisabled}
               isFocused={isFocused}

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

@@ -9,23 +9,25 @@ import InputBaseSideSlot from "./SideSlot";
 /**
  * Input; 오른쪽 유틸리티 영역(wrapper)
  * @component
- * @param {InputUtilProps} props
- * @param {React.ReactNode} [props.right] 오른쪽 슬롯 콘텐츠
+ * @param {InputUtilityProps} props
+ * @param {React.ReactNode} [props.children] 오른쪽 슬롯 콘텐츠
  * @param {React.ReactNode} [props.clear] clear 버튼 아이콘
  * @param {React.ReactNode} [props.success] success 상태 아이콘 override
  * @param {React.ReactNode} [props.error] error 상태 아이콘 override
- * @param {string} props.state 현재 input 상태
+ * @param {"primary" | "secondary" | "tertiary" | "table"} props.priority input priority
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} props.state 현재 input 상태
  * @param {boolean} props.isDisabled disable 여부
  * @param {boolean} props.isFocused focus 여부
  * @param {boolean} props.hasValue 입력값 존재 여부
  * @param {boolean} [props.readOnly] readOnly 여부
- * @param {Function} [props.onClear] clear 버튼 클릭 핸들러
+ * @param {(event: React.MouseEvent<HTMLButtonElement> | React.PointerEvent<HTMLButtonElement>) => void} [props.onClear] clear 버튼 클릭 핸들러
  */
 export default function InputBaseUtil({
   children: right,
   clear,
   success,
   error,
+  priority,
   state,
   isDisabled,
   isFocused,
@@ -42,6 +44,8 @@ export default function InputBaseUtil({
       : state === "error"
         ? (error ?? baseStatusIcon)
         : null;
+  // table priority는 상태를 border로만 표현하므로 status icon을 렌더하지 않는다.
+  const resolvedStatusIcon = priority === "table" ? null : statusIcon;
   const clearIconNode = clear ?? InputStatusIcon.reset;
   const showClearIcon = Boolean(
     clearIconNode &&
@@ -50,7 +54,7 @@ export default function InputBaseUtil({
     (isFocused || isClearInteracting),
   );
 
-  if (!right && !showClearIcon && !statusIcon) {
+  if (!right && !showClearIcon && !resolvedStatusIcon) {
     return null;
   }
 
@@ -91,13 +95,13 @@ export default function InputBaseUtil({
           {clearIconNode}
         </button>
       ) : null}
-      {statusIcon ? (
+      {resolvedStatusIcon ? (
         <div
           className="input-affix input-affix-status"
           data-slot="status"
           data-state={state}
         >
-          {statusIcon}
+          {resolvedStatusIcon}
         </div>
       ) : null}
     </div>

package/src/components/input/styles/date.scss

@@ -21,6 +21,27 @@
   pointer-events: none;
 }
 
+.input-date-trigger-input.input-priority-table {
+  .input-field {
+    padding-inline: var(--spacing-padding-4);
+  }
+
+  .input-field-control {
+    gap: var(--spacing-gap-3);
+  }
+
+  .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-icon {
+    // input date 아이콘 크기는 size/priority와 무관하게 공통 크기를 유지한다.
+    color: var(--color-label-alternative);
+  }
+}
+
 .input-date-footer-template {
   // footer 템플릿은 input 스킨에서만 관리한다.
   display: grid;

package/src/components/input/styles/foundation.scss

@@ -154,6 +154,13 @@
     }
   }
 
+  &[data-priority="table"] {
+    // table priority는 default에서 border를 숨기고 상태(border-color)만 드러낸다.
+    border-radius: var(--input-table-radius-base);
+    border-color: var(--input-border-table-default-color);
+    background-color: transparent;
+  }
+
   &:not([data-priority="secondary"]) {
     &[data-state="active"],
     &[data-state="focused"] {
@@ -252,6 +259,24 @@
   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);
@@ -362,6 +387,11 @@
     &[data-priority="secondary"] {
       background-color: transparent;
     }
+
+    &[data-priority="table"] {
+      // table priority는 disabled 상태에서도 배경을 투명하게 유지한다.
+      background-color: transparent;
+    }
   }
 }
 

package/src/components/input/styles/variables.scss

@@ -13,6 +13,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);
@@ -33,6 +43,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); // --color-feedback-error
   --input-border-disabled-color: var(--color-border-standard-cool-gray);

package/src/components/input/types/date.ts

@@ -7,6 +7,7 @@ import type {
   CalendarOnChange,
   CalendarValue,
 } from "../../calendar";
+import type { InputPriority } from "./foundation";
 
 /**
  * Calendar trigger(Input) 영역에서 필요한 속성 묶음.
@@ -17,6 +18,7 @@ import type {
  * @property {(event: MouseEvent<Element>) => void} [onClick] trigger 클릭 핸들러
  * @property {boolean} [disabled] disabled 여부
  * @property {string} [placeholder] trigger 내부 placeholder
+ * @property {InputPriority} [priority] trigger input priority
  */
 export interface InputCalendarTriggerProps {
   /**
@@ -43,6 +45,11 @@ export interface InputCalendarTriggerProps {
    * trigger 내부 placeholder
    */
   placeholder?: string;
+  /**
+   * trigger input priority
+   * - table일 때 Trigger는 left icon 배치를 사용한다.
+   */
+  priority?: InputPriority;
 }
 
 /**
@@ -69,6 +76,7 @@ export interface InputCalendarTriggerViewProps extends InputCalendarTriggerProps
  * @property {string} [placeholder] 트리거 placeholder
  * @property {boolean} [disabled] disabled 여부
  * @property {(event: MouseEvent<Element>) => void} [onClick] 트리거 클릭 핸들러
+ * @property {InputPriority} [priority] trigger input priority
  */
 export interface InputCalendarTriggerRenderProps {
   /**
@@ -95,6 +103,11 @@ export interface InputCalendarTriggerRenderProps {
    * 트리거 클릭 핸들러
    */
   onClick?: (event: MouseEvent<Element>) => void;
+  /**
+   * trigger input priority
+   * - table일 때 Trigger는 left icon 배치를 사용한다.
+   */
+  priority?: InputPriority;
 }
 
 /**
@@ -108,6 +121,7 @@ export interface InputCalendarTriggerRenderProps {
  * @property {boolean} [readOnly] 읽기 전용 여부
  * @property {boolean} [disabled] disabled 여부
  * @property {CalendarDatePickerProps} [datePickerProps] Mantine DatePicker 직접 옵션
+ * @property {InputPriority} [priority] trigger input priority
  * @property {ReactNode} [header] 커스텀 header 콘텐츠
  * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
  * @property {unknown} [timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
@@ -168,6 +182,7 @@ export interface InputCalendarProps extends InputCalendarTriggerProps {
   timePicker?: unknown;
   /**
    * calendar 열림 제어 여부
+   * - 지정되면 제어형(open state controlled)으로 동작한다.
    */
   calendarOpened?: boolean;
   /**