h2o-library 1.8.0 → 2.0.1

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

@@ -1,41 +1,37 @@
-export * from "./src/button";
-export * from "./src/checkbox";
-export * from "./src/icon";
-export * from "./src/radio";
-export * from "./src/tooltip";
-export * from "./src/toggle";
-export * from "./src/expandable";
-export * from "./src/content-switch";
-export * from "./src/input";
-export * from "./src/textarea";
-export * from "./src/dropdown";
-export * from "./src/side-panel";
-export * from "./src/modal";
-export * from "./src/tag";
-export * from "./src/accordion";
-export * from "./src/multi-select";
-export * from "./src/radio-group";
-export * from "./src/tabs";
-export * from "./src/status";
-export * from "./src/popover";
-export * from "./src/pagination";
-export * from "./src/table";
-export * from "./src/toast";
-export * from "./src/logo";
-export * from "./src/calendar";
-export * from "./src/month-calendar";
-export * from "./src/loader";
-export * from "./src/message";
-export * from "./src/multi-menu";
-export * from "./src/chart-heatmap";
-export * from "./src/compact-multi-select";
-export * from "./src/chart-line";
-export * from "./src/chart-bar";
-export * from "./src/chart-pie";
-export * from "./src/chart-stat";
-export * from "./src/date-range-picker";
-export * from "./src/legend";
-export * from "./src/chart";
-export * from "./src/expandable-table";
-export * from "./src/chip";
-export * from "./src/segmented-toggle";
+export * from "./src/button/button";
+export * from "./src/checkbox/checkbox";
+export * from "./src/icon/icon";
+export * from "./src/radio/radio";
+export * from "./src/tooltip/tooltip";
+export * from "./src/toggle/toggle";
+export * from "./src/content-switch/content-switch";
+export * from "./src/input/input";
+export * from "./src/textarea/textarea";
+export * from "./src/dropdown/dropdown";
+export * from "./src/slider/slider";
+export * from "./src/side-panel/side-panel";
+export * from "./src/modal/modal";
+export * from "./src/tag/tag";
+export * from "./src/accordion/accordion";
+export * from "./src/multi-select/multi-select";
+export * from "./src/radio-group/radio-group";
+export * from "./src/tabs/tabs";
+export * from "./src/popover/popover";
+export * from "./src/pagination/pagination";
+export * from "./src/table/table";
+export { ToastProvider, type ToastVariant, type ToastPosition, type ToastOptions, } from "./src/toast/toast";
+export * from "./src/logo/logo";
+export * from "./src/calendar/calendar";
+export * from "./src/month-calendar/month-calendar";
+export * from "./src/loader/loader";
+export * from "./src/message/message";
+export * from "./src/multi-menu/multi-menu";
+export * from "./src/compact-multi-select/compact-multi-select";
+export * from "./src/date-range-picker/date-range-picker";
+export * from "./src/expandable-table/expandable-table";
+export * from "./src/chip/chip";
+export * from "./src/segmented-toggle/segmented-toggle";
+export * from "./src/skeleton/skeleton";
+export * from "./src/date-picker/date-picker";
+export * from "./src/time-picker/time-picker";
+export * from "./src/expandable-search/expandable-search";

package/dist/{css/src → esm/components/src/accordion}/accordion.css

@@ -1,6 +1,5 @@
 .accordion {
   width: 100%;
-  /* overflow: hidden; */
 }
 
 .accordion-trigger {
@@ -12,7 +11,12 @@
   background: none;
   border: none;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: color 0.2s;
+}
+
+.accordion-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .accordion-title-container {
@@ -44,6 +48,8 @@
 }
 
 .accordion-content {
+  height: 0;
+  overflow: hidden;
   transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   margin-top: 0.5rem;
 }

package/dist/esm/components/src/accordion/accordion.d.ts

