@x-plat/design-system 0.3.7 → 0.3.9

package/dist/components/Calendar/index.css

@@ -0,0 +1,167 @@
+/* src/components/Calendar/calendar.scss */
+.lib-xplat-calendar {
+  width: 100%;
+  user-select: none;
+  container-type: inline-size;
+}
+.lib-xplat-calendar .calendar-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.lib-xplat-calendar .calendar-title {
+  font-size: clamp(0.875rem, 3cqi, 1.25rem);
+  font-weight: 600;
+  color: var(--xplat-neutral-900);
+  min-width: 120px;
+  text-align: center;
+}
+.lib-xplat-calendar .calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  cursor: pointer;
+  color: var(--xplat-neutral-600);
+  transition: background-color 0.15s;
+}
+.lib-xplat-calendar .calendar-nav:hover {
+  background-color: var(--xplat-neutral-100);
+}
+.lib-xplat-calendar .calendar-nav svg {
+  width: 16px;
+  height: 16px;
+}
+.lib-xplat-calendar .calendar-today-btn {
+  margin-left: auto;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--xplat-neutral-300);
+  border-radius: 0.375rem;
+  background: none;
+  font-size: clamp(0.75rem, 2cqi, 0.875rem);
+  color: var(--xplat-neutral-600);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.lib-xplat-calendar .calendar-today-btn:hover {
+  background-color: var(--xplat-neutral-100);
+}
+.lib-xplat-calendar .calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 0.25rem;
+}
+.lib-xplat-calendar .calendar-weekday {
+  text-align: center;
+  font-size: clamp(0.6875rem, 2cqi, 0.875rem);
+  font-weight: 500;
+  padding: 0.375rem 0;
+  color: var(--xplat-neutral-500);
+}
+.lib-xplat-calendar .calendar-weekday.sunday {
+  color: var(--xplat-red-500);
+}
+.lib-xplat-calendar .calendar-weekday.saturday {
+  color: var(--xplat-blue-500);
+}
+.lib-xplat-calendar .calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.lib-xplat-calendar .calendar-day {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1/0.85;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: background-color 0.15s;
+}
+.lib-xplat-calendar .calendar-day:hover:not(.disabled):not(.outside):not(.selected) {
+  background-color: var(--xplat-neutral-50);
+}
+.lib-xplat-calendar .calendar-day.outside {
+  cursor: default;
+}
+.lib-xplat-calendar .calendar-day.outside .calendar-day-number {
+  color: var(--xplat-neutral-300);
+}
+.lib-xplat-calendar .calendar-day.outside.sunday .calendar-day-number {
+  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+}
+.lib-xplat-calendar .calendar-day.outside.saturday .calendar-day-number {
+  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+}
+.lib-xplat-calendar .calendar-day.disabled {
+  cursor: not-allowed;
+}
+.lib-xplat-calendar .calendar-day.disabled .calendar-day-number {
+  color: var(--xplat-neutral-300);
+}
+.lib-xplat-calendar .calendar-day.today .calendar-day-number {
+  position: relative;
+  font-weight: 700;
+  color: var(--xplat-blue-600);
+}
+.lib-xplat-calendar .calendar-day.today .calendar-day-number::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -6px;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--xplat-blue-600);
+}
+.lib-xplat-calendar .calendar-day.selected {
+  background-color: var(--xplat-neutral-900);
+}
+.lib-xplat-calendar .calendar-day.selected .calendar-day-number {
+  color: var(--xplat-white);
+  font-weight: 600;
+}
+.lib-xplat-calendar .calendar-day.selected:hover {
+  background-color: var(--xplat-neutral-800);
+}
+.lib-xplat-calendar .calendar-day.selected.today .calendar-day-number::before {
+  background-color: var(--xplat-white);
+}
+.lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
+  color: var(--xplat-red-500);
+}
+.lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
+  color: var(--xplat-blue-500);
+}
+.lib-xplat-calendar .calendar-day.selected .calendar-day-number {
+  color: var(--xplat-white);
+}
+.lib-xplat-calendar .calendar-day-number {
+  font-size: clamp(0.75rem, 2.5cqi, 1rem);
+  line-height: 1;
+  color: var(--xplat-neutral-800);
+}
+.lib-xplat-calendar .calendar-day-events {
+  display: flex;
+  gap: 2px;
+  margin-top: 4px;
+  align-items: center;
+}
+.lib-xplat-calendar .calendar-event-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.lib-xplat-calendar .calendar-event-more {
+  font-size: 9px;
+  color: var(--xplat-neutral-400);
+  line-height: 1;
+}

