@ladder-ui/calendar 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ivan Avila
+
+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/calendar.css

@@ -0,0 +1 @@
+@layer components{.lui-calendar{background-color:var(--lui-calendar-bg);border-radius:var(--lui-calendar-radius);display:inline-flex;gap:var(--lui-calendar-gap);padding:var(--lui-calendar-padding);user-select:none}.lui-calendar--multi .lui-calendar__month:not(:first-child){border-inline-start:1px solid var(--lui-calendar-border);padding-inline-start:var(--lui-calendar-gap)}.lui-calendar__month{display:flex;flex-direction:column;gap:.75rem;width:var(--lui-calendar-width)}.lui-calendar__header{align-items:center;display:flex;justify-content:space-between}.lui-calendar__caption{color:var(--lui-calendar-caption-color);flex:1;font-family:var(--lui-font-family);font-size:var(--lui-calendar-caption-font-size);font-weight:var(--lui-calendar-caption-font-weight);text-align:center}.lui-calendar__nav{align-items:center;background:transparent;border:none;border-radius:var(--lui-calendar-nav-radius);color:var(--lui-calendar-nav-color);cursor:pointer;display:inline-flex;flex-shrink:0;height:var(--lui-calendar-nav-size);justify-content:center;padding:0;transition:var(--lui-transition);width:var(--lui-calendar-nav-size)}.lui-calendar__nav:hover:not(:disabled){background-color:var(--lui-calendar-nav-hover-bg);color:var(--lui-calendar-caption-color)}.lui-calendar__nav:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-bg-interactive);outline:none}.lui-calendar__nav:disabled{cursor:not-allowed;opacity:.3}.lui-calendar__nav--hidden{pointer-events:none;visibility:hidden}.lui-calendar__caption-dropdowns{align-items:center;display:flex;flex:1;gap:.125rem;justify-content:center}.lui-calendar__caption-select-wrapper{align-items:center;display:inline-flex;position:relative}.lui-calendar__caption-select{appearance:none;-webkit-appearance:none;background:transparent;border:none;border-radius:var(--lui-calendar-select-radius);color:var(--lui-calendar-caption-color);cursor:pointer;font-family:var(--lui-font-family);font-size:var(--lui-calendar-caption-font-size);font-weight:var(--lui-calendar-caption-font-weight);padding:.125rem 1.5rem .125rem .375rem;transition:var(--lui-transition)}.lui-calendar__caption-select:hover{background-color:var(--lui-calendar-select-hover-bg)}.lui-calendar__caption-select:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-bg-interactive);outline:none}.lui-calendar__caption-chevron{align-items:center;color:var(--lui-calendar-nav-color);display:inline-flex;inset-inline-end:.25rem;pointer-events:none;position:absolute}.lui-calendar__grid{display:flex;flex-direction:column;gap:0}.lui-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-block-end:.25rem}.lui-calendar__weekday{align-items:center;color:var(--lui-calendar-weekday-color);display:flex;font-family:var(--lui-font-family);font-size:var(--lui-calendar-weekday-font-size);font-weight:var(--lui-calendar-weekday-font-weight);height:2rem;justify-content:center}.lui-calendar__week{display:grid;grid-template-columns:repeat(7,1fr)}.lui-calendar__day-wrapper{align-items:center;display:flex;justify-content:center;position:relative}.lui-calendar__day-wrapper--range-middle{background-color:var(--lui-calendar-range-bg)}.lui-calendar__day-wrapper--range-start{background:linear-gradient(to right,transparent 50%,var(--lui-calendar-range-bg) 50%)}.lui-calendar__day-wrapper--range-end,[dir=rtl] .lui-calendar__day-wrapper--range-start{background:linear-gradient(to left,transparent 50%,var(--lui-calendar-range-bg) 50%)}[dir=rtl] .lui-calendar__day-wrapper--range-end{background:linear-gradient(to right,transparent 50%,var(--lui-calendar-range-bg) 50%)}.lui-calendar__day{align-items:center;background:transparent;border:none;border-radius:var(--lui-calendar-day-radius);color:var(--lui-calendar-day-color);cursor:pointer;display:inline-flex;flex-direction:column;font-family:var(--lui-font-family);font-size:var(--lui-calendar-day-font-size);font-weight:400;height:var(--lui-calendar-day-size);justify-content:center;padding:0;position:relative;transition:var(--lui-transition);width:var(--lui-calendar-day-size);z-index:var(--lui-z-base)}.lui-calendar__day:hover:not(:disabled):not(.lui-calendar__day--selected):not(.lui-calendar__day--unavailable){background-color:var(--lui-calendar-day-hover-bg)}.lui-calendar__day:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-bg-interactive);outline:none}.lui-calendar__day--today:after{background-color:var(--lui-calendar-today-dot-color);border-radius:50%;bottom:.25rem;content:"";display:block;height:var(--lui-calendar-today-dot-size);left:50%;position:absolute;transform:translateX(-50%);width:var(--lui-calendar-today-dot-size)}.lui-calendar__day--selected{background-color:var(--lui-calendar-selected-bg);color:var(--lui-calendar-selected-text);font-weight:600}.lui-calendar__day--selected:hover:not(:disabled){background-color:var(--lui-calendar-selected-hover-bg)}.lui-calendar__day--available:not(.lui-calendar__day--selected){background-color:var(--lui-calendar-available-bg)}.lui-calendar__day--unavailable{cursor:default;opacity:var(--lui-calendar-unavailable-opacity);pointer-events:none}.lui-calendar__day--outside{opacity:var(--lui-calendar-outside-opacity)}.lui-calendar__day--disabled{cursor:not-allowed;opacity:var(--lui-disabled-opacity);pointer-events:none}.lui-calendar__day--today.lui-calendar__day--selected:after{background-color:var(--lui-calendar-selected-text);opacity:.7}.lui-calendar__day-dot{background-color:var(--lui-calendar-marked-dot-color);border-radius:50%;bottom:.25rem;display:block;height:var(--lui-calendar-marked-dot-size);left:50%;position:absolute;transform:translateX(-50%);width:var(--lui-calendar-marked-dot-size)}.lui-calendar__day--selected .lui-calendar__day-dot{background-color:var(--lui-calendar-selected-text);opacity:.7}@media (prefers-reduced-motion:reduce){.lui-calendar__caption-select,.lui-calendar__day,.lui-calendar__nav{transition:none}}}