@@ -0,0 +1,32 @@
+import "./accordion.css";
+import type React from "react";
+/**
+ * Props for the `Accordion` component — **fully controlled** open state.
+ *
+ * @property {string} title - Text on the always-visible trigger row.
+ * @property {boolean} isOpen - When true, the content area is expanded.
+ * @property {(isOpen: boolean) => void} onToggle - Called with the new open state when the user toggles.
+ * @property {React.ReactNode} children - Collapsible body content.
+ * @property {string} [description] - Subtitle under the title on the trigger.
+ * @property {boolean} [disabled] - When true, the trigger does not open. Default `false`.
+ */
+interface AccordionProps {
+    title: string;
+    isOpen: boolean;
+    onToggle: (isOpen: boolean) => void;
+    children: React.ReactNode;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+}
+/**
+ * Collapsible section with a button trigger, optional description, and height-animated content.
+ *
+ * @param {AccordionProps} props - Controlled `isOpen` + `onToggle` model.
+ * @returns {JSX.Element} The accordion shell, trigger, and panel region.
+ */
+export declare const Accordion: ({ title, isOpen, onToggle, children, description, disabled, containerClassName, className, titleClassName, descriptionClassName, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/accordion/accordion.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import"./accordion.css";import{useRef as o,useId as n,useEffect as t}from"react";import{Icon as c}from"../icon/icon.js";const r=({title:r,isOpen:a,onToggle:s,children:l,description:d,disabled:h=!1,containerClassName:m="",className:p="",titleClassName:g="",descriptionClassName:N=""})=>{const u=o(null),y=`accordion-${n()}-content`;t((()=>{const e=u.current;e&&(a?e.style.height=`${e.scrollHeight}px`:(e.style.overflow="hidden","auto"===e.style.height||""===e.style.height?(e.style.height=`${e.scrollHeight}px`,requestAnimationFrame((()=>{e.style.height="0px"}))):e.style.height="0px"))}),[a]);return e("div",{className:`accordion ${m}`,children:[e("button",{type:"button",onClick:()=>s(!a),className:`accordion-trigger ${p}`,"aria-expanded":a,"aria-controls":y,disabled:h,children:[e("div",{className:"accordion-title-container",children:[i("span",{className:`accordion-title ${g}`,children:r}),i(c,{icon:"chevron-down",className:"accordion-icon "+(a?"accordion-icon-open":"")})]}),d&&i("span",{className:`accordion-description ${N}`,children:d})]}),i("div",{ref:u,id:y,className:"accordion-content",onTransitionEnd:e=>{if("height"!==e.propertyName)return;const i=u.current;i&&a&&(i.style.height="auto",i.style.overflow="visible")},role:"region","aria-hidden":!a,children:i("div",{className:"accordion-content-inner",children:l})})]})};export{r as Accordion};
+//# sourceMappingURL=accordion.js.map

package/dist/{css/src → esm/components/src/button}/button.css

@@ -8,6 +8,10 @@
   min-width: fit-content;
 }
 
+.button--full-width {
+  width: 100%;
+}
+
 .button:focus {
   outline: none;
 }
@@ -22,7 +26,8 @@
   color: white;
 }
 
-.button--primary:hover:not(:disabled) {
+.button--primary:hover:not(:disabled),
+.button--primary:focus-visible:not(:disabled) {
   background-color: hsl(var(--primary-200));
 }
 
@@ -35,12 +40,13 @@
 }
 
 .button--secondary {
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--muted));
+  background-color: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
   color: hsl(var(--primary));
 }
 
-.button--secondary:hover:not(:disabled) {
+.button--secondary:hover:not(:disabled),
+.button--secondary:focus-visible:not(:disabled) {
   border-color: hsl(var(--primary-200));
   color: hsl(var(--primary-200));
 }
@@ -52,6 +58,7 @@
 
 .button--secondary:disabled {
   color: hsl(var(--primary-disabled));
+  background-color: hsl(var(--input) / 0.5);
   border: none;
 }
 
@@ -60,7 +67,8 @@
   color: hsl(var(--primary));
 }
 
-.button--ghost:hover:not(:disabled) {
+.button--ghost:hover:not(:disabled),
+.button--ghost:focus-visible:not(:disabled) {
   color: hsl(var(--primary-200));
 }
 
@@ -78,7 +86,8 @@
   color: white;
 }
 
-.button--danger:hover:not(:disabled) {
+.button--danger:hover:not(:disabled),
+.button--danger:focus-visible:not(:disabled) {
   background-color: hsl(var(--destructive-200));
 }
 
@@ -95,7 +104,8 @@
   color: white;
 }
 
-.button--warning:hover:not(:disabled) {
+.button--warning:hover:not(:disabled),
+.button--warning:focus-visible:not(:disabled) {
   background-color: hsl(var(--warning-200));
 }
 
@@ -112,7 +122,8 @@
   color: white;
 }
 
