@uniai-fe/uds-primitives 0.6.4 → 0.6.5

package/dist/styles.css

@@ -1636,6 +1636,17 @@
   z-index: 30;
 }
 
+.calendar-range-root,
+.calendar-range-grid {
+  --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);
 }
@@ -1649,6 +1660,10 @@
   width: var(--calendar-body-width);
 }
 
+.calendar-range-grid {
+  width: var(--calendar-body-width);
+}
+
 .calendar-grid table {
   width: auto;
 }
@@ -1663,6 +1678,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;
@@ -1670,7 +1696,7 @@
   width: 100%;
   max-width: none;
   column-gap: var(--spacing-gap-5);
-  padding: 0 var(--spacing-padding-9);
+  padding: 0;
   margin-bottom: var(--spacing-gap-5);
   --dch-fz: var(--font-heading-small-size) !important;
 }
@@ -1679,7 +1705,7 @@
   width: 44px;
   height: 44px;
   border-radius: 999px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-label-alternative);
@@ -1687,15 +1713,25 @@
 }
 
 .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 {
+  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;
@@ -1706,6 +1742,17 @@
   color: var(--color-label-strong);
 }
 
+.calendar-header-level::after {
+  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);
@@ -1824,28 +1871,117 @@
   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]) {
+  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])) {
+  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]) {
   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 {
@@ -3441,6 +3577,45 @@ figure.chip {
   width: 100%;
 }
 
+.input-date-range-footer-template {
+  gap: var(--spacing-gap-6);
+}
+
+.input-date-range-today-row {
+  justify-content: flex-end;
+}
+
+.input-date-range-footer-row {
+  justify-content: space-between;
+}
+
+.input-date-range-clear-button {
+  min-height: 20px;
+  padding-inline: var(--spacing-padding-5);
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-feedback-error);
+}
+.input-date-range-clear-button:hover:not(:disabled):not([aria-disabled=true]), .input-date-range-clear-button:active:not(:disabled):not([aria-disabled=true]) {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-feedback-error);
+  box-shadow: none;
+}
+.input-date-range-clear-button .button-label {
+  font-size: var(--font-body-xxsmall-size);
+  line-height: 1.4;
+  font-weight: var(--font-body-medium-weight);
+  letter-spacing: 0;
+}
+
+.input-date-range-apply-button {
+  width: fit-content;
+  flex: 0 0 auto;
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
+}
+
 .input-address-container {
   width: 100%;
 }

package/package.json

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

package/src/components/calendar/index.tsx

@@ -4,6 +4,7 @@
  * - `Calendar.Root`: trigger + popover + core 조합 템플릿이다.
  * - `Calendar.Container`: Header/Body/Footer 레이아웃 컨테이너다.
  * - `Calendar.Core`: Mantine DatePicker SOT 렌더러다.
+ * - `Calendar.Range`: Mantine DatePicker range SOT namespace다.
  * - `CalendarHooks`, `CalendarUtils`: 관련 hook/util namespace다.
  */
 import "./index.scss";

package/src/components/calendar/markup/Core.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { DatePicker } from "@mantine/dates";
+import { DatePicker, type DateStringValue } from "@mantine/dates";
+import { dayjs } from "../../../init/dayjs";
 import { CalendarIcon } from "./Icon";
 import type { CalendarDatePickerProps, CalendarGridProps } from "../types";
 import { mapValueToPicker, parseValueFromPicker } from "../utils";
