@uniai-fe/uds-primitives 0.6.6 → 0.6.8

package/dist/styles.css

@@ -871,6 +871,10 @@
   align-items: center;
   justify-content: center;
 }
+.alternate.loading {
+  width: fit-content;
+  height: fit-content;
+}
 .alternate.is-horizontal {
   flex-direction: row;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/alternate/styles/unit.scss

@@ -32,6 +32,11 @@
   align-items: center;
   justify-content: center;
 
+  &.loading {
+    width: fit-content;
+    height: fit-content;
+  }
+
   &.is-horizontal {
     flex-direction: row;
 

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

@@ -42,6 +42,7 @@ const INPUT_DATE_TABLE_FORMAT = "YY-MM-DD";
  * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] trigger input state
  * @param {ReactNode} [props.header] 패널 header 콘텐츠
  * @param {ReactNode} [props.footer] 패널 footer 콘텐츠
+ * @param {InputCalendarTexts} [props.texts] 기본 Date 문구
  * @param {unknown} [props.timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
  * @param {boolean} [props.calendarOpened] calendar 열림 제어 상태
  * @param {(event: MouseEvent<Element>) => void} [props.onClick] trigger 클릭 핸들러
@@ -68,6 +69,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       state = "default",
       header,
       footer,
+      texts,
       calendarOpened,
       onClick: triggerOnClick,
       id,
@@ -147,6 +149,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         onToday={() => updateValue(getTodayValue())}
         // 변경: Apply 버튼 클릭 시 calendar를 닫는다.
         onApply={() => setInternalCalendarOpen(false)}
+        texts={texts}
       />
     );
 

package/src/components/input/markup/date/footer/Template.tsx

@@ -14,6 +14,7 @@ import InputDateFooterUtilContainer from "./UtilContainer";
  * @param {() => void} [props.onToday] today 버튼 클릭 핸들러
  * @param {() => void} [props.onApply] apply 버튼 클릭 핸들러
  * @param {boolean} [props.disabled] 전체 버튼 disabled 여부
+ * @param {InputCalendarTexts} [props.texts] 기본 Date 문구
  * @example
  * <InputDateFooterTemplate onClear={onClear} onToday={onToday} onApply={onApply} />
  */
@@ -23,14 +24,23 @@ export default function InputDateFooterTemplate({
   onToday,
   onApply,
   disabled,
+  texts,
 }: InputCalendarFooterTemplateProps) {
   return (
     <InputDateFooterTemplateContainer className={className}>
       <InputDateFooterUtilContainer>
-        <InputDateClearButton disabled={disabled} onClick={onClear} />
-        <InputDateTodayButton disabled={disabled} onClick={onToday} />
+        <InputDateClearButton disabled={disabled} onClick={onClear}>
+          {texts?.clear}
+        </InputDateClearButton>
+        <InputDateTodayButton disabled={disabled} onClick={onToday}>
+          {texts?.today}
+        </InputDateTodayButton>
       </InputDateFooterUtilContainer>
-      <InputDateApplyButton disabled={disabled} onClick={onApply} />
+      <InputDateApplyButton
+        disabled={disabled}
+        label={texts?.apply}
+        onClick={onApply}
+      />
     </InputDateFooterTemplateContainer>
   );
 }

package/src/components/input/markup/date/range/Template.tsx

@@ -46,6 +46,7 @@ const INPUT_DATE_RANGE_TABLE_FORMAT = "YY-MM-DD";
  * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] trigger input state
  * @param {ReactNode} [props.header] 패널 header 콘텐츠
  * @param {ReactNode} [props.footer] 패널 footer 콘텐츠
+ * @param {InputCalendarTexts} [props.texts] 기본 Date 문구
  * @param {boolean} [props.calendarOpened] calendar 열림 제어 상태
  * @param {string} [props.id] trigger id
  * @param {ReactNode} [props.trigger] 커스텀 trigger 슬롯
@@ -78,6 +79,7 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
       state = "default",
       header,
       footer,
+      texts,
       calendarOpened,
       onClick: triggerOnClick,
       id,
@@ -171,7 +173,9 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
               const today = getTodayValue();
               updateValue([today, today]);
             }}
