@nuvui/date-picker 0.0.0-stage → 0.1.0

package/dist/css/calendar.css

@@ -0,0 +1,291 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-calendar {
+    display: inline-block;
+    max-inline-size: 100%;
+    color: var(--nuv-calendar-fg, var(--color-foreground));
+    font-size: var(--nuv-calendar-font-size, var(--text-sm));
+    line-height: var(--text-sm--line-height);
+  }
+  .nuv-calendar[data-pending] {
+    visibility: hidden;
+  }
+  .nuv-calendar__months {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nuv-calendar-months-gap, calc(var(--spacing) * 6));
+  }
+  .nuv-calendar__month {
+    display: grid;
+    grid-template-areas: "previous caption next" "grid grid grid";
+    grid-template-columns: var(--nuv-calendar-cell-size, var(--nuv-touch-size)) 1fr var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+    row-gap: calc(var(--spacing) * 2);
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__month {
+      grid-template-columns: var(--nuv-calendar-cell-size, var(--nuv-control-height-md)) 1fr var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__caption {
+    display: flex;
+    grid-area: caption;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+    font-weight: var(--font-weight-medium);
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__caption {
+      min-block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__nav {
+    display: flex;
+    grid-area: next;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .nuv-calendar__nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__nav-button {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__nav-button {
+    block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__nav-button {
+      block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__nav-button {
+    padding: 0;
+    border: 0;
+    border-radius: var(--nuv-calendar-radius, var(--radius-md));
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-calendar__nav-button:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (hover: hover) {
+    .nuv-calendar__nav-button:hover {
+      background-color: var(--nuv-calendar-day-bg-hover, var(--color-muted));
+    }
+  }
+  .nuv-calendar__nav-button[aria-disabled=true] {
+    opacity: var(--nuv-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .nuv-calendar__nav-button--previous {
+    grid-area: previous;
+  }
+  .nuv-calendar__nav-button--next {
+    grid-area: next;
+  }
+  .nuv-calendar__chevron {
+    flex: none;
+  }
+  .nuv-calendar__dropdowns {
+    display: inline-flex;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-calendar__select {
+    --nuv-select-width: 0;
+    --nuv-select-height: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+    font-weight: var(--font-weight-medium);
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__select {
+      --nuv-select-height: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__options {
+    --nuv-select-content-max-height: var(--nuv-calendar-options-height, 18rem);
+  }
+  .nuv-calendar__caption-label {
+    display: inline-flex;
+    gap: var(--spacing);
+    align-items: center;
+    white-space: nowrap;
+  }
+  .nuv-calendar__grid {
+    grid-area: grid;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  .nuv-calendar__weekday {
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__weekday {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__weekday {
+    padding: 0;
+    padding-block-end: var(--spacing);
+    color: var(--nuv-calendar-weekday-fg, var(--color-muted-foreground));
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--text-xs--line-height);
+    text-align: center;
+  }
+  .nuv-calendar__week-number-header,
+  .nuv-calendar__week-number {
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__week-number-header,
+    .nuv-calendar__week-number {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__week-number-header,
+  .nuv-calendar__week-number {
+    padding: 0;
+    color: var(--nuv-calendar-weekday-fg, var(--color-muted-foreground));
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--text-xs--line-height);
+    text-align: center;
+  }
+  .nuv-calendar__day {
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day {
+    block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day {
+      block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day {
+    padding: 0;
+    text-align: center;
+  }
+  .nuv-calendar__day-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day-button {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day-button {
+    block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day-button {
+      block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day-button {
+    padding: 0;
+    border: 0;
+    border-radius: var(--nuv-calendar-radius, var(--radius-md));
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-calendar__day-button:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (hover: hover) {
+    .nuv-calendar__day-button:hover {
+      background-color: var(--nuv-calendar-day-bg-hover, var(--color-muted));
+    }
+  }
+  .nuv-calendar__day-button:disabled, .nuv-calendar__day-button[aria-disabled=true] {
+    cursor: not-allowed;
+  }
+  .nuv-calendar__day--today > .nuv-calendar__day-button {
+    border: var(--nuv-border-width) solid var(--nuv-calendar-today-border, var(--color-border-strong));
+    font-weight: var(--font-weight-semibold);
+  }
+  .nuv-calendar__day--outside {
+    color: var(--nuv-calendar-outside-fg, var(--color-muted-foreground));
+  }
+  .nuv-calendar__day--disabled {
+    opacity: var(--nuv-disabled-opacity);
+    text-decoration: line-through;
+  }
+  .nuv-calendar__day--hidden {
+    visibility: hidden;
+  }
+  .nuv-calendar__day--range-middle {
+    background-color: var(--nuv-calendar-range-bg, var(--color-muted));
+  }
+  @media (forced-colors: active) {
+    .nuv-calendar__day--range-middle {
+      background-color: highlight;
+      color: highlighttext;
+      forced-color-adjust: none;
+    }
+  }
+  .nuv-calendar__day--range-start {
+    background-image: linear-gradient(to right, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-start:dir(rtl) {
+    background-image: linear-gradient(to left, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-end {
+    background-image: linear-gradient(to left, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-end:dir(rtl) {
+    background-image: linear-gradient(to right, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-start.nuv-calendar__day--range-end {
+    background-image: none;
+  }
+  .nuv-calendar__day--selected > .nuv-calendar__day-button {
+    border-color: var(--nuv-calendar-selected-bg, var(--color-primary));
+    background-color: var(--nuv-calendar-selected-bg, var(--color-primary));
+    color: var(--nuv-calendar-selected-fg, var(--color-primary-foreground));
+  }
+  @media (forced-colors: active) {
+    .nuv-calendar__day--selected > .nuv-calendar__day-button {
+      border-color: highlight;
+      background-color: highlight;
+      color: highlighttext;
+      forced-color-adjust: none;
+    }
+  }
+  .nuv-calendar__day--range-middle > .nuv-calendar__day-button {
+    border-color: var(--nuv-calendar-today-border, var(--color-border-strong));
+    background-color: transparent;
+    color: inherit;
+  }
+  @media (hover: hover) {
+    .nuv-calendar__day--range-middle > .nuv-calendar__day-button:hover {
+      border: var(--nuv-border-width) solid var(--nuv-calendar-today-border, var(--color-border-strong));
+    }
+  }
+  .nuv-calendar__footer {
+    padding-block-start: calc(var(--spacing) * 2);
+    color: var(--nuv-calendar-footer-fg, var(--color-muted-foreground));
+  }
+}

package/dist/css/date-picker.css

@@ -0,0 +1,24 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-date-picker {
+    inline-size: var(--nuv-date-picker-width, 100%);
+  }
+  .nuv-date-picker--range > .nuv-input {
+    flex: 1 1 0;
+    text-align: center;
+  }
+  .nuv-date-picker__separator {
+    flex: none;
+    color: var(--nuv-date-picker-separator-fg, var(--color-muted-foreground));
+  }
+  .nuv-date-picker__button {
+    color: var(--nuv-date-picker-icon-fg, var(--color-muted-foreground));
+  }
+  .nuv-date-picker__popover {
+    --nuv-popover-width: auto;
+    --nuv-popover-padding: var(--nuv-date-picker-padding, calc(var(--spacing) * 3));
+  }
+  .nuv-date-picker__sheet > .nuv-calendar {
+    align-self: center;
+  }
+}

package/dist/index.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_calendar = require("./components/calendar/calendar.cjs");
+const require_date_picker = require("./components/date-picker/date-picker.cjs");
+let _date_fns_tz = require("@date-fns/tz");
+exports.Calendar = require_calendar.Calendar;
+exports.DatePicker = require_date_picker.DatePicker;
+exports.DateRangePicker = require_date_picker.DateRangePicker;
+Object.defineProperty(exports, "TZDate", {
+	enumerable: true,
+	get: function() {
+		return _date_fns_tz.TZDate;
+	}
+});

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+import { Calendar, CalendarLocale, CalendarOptions, CalendarProps, DateRange, Matcher } from "./components/calendar/calendar.cjs";
+import "./components/calendar/index.cjs";
+import { DatePicker, DatePickerCalendarProps, DatePickerOwnProps, DatePickerProps, DateRangePicker, DateRangePickerCalendarProps, DateRangePickerOwnProps, DateRangePickerProps } from "./components/date-picker/date-picker.cjs";
+import "./components/date-picker/index.cjs";
+import { TZDate } from "@date-fns/tz";
+export { Calendar, type CalendarLocale, type CalendarOptions, type CalendarProps, DatePicker, type DatePickerCalendarProps, type DatePickerOwnProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerOwnProps, type DateRangePickerProps, type Matcher, TZDate };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Calendar, CalendarLocale, CalendarOptions, CalendarProps, DateRange, Matcher } from "./components/calendar/calendar.js";
+import "./components/calendar/index.js";
+import { DatePicker, DatePickerCalendarProps, DatePickerOwnProps, DatePickerProps, DateRangePicker, DateRangePickerCalendarProps, DateRangePickerOwnProps, DateRangePickerProps } from "./components/date-picker/date-picker.js";
+import "./components/date-picker/index.js";
+import { TZDate } from "@date-fns/tz";
+export { Calendar, type CalendarLocale, type CalendarOptions, type CalendarProps, DatePicker, type DatePickerCalendarProps, type DatePickerOwnProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerOwnProps, type DateRangePickerProps, type Matcher, TZDate };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { Calendar } from "./components/calendar/calendar.js";
+import { DatePicker, DateRangePicker } from "./components/date-picker/date-picker.js";
+import { TZDate } from "@date-fns/tz";
+export { Calendar, DatePicker, DateRangePicker, TZDate };

package/dist/locale.cjs

@@ -0,0 +1,9 @@
+var react_day_picker_locale = require("react-day-picker/locale");
+Object.keys(react_day_picker_locale).forEach(function(k) {
+	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function() {
+			return react_day_picker_locale[k];
+		}
+	});
+});

package/dist/locale.d.cts

@@ -0,0 +1 @@
+export * from "react-day-picker/locale";

package/dist/locale.d.ts

@@ -0,0 +1 @@
+export * from "react-day-picker/locale";

package/dist/locale.js

@@ -0,0 +1 @@
+export * from "react-day-picker/locale";

package/dist/styles.css

@@ -0,0 +1,314 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-calendar {
+    display: inline-block;
+    max-inline-size: 100%;
+    color: var(--nuv-calendar-fg, var(--color-foreground));
+    font-size: var(--nuv-calendar-font-size, var(--text-sm));
+    line-height: var(--text-sm--line-height);
+  }
+  .nuv-calendar[data-pending] {
+    visibility: hidden;
+  }
+  .nuv-calendar__months {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nuv-calendar-months-gap, calc(var(--spacing) * 6));
+  }
+  .nuv-calendar__month {
+    display: grid;
+    grid-template-areas: "previous caption next" "grid grid grid";
+    grid-template-columns: var(--nuv-calendar-cell-size, var(--nuv-touch-size)) 1fr var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+    row-gap: calc(var(--spacing) * 2);
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__month {
+      grid-template-columns: var(--nuv-calendar-cell-size, var(--nuv-control-height-md)) 1fr var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__caption {
+    display: flex;
+    grid-area: caption;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+    font-weight: var(--font-weight-medium);
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__caption {
+      min-block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__nav {
+    display: flex;
+    grid-area: next;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .nuv-calendar__nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__nav-button {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__nav-button {
+    block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__nav-button {
+      block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__nav-button {
+    padding: 0;
+    border: 0;
+    border-radius: var(--nuv-calendar-radius, var(--radius-md));
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-calendar__nav-button:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (hover: hover) {
+    .nuv-calendar__nav-button:hover {
+      background-color: var(--nuv-calendar-day-bg-hover, var(--color-muted));
+    }
+  }
+  .nuv-calendar__nav-button[aria-disabled=true] {
+    opacity: var(--nuv-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .nuv-calendar__nav-button--previous {
+    grid-area: previous;
+  }
+  .nuv-calendar__nav-button--next {
+    grid-area: next;
+  }
+  .nuv-calendar__chevron {
+    flex: none;
+  }
+  .nuv-calendar__dropdowns {
+    display: inline-flex;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-calendar__select {
+    --nuv-select-width: 0;
+    --nuv-select-height: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+    font-weight: var(--font-weight-medium);
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__select {
+      --nuv-select-height: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__options {
+    --nuv-select-content-max-height: var(--nuv-calendar-options-height, 18rem);
+  }
+  .nuv-calendar__caption-label {
+    display: inline-flex;
+    gap: var(--spacing);
+    align-items: center;
+    white-space: nowrap;
+  }
+  .nuv-calendar__grid {
+    grid-area: grid;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  .nuv-calendar__weekday {
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__weekday {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__weekday {
+    padding: 0;
+    padding-block-end: var(--spacing);
+    color: var(--nuv-calendar-weekday-fg, var(--color-muted-foreground));
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--text-xs--line-height);
+    text-align: center;
+  }
+  .nuv-calendar__week-number-header,
+  .nuv-calendar__week-number {
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__week-number-header,
+    .nuv-calendar__week-number {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__week-number-header,
+  .nuv-calendar__week-number {
+    padding: 0;
+    color: var(--nuv-calendar-weekday-fg, var(--color-muted-foreground));
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--text-xs--line-height);
+    text-align: center;
+  }
+  .nuv-calendar__day {
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day {
+    block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day {
+      block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day {
+    padding: 0;
+    text-align: center;
+  }
+  .nuv-calendar__day-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day-button {
+      inline-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day-button {
+    block-size: var(--nuv-calendar-cell-size, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-calendar__day-button {
+      block-size: var(--nuv-calendar-cell-size, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-calendar__day-button {
+    padding: 0;
+    border: 0;
+    border-radius: var(--nuv-calendar-radius, var(--radius-md));
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-calendar__day-button:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (hover: hover) {
+    .nuv-calendar__day-button:hover {
+      background-color: var(--nuv-calendar-day-bg-hover, var(--color-muted));
+    }
+  }
+  .nuv-calendar__day-button:disabled, .nuv-calendar__day-button[aria-disabled=true] {
+    cursor: not-allowed;
+  }
+  .nuv-calendar__day--today > .nuv-calendar__day-button {
+    border: var(--nuv-border-width) solid var(--nuv-calendar-today-border, var(--color-border-strong));
+    font-weight: var(--font-weight-semibold);
+  }
+  .nuv-calendar__day--outside {
+    color: var(--nuv-calendar-outside-fg, var(--color-muted-foreground));
+  }
+  .nuv-calendar__day--disabled {
+    opacity: var(--nuv-disabled-opacity);
+    text-decoration: line-through;
+  }
+  .nuv-calendar__day--hidden {
+    visibility: hidden;
+  }
+  .nuv-calendar__day--range-middle {
+    background-color: var(--nuv-calendar-range-bg, var(--color-muted));
+  }
+  @media (forced-colors: active) {
+    .nuv-calendar__day--range-middle {
+      background-color: highlight;
+      color: highlighttext;
+      forced-color-adjust: none;
+    }
+  }
+  .nuv-calendar__day--range-start {
+    background-image: linear-gradient(to right, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-start:dir(rtl) {
+    background-image: linear-gradient(to left, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-end {
+    background-image: linear-gradient(to left, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-end:dir(rtl) {
+    background-image: linear-gradient(to right, transparent 50%, var(--nuv-calendar-range-bg, var(--color-muted)) 50%);
+  }
+  .nuv-calendar__day--range-start.nuv-calendar__day--range-end {
+    background-image: none;
+  }
+  .nuv-calendar__day--selected > .nuv-calendar__day-button {
+    border-color: var(--nuv-calendar-selected-bg, var(--color-primary));
+    background-color: var(--nuv-calendar-selected-bg, var(--color-primary));
+    color: var(--nuv-calendar-selected-fg, var(--color-primary-foreground));
+  }
+  @media (forced-colors: active) {
+    .nuv-calendar__day--selected > .nuv-calendar__day-button {
+      border-color: highlight;
+      background-color: highlight;
+      color: highlighttext;
+      forced-color-adjust: none;
+    }
+  }
+  .nuv-calendar__day--range-middle > .nuv-calendar__day-button {
+    border-color: var(--nuv-calendar-today-border, var(--color-border-strong));
+    background-color: transparent;
+    color: inherit;
+  }
+  @media (hover: hover) {
+    .nuv-calendar__day--range-middle > .nuv-calendar__day-button:hover {
+      border: var(--nuv-border-width) solid var(--nuv-calendar-today-border, var(--color-border-strong));
+    }
+  }
+  .nuv-calendar__footer {
+    padding-block-start: calc(var(--spacing) * 2);
+    color: var(--nuv-calendar-footer-fg, var(--color-muted-foreground));
+  }
+}
+@layer components {
+  .nuv-date-picker {
+    inline-size: var(--nuv-date-picker-width, 100%);
+  }
+  .nuv-date-picker--range > .nuv-input {
+    flex: 1 1 0;
+    text-align: center;
+  }
+  .nuv-date-picker__separator {
+    flex: none;
+    color: var(--nuv-date-picker-separator-fg, var(--color-muted-foreground));
+  }
+  .nuv-date-picker__button {
+    color: var(--nuv-date-picker-icon-fg, var(--color-muted-foreground));
+  }
+  .nuv-date-picker__popover {
+    --nuv-popover-width: auto;
+    --nuv-popover-padding: var(--nuv-date-picker-padding, calc(var(--spacing) * 3));
+  }
+  .nuv-date-picker__sheet > .nuv-calendar {
+    align-self: center;
+  }
+}

package/dist/utils/cx.cjs

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+exports.cx = cx;

package/dist/utils/cx.js

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };