@uniai-fe/uds-primitives 0.6.4 → 0.6.5

package/src/components/calendar/styles/mantine-calendar.scss

@@ -21,6 +21,18 @@
   z-index: 30;
 }
 
+.calendar-range-root,
+.calendar-range-grid {
+  // 변경: range는 Figma 2 calendar 기준으로 두 month column을 같은 panel에 고정한다.
+  --calendar-range-column-width: 322px;
+  --calendar-range-column-gap: var(--spacing-gap-6);
+  --calendar-width: calc(
+    (var(--calendar-range-column-width) * 2) +
+      var(--calendar-range-column-gap) + (var(--calendar-inline-padding) * 2)
+  );
+  max-width: min(100vw - (var(--spacing-padding-5) * 2), 720px);
+}
+
 .calendar-header {
   margin-bottom: var(--spacing-gap-2);
 }
@@ -34,6 +46,10 @@
   width: var(--calendar-body-width);
 }
 
+.calendar-range-grid {
+  width: var(--calendar-body-width);
+}
+
 .calendar-grid table {
   width: auto;
 }
@@ -48,6 +64,17 @@
   width: 100%;
 }
 
+.calendar-range-grid .calendar-month-level {
+  display: grid;
+  grid-template-columns: repeat(2, var(--calendar-range-column-width));
+  column-gap: var(--calendar-range-column-gap);
+  align-items: start;
+}
+
+.calendar-range-grid .calendar-month-level > [data-month-level="true"] {
+  width: var(--calendar-range-column-width);
+}
+
 .calendar-header-row {
   display: grid;
   grid-template-columns: 44px 1fr 44px;
@@ -55,7 +82,8 @@
   width: 100%;
   max-width: none;
   column-gap: var(--spacing-gap-5);
-  padding: 0 var(--spacing-padding-9);
+  // 변경: page navigation arrow는 Figma처럼 calendar header row 양 끝에 붙인다.
+  padding: 0;
   margin-bottom: var(--spacing-gap-5);
   --dch-fz: var(--font-heading-small-size) !important;
 }
@@ -64,7 +92,7 @@
   width: 44px;
   height: 44px;
   border-radius: 999px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-label-alternative);
@@ -74,15 +102,26 @@
 }
 
 .calendar-header-control[data-direction="previous"] {
+  grid-column: 1;
+  grid-row: 1;
   justify-self: start;
 }
 
 .calendar-header-control[data-direction="next"] {
+  grid-column: 3;
+  grid-row: 1;
   justify-self: end;
 }
 
 .calendar-header-level {
+  // 변경: range 두 번째 month처럼 이전 버튼이 없는 header에서도 level을 중앙 column에 고정한다.
+  grid-column: 2;
+  grid-row: 1;
   justify-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-gap-4);
   font-size: var(--font-heading-small-size);
   font-weight: var(--font-heading-small-weight);
   text-align: center;
@@ -93,6 +132,18 @@
   color: var(--color-label-strong);
 }
 
+.calendar-header-level::after {
+  // 변경: Mantine header level button에 Figma의 연/월 선택 up-down 표시를 CSS layer에서 보강한다.
+  content: "";
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66675 8.33333L10.0001 5L13.3334 8.33333' stroke='%2394989E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66675 11.6667L10.0001 15L13.3334 11.6667' stroke='%2394989E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 20px 20px;
+}
+
 .calendar-header-control:where(:not([data-disabled="true"])):hover {
   background-color: var(--color-tertiary-default);
   color: var(--color-label-standard);
@@ -215,18 +266,105 @@
   padding: 0;
   border: none;
   border-radius: var(--theme-radius-large-1);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--font-body-medium-size);
   color: var(--color-label-standard);
 }
 