package/dist/components/Calendar/index.d.cts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface CalendarDay {
+    date: Date;
+    day: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSunday: boolean;
+    isSaturday: boolean;
+}
+declare function useCalendar(initialYear?: number, initialMonth?: number): {
+    year: number;
+    month: number;
+    days: CalendarDay[];
+    goToPrevMonth: () => void;
+    goToNextMonth: () => void;
+    goToToday: () => void;
+    setYear: React.Dispatch<React.SetStateAction<number>>;
+    setMonth: React.Dispatch<React.SetStateAction<number>>;
+};
+declare function isSameDay(a: Date, b: Date): boolean;
+declare function isInRange(date: Date, start: Date, end: Date): boolean;
+
+interface CalendarEvent {
+    date: Date;
+    label?: string;
+    color?: string;
+    data?: unknown;
+}
+interface CalendarProps {
+    /** 초기 연도 */
+    year?: number;
+    /** 초기 월 (0-11) */
+    month?: number;
+    /** 선택된 날짜 */
+    selectedDate?: Date | null;
+    /** 날짜 선택 콜백 */
+    onSelect?: (date: Date) => void;
+    /** 월 변경 콜백 */
+    onMonthChange?: (year: number, month: number) => void;
+    /** 이벤트 목록 */
+    events?: CalendarEvent[];
+    /** 날짜별 커스텀 렌더 */
+    renderDay?: (day: CalendarDay, events: CalendarEvent[]) => React.ReactNode;
+    /** 이벤트 클릭 콜백 */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** 언어 */
+    locale?: "ko" | "en";
+    /** 최소 선택 가능 날짜 */
+    minDate?: Date;
+    /** 최대 선택 가능 날짜 */
+    maxDate?: Date;
+    /** 오늘 버튼 표시 */
+    showToday?: boolean;
+    className?: string;
+}
+declare const Calendar: {
+    (props: CalendarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Calendar, type CalendarDay, type CalendarEvent, type CalendarProps, isInRange, isSameDay, useCalendar };

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface CalendarDay {
+    date: Date;
+    day: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSunday: boolean;
+    isSaturday: boolean;
+}
+declare function useCalendar(initialYear?: number, initialMonth?: number): {
+    year: number;
+    month: number;
+    days: CalendarDay[];
+    goToPrevMonth: () => void;
+    goToNextMonth: () => void;
+    goToToday: () => void;
+    setYear: React.Dispatch<React.SetStateAction<number>>;
+    setMonth: React.Dispatch<React.SetStateAction<number>>;
+};
+declare function isSameDay(a: Date, b: Date): boolean;
+declare function isInRange(date: Date, start: Date, end: Date): boolean;
+
+interface CalendarEvent {
+    date: Date;
+    label?: string;
+    color?: string;
+    data?: unknown;
+}
+interface CalendarProps {
+    /** 초기 연도 */
+    year?: number;
+    /** 초기 월 (0-11) */
+    month?: number;
+    /** 선택된 날짜 */
+    selectedDate?: Date | null;
+    /** 날짜 선택 콜백 */
+    onSelect?: (date: Date) => void;
+    /** 월 변경 콜백 */
+    onMonthChange?: (year: number, month: number) => void;
+    /** 이벤트 목록 */
+    events?: CalendarEvent[];
+    /** 날짜별 커스텀 렌더 */
+    renderDay?: (day: CalendarDay, events: CalendarEvent[]) => React.ReactNode;
+    /** 이벤트 클릭 콜백 */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** 언어 */
+    locale?: "ko" | "en";
+    /** 최소 선택 가능 날짜 */
+    minDate?: Date;
+    /** 최대 선택 가능 날짜 */
+    maxDate?: Date;
+    /** 오늘 버튼 표시 */
+    showToday?: boolean;
+    className?: string;
+}
+declare const Calendar: {
+    (props: CalendarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Calendar, type CalendarDay, type CalendarEvent, type CalendarProps, isInRange, isSameDay, useCalendar };