@react-cupertino-ui/date-picker 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -0,0 +1,195 @@
+.react-cupertino-ui-date-picker {
+  --date-picker-bg: rgba(255, 255, 255, 0.78);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-radius: 24px;
+  background: var(--date-picker-bg);
+  color: var(--foreground, #0a0a0a);
+  box-shadow: 0 12px 30px rgba(15, 15, 15, 0.08);
+  min-width: min(22rem, 100%);
+  transition: background 200ms ease, box-shadow 200ms ease;
+}
+.react-cupertino-ui-date-picker.glass {
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(var(--glass-blur, 32px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 32px)) saturate(var(--glass-saturation, 180%));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-date-picker.glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
+  border-radius: inherit;
+  opacity: var(--glass-highlight-opacity, 0.95);
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-date-picker.layout-wheel {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+.react-cupertino-ui-date-picker.layout-calendar, .react-cupertino-ui-date-picker.layout-compact {
+  width: min(22rem, 100%);
+}
+.react-cupertino-ui-date-picker .picker-column {
+  flex: 1;
+  min-width: 60px;
+}
+.react-cupertino-ui-date-picker .picker-column.year-column {
+  flex: 1.2;
+}
+.react-cupertino-ui-date-picker .picker-column.month-column {
+  flex: 1.5;
+}
+.react-cupertino-ui-date-picker .picker-column.day-column {
+  flex: 0.8;
+}
+.react-cupertino-ui-date-picker .picker-column.hour-column, .react-cupertino-ui-date-picker .picker-column.minute-column {
+  flex: 1;
+}
+.react-cupertino-ui-date-picker .picker-column.separator {
+  flex: 0;
+  min-width: 10px;
+  text-align: center;
+  font-weight: 600;
+  color: color-mix(in srgb, currentColor, transparent 30%);
+}
+.react-cupertino-ui-date-picker__calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.react-cupertino-ui-date-picker__calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.react-cupertino-ui-date-picker__month-button {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 999px;
+  border: none;
+  background: rgba(255, 255, 255, 0.3);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 150ms ease, background 150ms ease;
+}
+.react-cupertino-ui-date-picker__month-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-date-picker__month-button:active {
+  transform: scale(0.92);
+}
+.react-cupertino-ui-date-picker__month-label {
+  font-size: 1.05rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.react-cupertino-ui-date-picker__weekday-row {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 0.35rem;
+  text-align: center;
+}
+.react-cupertino-ui-date-picker__weekday {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: color-mix(in srgb, currentColor, transparent 45%);
+  text-transform: uppercase;
+}
+.react-cupertino-ui-date-picker__calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 0.35rem;
+}
+.react-cupertino-ui-date-picker__day {
+  position: relative;
+  border: none;
+  border-radius: 12px;
+  padding: 0.65rem 0;
+  background: rgba(255, 255, 255, 0.25);
+  color: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+.react-cupertino-ui-date-picker__day:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-date-picker__day.is-outside {
+  opacity: 0.4;
+}
+.react-cupertino-ui-date-picker__day.is-today {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+}
+.react-cupertino-ui-date-picker__day.is-selected {
+  background: linear-gradient(120deg, #0a84ff 0%, #5ac8fa 100%);
+  color: white;
+  box-shadow: 0 12px 28px rgba(10, 132, 255, 0.35);
+}
+.react-cupertino-ui-date-picker__time-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.react-cupertino-ui-date-picker__time-row label {
+  display: block;
+  font-size: 0.8rem;
+  margin-bottom: 0.25rem;
+  color: color-mix(in srgb, currentColor, transparent 40%);
+}
+.react-cupertino-ui-date-picker__time-row select {
+  width: 100%;
+  border-radius: 16px;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.8);
+  font-size: 0.95rem;
+}
+.react-cupertino-ui-date-picker__compact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.react-cupertino-ui-date-picker__compact-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+  gap: 0.5rem;
+}
+.react-cupertino-ui-date-picker__compact-row label {
+  display: block;
+  font-size: 0.8rem;
+  margin-bottom: 0.25rem;
+  color: color-mix(in srgb, currentColor, transparent 40%);
+}
+.react-cupertino-ui-date-picker__compact-row select {
+  width: 100%;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.5rem 0.9rem;
+  font-size: 0.95rem;
+  background: rgba(255, 255, 255, 0.9);
+  transition: border-color 120ms ease;
+}
+.react-cupertino-ui-date-picker__compact-row select:focus-visible {
+  outline: none;
+  border-color: #0a84ff;
+  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./index.scss";
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: Date;
+    onChange: (date: Date) => void;
+    mode?: "date" | "time" | "datetime";
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    glass?: boolean;
+    layout?: "wheel" | "calendar" | "compact";
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export { DatePicker };

package/dist/index.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Picker } from "@react-cupertino-ui/picker";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+const monthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const startOfDay = (date) => {
+    const next = new Date(date);
+    next.setHours(0, 0, 0, 0);
+    return next;
+};
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+const DatePicker = React.forwardRef((props, ref) => {
+    const { value, onChange, mode = "date", minDate, maxDate, className, glass = true, layout: layoutProp = "wheel", locale: localeProp, weekStartsOn = 0, ...rest } = props;
+    const locale = React.useMemo(() => {
+        if (localeProp) {
+            return localeProp;
+        }
+        if (typeof navigator !== "undefined") {
+            return navigator.language;
+        }
+        return "en-US";
+    }, [localeProp]);
+    const includesDate = mode !== "time";
+    const includesTime = mode !== "date";
+    const resolvedLayout = layoutProp === "calendar" && !includesDate ? "wheel" : layoutProp;
+    const clampDate = React.useCallback((nextDate) => {
+        const next = new Date(nextDate);
+        if (minDate && next < minDate) {
+            return new Date(minDate);
+        }
+        if (maxDate && next > maxDate) {
+            return new Date(maxDate);
+        }
+        return next;
+    }, [maxDate, minDate]);
+    const updateDate = React.useCallback((updater) => {
+        const draft = new Date(value.getTime());
+        updater(draft);
+        const next = clampDate(draft);
+        onChange(next);
+    }, [clampDate, onChange, value]);
+    const yearOptions = React.useMemo(() => {
+        const currentYear = value.getFullYear();
+        const start = minDate ? minDate.getFullYear() : currentYear - 100;
+        const end = maxDate ? maxDate.getFullYear() : currentYear + 100;
+        const result = [];
+        for (let year = start; year <= end; year += 1) {
+            result.push({ value: year, label: year.toString() });
+        }
+        return result;
+    }, [maxDate, minDate, value]);
+    const monthOptions = React.useMemo(() => {
+        return Array.from({ length: 12 }, (_, index) => ({
+            value: index,
+            label: new Date(2000, index, 1).toLocaleString(locale, { month: "long" }),
+        }));
+    }, [locale]);
+    const dayOptions = React.useMemo(() => {
+        const totalDays = getDaysInMonth(value.getFullYear(), value.getMonth());
+        const startDay = minDate &&
+            minDate.getFullYear() === value.getFullYear() &&
+            minDate.getMonth() === value.getMonth()
+            ? minDate.getDate()
+            : 1;
+        const endDay = maxDate &&
+            maxDate.getFullYear() === value.getFullYear() &&
+            maxDate.getMonth() === value.getMonth()
+            ? maxDate.getDate()
+            : totalDays;
+        const result = [];
+        for (let day = startDay; day <= endDay; day += 1) {
+            result.push({ value: day, label: day.toString() });
+        }
+        return result;
+    }, [maxDate, minDate, value]);
+    const hours = React.useMemo(() => {
+        const result = [];
+        for (let hour = 0; hour < 24; hour += 1) {
+            result.push({ value: hour, label: hour.toString().padStart(2, "0") });
+        }
+        return result;
+    }, []);
+    const minutes = React.useMemo(() => {
+        const result = [];
+        for (let minute = 0; minute < 60; minute += 1) {
+            result.push({ value: minute, label: minute.toString().padStart(2, "0") });
+        }
+        return result;
+    }, []);
+    const [displayedMonth, setDisplayedMonth] = React.useState(() => monthStart(value));
+    React.useEffect(() => {
+        if (resolvedLayout === "calendar") {
+            setDisplayedMonth(monthStart(value));
+        }
+    }, [resolvedLayout, value]);
+    const goToMonth = (offset) => {
+        setDisplayedMonth((prev) => {
+            const next = new Date(prev);
+            next.setMonth(prev.getMonth() + offset);
+            return monthStart(next);
+        });
+    };
+    const canNavigate = React.useMemo(() => {
+        const minMonth = minDate ? monthStart(minDate) : null;
+        const maxMonth = maxDate ? monthStart(maxDate) : null;
+        return {
+            prev: !minMonth || monthStart(displayedMonth) > minMonth,
+            next: !maxMonth || monthStart(displayedMonth) < maxMonth,
+        };
+    }, [displayedMonth, maxDate, minDate]);
+    const weekdayLabels = React.useMemo(() => {
+        return Array.from({ length: 7 }, (_, index) => {
+            const weekday = (weekStartsOn + index) % 7;
+            const reference = new Date(2021, 4, 2 + weekday);
+            return reference.toLocaleDateString(locale, { weekday: "short" });
+        });
+    }, [locale, weekStartsOn]);
+    const calendarDays = React.useMemo(() => {
+        const start = monthStart(displayedMonth);
+        const totalDays = getDaysInMonth(start.getFullYear(), start.getMonth());
+        const startOffset = (start.getDay() - weekStartsOn + 7) % 7;
+        const totalCells = Math.ceil((startOffset + totalDays) / 7) * 7;
+        const cells = [];
+        for (let index = 0; index < totalCells; index += 1) {
+            const day = index - startOffset + 1;
+            const date = new Date(start.getFullYear(), start.getMonth(), day);
+            cells.push({ date, inCurrentMonth: date.getMonth() === start.getMonth() });
+        }
+        return cells;
+    }, [displayedMonth, weekStartsOn]);
+    const dateFormatter = React.useMemo(() => {
+        return new Intl.DateTimeFormat(locale, {
+            weekday: "long",
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+        });
+    }, [locale]);
+    const isDateDisabled = React.useCallback((date) => {
+        if (minDate && startOfDay(date) < startOfDay(minDate)) {
+            return true;
+        }
+        if (maxDate && startOfDay(date) > startOfDay(maxDate)) {
+            return true;
+        }
+        return false;
+    }, [maxDate, minDate]);
+    const handleCalendarSelect = (day) => {
+        if (!includesDate) {
+            return;
+        }
+        updateDate((draft) => {
+            draft.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+        });
+    };
+    const handleSelectChange = (type, next) => {
+        updateDate((draft) => {
+            if (type === "year")
+                draft.setFullYear(next);
+            if (type === "month")
+                draft.setMonth(next);
+            if (type === "day")
+                draft.setDate(next);
+            if (type === "hour")
+                draft.setHours(next);
+            if (type === "minute")
+                draft.setMinutes(next);
+        });
+    };
+    const renderWheelPickers = () => {
+        return (_jsxs(_Fragment, { children: [includesDate && (_jsxs(_Fragment, { children: [_jsx("div", { className: "picker-column year-column", children: _jsx(Picker, { options: yearOptions, value: value.getFullYear(), onChange: (val) => handleSelectChange("year", Number(val)) }) }), _jsx("div", { className: "picker-column month-column", children: _jsx(Picker, { options: monthOptions, value: value.getMonth(), onChange: (val) => handleSelectChange("month", Number(val)) }) }), _jsx("div", { className: "picker-column day-column", children: _jsx(Picker, { options: dayOptions, value: value.getDate(), onChange: (val) => handleSelectChange("day", Number(val)) }) })] })), includesTime && (_jsxs(_Fragment, { children: [_jsx("div", { className: "picker-column hour-column", children: _jsx(Picker, { options: hours, value: value.getHours(), onChange: (val) => handleSelectChange("hour", Number(val)) }) }), _jsx("div", { className: "picker-column separator", children: ":" }), _jsx("div", { className: "picker-column minute-column", children: _jsx(Picker, { options: minutes, value: value.getMinutes(), onChange: (val) => handleSelectChange("minute", Number(val)) }) })] }))] }));
+    };
+    const calendarHourSelectId = React.useId();
+    const calendarMinuteSelectId = React.useId();
+    const renderCalendar = () => {
+        return (_jsxs("div", { className: "react-cupertino-ui-date-picker__calendar", children: [_jsxs("div", { className: "react-cupertino-ui-date-picker__calendar-header", children: [_jsx("button", { type: "button", className: "react-cupertino-ui-date-picker__month-button", onClick: () => goToMonth(-1), disabled: !canNavigate.prev, "aria-label": "Previous month", children: _jsx(ChevronLeft, { size: 16 }) }), _jsx("div", { className: "react-cupertino-ui-date-picker__month-label", children: displayedMonth.toLocaleDateString(locale, { month: "long", year: "numeric" }) }), _jsx("button", { type: "button", className: "react-cupertino-ui-date-picker__month-button", onClick: () => goToMonth(1), disabled: !canNavigate.next, "aria-label": "Next month", children: _jsx(ChevronRight, { size: 16 }) })] }), _jsx("div", { className: "react-cupertino-ui-date-picker__weekday-row", children: weekdayLabels.map((weekday) => (_jsx("span", { className: "react-cupertino-ui-date-picker__weekday", children: weekday }, weekday))) }), _jsx("div", { className: "react-cupertino-ui-date-picker__calendar-grid", children: calendarDays.map(({ date, inCurrentMonth }) => {
+                        const disabled = isDateDisabled(date);
+                        const isSelected = includesDate && isSameDay(date, value);
+                        const isToday = isSameDay(date, new Date());
+                        return (_jsx("button", { type: "button", className: cn("react-cupertino-ui-date-picker__day", isSelected && "is-selected", isToday && "is-today", !inCurrentMonth && "is-outside"), onClick: () => handleCalendarSelect(date), disabled: disabled, "aria-label": `Select ${dateFormatter.format(date)}`, children: _jsx("span", { children: date.getDate() }) }, date.toISOString()));
+                    }) }), includesTime && (_jsxs("div", { className: "react-cupertino-ui-date-picker__time-row", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: calendarHourSelectId, children: "Hour" }), _jsx("select", { id: calendarHourSelectId, value: value.getHours(), onChange: (event) => handleSelectChange("hour", Number(event.target.value)), children: hours.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: calendarMinuteSelectId, children: "Minutes" }), _jsx("select", { id: calendarMinuteSelectId, value: value.getMinutes(), onChange: (event) => handleSelectChange("minute", Number(event.target.value)), children: minutes.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })] }))] }));
+    };
+    const monthSelectId = React.useId();
+    const daySelectId = React.useId();
+    const yearSelectId = React.useId();
+    const hourSelectId = React.useId();
+    const minuteSelectId = React.useId();
+    const renderCompact = () => {
+        return (_jsxs("div", { className: "react-cupertino-ui-date-picker__compact", children: [includesDate && (_jsxs("div", { className: "react-cupertino-ui-date-picker__compact-row", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: monthSelectId, children: "Month" }), _jsx("select", { id: monthSelectId, value: value.getMonth(), onChange: (event) => handleSelectChange("month", Number(event.target.value)), children: monthOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: daySelectId, children: "Day" }), _jsx("select", { id: daySelectId, value: value.getDate(), onChange: (event) => handleSelectChange("day", Number(event.target.value)), children: dayOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: yearSelectId, children: "Year" }), _jsx("select", { id: yearSelectId, value: value.getFullYear(), onChange: (event) => handleSelectChange("year", Number(event.target.value)), children: yearOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })] })), includesTime && (_jsxs("div", { className: "react-cupertino-ui-date-picker__compact-row", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: hourSelectId, children: "Hour" }), _jsx("select", { id: hourSelectId, value: value.getHours(), onChange: (event) => handleSelectChange("hour", Number(event.target.value)), children: hours.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: minuteSelectId, children: "Minutes" }), _jsx("select", { id: minuteSelectId, value: value.getMinutes(), onChange: (event) => handleSelectChange("minute", Number(event.target.value)), children: minutes.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })] }))] }));
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-date-picker", glass && "glass", `layout-${resolvedLayout}`, className), "data-mode": mode, ...rest, children: [resolvedLayout === "wheel" && renderWheelPickers(), resolvedLayout === "calendar" && renderCalendar(), resolvedLayout === "compact" && renderCompact()] }));
+});
+DatePicker.displayName = "DatePicker";
+export { DatePicker };