+.calendar-day-label {
+  width: 44px;
+  height: 44px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: inherit;
+}
+
 .calendar-day[data-outside="true"] {
   color: var(--color-label-alternative);
 }
 
 .calendar-day[data-selected="true"],
 .calendar-day[data-focused="true"] {
+  color: var(--color-common-100);
+}
+
+.calendar-day:where([data-in-range]) {
+  // 변경: button은 period surface만 담당해 selected blue layer와 range bridge를 분리한다.
+  background-color: var(--color-surface-static-blue);
+  color: var(--color-label-standard);
+  border-radius: 0;
+  box-shadow:
+    -1px 0 0 var(--color-surface-static-blue),
+    1px 0 0 var(--color-surface-static-blue);
+}
+
+.calendar-day:where([data-first-in-range]) {
+  border-start-start-radius: var(--theme-radius-medium-3);
+  border-end-start-radius: var(--theme-radius-medium-3);
+  box-shadow: 1px 0 0 var(--color-surface-static-blue);
+}
+
+.calendar-day:where([data-last-in-range]) {
+  border-start-end-radius: var(--theme-radius-medium-3);
+  border-end-end-radius: var(--theme-radius-medium-3);
+  box-shadow: -1px 0 0 var(--color-surface-static-blue);
+}
+
+.calendar-day:where([data-first-in-range][data-last-in-range]) {
+  box-shadow: none;
+}
+
+.calendar-day:where([data-selected="true"], [data-focused="true"]) {
+  background-color: transparent;
+  color: var(--color-common-100);
+}
+
+.calendar-day:where([data-in-range][data-selected="true"]) {
+  background-color: var(--color-surface-static-blue);
+}
+
+.calendar-day:where([data-selected="true"], [data-focused="true"])
+  .calendar-day-label {
   background-color: var(--color-primary-default);
   color: var(--color-common-100);
+  border-radius: var(--theme-radius-medium-3);
+}
+
+.calendar-day:where(
+  [data-today][data-highlight-today]:not(
+      [data-selected="true"],
+      [data-in-range],
+      [data-disabled="true"]
+    )
+) {
+  // 변경: today는 Figma node처럼 selected와 별개인 border/dot 레이어로 표현한다.
+  border: 1px solid var(--color-primary-default);
+  color: var(--color-label-standard);
+}
+
+.calendar-day:where(
+    [data-today][data-highlight-today]:not(
+        [data-selected="true"],
+        [data-in-range],
+        [data-disabled="true"]
+      )
+  )
+  .calendar-day-label::after {
+  content: "";
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  background-color: var(--color-primary-default);
+  position: absolute;
+  bottom: 7px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .calendar-day:where(:disabled, [data-disabled="true"]) {
@@ -234,10 +372,30 @@
   color: var(--color-label-disabled);
 }
 
-.calendar-day:where(:not([data-disabled="true"])):hover {
+.calendar-day:where(
+    :not(
+      [data-disabled="true"],
+      [data-selected="true"],
+      [data-focused="true"],
+      [data-in-range]
+    )
+  ):hover {
   background-color: var(--color-secondary-default);
   color: var(--color-label-standard);
-  border: none;
+}
+
+.calendar-day:where([data-selected="true"]):hover {
+  background-color: transparent;
+  color: var(--color-common-100);
+}
+
+.calendar-day:where([data-in-range][data-selected="true"]):hover {
+  background-color: var(--color-surface-static-blue);
+}
+
+.calendar-day:where([data-selected="true"]):hover .calendar-day-label {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
 }
 
 .calendar-footer {

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

@@ -22,6 +22,23 @@ export type CalendarColumns = 1 | 2;
  */
 export type CalendarValue = string | null;
 
+/**
+ * Calendar range value 직렬화 타입.
+ * @property {CalendarValue} start 시작 날짜 YYYY-MM-DD 문자열 또는 null
+ * @property {CalendarValue} end 종료 날짜 YYYY-MM-DD 문자열 또는 null
+ */
+export type CalendarRangeValue = [CalendarValue, CalendarValue];
+
+/**
+ * Calendar range DatePicker 내부 값 타입.
+ * @property {Date | string | null} start DatePicker 시작 날짜 값
+ * @property {Date | string | null} end DatePicker 종료 날짜 값
+ */
+export type CalendarRangePickerValue = [
+  Date | string | null,
+  Date | string | null,
+];
+
 /**
  * Calendar 값 변경 핸들러.
  * @param {CalendarValue} value 선택된 직렬화 값
@@ -32,6 +49,16 @@ export type CalendarValue = string | null;
  */
 export type CalendarOnChange = (value: CalendarValue) => void;
 
+/**
+ * Calendar range 값 변경 핸들러.
+ * @param {CalendarRangeValue} value 선택된 range 직렬화 tuple
+ * @example
+ * const onChange = (value: CalendarRangeValue) => {
+ *   console.log(value);
+ * };
+ */
+export type CalendarRangeOnChange = (value: CalendarRangeValue) => void;
+
 /**
  * Mantine DatePicker 공개 옵션.
  * @property {Partial<Record<DatePickerStylesNames, string>>} [classNames] Mantine 내부 스타일 클래스 매핑
@@ -54,6 +81,28 @@ export type CalendarDatePickerProps = Partial<
   classNames?: Partial<Record<DatePickerStylesNames, string>>;
 };
 
+/**
+ * Mantine range DatePicker 공개 옵션.
+ * @property {Partial<Record<DatePickerStylesNames, string>>} [classNames] Mantine range 내부 스타일 클래스 매핑
+ */
+export type CalendarRangeDatePickerProps = Partial<
+  Omit<
+    MantineDatePickerProps<"range">,
+    | "value"
+    | "defaultValue"
+    | "onChange"
+    | "type"
+    | "numberOfColumns"
+    | "classNames"
+    | "styles"
+  >
+> & {
+  /**
+   * Mantine range 내부 스타일 classNames override.
+   */
+  classNames?: Partial<Record<DatePickerStylesNames, string>>;
+};
+
 /**
  * Calendar Grid props.
  * @property {CalendarValue} value 현재 선택 값
@@ -75,6 +124,27 @@ export interface CalendarGridProps {
   datePickerProps?: CalendarDatePickerProps;
 }
 
+/**
+ * Calendar Range Grid props.
+ * @property {CalendarRangeValue} value 현재 range 선택 값
+ * @property {CalendarRangeOnChange} onChange range 값 변경 핸들러
+ * @property {CalendarRangeDatePickerProps} [datePickerProps] Mantine range DatePicker 옵션
+ */
+export interface CalendarRangeGridProps {
+  /**
+   * 현재 range 선택 값
+   */
+  value: CalendarRangeValue;
+  /**
+   * range 값 변경 핸들러
+   */
+  onChange: CalendarRangeOnChange;
+  /**
+   * Mantine range DatePicker 옵션
+   */
+  datePickerProps?: CalendarRangeDatePickerProps;
+}
+
 /**
  * Calendar Layout Container props.
  * @property {ReactNode} [header] 상단 콘텐츠
@@ -196,6 +266,86 @@ export interface CalendarRootProps extends Omit<
   portalContainer?: HTMLElement | null;
 }
 
+/**
+ * Calendar Range Root props.
+ * @extends CalendarContainerProps
+ * @property {string} [className] Trigger element className override
+ * @property {CalendarRangeValue} value 현재 range 선택 값
+ * @property {CalendarRangeOnChange} onChange range 값 변경 핸들러
+ * @property {CalendarRangeDatePickerProps} [datePickerProps] Mantine range DatePicker 옵션
+ * @property {ReactNode} children Trigger 슬롯(children)
+ * @property {boolean} [open] 제어형 open 상태
+ * @property {boolean} [defaultOpen] 비제어 초기 open 상태
+ * @property {(open: boolean) => void} [onOpenChange] open 상태 변경 핸들러
+ * @property {"top" | "right" | "bottom" | "left"} [side="bottom"] content 배치 방향
+ * @property {"start" | "center" | "end"} [align="start"] content 정렬 기준
+ * @property {number} [sideOffset=4] trigger와 content 간격
+ * @property {number} [alignOffset] 정렬 보정값
+ * @property {boolean} [withPortal=true] Portal 사용 여부
+ * @property {HTMLElement | null} [portalContainer] Portal 컨테이너
+ */
+export interface CalendarRangeRootProps extends Omit<
+  CalendarContainerProps,
+  "body" | "columns"
+> {
+  /**
+   * Trigger element className override
+   */
+  className?: string;
+  /**
+   * 현재 range 선택 값
+   */
+  value: CalendarRangeValue;
+  /**
+   * range 값 변경 핸들러
+   */
+  onChange: CalendarRangeOnChange;
+  /**
+   * Mantine range DatePicker 옵션
+   */
+  datePickerProps?: CalendarRangeDatePickerProps;
+  /**
+   * Trigger 슬롯(children)
+   */
+  children: ReactNode;
+  /**
+   * 제어형 open 상태
+   */
+  open?: boolean;
+  /**
+   * 비제어 초기 open 상태
+   */
+  defaultOpen?: boolean;
+  /**
+   * open 상태 변경 핸들러
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * content 배치 방향
+   */
+  side?: "top" | "right" | "bottom" | "left";
+  /**
+   * content 정렬 기준
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * trigger와 content 간격
+   */
+  sideOffset?: number;
+  /**
+   * 정렬 보정값
+   */
+  alignOffset?: number;
+  /**
+   * Portal 사용 여부
+   */
+  withPortal?: boolean;
+  /**
+   * Portal 컨테이너
+   */
+  portalContainer?: HTMLElement | null;
+}
+
 /**
  * Calendar 섹션 공용 props.
  * @property {ReactNode} [children] 섹션 내부 콘텐츠

package/src/components/calendar/utils/value-mapper.ts

@@ -1,5 +1,9 @@
 import { dayjs } from "../../../init/dayjs";
-import type { CalendarValue } from "../types";
+import type {
+  CalendarRangePickerValue,
+  CalendarRangeValue,
+  CalendarValue,
+} from "../types";
 
 const DATE_FORMAT = "YYYY-MM-DD";
 
@@ -15,10 +19,39 @@ export const mapValueToPicker = (value: CalendarValue) =>
 
 /**
  * DatePicker value를 Calendar 직렬화 값으로 변환한다.
- * @param {Date | null} value DatePicker value
+ * @param {Date | string | null} value DatePicker value
  * @returns {CalendarValue} YYYY-MM-DD 직렬화 값
  * @example
  * parseValueFromPicker(new Date("2026-02-13"));
  */
-export const parseValueFromPicker = (value: Date | null): CalendarValue =>
-  value ? dayjs(value).format(DATE_FORMAT) : null;
+export const parseValueFromPicker = (
+  value: Date | string | null,
+): CalendarValue => (value ? dayjs(value).format(DATE_FORMAT) : null);
+
+/**
+ * Calendar range value를 DatePicker range value로 변환한다.
+ * @param {CalendarRangeValue} value YYYY-MM-DD range tuple
+ * @returns {[Date | null, Date | null]} DatePicker range value
+ * @example
+ * mapRangeValueToPicker(["2026-02-13", "2026-02-20"]);
+ */
+export const mapRangeValueToPicker = (
+  value: CalendarRangeValue,
+): [Date | null, Date | null] => [
+  mapValueToPicker(value[0]),
+  mapValueToPicker(value[1]),
+];
+
+/**
+ * DatePicker range value를 Calendar range 직렬화 값으로 변환한다.
+ * @param {CalendarRangePickerValue} value DatePicker range value
+ * @returns {CalendarRangeValue} YYYY-MM-DD range 직렬화 tuple
+ * @example
+ * parseRangeValueFromPicker([new Date("2026-02-13"), new Date("2026-02-20")]);
+ */
+export const parseRangeValueFromPicker = (
+  value: CalendarRangePickerValue,
+): CalendarRangeValue => [
+  parseValueFromPicker(value[0]),
+  parseValueFromPicker(value[1]),
+];

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

@@ -3,7 +3,6 @@
 import type { ChangeEvent, MouseEvent as ReactMouseEvent } from "react";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useUncontrolled } from "@mantine/hooks";
-import clsx from "clsx";
 import { Calendar } from "../../../calendar";
 import type {
   InputCalendarProps,
@@ -46,7 +45,6 @@ const INPUT_DATE_TABLE_FORMAT = "YY-MM-DD";
  * @param {unknown} [props.timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
  * @param {boolean} [props.calendarOpened] calendar 열림 제어 상태
  * @param {(event: MouseEvent<Element>) => void} [props.onClick] trigger 클릭 핸들러
- * @param {string} [props.className] root className
  * @param {string} [props.id] trigger id
  * @param {ReactNode} [props.trigger] 커스텀 trigger 슬롯
  * @param {(props: InputCalendarTriggerRenderProps) => ReactNode} [props.renderTrigger] 커스텀 trigger 렌더 함수
@@ -68,7 +66,6 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       placeholder = "YYYY-MM-DD",
       priority = "primary",
       state = "default",
-      className,
       header,
       footer,
       calendarOpened,
@@ -182,7 +179,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       <>
         <Calendar.Root
           ref={ref}
-          className={clsx("input-date-field", className)}
+          className="input-date-field"
           mode={mode}
           columns={columns}
           disabled={disabled}

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

@@ -4,15 +4,26 @@ import InputDateTrigger from "./Trigger";
 import InputDateApplyButton from "./button/ApplyButton";
 import InputDateClearButton from "./button/ClearButton";
 import InputDateTodayButton from "./button/TodayButton";
+import InputDateRangeTemplate from "./range/Template";
 import {
   InputDateFooterTemplate,
   InputDateFooterTemplateContainer,
   InputDateFooterUtilContainer,
 } from "./footer";
 
+export const InputDateDefault = {
+  Template: InputDateTemplate,
+};
+
+export const InputDateRange = {
+  Template: InputDateRangeTemplate,
+};
+
 // Input.Date 네임스페이스: template/foundation 구성요소 집합
 export const InputDate = {
   Template: InputDateTemplate,
+  Default: InputDateDefault,
+  Range: InputDateRange,
   Trigger: InputDateTrigger,
   Button: {
     Apply: InputDateApplyButton,