package/dist/calendar.d.ts

@@ -0,0 +1,61 @@
+import type { Ref } from "react";
+export interface DateRange {
+    from: Date | undefined;
+    to?: Date | undefined;
+}
+export type CalendarMode = "single" | "range" | "multiple";
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    ref?: Ref<HTMLDivElement>;
+    /** Selection mode. Default: "single" */
+    mode?: CalendarMode;
+    /** Controlled selected value */
+    selected?: Date | DateRange | Date[];
+    /** Default selected value for uncontrolled usage */
+    defaultSelected?: Date | DateRange | Date[];
+    /** Called when selection changes */
+    onSelect?: (value: Date | DateRange | Date[] | undefined) => void;
+    /** Controlled month view (first displayed month) */
+    month?: Date;
+    /** Default month to display */
+    defaultMonth?: Date;
+    /** Called when navigated to a different month */
+    onMonthChange?: (month: Date) => void;
+    /** Number of months to display side by side */
+    numberOfMonths?: number;
+    /** Array of disabled dates, or a function returning true for disabled */
+    disabled?: Date[] | ((date: Date) => boolean);
+    /** Show days from previous/next month. Default: true */
+    showOutsideDays?: boolean;
+    /** Day the week starts on (0=Sun, 1=Mon). Default: 0 */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Locale string for month/day names. Default: "en-US" */
+    locale?: string;
+    /** Dates with a dot marker */
+    markedDates?: Date[];
+    /** Minimum selectable date */
+    fromDate?: Date;
+    /** Maximum selectable date */
+    toDate?: Date;
+    /** Override today's date (useful for testing) */
+    today?: Date;
+    /**
+     * Show month and year dropdown selectors in the header instead of plain text.
+     * Allows jumping to any month/year without navigating one-by-one.
+     */
+    showMonthYearDropdown?: boolean;
+    /** Minimum year shown in the year dropdown. Default: current year - 10 */
+    fromYear?: number;
+    /** Maximum year shown in the year dropdown. Default: current year + 10 */
+    toYear?: number;
+    /**
+     * Dates that are "available" for selection.
+     * When provided, only these dates are fully interactive.
+     * Non-available dates are visually muted and non-interactive.
+     * Accepts an array of dates or a function returning true for available dates.
+     */
+    availableDates?: Date[] | ((date: Date) => boolean);
+}
+export declare function Calendar({ ref, className, mode, selected: controlledSelected, defaultSelected, onSelect, month: controlledMonth, defaultMonth, onMonthChange, numberOfMonths, disabled, showOutsideDays, weekStartsOn, locale, markedDates, fromDate, toDate, today: todayOverride, showMonthYearDropdown, fromYear, toYear, availableDates, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}

package/dist/calendar.vars.css

@@ -0,0 +1 @@
+:root{--lui-calendar-bg:var(--lui-bg-surface);--lui-calendar-border:var(--lui-border-default);--lui-calendar-radius:var(--lui-radius-md);--lui-calendar-padding:1rem;--lui-calendar-width:18rem;--lui-calendar-gap:1.5rem;--lui-calendar-caption-font-size:0.875rem;--lui-calendar-caption-font-weight:600;--lui-calendar-caption-color:var(--lui-text-primary);--lui-calendar-nav-size:1.75rem;--lui-calendar-nav-color:var(--lui-text-secondary);--lui-calendar-nav-hover-bg:var(--lui-bg-surface-raised);--lui-calendar-nav-radius:var(--lui-radius-sm);--lui-calendar-select-hover-bg:var(--lui-bg-surface-raised);--lui-calendar-select-radius:var(--lui-radius-sm);--lui-calendar-weekday-color:var(--lui-text-secondary);--lui-calendar-weekday-font-size:0.75rem;--lui-calendar-weekday-font-weight:500;--lui-calendar-day-size:2.25rem;--lui-calendar-day-font-size:0.875rem;--lui-calendar-day-color:var(--lui-text-primary);--lui-calendar-day-radius:var(--lui-radius-sm);--lui-calendar-day-hover-bg:var(--lui-bg-surface-raised);--lui-calendar-today-dot-color:var(--lui-bg-interactive);--lui-calendar-today-dot-size:0.25rem;--lui-calendar-outside-opacity:0.4;--lui-calendar-selected-bg:var(--lui-bg-interactive);--lui-calendar-selected-text:var(--lui-text-inverse);--lui-calendar-selected-hover-bg:var(--lui-bg-interactive-hover);--lui-calendar-range-bg:color-mix(in srgb,var(--lui-bg-interactive) 12%,transparent);--lui-calendar-marked-dot-color:var(--lui-bg-interactive);--lui-calendar-marked-dot-size:0.25rem;--lui-calendar-available-bg:var(--lui-bg-surface-raised);--lui-calendar-available-radius:var(--lui-radius-sm);--lui-calendar-unavailable-opacity:0.2}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Calendar, type CalendarProps, type DateRange, type CalendarMode } from './calendar';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("@ladder-ui/core/concatClassNames");function n(e,a){return e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth()&&e.getDate()===a.getDate()}function r(e,a){return e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth()}function l(e,a){return e.getFullYear()<a.getFullYear()||e.getFullYear()===a.getFullYear()&&e.getMonth()<a.getMonth()}function i(e,a){return new Date(e.getFullYear(),e.getMonth(),e.getDate())<new Date(a.getFullYear(),a.getMonth(),a.getDate())}function o(e,a,t){const n=new Date(e.getFullYear(),e.getMonth(),e.getDate()).getTime(),r=new Date(a.getFullYear(),a.getMonth(),a.getDate()).getTime(),l=new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime();return n>r&&n<l}function s(e){return new Date(e.getFullYear(),e.getMonth(),1)}function d(e,a){return new Date(e.getFullYear(),e.getMonth()+a,1)}function c(e,a){return new Intl.DateTimeFormat(a,{month:"long"}).format(new Date(2024,e,1))}function u(e,a){return e.toLocaleDateString(a,{weekday:"long",year:"numeric",month:"long",day:"numeric"})}const h=()=>e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e.jsx("polyline",{points:"6 9 12 15 18 9"})}),g=()=>e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e.jsx("polyline",{points:"15 18 9 12 15 6"})}),m=()=>e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e.jsx("polyline",{points:"9 18 15 12 9 6"})});function _(e,a,t,r){return!(!t||!i(e,t))||!(!r||!i(r,e))||!!a&&("function"==typeof a?a(e):a.some(a=>n(a,e)))}function f(e,a){return"function"==typeof a?a(e):a.some(a=>n(a,e))}function p({ref:p,className:v,mode:y="single",selected:D,defaultSelected:x,onSelect:w,month:j,defaultMonth:M,onMonthChange:b,numberOfMonths:k=1,disabled:F,showOutsideDays:N=!0,weekStartsOn:Y=0,locale:S="en-US",markedDates:C,fromDate:E,toDate:L,today:T,showMonthYearDropdown:A=!1,fromYear:I,toYear:O,availableDates:$,...q}){const B=T??new Date,U=B.getFullYear(),W=I??U-10,G=O??U+10,[z,H]=a.useState(()=>void 0!==x?x:"range"===y?{from:void 0,to:void 0}:"multiple"===y?[]:void 0),J=void 0!==D?D:z,[K,P]=a.useState(()=>s(M??B)),Q=void 0!==j?s(j):K,[R,V]=a.useState(void 0);function X(e){const a=d(Q,e);P(a),b?.(a)}function Z(e,a){const t=d(e,-a);P(t),b?.(t)}const ee=d(Q,k-1),ae=!!E&&(r(Q,E)||l(Q,E)),te=!!L&&(r(ee,L)||l(L,ee)),ne=a.useMemo(()=>function(e,a){return Array.from({length:7},(t,n)=>{const r=new Date(2024,0,7+(e+n)%7);return new Intl.DateTimeFormat(a,{weekday:"short"}).format(r).slice(0,2)})}(Y,S),[Y,S]),re=a.useMemo(()=>Array.from({length:k},(e,a)=>d(Q,a)),[Q,k]),le=a.useMemo(()=>Array.from({length:G-W+1},(e,a)=>W+a),[W,G]);return e.jsx("div",{ref:p,className:t("lui-calendar",k>1&&"lui-calendar--multi",!!$&&"lui-calendar--with-available",v),...q,children:re.map((a,l)=>{const d=0===l,p=l===k-1,v=function(e,a){const t=s(e),n=(t.getDay()-a+7)%7,r=[];for(let e=-n;e<42-n;e++)r.push(new Date(t.getFullYear(),t.getMonth(),1+e));return r}(a,Y),D=function(e,a){return new Intl.DateTimeFormat(a,{month:"long",year:"numeric"}).format(e)}(a,S);return e.jsxs("div",{className:"lui-calendar__month","data-slot":"calendar-month",children:[e.jsxs("div",{className:"lui-calendar__header","data-slot":"calendar-header",children:[e.jsx("button",{type:"button",className:t("lui-calendar__nav",!d&&"lui-calendar__nav--hidden"),onClick:()=>X(-1),disabled:ae,"aria-label":"Go to previous month",children:e.jsx(g,{})}),A?e.jsxs("div",{className:"lui-calendar__caption-dropdowns",children:[e.jsxs("div",{className:"lui-calendar__caption-select-wrapper",children:[e.jsx("select",{className:"lui-calendar__caption-select",value:a.getMonth(),onChange:e=>{Z(new Date(a.getFullYear(),parseInt(e.target.value),1),l)},"aria-label":"Select month",children:Array.from({length:12},(a,t)=>e.jsx("option",{value:t,children:c(t,S)},t))}),e.jsx("span",{className:"lui-calendar__caption-chevron","aria-hidden":"true",children:e.jsx(h,{})})]}),e.jsxs("div",{className:"lui-calendar__caption-select-wrapper",children:[e.jsx("select",{className:"lui-calendar__caption-select",value:a.getFullYear(),onChange:e=>{Z(new Date(parseInt(e.target.value),a.getMonth(),1),l)},"aria-label":"Select year",children:le.map(a=>e.jsx("option",{value:a,children:a},a))}),e.jsx("span",{className:"lui-calendar__caption-chevron","aria-hidden":"true",children:e.jsx(h,{})})]})]}):e.jsx("span",{className:"lui-calendar__caption",children:D}),e.jsx("button",{type:"button",className:t("lui-calendar__nav",!p&&"lui-calendar__nav--hidden"),onClick:()=>X(1),disabled:te,"aria-label":"Go to next month",children:e.jsx(m,{})})]}),e.jsxs("div",{className:"lui-calendar__grid","aria-label":D,children:[e.jsx("div",{className:"lui-calendar__weekdays","aria-hidden":"true",children:ne.map((a,t)=>e.jsx("div",{className:"lui-calendar__weekday",children:a},t))}),Array.from({length:6},(l,s)=>e.jsx("div",{className:"lui-calendar__week",children:v.slice(7*s,7*s+7).map(l=>{const{isOutside:s,isTodayDay:d,isDisabledDay:c,isUnavailable:h,isAvailableDay:g,isMarkedDay:m,isSelected:p,rangeState:v}=function(e,a){const t=!r(e,a),l=n(e,B),s=_(e,F,E,L),d=!(s||!$||t||f(e,$)),c=!(!$||t||s||d),u=function(e,a){return a?.some(a=>n(a,e))??!1}(e,C);let h=!1,g={isStart:!1,isEnd:!1,isMid:!1};return"single"===y?h=!!J&&n(e,J):"multiple"===y?h=(J??[]).some(a=>n(a,e)):(g=function(e,a,t){const r=a?.from;if(!r)return{isStart:!1,isEnd:!1,isMid:!1};let l=a.to;if(l||!t||n(t,r)||(l=t),!l)return{isStart:n(e,r),isEnd:!1,isMid:!1};const[s,d]=i(r,l)||n(r,l)?[r,l]:[l,r];return{isStart:n(e,s),isEnd:n(e,d),isMid:o(e,s,d)}}(e,J,R),h=g.isStart||g.isEnd),{isOutside:t,isTodayDay:l,isDisabledDay:s,isUnavailable:d,isAvailableDay:c,isMarkedDay:u,isSelected:h,rangeState:g}}(l,a),D=`${l.getFullYear()}-${l.getMonth()}-${l.getDate()}`;if(s&&!N)return e.jsx("div",{className:"lui-calendar__day-wrapper","aria-hidden":"true"},D);const x=v.isStart&&v.isEnd,j=t("lui-calendar__day-wrapper",v.isStart&&!x&&"lui-calendar__day-wrapper--range-start",v.isEnd&&!x&&"lui-calendar__day-wrapper--range-end",v.isMid&&"lui-calendar__day-wrapper--range-middle"),M=t("lui-calendar__day",d&&"lui-calendar__day--today",p&&"lui-calendar__day--selected",g&&"lui-calendar__day--available",h&&"lui-calendar__day--unavailable",s&&"lui-calendar__day--outside",c&&"lui-calendar__day--disabled",m&&"lui-calendar__day--marked"),b=c||h;return e.jsx("div",{className:j,onMouseEnter:()=>{"range"===y&&V(l)},onMouseLeave:()=>{"range"===y&&V(void 0)},children:e.jsxs("button",{type:"button",className:M,onClick:()=>function(e){if(_(e,F,E,L))return;if($&&!f(e,$))return;let a;if("single"===y)a=J&&n(J,e)?void 0:e;else if("range"===y){const t=J??{from:void 0};if(t.from&&void 0===t.to){const[r,l]=i(e,t.from)?[e,t.from]:[t.from,e];a={from:r,to:n(r,l)?void 0:l}}else a={from:e,to:void 0};V(void 0)}else{const t=J??[],r=t.findIndex(a=>n(a,e));a=r>=0?t.filter((e,a)=>a!==r):[...t,e]}H(a),w?.(a)}(l),disabled:c,"aria-label":u(l,S),tabIndex:s||b?-1:0,children:[e.jsx("span",{"aria-hidden":"true",children:l.getDate()}),m&&e.jsx("span",{className:"lui-calendar__day-dot","aria-hidden":"true"})]})},D)})},s))]})]},`${a.getFullYear()}-${a.getMonth()}`)})})}p.displayName="Calendar",exports.Calendar=p;