-.button--success:hover:not(:disabled) {
+.button--success:hover:not(:disabled),
+.button--success:focus-visible:not(:disabled) {
   background-color: hsl(var(--success-200));
 }
 

package/dist/esm/components/src/button/button.d.ts

@@ -0,0 +1,41 @@
+import "./button.css";
+import type { IconType, TooltipPosition } from "../../../types";
+import React from "react";
+/**
+ * Extends native `HTMLButtonElement` attributes
+ *
+ * @property {"primary"|"secondary"|"ghost"|"danger"|"warning"|"success"} [variant] - Color/semantic style. Default `"primary"`.
+ * @property {"sm"|"md"|"lg"} [size] - Height and padding. Default `"md"`.
+ * @property {string} [label] - Button text; used when `iconOnly` is false.
+ * @property {import("../../../types").IconType} [icon] - Optional icon name from the icon set.
+ * @property {"left"|"right"} [iconPosition] - Icon position relative to the label. Default `"right"`.
+ * @property {boolean} [iconOnly] - Icon without visible text.
+ * @property {number} [iconStrokeWidth] - SVG stroke width for the icon. Default `1.5`.
+ * @property {boolean} [isLoading] - Shows a spinner and disables the button. Default `false`.
+ * @property {boolean} [fullWidth] - Stretches to 100% width of the container. Default `false`.
+ * @property {string} [tooltip] - If set, wraps the button in a `Tooltip` with this text.
+ * @property {import("../../../types").TooltipPosition} [tooltipPosition] - Tooltip position. Default `"top"`.
+ */
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "warning" | "success";
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    iconStrokeWidth?: number;
+    icon?: IconType;
+    iconPosition?: "left" | "right";
+    iconOnly?: boolean;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    className?: string;
+}
+/**
+ * Renders button or wrapped in tooltip if `tooltip` prop is provided. accepts forwarded ref to the underlying button element.
+ *
+ * @param {ButtonProps} props
+ * @param {React.Ref<HTMLButtonElement>} ref
+ * @returns {React.ReactElement}
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/components/src/button/button.js

@@ -0,0 +1,2 @@
+import{__rest as t}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as o,jsxs as i}from"react/jsx-runtime";import"./button.css";import{Tooltip as n}from"../tooltip/tooltip.js";import{Icon as l}from"../icon/icon.js";import r from"react";const e=()=>i("svg",{className:"button__spinner",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",children:[o("circle",{className:"button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o("path",{className:"button__spinner-path",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),s=r.forwardRef(((r,s)=>{var{variant:a="primary",size:c="md",label:d,icon:m,iconStrokeWidth:u=1.5,iconOnly:b=!1,iconPosition:p="right",isLoading:h=!1,fullWidth:f=!1,tooltip:_,tooltipPosition:g="top",className:v="",disabled:N,children:j,"aria-label":w}=r,y=t(r,["variant","size","label","icon","iconStrokeWidth","iconOnly","iconPosition","isLoading","fullWidth","tooltip","tooltipPosition","className","disabled","children","aria-label"]);const x=["button",`button--${a}`,`button--${c}`,h&&"button--loading",b&&"button--icon-only",f&&"button--full-width",v].filter(Boolean).join(" "),W=null!=w?w:b?_:void 0,k=m?o(l,{icon:m,className:"button__icon",strokeWidth:u}):null,z=o("button",Object.assign({ref:s,className:x,disabled:h||N,"aria-busy":h||void 0,"aria-label":W},y,{children:b?h?o(e,{}):k:i("div",{className:"button__content",children:["left"===p&&!h&&k,d||j,"right"===p&&!h&&k,h&&o(e,{})]})}));return _?o(n,{text:_,position:g,children:z}):z}));s.displayName="Button";export{s as Button};
+//# sourceMappingURL=button.js.map

package/dist/{css/src → esm/components/src/calendar}/calendar.css

@@ -3,8 +3,7 @@
   max-width: 24rem;
   background-color: hsl(var(--background));
   border-radius: 0.5rem;
-  box-shadow: var(--primary-shadow);
-  border: 1px solid hsl(var(--primary-muted));
+  border: 1px solid hsl(var(--muted) / 50%);
   padding: 0 1rem;
 }
 
@@ -57,15 +56,12 @@
   text-align: center;
   font-size: 0.7rem;
   font-weight: 500;
-  padding: 0.35rem; /* increasing here will increase the width of the calendar */
+  padding: 0.25rem; /* increasing here will increase the width of the calendar */
   text-transform: uppercase;
 }
 
 .calendar-day {
   aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   cursor: pointer;
   border: none;
   background: none;
@@ -82,125 +78,96 @@
   color: hsl(var(--muted-200));
 }
 
