@uniai-fe/uds-primitives 0.2.2 → 0.2.3

package/README.md

@@ -140,7 +140,7 @@ import "@uniai-fe/uds-primitives/css";
 
 ThemeProvider는 CSS를 import하지 않으므로 foundation/primitives styles를 앱 루트에서 1회만 로드하면 중복 없이 토큰 매핑이 적용된다. Provider 자체는 foundation 패키지(`@uniai-fe/uds-foundation/provider`)에서만 export된다(one-source 규칙).
 
-> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-primitives/src/index.scss`를 직접 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-primitives/css` 엔트리만 사용한다.
+> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-primitives/styles` 엔트리를 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-primitives/css` 엔트리만 사용한다.
 
 ### 토큰 스코프 & ThemeProvider
 

package/dist/styles.css

@@ -1011,6 +1011,260 @@
   border-radius: var(--button-round-radius-large, 30px);
 }
 
+.calendar-root {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-trigger {
+  width: 100%;
+}
+
+.calendar-container {
+  display: grid;
+  gap: var(--spacing-gap-3);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-body,
+.calendar-grid {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-root,
+.calendar-grid {
+  --calendar-width: 375px;
+  --calendar-inline-padding: var(--spacing-padding-6);
+  --calendar-body-width: calc(
+    var(--calendar-width) - (var(--calendar-inline-padding) * 2)
+  );
+}
+
+.calendar-root {
+  padding: var(--spacing-padding-10) var(--spacing-padding-6) var(--spacing-padding-6);
+  display: grid;
+  gap: var(--spacing-gap-3);
+  width: var(--calendar-width);
+  min-width: var(--calendar-width);
+  max-width: min(100vw - var(--spacing-padding-5) * 2, 420px);
+  box-sizing: border-box;
+  z-index: 30;
+}
+
+.calendar-header {
+  margin-bottom: var(--spacing-gap-2);
+}
+
+.calendar-body {
+  display: grid;
+  gap: var(--spacing-gap-5);
+}
+
+.calendar-grid {
+  width: var(--calendar-body-width);
+}
+
+.calendar-grid table {
+  width: auto;
+}
+
+.calendar-month-level {
+  width: 100%;
+}
+
+.calendar-month-level > [data-month-level=true],
+.calendar-month-level > [data-year-level=true],
+.calendar-month-level > [data-decade-level=true] {
+  width: 100%;
+}
+
+.calendar-header-row {
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
+  align-items: center;
+  width: 100%;
+  max-width: none;
+  column-gap: var(--spacing-gap-5);
+  padding: 0 var(--spacing-padding-9);
+  margin-bottom: var(--spacing-gap-5);
+  --dch-fz: var(--font-heading-small-size) !important;
+}
+
+.calendar-header-control {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-label-alternative);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.calendar-header-control[data-direction=previous] {
+  justify-self: start;
+}
+
+.calendar-header-control[data-direction=next] {
+  justify-self: end;
+}
+
+.calendar-header-level {
+  justify-self: center;
+  font-size: var(--font-heading-small-size);
+  font-weight: var(--font-heading-small-weight);
+  text-align: center;
+  white-space: nowrap;
+  writing-mode: horizontal-tb;
+  letter-spacing: 0.2px;
+  /* Month/Year 헤더 텍스트는 디자인 기준에 맞춰 strong 컬러를 사용한다. */
+  color: var(--color-label-strong);
+}
+
+.calendar-header-control:where(:not([data-disabled=true])):hover {
+  background-color: var(--color-tertiary-default);
+  color: var(--color-label-standard);
+}
+
+.calendar-month-table {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.calendar-month-cell {
+  width: 46px;
+  padding: 1px;
+}
+
+.calendar-months-list {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: var(--spacing-gap-3);
+}
+
+.calendar-months-list-cell {
+  padding: 0;
+}
+
+.calendar-months-list-control {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--spacing-padding-2);
+  border: none;
+  border-radius: var(--theme-radius-medium-3);
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: 1.5;
+  color: var(--color-label-standard);
+  text-transform: none;
+}
+
+.calendar-months-list-control[data-selected=true] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-months-list-control:where(:not([data-disabled=true], [data-selected=true])):hover {
+  background-color: var(--color-secondary-default);
+}
+
+.calendar-years-list {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: var(--spacing-gap-3);
+}
+
+.calendar-years-list-cell {
+  padding: 0;
+}
+
+.calendar-years-list-control {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--spacing-padding-2);
+  border: none;
+  border-radius: var(--theme-radius-medium-3);
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: 1.5;
+  color: var(--color-label-standard);
+  text-transform: none;
+}
+
+.calendar-years-list-control[data-selected=true] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-years-list-control:where(:not([data-disabled=true], [data-selected=true])):hover {
+  background-color: var(--color-secondary-default);
+}
+
+.calendar-weekdays {
+  text-transform: none;
+  --wr-fz: var(--font-heading-xxsmall-size) !important;
+  --wr-spacing: 10px !important;
+}
+
+.calendar-weekday {
+  text-transform: none;
+  width: 46px;
+  min-width: 46px;
+  height: 30px;
+  padding-bottom: 5px;
+  font-size: var(--font-heading-xxsmall-size);
+  font-weight: var(--font-heading-xxsmall-weight);
+  line-height: 1.5;
+  letter-spacing: 0.2px;
+  color: var(--color-label-alternative);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.calendar-day {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: var(--theme-radius-large-1);
+  font-size: var(--font-body-medium-size);
+  color: var(--color-label-standard);
+}
+
+.calendar-day[data-outside=true] {
+  color: var(--color-label-alternative);
+}
+
+.calendar-day[data-selected=true],
+.calendar-day[data-focused=true] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-day:where(:not([data-disabled=true])):hover {
+  background-color: var(--color-secondary-default);
+  color: var(--color-label-standard);
+  border: none;
+}
+
+.calendar-footer {
+  width: 100%;
+}
+
 
 
 .checkbox {
@@ -1623,6 +1877,34 @@ figure.chip {
   padding: 0;
 }
 
+.pop-over-content {
+  position: relative;
+  z-index: 50;
+  outline: none;
+}
+
+.pop-over-content {
+  width: fit-content;
+  max-width: min(100vw - 24px, max-content);
+  box-sizing: border-box;
+  background-color: var(--color-common-100);
+  border-radius: var(--theme-radius-large-2);
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
+}
+
+.pop-over-content[data-width=match] {
+  width: var(--radix-popover-trigger-width);
+}
+
+.pop-over-content[data-width=fit-content] {
+  width: fit-content;
+}
+
+.pop-over-content[data-width=max-content] {
+  width: max-content;
+}
+
 
 
 .input {
@@ -2019,110 +2301,46 @@ figure.chip {
   font-weight: var(--font-body-xxsmall-weight);
 }
 
-.input-calendar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-6, 20px);
+.input-date-field {
+  display: grid;
+  gap: var(--spacing-gap-5);
   width: 100%;
 }
-.input-calendar[data-disabled=true] {
-  opacity: 0.6;
-}
-
-.input-calendar-container {
-  background-color: var(--color-common-100, #fff);
-  border-radius: var(--theme-radius-large-3, 16px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
-  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-6, 16px) var(--spacing-padding-6, 16px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-5, 16px);
-}
 
-.input-calendar-root {
+.input-date-trigger-input {
   width: 100%;
 }
 
-.input-calendar-panel {
-  width: 100%;
-  border-radius: var(--theme-radius-large-1, 12px);
-  background-color: transparent;
-}
-
-.input-calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-inline: var(--spacing-padding-6, 16px);
-  margin-bottom: var(--spacing-gap-4, 12px);
-}
-
-.input-calendar-header-control {
-  width: 24px;
-  height: 24px;
+.input-date-trigger-icon {
+  margin: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--color-label-strong, #18191b);
-}
-
-.input-calendar-header-level {
-  font-size: var(--font-heading-small-size, 19px);
-  font-weight: var(--font-heading-small-weight, 600);
+  width: 28px;
+  height: 28px;
+  color: var(--color-label-alternative);
+  pointer-events: none;
 }
 
-.input-calendar-weekdays {
+.input-date-footer-template {
   display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  padding-bottom: var(--spacing-padding-2, 4px);
-}
-
-.input-calendar-weekday {
-  text-transform: none;
-  font-size: var(--font-heading-xxsmall-size, 15px);
-  color: var(--color-label-alternative, #afb1b6);
-  text-align: center;
-}
-
-.input-calendar-day {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--theme-radius-large-1, 12px);
-  justify-self: center;
-  font-size: var(--font-body-medium-size, 17px);
-  color: var(--color-label-strong, #3d3f43);
-}
-
-.input-calendar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-4, 12px);
+  gap: var(--spacing-gap-5);
   width: 100%;
 }
 
-.input-calendar-footer-actions {
+.input-date-footer-util {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-gap-3, 8px);
-}
-
-.input-calendar-action-button {
+  gap: var(--spacing-gap-3);
   width: 100%;
 }
 
-.input-calendar-footer-actions > :first-child {
-  flex: 1 1 auto;
-}
-
-.input-calendar-footer-actions > :last-child {
-  flex: 1 1 auto;
-  justify-content: flex-end;
+.input-date-action-button {
+  width: auto;
 }
 
-.input-calendar-apply {
+.input-date-apply-button {
   width: 100%;
 }
 

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
   "sideEffects": [
     "./src/**/*.scss",
-    "./src/theme/**/*.scss",
-    "./styles.scss"
+    "./styles.scss",
+    "./src/**/*.css",
+    "./src/init/*.ts"
   ],
   "license": "MIT",
   "homepage": "https://www.uniai.co.kr/",
@@ -36,6 +37,8 @@
     "./styles": "./styles.scss",
     "./css": "./dist/styles.css",
     "./init/dayjs": "./src/init/dayjs",
+    "./init/mantine": "./src/init/mantine",
+    "./mantine-style": "./src/init/mantine.css",
     "./*": "./src/*"
   },
   "scripts": {
@@ -53,27 +56,31 @@
     "design-primitives:dev": "pnpm run dev"
   },
   "peerDependencies": {
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@mantine/core": "^8",
+    "@mantine/dates": "^8",
+    "@mantine/hooks": "^8",
     "@uniai-fe/uds-foundation": "^0.1.0",
     "@uniai-fe/util-functions": "^0.2.3",
     "react": "^19",
+    "react-daum-postcode": "^3",
     "react-dom": "^19",
-    "react-hook-form": "^7",
-    "react-daum-postcode": "^3"
+    "react-hook-form": "^7"
   },
   "dependencies": {
-    "@mantine/dates": "^8.3.14",
-    "@mantine/hooks": "^8.3.14",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@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-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "react-daum-postcode": "^3.2.0"
   },
   "devDependencies": {
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@mantine/core": "^8.3.14",
+    "@mantine/dates": "^8.3.14",
+    "@mantine/hooks": "^8.3.14",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.11",

package/src/components/{input/img/calendar → calendar/img}/calendar.svg

@@ -2,6 +2,11 @@
 <rect x="20.2" y="6.8" width="13.4" height="16.4" rx="1.2" transform="rotate(90 20.2 6.8)" stroke="#BCBEC2" stroke-width="1.6"/>
 <path d="M4 10C9.33333 10 20 10 20 10" stroke="#BCBEC2" stroke-width="1.6"/>
 <path d="M7 13L9 13" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M11 13L13 13" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M15 13L17 13" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M7 17L9 17" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M11 17L13 17" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M15 17L17 17" stroke="#BCBEC2" stroke-width="1.6"/>
 <path d="M8.8 4C8.8 3.55817 8.44183 3.2 8 3.2C7.55817 3.2 7.2 3.55817 7.2 4L8 4L8.8 4ZM8 4L7.2 4L7.2 6L8 6L8.8 6L8.8 4L8 4Z" fill="#BCBEC2"/>
 <path d="M16.8 4C16.8 3.55817 16.4418 3.2 16 3.2C15.5582 3.2 15.2 3.55817 15.2 4L16 4L16.8 4ZM16 4L15.2 4L15.2 6L16 6L16.8 6L16.8 4L16 4Z" fill="#BCBEC2"/>
 </svg>

package/src/components/calendar/index.tsx

@@ -1,4 +1,6 @@
-/**
- * calendar 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
- */
+import "./index.scss";
+
 export * from "./markup";
+export * as CalendarHooks from "./hooks";
+export * as CalendarUtils from "./utils";
+export type * from "./types";

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

@@ -0,0 +1,67 @@
+"use client";
+
+import { DatePicker } from "@mantine/dates";
+import { CalendarIcon } from "./Icon";
+import type { CalendarGridProps } from "../types";
+import { mapValueToPicker, parseValueFromPicker } from "../utils";
+
+/**
+ * Calendar Grid; Mantine DatePicker 래퍼.
+ * @component
+ * @param {CalendarGridProps} props grid props
+ * @param {CalendarValue} props.value 현재 선택 값(YYYY-MM-DD)
+ * @param {CalendarOnChange} props.onChange 값 변경 핸들러
+ * @param {CalendarDatePickerProps} [props.datePickerProps] Mantine DatePicker 옵션
+ * @example
+ * <Calendar.Grid value={value} onChange={setValue} />
+ */
+export default function CalendarCore({
+  value,
+  onChange,
+  datePickerProps,
+}: CalendarGridProps) {
+  // 기본 DatePicker 옵션/스타일 책임을 Calendar.Core에 고정한다.
+  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 />,
+    ...datePickerProps,
+    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",
+      ...(datePickerProps?.classNames ?? {}),
+    },
+  };
+
+  const handleChange = (nextValue: unknown) => {
+    const parsed = parseValueFromPicker(nextValue as Date | null);
+    onChange(parsed);
+  };
+
+  return (
+    <DatePicker
+      className="calendar-grid"
+      // Core는 SOT 단일 달력으로 고정한다.
+      numberOfColumns={1}
+      type="default"
+      value={mapValueToPicker(value) as never}
+      onChange={handleChange as never}
+      {...resolvedDatePickerProps}
+    />
+  );
+}

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

@@ -0,0 +1,20 @@
+import CalendarInputIcon from "../img/calendar.svg";
+import ChevronDownIcon from "../img/chevron-down.svg";
+import ChevronLeftIcon from "../img/chevron-left.svg";
+import ChevronRightIcon from "../img/chevron-right.svg";
+import ChevronUpIcon from "../img/chevron-up.svg";
+
+/**
+ * Calendar; 아이콘
+ * - Calendar
+ * - Chevron (left, right, up, down)
+ */
+export const CalendarIcon = {
+  Calendar: CalendarInputIcon,
+  Chevron: {
+    left: ChevronLeftIcon,
+    right: ChevronRightIcon,
+    up: ChevronUpIcon,
+    down: ChevronDownIcon,
+  },
+};