package/dist/index.mjs

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as t,useMemo as n}from"react";import r from"@ladder-ui/core/concatClassNames";function l(e,a){return e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth()&&e.getDate()===a.getDate()}function i(e,a){return e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth()}function o(e,a){return e.getFullYear()<a.getFullYear()||e.getFullYear()===a.getFullYear()&&e.getMonth()<a.getMonth()}function d(e,a){return new Date(e.getFullYear(),e.getMonth(),e.getDate())<new Date(a.getFullYear(),a.getMonth(),a.getDate())}function s(e,a,t){const n=new Date(e.getFullYear(),e.getMonth(),e.getDate()).getTime(),r=new Date(a.getFullYear(),a.getMonth(),a.getDate()).getTime(),l=new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime();return n>r&&n<l}function c(e){return new Date(e.getFullYear(),e.getMonth(),1)}function u(e,a){return new Date(e.getFullYear(),e.getMonth()+a,1)}function h(e,a){return new Intl.DateTimeFormat(a,{month:"long"}).format(new Date(2024,e,1))}function m(e,a){return e.toLocaleDateString(a,{weekday:"long",year:"numeric",month:"long",day:"numeric"})}const g=()=>e("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e("polyline",{points:"6 9 12 15 18 9"})}),f=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e("polyline",{points:"15 18 9 12 15 6"})}),_=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e("polyline",{points:"9 18 15 12 9 6"})});function p(e,a,t,n){return!(!t||!d(e,t))||!(!n||!d(n,e))||!!a&&("function"==typeof a?a(e):a.some(a=>l(a,e)))}function v(e,a){return"function"==typeof a?a(e):a.some(a=>l(a,e))}function y({ref:y,className:D,mode:w="single",selected:M,defaultSelected:b,onSelect:k,month:F,defaultMonth:N,onMonthChange:Y,numberOfMonths:S=1,disabled:C,showOutsideDays:x=!0,weekStartsOn:E=0,locale:L="en-US",markedDates:T,fromDate:A,toDate:I,today:O,showMonthYearDropdown:$=!1,fromYear:j,toYear:B,availableDates:U,...W}){const G=O??new Date,q=G.getFullYear(),z=j??q-10,H=B??q+10,[J,K]=t(()=>void 0!==b?b:"range"===w?{from:void 0,to:void 0}:"multiple"===w?[]:void 0),P=void 0!==M?M:J,[Q,R]=t(()=>c(N??G)),V=void 0!==F?c(F):Q,[X,Z]=t(void 0);function ee(e){const a=u(V,e);R(a),Y?.(a)}function ae(e,a){const t=u(e,-a);R(t),Y?.(t)}const te=u(V,S-1),ne=!!A&&(i(V,A)||o(V,A)),re=!!I&&(i(te,I)||o(I,te)),le=n(()=>function(e,a){return Array.from({length:7},(t,n)=>{const r=new Date(2024,0,7+(e+n)%7);return new Intl.DateTimeFormat(a,{weekday:"short"}).format(r).slice(0,2)})}(E,L),[E,L]),ie=n(()=>Array.from({length:S},(e,a)=>u(V,a)),[V,S]),oe=n(()=>Array.from({length:H-z+1},(e,a)=>z+a),[z,H]);return e("div",{ref:y,className:r("lui-calendar",S>1&&"lui-calendar--multi",!!U&&"lui-calendar--with-available",D),...W,children:ie.map((t,n)=>{const o=0===n,u=n===S-1,y=function(e,a){const t=c(e),n=(t.getDay()-a+7)%7,r=[];for(let e=-n;e<42-n;e++)r.push(new Date(t.getFullYear(),t.getMonth(),1+e));return r}(t,E),D=function(e,a){return new Intl.DateTimeFormat(a,{month:"long",year:"numeric"}).format(e)}(t,L);return a("div",{className:"lui-calendar__month","data-slot":"calendar-month",children:[a("div",{className:"lui-calendar__header","data-slot":"calendar-header",children:[e("button",{type:"button",className:r("lui-calendar__nav",!o&&"lui-calendar__nav--hidden"),onClick:()=>ee(-1),disabled:ne,"aria-label":"Go to previous month",children:e(f,{})}),$?a("div",{className:"lui-calendar__caption-dropdowns",children:[a("div",{className:"lui-calendar__caption-select-wrapper",children:[e("select",{className:"lui-calendar__caption-select",value:t.getMonth(),onChange:e=>{ae(new Date(t.getFullYear(),parseInt(e.target.value),1),n)},"aria-label":"Select month",children:Array.from({length:12},(a,t)=>e("option",{value:t,children:h(t,L)},t))}),e("span",{className:"lui-calendar__caption-chevron","aria-hidden":"true",children:e(g,{})})]}),a("div",{className:"lui-calendar__caption-select-wrapper",children:[e("select",{className:"lui-calendar__caption-select",value:t.getFullYear(),onChange:e=>{ae(new Date(parseInt(e.target.value),t.getMonth(),1),n)},"aria-label":"Select year",children:oe.map(a=>e("option",{value:a,children:a},a))}),e("span",{className:"lui-calendar__caption-chevron","aria-hidden":"true",children:e(g,{})})]})]}):e("span",{className:"lui-calendar__caption",children:D}),e("button",{type:"button",className:r("lui-calendar__nav",!u&&"lui-calendar__nav--hidden"),onClick:()=>ee(1),disabled:re,"aria-label":"Go to next month",children:e(_,{})})]}),a("div",{className:"lui-calendar__grid","aria-label":D,children:[e("div",{className:"lui-calendar__weekdays","aria-hidden":"true",children:le.map((a,t)=>e("div",{className:"lui-calendar__weekday",children:a},t))}),Array.from({length:6},(n,o)=>e("div",{className:"lui-calendar__week",children:y.slice(7*o,7*o+7).map(n=>{const{isOutside:o,isTodayDay:c,isDisabledDay:u,isUnavailable:h,isAvailableDay:g,isMarkedDay:f,isSelected:_,rangeState:y}=function(e,a){const t=!i(e,a),n=l(e,G),r=p(e,C,A,I),o=!(r||!U||t||v(e,U)),c=!(!U||t||r||o),u=function(e,a){return a?.some(a=>l(a,e))??!1}(e,T);let h=!1,m={isStart:!1,isEnd:!1,isMid:!1};return"single"===w?h=!!P&&l(e,P):"multiple"===w?h=(P??[]).some(a=>l(a,e)):(m=function(e,a,t){const n=a?.from;if(!n)return{isStart:!1,isEnd:!1,isMid:!1};let r=a.to;if(r||!t||l(t,n)||(r=t),!r)return{isStart:l(e,n),isEnd:!1,isMid:!1};const[i,o]=d(n,r)||l(n,r)?[n,r]:[r,n];return{isStart:l(e,i),isEnd:l(e,o),isMid:s(e,i,o)}}(e,P,X),h=m.isStart||m.isEnd),{isOutside:t,isTodayDay:n,isDisabledDay:r,isUnavailable:o,isAvailableDay:c,isMarkedDay:u,isSelected:h,rangeState:m}}(n,t),D=`${n.getFullYear()}-${n.getMonth()}-${n.getDate()}`;if(o&&!x)return e("div",{className:"lui-calendar__day-wrapper","aria-hidden":"true"},D);const M=y.isStart&&y.isEnd,b=r("lui-calendar__day-wrapper",y.isStart&&!M&&"lui-calendar__day-wrapper--range-start",y.isEnd&&!M&&"lui-calendar__day-wrapper--range-end",y.isMid&&"lui-calendar__day-wrapper--range-middle"),F=r("lui-calendar__day",c&&"lui-calendar__day--today",_&&"lui-calendar__day--selected",g&&"lui-calendar__day--available",h&&"lui-calendar__day--unavailable",o&&"lui-calendar__day--outside",u&&"lui-calendar__day--disabled",f&&"lui-calendar__day--marked"),N=u||h;return e("div",{className:b,onMouseEnter:()=>{"range"===w&&Z(n)},onMouseLeave:()=>{"range"===w&&Z(void 0)},children:a("button",{type:"button",className:F,onClick:()=>function(e){if(p(e,C,A,I))return;if(U&&!v(e,U))return;let a;if("single"===w)a=P&&l(P,e)?void 0:e;else if("range"===w){const t=P??{from:void 0};if(t.from&&void 0===t.to){const[n,r]=d(e,t.from)?[e,t.from]:[t.from,e];a={from:n,to:l(n,r)?void 0:r}}else a={from:e,to:void 0};Z(void 0)}else{const t=P??[],n=t.findIndex(a=>l(a,e));a=n>=0?t.filter((e,a)=>a!==n):[...t,e]}K(a),k?.(a)}(n),disabled:u,"aria-label":m(n,L),tabIndex:o||N?-1:0,children:[e("span",{"aria-hidden":"true",children:n.getDate()}),f&&e("span",{className:"lui-calendar__day-dot","aria-hidden":"true"})]})},D)})},o))]})]},`${t.getFullYear()}-${t.getMonth()}`)})})}y.displayName="Calendar";export{y as Calendar};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ladder-ui/calendar",
+  "version": "0.10.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/calendar"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "typescript": "^5.3.3",
+    "tslib": "^2.6.2",
+    "@ladder-ui/core": "0.10.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.1",
+    "react": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}