-.calendar-day:not(:disabled):not(.selected):not(.in-range):hover {
+.calendar-day-inner {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+/* Hover */
+.calendar-day:not(:disabled):not(.selected):not(.in-range):hover .calendar-day-inner {
   background-color: hsl(var(--primary));
   color: white;
-  border-radius: 50%;
   transition: background-color 0.2s ease-in-out;
 }
 
-.calendar-day.selected {
+/* Selected */
+.calendar-day.selected .calendar-day-inner {
   background-color: hsl(var(--primary));
   color: white;
-  border-radius: 50%;
-  &:hover {
-    background-color: hsl(var(--primary-200));
-  }
 }
 
+.calendar-day.selected:hover .calendar-day-inner {
+  background-color: hsl(var(--primary-200));
+}
+
+/* In-range: full-width background strip on the button itself */
 .calendar-day.in-range:not(.range-start):not(.range-end) {
   background-color: hsl(var(--primary-muted));
   border-radius: 0;
-  &:hover {
-    color: hsl(var(--primary));
-    transition: color 0.2s ease-in-out;
-  }
 }
 
-.calendar-day.range-start {
-  background-color: hsl(var(--primary));
-  color: white;
-  border-radius: 50%;
-  position: relative;
-  &:hover {
-    &::before {
-      background-color: hsl(var(--primary-200));
-      transition: background-color 0.2s ease-in-out;
-    }
-  }
-  &::before {
-    content: attr(data-number);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: hsl(var(--primary));
-    z-index: 10;
-    border-radius: 50%;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: hsl(var(--primary-muted));
-    border-radius: 50% 0 0 50%;
-  }
-}
-
-.calendar-day.range-end {
+.calendar-day.in-range:not(.range-start):not(.range-end):hover .calendar-day-inner {
+  color: hsl(var(--primary));
+  transition: color 0.2s ease-in-out;
+}
+
+/* Range endpoints: circle on inner span */
+.calendar-day.range-start .calendar-day-inner,
+.calendar-day.range-end .calendar-day-inner {
   background-color: hsl(var(--primary));
   color: white;
-  border-radius: 50%;
-  position: relative;
-  &:hover {
-    &::before {
-      background-color: hsl(var(--primary-200));
-      transition: background-color 0.2s ease-in-out;
-    }
-  }
-  &::before {
-    content: attr(data-number);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: hsl(var(--primary));
-    z-index: 10;
-    border-radius: 50%;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    border-radius: 0 50% 50% 0;
-    background-color: hsl(var(--primary-muted));
-  }
 }
 
-.calendar-day.in-range.week-start:not(.range-start):not(.range-end) {
-  border-radius: 50% 0 0 50% !important;
+.calendar-day.range-start:hover .calendar-day-inner,
+.calendar-day.range-end:hover .calendar-day-inner {
+  background-color: hsl(var(--primary-200));
+  transition: background-color 0.2s ease-in-out;
 }
 
-.calendar-day.in-range.week-end:not(.range-start):not(.range-end) {
-  border-radius: 0 50% 50% 0 !important;
+/* Range tail — sits behind .calendar-day-inner (z-index: 1 < 2) */
+.calendar-day.range-start:not(.range-end)::after,
+.calendar-day.range-end:not(.range-start)::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: hsl(var(--primary-muted));
+  z-index: 1;
 }
 
 .calendar-day.range-start:not(.range-end)::after {
+  border-radius: 50% 0 0 50%;
   right: 0;
 }
 
 .calendar-day.range-end:not(.range-start)::after {
+  border-radius: 0 50% 50% 0;
   left: 0;
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end) {
+/* Week/month edge rounding for the in-range strip */
+.calendar-day.in-range.week-start:not(.range-start):not(.range-end) {
+  border-radius: 50% 0 0 50% !important;
+}
+
+.calendar-day.in-range.week-end:not(.range-start):not(.range-end) {
+  border-radius: 0 50% 50% 0 !important;
+}
+
+/* Today */
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end) .calendar-day-inner {
   font-weight: bold;
   color: hsl(var(--primary));
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(
-    :disabled
-  ):hover {
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(:disabled):hover
+  .calendar-day-inner {
   color: white;
 }
 
@@ -208,20 +175,19 @@
   z-index: 50;
   position: absolute;
   bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: white;
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end)
-  .today-indicator {
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end) .today-indicator {
   background-color: hsl(var(--primary));
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(
-    :disabled
-  ):hover
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(:disabled):hover
   .today-indicator {
   background-color: white;
 }

package/dist/esm/components/src/calendar/calendar.d.ts

@@ -0,0 +1,43 @@
+import "./calendar.css";
+/**
+ * @type {("single"|"range")} - Single date, or a start/end range (inclusive range mode behavior).
+ */
+export type CalendarMode = "single" | "range";
+/**
+ * Day grid calendar: single day or range, optional week selection, and disabled/min/max bounds.
+ *
+ * @property {CalendarMode} [mode] - `single` vs start/end `range`. Default `"single"`.
+ * @property {Date|[Date|null,Date|null]} [value] - Selected day or a tuple for range (nulls for partial range).
+ * @property {(v:Date|[Date|null,Date|null]) => void} [onChange] - Emits `Date` in single mode, tuple in range.
+ * @property {Date} [minDate] - No selection before this calendar day. Optional.
+ * @property {Date} [maxDate] - No selection after this calendar day. Optional.
+ * @property {boolean} [weekSelection] - In `range` mode, select whole weeks. Default `false`.
+ * @property {Date[]} [disabledDates] - Unselectable specific days.
+ * @property {0|1} [weekStartsOn] - 0 = Sunday, 1 = Monday. Default `0`.
+ */
+interface CalendarProps {
+    mode?: CalendarMode;
+    value?: Date | [Date | null, Date | null];
+    onChange?: (value: Date | [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    weekSelection?: boolean;
+    disabledDates?: Date[];
+    month?: Date;
+    onMonthChange?: (month: Date) => void;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
+    weekStartsOn?: 0 | 1;
+    className?: string;
+}
+/**
+ * Renders a navigable month grid; supports controlled `month`, hover state for range preview, and outside-month days.
+ *
+ * @param {CalendarProps} props - Mode, value, optional `weekSelection`, and `weekStartsOn`.
+ * @returns {JSX.Element} The calendar root with header and day cells.
+ */
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, weekSelection, disabledDates, month, onMonthChange, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, weekStartsOn, className, }: CalendarProps) => JSX.Element | null;
+export { Calendar };

package/dist/esm/components/src/calendar/calendar.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"./calendar.css";import{useState as n,useEffect as a,useCallback as r,useMemo as o}from"react";import{Icon as i}from"../icon/icon.js";const l=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],s=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],c=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},g=({mode:g="single",value:d,onChange:u,minDate:D,maxDate:h,weekSelection:m=!1,disabledDates:y=[],month:f,onMonthChange:S,hideHeader:v=!1,hideOutsideDays:w=!1,hoverDate:M,onDayMouseEnter:A,onDayMouseLeave:N,weekStartsOn:p=0,className:b})=>{const[F,k]=n((()=>f||("single"===g&&d instanceof Date?d:"range"===g&&Array.isArray(d)&&d[0]?d[0]:new Date)));a((()=>{f&&k(f)}),[f]),a((()=>{if(!f)if("single"===g&&d instanceof Date){const e=d;k((t=>t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()?t:e))}else if("range"===g&&Array.isArray(d)&&d[0]&&d[1]){const e=d[0];k((t=>t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()?t:e))}}),[d,g,f]);const[C,Y]=n(null),L=void 0!==M?M:C,x=1===p?s:l,O=r((e=>{const t=(e.getDay()-p+7)%7,n=new Date(e);n.setDate(e.getDate()-t);const a=new Date(n);return a.setDate(n.getDate()+6),[n,a]}),[p]),T=r((e=>{const t=e.getFullYear(),n=e.getMonth(),a=new Date(t,n,1),r=new Date(t,n+1,0).getDate(),o=(a.getDay()-p+7)%7,i=[],l=new Date(t,n,0);for(let e=o-1;e>=0;e--)i.push({date:new Date(t,n-1,l.getDate()-e),isCurrentMonth:!1});for(let e=1;e<=r;e++)i.push({date:new Date(t,n,e),isCurrentMonth:!0});const s=(5===Math.ceil(i.length/7)?35:42)-i.length;for(let e=1;e<=s;e++)i.push({date:new Date(t,n+1,e),isCurrentMonth:!1});return i}),[p]),j=o((()=>T(F)),[F,T]),E=r((e=>{const t=c(e);return!!(D&&t<c(D))||(!!(h&&t>c(h))||!!y.some((t=>t.toDateString()===e.toDateString())))}),[D,h,y]),H=r((e=>{if("single"===g&&d instanceof Date)return e.toDateString()===d.toDateString();if("range"===g&&Array.isArray(d)){const[t,n]=d;return!!t&&(n?e.toDateString()===t.toDateString()||e.toDateString()===n.toDateString():e.toDateString()===t.toDateString())}return!1}),[g,d]),I=r((e=>{if("range"!==g||!Array.isArray(d))return!1;const[t,n]=d,a=c(e);if(!t||!n){if(t&&L){const e=c(t<L?t:L),n=c(t<L?L:t);return a>e&&a<n}return!1}const r=c(t<n?t:n),o=c(t<n?n:t);return a>=r&&a<=o}),[g,d,L]),W=r((e=>{if(!E(e))if("single"===g)null==u||u(e);else if("range"===g){if(m){const[t,n]=O(e);return void(null==u||u([t,n]))}if(!Array.isArray(d))return void(null==u||u([e,null]));const[t,n]=d;if(!t||n)null==u||u([e,null]);else{null==u||u([t<e?t:e,t<e?e:t])}}}),[g,d,u,E,m,O]),$=r((e=>{if(A)A(e);else if("range"===g&&Array.isArray(d)&&d[0]&&!d[1])if(m){const[,t]=O(e);Y(t)}else Y(e)}),[g,d,m,O,A]),B=r((()=>{N?N():Y(null)}),[N]),P=r((()=>{const e=new Date(F.getFullYear(),F.getMonth()+1);k(e),null==S||S(e)}),[F,S]),q=r((()=>{const e=new Date(F.getFullYear(),F.getMonth()-1);k(e),null==S||S(e)}),[F,S]),z=r((e=>e.toDateString()===(new Date).toDateString()),[]),G=e("div",{className:"calendar-grid",children:[x.map((e=>t("div",{className:"calendar-weekday",children:e},e))),j.map((({date:n,isCurrentMonth:a})=>{var r,o;if(w&&!a)return t("div",{className:"calendar-day"},n.toISOString());const i=H(n),l=I(n),s=E(n),c="range"===g&&Array.isArray(d)&&(null===(r=d[0])||void 0===r?void 0:r.toDateString())===n.toDateString(),u="range"===g&&Array.isArray(d)&&(null===(o=d[1])||void 0===o?void 0:o.toDateString())===n.toDateString(),D=(n.getDay()-p+7)%7==0,h=(n.getDay()-p+7)%7==6,m=1===n.getDate(),y=new Date(n.getFullYear(),n.getMonth()+1,0).getDate()===n.getDate(),f=z(n);return t("button",{className:["calendar-day",a?"":"outside-month",i?"selected":"",l?"in-range":"",c?"range-start":"",u?"range-end":"",D||m?"week-start":"",h||y?"week-end":"",f?"today":""].filter(Boolean).join(" "),disabled:s,onClick:()=>W(n),onMouseEnter:()=>$(n),onMouseLeave:B,"aria-label":n.toLocaleDateString("default",{weekday:"long",month:"long",day:"numeric",year:"numeric"}),"aria-pressed":i,children:e("span",{className:"calendar-day-inner",children:[n.getDate(),f&&t("div",{className:"today-indicator"})]})},n.toISOString())}))]});return v?t("div",{className:"calendar-container calendar-container--no-header"+(b?` ${b}`:""),children:G}):e("div",{className:"calendar-container"+(b?` ${b}`:""),children:[e("div",{className:"calendar-header",children:[t("button",{className:"calendar-nav-button",onClick:q,"aria-label":"Previous month",children:t(i,{icon:"chevron-left"})}),e("div",{className:"calendar-title",children:[F.toLocaleString("default",{month:"long"}),", ",F.toLocaleString("default",{year:"numeric"})]}),t("button",{className:"calendar-nav-button",onClick:P,"aria-label":"Next month",children:t(i,{icon:"chevron-right"})})]}),G]})};export{g as Calendar};
+//# sourceMappingURL=calendar.js.map