package/dist/index.scss

@@ -0,0 +1,214 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-date-picker {
+  --date-picker-bg: rgba(255, 255, 255, 0.78);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-radius: 24px;
+  background: var(--date-picker-bg);
+  color: var(--foreground, #0a0a0a);
+  box-shadow: 0 12px 30px rgba(15, 15, 15, 0.08);
+  min-width: min(22rem, 100%);
+  transition: background 200ms ease, box-shadow 200ms ease;
+
+  &.glass {
+    @include glass.glass-panel(light, var(--glass-blur, 32px), 0.65);
+  }
+
+  &.layout-wheel {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+  }
+
+  &.layout-calendar,
+  &.layout-compact {
+    width: min(22rem, 100%);
+  }
+
+  .picker-column {
+    flex: 1;
+    min-width: 60px;
+
+    &.year-column {
+      flex: 1.2;
+    }
+
+    &.month-column {
+      flex: 1.5;
+    }
+
+    &.day-column {
+      flex: 0.8;
+    }
+
+    &.hour-column,
+    &.minute-column {
+      flex: 1;
+    }
+
+    &.separator {
+      flex: 0;
+      min-width: 10px;
+      text-align: center;
+      font-weight: 600;
+      color: color-mix(in srgb, currentColor, transparent 30%);
+    }
+  }
+
+  &__calendar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &__calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  &__month-button {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 999px;
+    border: none;
+    background: rgba(255, 255, 255, 0.3);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 150ms ease, background 150ms ease;
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:active {
+      transform: scale(0.92);
+    }
+  }
+
+  &__month-label {
+    font-size: 1.05rem;
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+
+  &__weekday-row {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 0.35rem;
+    text-align: center;
+  }
+
+  &__weekday {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: color-mix(in srgb, currentColor, transparent 45%);
+    text-transform: uppercase;
+  }
+
+  &__calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 0.35rem;
+  }
+
+  &__day {
+    position: relative;
+    border: none;
+    border-radius: 12px;
+    padding: 0.65rem 0;
+    background: rgba(255, 255, 255, 0.25);
+    color: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
+
+    &:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+    }
+
+    &.is-outside {
+      opacity: 0.4;
+    }
+
+    &.is-today {
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+    }
+
+    &.is-selected {
+      background: linear-gradient(120deg, #0a84ff 0%, #5ac8fa 100%);
+      color: white;
+      box-shadow: 0 12px 28px rgba(10, 132, 255, 0.35);
+    }
+  }
+
+  &__time-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    label {
+      display: block;
+      font-size: 0.8rem;
+      margin-bottom: 0.25rem;
+      color: color-mix(in srgb, currentColor, transparent 40%);
+    }
+
+    select {
+      width: 100%;
+      border-radius: 16px;
+      padding: 0.45rem 0.75rem;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      background: rgba(255, 255, 255, 0.8);
+      font-size: 0.95rem;
+    }
+  }
+
+  &__compact {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &__compact-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+    gap: 0.5rem;
+
+    label {
+      display: block;
+      font-size: 0.8rem;
+      margin-bottom: 0.25rem;
+      color: color-mix(in srgb, currentColor, transparent 40%);
+    }
+
+    select {
+      width: 100%;
+      border-radius: 999px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      padding: 0.5rem 0.9rem;
+      font-size: 0.95rem;
+      background: rgba(255, 255, 255, 0.9);
+      transition: border-color 120ms ease;
+
+      &:focus-visible {
+        outline: none;
+        border-color: #0a84ff;
+        box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@react-cupertino-ui/date-picker",
+  "version": "1.0.0",
+  "description": "DatePicker component from React Cupertino UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-cupertino-ui/picker": "workspace:*",
+    "@react-cupertino-ui/shared": "workspace:*",
+    "lucide-react": "^0.417.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}