-          />
+          >
+            {texts?.today}
+          </InputDateTodayButton>
         </InputDateFooterUtilContainer>
         <InputDateFooterUtilContainer className="input-date-range-footer-row">
           <InputDateClearButton
@@ -179,12 +183,13 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             disabled={disabled}
             onClick={() => updateValue(createEmptyRangeValue())}
           >
-            삭제하기
+            {texts?.clear ?? "삭제하기"}
           </InputDateClearButton>
           {/* 변경: range footer는 삭제/적용을 같은 row에 두고 Apply 폭을 content 기준으로 줄인다. */}
           <InputDateApplyButton
             className="input-date-range-apply-button"
             disabled={disabled}
+            label={texts?.apply}
             onClick={() => setInternalCalendarOpen(false)}
           />
         </InputDateFooterUtilContainer>

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

@@ -148,6 +148,7 @@ export interface InputCalendarTriggerRenderProps {
  * @property {InputState} [state] trigger input state
  * @property {ReactNode} [header] 커스텀 header 콘텐츠
  * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
+ * @property {InputCalendarTexts} [texts] 기본 Date 문구
  * @property {unknown} [timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
  * @property {boolean} [calendarOpened] calendar 열림 제어 여부
  * @property {ReactNode} [trigger] 커스텀 trigger 슬롯
@@ -198,6 +199,10 @@ export interface InputCalendarProps extends InputCalendarTriggerProps {
    * 커스텀 footer 콘텐츠
    */
   footer?: ReactNode;
+  /**
+   * 기본 Date 문구
+   */
+  texts?: InputCalendarTexts;
   /**
    * TimePicker 확장용 예약 슬롯(현재 미구현).
    * 추후 Calendar Body 조합 확장 시점에 구체 타입을 확정한다.
@@ -236,6 +241,7 @@ export interface InputCalendarProps extends InputCalendarTriggerProps {
  * @property {InputState} [state] trigger input state
  * @property {ReactNode} [header] 커스텀 header 콘텐츠
  * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
+ * @property {InputCalendarTexts} [texts] 기본 Date 문구
  * @property {boolean} [calendarOpened] calendar 열림 제어 여부
  * @property {string} [id] trigger id
  * @property {ReactNode} [trigger] 커스텀 trigger 슬롯
@@ -308,6 +314,10 @@ export interface InputCalendarRangeProps {
    * 커스텀 footer 콘텐츠
    */
   footer?: ReactNode;
+  /**
+   * 기본 Date 문구
+   */
+  texts?: InputCalendarTexts;
   /**
    * calendar 열림 제어 여부
    * - 지정되면 제어형(open state controlled)으로 동작한다.
@@ -369,6 +379,27 @@ export interface InputCalendarApplyButtonProps extends InputCalendarInlineButton
   label?: ReactNode;
 }
 
+/**
+ * Input Date 기본 문구.
+ * @property {ReactNode} [clear] clear 버튼 라벨
+ * @property {ReactNode} [today] today 버튼 라벨
+ * @property {ReactNode} [apply] apply 버튼 라벨
+ */
+export interface InputCalendarTexts {
+  /**
+   * clear 버튼 라벨
+   */
+  clear?: ReactNode;
+  /**
+   * today 버튼 라벨
+   */
+  today?: ReactNode;
+  /**
+   * apply 버튼 라벨
+   */
+  apply?: ReactNode;
+}
+
 /**
  * Footer template의 util 버튼 컨테이너 props.
  * @property {ReactNode} [children] util 버튼(children)
@@ -408,6 +439,7 @@ export interface InputCalendarFooterTemplateContainerProps {
  * @property {() => void} [onToday] today 버튼 클릭 핸들러
  * @property {() => void} [onApply] apply 버튼 클릭 핸들러
  * @property {boolean} [disabled] 전체 버튼 disabled 여부
+ * @property {InputCalendarTexts} [texts] 기본 Date 문구
  */
 export interface InputCalendarFooterTemplateProps {
   /**
@@ -430,4 +462,8 @@ export interface InputCalendarFooterTemplateProps {
    * 전체 버튼 disabled 여부
    */
   disabled?: boolean;
+  /**
+   * 기본 Date 문구
+   */
+  texts?: InputCalendarTexts;
 }