@@ -20,7 +21,7 @@ export default function CalendarCore({
   onChange,
   datePickerProps,
 }: CalendarGridProps) {
-  const { valueFormat, ...safeDatePickerProps } = (datePickerProps ??
+  const { valueFormat, renderDay, ...safeDatePickerProps } = (datePickerProps ??
     {}) as CalendarDatePickerProps & {
     /**
      * deprecated DatePicker 표시 포맷 옵션
@@ -37,8 +38,18 @@ export default function CalendarCore({
     weekendDays: [] as Array<0 | 1 | 2 | 3 | 4 | 5 | 6>,
     nextIcon: <CalendarIcon.Chevron.right />,
     previousIcon: <CalendarIcon.Chevron.left />,
+    // 변경: Figma today node 기준의 border/dot 상태를 기본 활성화한다.
+    highlightToday: true,
+    // 변경: Calendar header는 Figma 기준의 연도-월 순서 표기를 기본값으로 둔다.
+    monthLabelFormat: "YYYY년 M월",
     // 변경: 지원하지 않는 valueFormat은 제거한 뒤 DatePicker 옵션을 병합한다.
     ...safeDatePickerProps,
+    // 변경: selected/range/today 시각 레이어를 분리하기 위해 날짜 값을 내부 span에 고정한다.
+    renderDay: (date: DateStringValue) => (
+      <span className="calendar-day-label">
+        {renderDay ? renderDay(date) : dayjs(date).date()}
+      </span>
+    ),
     classNames: {
       levelsGroup: "calendar-month-level",
       month: "calendar-month-table",

package/src/components/calendar/markup/index.tsx

@@ -5,6 +5,7 @@ import CalendarFooter from "./layout/Footer";
 import CalendarCore from "./Core";
 import CalendarRoot from "./Root";
 import { CalendarIcon } from "./Icon";
+import { CalendarRange } from "./range";
 
 /**
  * Calendar; date picker namespace
@@ -13,6 +14,7 @@ import { CalendarIcon } from "./Icon";
  * - `Calendar.Container`: Header/Body/Footer 레이아웃 컨테이너다.
  * - `Calendar.Header`, `Calendar.Body`, `Calendar.Footer`: depth 고정 레이아웃 섹션이다.
  * - `Calendar.Core`: Mantine DatePicker SOT 렌더러다.
+ * - `Calendar.Range`: Mantine DatePicker range SOT namespace다.
  * - `Calendar.Icon`: 입력/네비게이션 아이콘 namespace다.
  */
 export const Calendar = {
@@ -22,5 +24,8 @@ export const Calendar = {
   Body: CalendarBody,
   Footer: CalendarFooter,
   Core: CalendarCore,
+  Range: CalendarRange,
   Icon: CalendarIcon,
 };
+
+export * from "./range";

package/src/components/calendar/markup/range/Core.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { DatePicker, type DateStringValue } from "@mantine/dates";
+import { dayjs } from "../../../../init/dayjs";
+import { CalendarIcon } from "../Icon";
+import type {
+  CalendarRangeDatePickerProps,
+  CalendarRangeGridProps,
+  CalendarRangePickerValue,
+} from "../../types";
+import { mapRangeValueToPicker, parseRangeValueFromPicker } from "../../utils";
+
+/**
+ * Calendar Range Grid; Mantine DatePicker range 래퍼.
+ * @component
+ * @param {CalendarRangeGridProps} props range grid props
+ * @param {CalendarRangeValue} props.value 현재 range 선택 값
+ * @param {CalendarRangeOnChange} props.onChange range 값 변경 핸들러
+ * @param {CalendarRangeDatePickerProps} [props.datePickerProps] Mantine range DatePicker 옵션
+ * @example
+ * <Calendar.Range.Core value={value} onChange={setValue} />
+ */
+export default function CalendarRangeCore({
+  value,
+  onChange,
+  datePickerProps,
+}: CalendarRangeGridProps) {
+  const { valueFormat, renderDay, ...safeDatePickerProps } = (datePickerProps ??
+    {}) as CalendarRangeDatePickerProps & {
+    /**
+     * deprecated DatePicker 표시 포맷 옵션
+     */
+    valueFormat?: unknown;
+  };
+  // 변경: range에서도 valueFormat은 지원하지 않는 옵션이므로 Calendar 단에서 제거한다.
+  void valueFormat;
+
+  // Range Core는 Figma의 2 calendar 구조에 맞춰 두 달을 한 패널에서 렌더링한다.
+  const resolvedDatePickerProps = {
+    size: "sm" as const,
+    firstDayOfWeek: 0 as const,
+    weekendDays: [] as Array<0 | 1 | 2 | 3 | 4 | 5 | 6>,
+    nextIcon: <CalendarIcon.Chevron.right />,
+    previousIcon: <CalendarIcon.Chevron.left />,
+    // 변경: range는 2개월을 보여주되 page navigation은 1개월씩 이동한다.
+    columnsToScroll: 1,
+    // 변경: Figma today node 기준의 border/dot 상태를 range에서도 기본 활성화한다.
+    highlightToday: true,
+    // 변경: Range header도 단일 Core와 같은 연도-월 순서 표기를 기본값으로 둔다.
+    monthLabelFormat: "YYYY년 M월",
+    ...safeDatePickerProps,
+    // 변경: button은 period surface, span은 selected/today 날짜 레이어로 분리한다.
+    renderDay: (date: DateStringValue) => (
+      <span className="calendar-day-label">
+        {renderDay ? renderDay(date) : dayjs(date).date()}
+      </span>
+    ),
+    classNames: {
+      levelsGroup: "calendar-month-level",
+      month: "calendar-month-table",
+      monthCell: "calendar-month-cell",
+      calendarHeader: "calendar-header-row",
+      calendarHeaderControl: "calendar-header-control",
+      calendarHeaderLevel: "calendar-header-level",
+      day: "calendar-day",
+      weekday: "calendar-weekday",
+      weekdaysRow: "calendar-weekdays",
+      monthsList: "calendar-months-list",
+      monthsListCell: "calendar-months-list-cell",
+      monthsListControl: "calendar-months-list-control",
+      yearsList: "calendar-years-list",
+      yearsListCell: "calendar-years-list-cell",
+      yearsListControl: "calendar-years-list-control",
+      ...(safeDatePickerProps.classNames ?? {}),
+    },
+  };
+
+  const handleChange = (nextValue: CalendarRangePickerValue) => {
+    onChange(parseRangeValueFromPicker(nextValue));
+  };
+
+  return (
+    <DatePicker
+      className="calendar-grid calendar-range-grid"
+      numberOfColumns={2}
+      type="range"
+      value={mapRangeValueToPicker(value)}
+      onChange={handleChange}
+      {...resolvedDatePickerProps}
+    />
+  );
+}

package/src/components/calendar/markup/range/Root.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { PopOver } from "../../../pop-over";
+import type { CalendarRangeRootProps } from "../../types";
+import CalendarContainer from "../layout/Container";
+import CalendarRangeCore from "./Core";
+
+/**
+ * Calendar Range Root; Trigger/Popover + Range Core 조합 템플릿.
+ * @component
+ * @param {CalendarRangeRootProps} props range root props
+ * @param {string} [props.className] Trigger element className override
+ * @param {CalendarRangeValue} props.value 현재 range 선택 값
+ * @param {CalendarRangeOnChange} props.onChange range 값 변경 핸들러
+ * @param {CalendarRangeDatePickerProps} [props.datePickerProps] Mantine range DatePicker 옵션
+ * @param {React.ReactNode} [props.header] Calendar Header 슬롯
+ * @param {React.ReactNode} [props.footer] Calendar Footer 슬롯
+ * @param {CalendarMode} [props.mode="date"] calendar 모드
+ * @param {boolean} [props.disabled] 비활성화 상태
+ * @param {boolean} [props.readOnly] 읽기 전용 상태
+ * @param {React.ReactNode} props.children Trigger 슬롯(children)
+ * @param {boolean} [props.open] 제어형 open 상태
+ * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태
+ * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 핸들러
+ * @param {"top" | "right" | "bottom" | "left"} [props.side="bottom"] Content 배치 방향
+ * @param {"start" | "center" | "end"} [props.align="start"] Content 정렬 기준
+ * @param {number} [props.sideOffset=4] Trigger와 Content 간격
+ * @param {number} [props.alignOffset] Content 정렬 보정값
+ * @param {boolean} [props.withPortal=true] Portal 사용 여부
+ * @param {HTMLElement | null} [props.portalContainer] Portal 컨테이너
+ * @example
+ * <Calendar.Range.Root value={value} onChange={setValue} />
+ */
+const CalendarRangeRoot = forwardRef<HTMLElement, CalendarRangeRootProps>(
+  (
+    {
+      className,
+      value,
+      onChange,
+      datePickerProps,
+      header,
+      footer,
+      mode = "date",
+      disabled,
+      readOnly,
+      children,
+      open,
+      defaultOpen,
+      onOpenChange,
+      side = "bottom",
+      align = "start",
+      sideOffset = 4,
+      alignOffset,
+      withPortal = true,
+      portalContainer,
+    },
+    ref,
+  ) => {
+    // disabled/readOnly 상태에서는 range PopOver 토글을 막는다.
+    const isInteractive = !disabled && !readOnly;
+
+    const calendarNode = (
+      <CalendarContainer
+        ref={ref}
+        header={header}
+        footer={footer}
+        mode={mode}
+        columns={2}
+        disabled={disabled}
+        readOnly={readOnly}
+        body={
+          <CalendarRangeCore
+            value={value}
+            onChange={onChange}
+            datePickerProps={datePickerProps}
+          />
+        }
+      />
+    );
+
+    return (
+      <PopOver.Root
+        open={isInteractive ? open : false}
+        defaultOpen={isInteractive ? defaultOpen : false}
+        onOpenChange={nextOpen => {
+          if (!isInteractive) {
+            onOpenChange?.(false);
+            return;
+          }
+          onOpenChange?.(nextOpen);
+        }}
+        modal={false}
+      >
+        {/* Trigger 래퍼 div 없이 children 노드에 PopOver trigger props를 직접 주입한다. */}
+        <PopOver.Trigger
+          asChild
+          disabled={!isInteractive}
+          className={clsx("calendar-trigger", className)}
+        >
+          {/* children은 asChild 계약상 단일 element여야 하며, 해당 요소가 props를 DOM으로 전달해야 한다. */}
+          {children}
+        </PopOver.Trigger>
+        <PopOver.Content
+          className="calendar-pop-over-content"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          withPortal={withPortal}
+          portalContainer={portalContainer}
+          onInteractOutside={event => {
+            // 변경 설명: trigger 클릭은 outside dismiss에서 제외해 close 후 즉시 reopen 경합을 방지한다.
+            const nextTarget = event.target as HTMLElement | null;
+            if (nextTarget?.closest(".calendar-trigger")) {
+              event.preventDefault();
+            }
+          }}
+        >
+          {/* range calendar 스킨 class는 content 내부에 고정한다. */}
+          <div className="calendar-root calendar-range-root">
+            {calendarNode}
+          </div>
+        </PopOver.Content>
+      </PopOver.Root>
+    );
+  },
+);
+
+CalendarRangeRoot.displayName = "CalendarRangeRoot";
+
+export default CalendarRangeRoot;

package/src/components/calendar/markup/range/index.tsx

@@ -0,0 +1,15 @@
+import CalendarRangeCore from "./Core";
+import CalendarRangeRoot from "./Root";
+
+export { CalendarRangeCore, CalendarRangeRoot };
+
+/**
+ * Calendar Range; date range picker namespace
+ * @desc
+ * - `Calendar.Range.Root`: trigger + popover + range core 조합 템플릿이다.
+ * - `Calendar.Range.Core`: Mantine DatePicker range SOT 렌더러다.
+ */
+export const CalendarRange = {
+  Root: CalendarRangeRoot,
+  Core: CalendarRangeCore,
+};