jaci-ui 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- bd92571: Add Calendar, DateRangePicker, and PinInput components, plus richer form field, input, tags, upload, and selection APIs.
+
+## 0.3.0
+
+### Minor Changes
+
+- 60fe9f1: Add the optional ThemeProvider and reusable IconButton, ButtonGroup, InputGroup, and EmptyState components.
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -87,6 +87,68 @@ DatePicker supports day, month and date-time values while keeping the public val
 Use `granularity="month"` to select a month normalized to its first day. Date-time popups stay
 open until `DatePicker.Close` is activated; day and month modes close after selection by default.
 
+`Calendar` is the standalone, server-renderable calendar engine. Pass `referenceDate` when the
+initial view must be deterministic during SSR or tests:
+
+```tsx
+<Calendar.Root
+  defaultValue={new Date(2025, 3, 15, 12)}
+  referenceDate={new Date(2025, 3, 1, 12)}
+  locale="en-US"
+>
+  <Calendar.Header>
+    <Calendar.Previous />
+    <Calendar.MonthSelect />
+    <Calendar.YearSelect />
+    <Calendar.Next />
+  </Calendar.Header>
+  <Calendar.Grid />
+</Calendar.Root>
+```
+
+`DateRangePicker` keeps its value as local `Date` objects and supports native form fields,
+previewing and optional closing after the second date:
+
+```tsx
+<DateRangePicker.Root name="period" closeOnSelect={false} referenceDate={new Date(2025, 3, 1, 12)}>
+  <DateRangePicker.Label>Period</DateRangePicker.Label>
+  <DateRangePicker.Trigger><DateRangePicker.Value /></DateRangePicker.Trigger>
+  <DateRangePicker.Portal>
+    <DateRangePicker.Positioner>
+      <DateRangePicker.Popup>
+        <DateRangePicker.Calendar />
+        <DateRangePicker.Preview />
+        <DateRangePicker.Close>Done</DateRangePicker.Close>
+      </DateRangePicker.Popup>
+    </DateRangePicker.Positioner>
+  </DateRangePicker.Portal>
+</DateRangePicker.Root>
+```
+
+For one-time codes, `PinInput` generates one accessible input per character and supports paste,
+auto-advance, password masking and native form submission:
+
+```tsx
+<PinInput.Root length={6} name="verification-code" otp onComplete={verifyCode}>
+  <PinInput.Label>Verification code</PinInput.Label>
+  <PinInput.Control><PinInput.Inputs /></PinInput.Control>
+</PinInput.Root>
+```
+
+Small composition helpers keep common layouts consistent:
+
+```tsx
+import { Button, ButtonGroup, EmptyState, IconButton, Input, InputGroup } from "jaci-ui";
+
+<IconButton aria-label="Close">×</IconButton>;
+<ButtonGroup><Button>Save</Button><Button>Cancel</Button></ButtonGroup>;
+<InputGroup><InputGroup.Addon>https://</InputGroup.Addon><Input aria-label="URL" /></InputGroup>;
+<EmptyState.Root><EmptyState.Title>No results</EmptyState.Title></EmptyState.Root>;
+```
+
+`IconButton` requires an accessible label for icon-only content. `ButtonGroup` and `InputGroup`
+also expose `.Root` aliases for compound composition.
+
 ## Server rendering and frameworks
 
 Static components are server-safe and interactive modules preserve their `"use client"` boundary.
@@ -128,6 +190,39 @@ the public CSS variables without a provider:
 }
 ```
 
+For applications that prefer a React API, `ThemeProvider` is optional. It can control the mode
+and apply token overrides to only its subtree:
+
+```tsx
+import { ThemeProvider, useTheme } from "jaci-ui";
+
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  return <button onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}>Toggle</button>;
+}
+
+export function App() {
+  return (
+    <ThemeProvider
+      defaultTheme="system"
+      ssrTheme="light"
+      tokens={{
+        colors: {
+          accent: { default: "#7c3aed", hover: "#6d28d9" },
+          fg: { onAccent: "#ffffff" },
+        },
+      }}
+    >
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
+```
+
+`system` uses `ssrTheme` during server rendering and reads `prefers-color-scheme` only after
+mounting. The provider is a client module, so Next.js App Router applications should place it
+inside a client boundary. Direct `data-jaci-theme` and `--jaci-*` variables remain supported.
+
 The package exposes semantic surface, foreground, border, status, spacing, radius, shadow and
 transition tokens. See the Theming guide in Storybook for the complete token vocabulary.
 

package/dist/components/button-group/button-group.cjs

@@ -0,0 +1,22 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_button_group = require("../../styled-system/recipes/button-group.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/button-group/button-group.tsx
+const ButtonGroupRoot = (0, react.forwardRef)(function ButtonGroup({ className, orientation = "horizontal", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_button_group.buttonGroup({ orientation }).root, className),
+		"data-jaci-component": "button-group",
+		"data-orientation": orientation,
+		"data-slot": "button-group",
+		role: props.role ?? "group"
+	});
+});
+const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });
+//#endregion
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupRoot = ButtonGroupRoot;
+
+//# sourceMappingURL=button-group.cjs.map

package/dist/components/button-group/button-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.cjs","names":["cx","buttonGroup"],"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { buttonGroup } from \"../../styled-system/recipes\";\n\nexport interface ButtonGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ButtonGroupRoot = forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(\n  { className, orientation = \"horizontal\", ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(buttonGroup({ orientation }).root, className)}\n      data-jaci-component=\"button-group\"\n      data-orientation={orientation}\n      data-slot=\"button-group\"\n      role={props.role ?? \"group\"}\n    />\n  );\n});\n\nexport const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });\n"],"mappings":";;;;;AAUA,MAAa,mBAAA,GAAA,MAAA,WAAA,CAA+D,SAAS,YACnF,EAAE,WAAW,cAAc,cAAc,GAAG,SAC5C,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,qBAAAA,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,SAAS;EAC1D,uBAAoB;EACpB,oBAAkB;EAClB,aAAU;EACV,MAAM,MAAM,QAAQ;CACrB,CAAA;AAEL,CAAC;AAED,MAAa,cAAc,OAAO,OAAO,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button-group/button-group.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/button-group/button-group.d.ts
+interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+declare const ButtonGroupRoot: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { ButtonGroup, ButtonGroupProps, ButtonGroupRoot };
+//# sourceMappingURL=button-group.d.cts.map

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/button-group/button-group.d.ts
+interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+declare const ButtonGroupRoot: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { ButtonGroup, ButtonGroupProps, ButtonGroupRoot };
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group/button-group.js

@@ -0,0 +1,21 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { buttonGroup } from "../../styled-system/recipes/button-group.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button-group/button-group.tsx
+const ButtonGroupRoot = forwardRef(function ButtonGroup({ className, orientation = "horizontal", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(buttonGroup({ orientation }).root, className),
+		"data-jaci-component": "button-group",
+		"data-orientation": orientation,
+		"data-slot": "button-group",
+		role: props.role ?? "group"
+	});
+});
+const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });
+//#endregion
+export { ButtonGroup, ButtonGroupRoot };
+
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { buttonGroup } from \"../../styled-system/recipes\";\n\nexport interface ButtonGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ButtonGroupRoot = forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(\n  { className, orientation = \"horizontal\", ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(buttonGroup({ orientation }).root, className)}\n      data-jaci-component=\"button-group\"\n      data-orientation={orientation}\n      data-slot=\"button-group\"\n      role={props.role ?? \"group\"}\n    />\n  );\n});\n\nexport const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA6C,SAAS,YACnF,EAAE,WAAW,cAAc,cAAc,GAAG,SAC5C,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,SAAS;EAC1D,uBAAoB;EACpB,oBAAkB;EAClB,aAAU;EACV,MAAM,MAAM,QAAQ;CACrB,CAAA;AAEL,CAAC;AAED,MAAa,cAAc,OAAO,OAAO,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button-group/index.d.cts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupProps, ButtonGroupRoot } from "./button-group.cjs";
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupRoot };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupProps, ButtonGroupRoot } from "./button-group.js";
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupRoot };

package/dist/components/calendar/calendar.cjs

@@ -0,0 +1,377 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_calendar = require("../../styled-system/recipes/calendar.cjs");
+const require_date_utils = require("../date-picker/date-utils.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/calendar/calendar.tsx
+const CalendarContext = (0, react.createContext)(null);
+function useCalendarContext() {
+	const context = (0, react.useContext)(CalendarContext);
+	if (!context) throw new Error("Calendar parts must be rendered inside Calendar.Root.");
+	return context;
+}
+function sameMonth(left, right) {
+	return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+const CalendarRoot = (0, react.forwardRef)(function CalendarRoot({ children, className, defaultValue = null, disabled = false, isDateDisabled, locale = "pt-BR", maxDate, minDate, onValueChange, referenceDate, value: controlledValue, weekStartsOn = 0, yearRange: configuredYearRange, ...props }, ref) {
+	const initialDate = controlledValue ?? defaultValue ?? referenceDate ?? /* @__PURE__ */ new Date();
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
+	const selected = controlledValue === void 0 ? uncontrolledValue : controlledValue;
+	const [month, setMonthState] = (0, react.useState)(() => require_date_utils.startOfMonth(initialDate));
+	const [focusedDate, setFocusedDate] = (0, react.useState)(selected ?? initialDate);
+	const dayRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const calendarId = (0, react.useId)();
+	const styles = require_calendar.calendar();
+	const today = (0, react.useMemo)(() => require_date_utils.createCalendarDate((referenceDate ?? /* @__PURE__ */ new Date()).getFullYear(), (referenceDate ?? /* @__PURE__ */ new Date()).getMonth(), (referenceDate ?? /* @__PURE__ */ new Date()).getDate()), [referenceDate]);
+	const minMonth = minDate ? require_date_utils.startOfMonth(minDate) : void 0;
+	const maxMonth = maxDate ? require_date_utils.startOfMonth(maxDate) : void 0;
+	const yearRange = (0, react.useMemo)(() => {
+		const start = configuredYearRange?.start ?? today.getFullYear() - 100;
+		const end = configuredYearRange?.end ?? today.getFullYear() + 20;
+		const years = [
+			selected?.getFullYear(),
+			minDate?.getFullYear(),
+			maxDate?.getFullYear()
+		].filter((year) => year !== void 0);
+		return {
+			start: Math.min(start, end, ...years),
+			end: Math.max(start, end, ...years)
+		};
+	}, [
+		configuredYearRange?.end,
+		configuredYearRange?.start,
+		maxDate,
+		minDate,
+		selected,
+		today
+	]);
+	const dateDisabled = (0, react.useCallback)((date) => Boolean(minDate && require_date_utils.isBeforeDay(date, minDate) || maxDate && require_date_utils.isAfterDay(date, maxDate) || isDateDisabled?.(date)), [
+		isDateDisabled,
+		maxDate,
+		minDate
+	]);
+	const monthDisabled = (0, react.useCallback)((date) => {
+		const first = require_date_utils.startOfMonth(date);
+		const last = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth() + 1, 0);
+		return Boolean(minDate && require_date_utils.isBeforeDay(last, minDate) || maxDate && require_date_utils.isAfterDay(first, maxDate));
+	}, [maxDate, minDate]);
+	const clampMonth = (0, react.useCallback)((date) => {
+		const normalized = require_date_utils.startOfMonth(date);
+		if (minMonth && require_date_utils.isBeforeDay(normalized, minMonth)) return minMonth;
+		if (maxMonth && require_date_utils.isAfterDay(normalized, maxMonth)) return maxMonth;
+		return normalized;
+	}, [maxMonth, minMonth]);
+	const setMonth = (0, react.useCallback)((date) => setMonthState(clampMonth(date)), [clampMonth]);
+	const canNavigate = (0, react.useCallback)((amount) => {
+		const next = require_date_utils.addMonths(month, amount);
+		return !(minMonth && require_date_utils.isBeforeDay(next, minMonth)) && !(maxMonth && require_date_utils.isAfterDay(next, maxMonth));
+	}, [
+		maxMonth,
+		minMonth,
+		month
+	]);
+	const setValue = (0, react.useCallback)((nextValue) => {
+		if (controlledValue === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [controlledValue, onValueChange]);
+	const onSelect = (0, react.useCallback)((date) => {
+		if (disabled || dateDisabled(date)) return;
+		const next = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), date.getDate());
+		setValue(next);
+		setFocusedDate(next);
+		setMonth(next);
+	}, [
+		dateDisabled,
+		disabled,
+		setMonth,
+		setValue
+	]);
+	const focusDate = (0, react.useCallback)((date, direction = 1) => {
+		let next = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), date.getDate());
+		const step = direction < 0 ? -1 : 1;
+		let attempts = 0;
+		while (dateDisabled(next) && attempts < 366) {
+			next = require_date_utils.addDays(next, step);
+			attempts += 1;
+		}
+		setFocusedDate(next);
+		setMonth(next);
+		const focusTarget = () => dayRefs.current.get(require_date_utils.dateKey(next))?.focus();
+		focusTarget();
+		queueMicrotask(focusTarget);
+	}, [dateDisabled, setMonth]);
+	const selectMonth = (0, react.useCallback)((monthIndex) => setMonth(require_date_utils.createCalendarDate(month.getFullYear(), monthIndex, 1)), [month, setMonth]);
+	const selectYear = (0, react.useCallback)((year) => setMonth(require_date_utils.createCalendarDate(year, month.getMonth(), 1)), [month, setMonth]);
+	const registerDay = (0, react.useCallback)((key, node) => {
+		if (node) dayRefs.current.set(key, node);
+		else dayRefs.current.delete(key);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!selected) return;
+		setFocusedDate(selected);
+		setMonthState((current) => sameMonth(current, selected) ? current : clampMonth(selected));
+	}, [clampMonth, selected]);
+	const context = {
+		calendarId,
+		canNavigate,
+		dateDisabled,
+		disabled,
+		focusedDate,
+		focusDate,
+		locale,
+		month,
+		monthDisabled,
+		onSelect,
+		registerDay,
+		selected,
+		selectMonth,
+		selectYear,
+		setMonth,
+		styles,
+		today,
+		weekStartsOn,
+		yearRange
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			...props,
+			"aria-label": props["aria-label"] ?? require_date_utils.formatMonthLabel(month, locale),
+			className: require_cx.cx(styles.root, className),
+			"data-jaci-component": "calendar",
+			"data-slot": "calendar",
+			ref,
+			children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalendarHeader, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarPrevious, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarCaption, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarNext, {})
+			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, {})] })
+		})
+	});
+});
+const CalendarHeader = (0, react.forwardRef)(function CalendarHeader({ className, ...props }, ref) {
+	const { styles } = useCalendarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: require_cx.cx(styles.header, className),
+		"data-slot": "calendar-header",
+		ref
+	});
+});
+const CalendarCaption = (0, react.forwardRef)(function CalendarCaption({ children, className, ...props }, ref) {
+	const { locale, month, styles } = useCalendarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		className: require_cx.cx(styles.caption, className),
+		"data-slot": "calendar-caption",
+		ref,
+		children: children ?? require_date_utils.formatMonthLabel(month, locale)
+	});
+});
+const CalendarNavigationButton = (0, react.forwardRef)(function CalendarNavigationButton({ amount = 1, children, className, onClick, ...props }, ref) {
+	const { canNavigate, month, setMonth, styles } = useCalendarContext();
+	const isDisabled = props.disabled || !canNavigate(amount);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? (amount < 0 ? "Previous month" : "Next month"),
+		className: require_cx.cx(styles.navigation, className),
+		"data-slot": amount < 0 ? "calendar-previous" : "calendar-next",
+		disabled: isDisabled,
+		onClick: (event) => {
+			if (!isDisabled) setMonth(require_date_utils.addMonths(month, amount));
+			onClick?.(event);
+		},
+		ref,
+		type: "button",
+		children: children ?? (amount < 0 ? "‹" : "›")
+	});
+});
+const CalendarPrevious = (0, react.forwardRef)(function CalendarPrevious(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarNavigationButton, {
+		...props,
+		amount: -1,
+		ref
+	});
+});
+const CalendarNext = (0, react.forwardRef)(function CalendarNext(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarNavigationButton, {
+		...props,
+		amount: 1,
+		ref
+	});
+});
+const CalendarMonthSelect = (0, react.forwardRef)(function CalendarMonthSelect({ className, ...props }, ref) {
+	const { locale, month, monthDisabled, selectMonth, styles } = useCalendarContext();
+	const labels = Array.from({ length: 12 }, (_, index) => new Intl.DateTimeFormat(locale, { month: "long" }).format(require_date_utils.createCalendarDate(2024, index, 1)));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select month",
+		className: require_cx.cx(styles.monthSelect, className),
+		"data-slot": "calendar-month-select",
+		onChange: (event) => selectMonth(Number(event.currentTarget.value)),
+		ref,
+		value: month.getMonth(),
+		children: labels.map((label, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			disabled: monthDisabled(require_date_utils.createCalendarDate(month.getFullYear(), index, 1)),
+			value: index,
+			children: label
+		}, label))
+	});
+});
+const CalendarYearSelect = (0, react.forwardRef)(function CalendarYearSelect({ className, ...props }, ref) {
+	const { month, monthDisabled, selectYear, styles, yearRange } = useCalendarContext();
+	const years = Array.from({ length: yearRange.end - yearRange.start + 1 }, (_, index) => yearRange.start + index);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select year",
+		className: require_cx.cx(styles.yearSelect, className),
+		"data-slot": "calendar-year-select",
+		onChange: (event) => selectYear(Number(event.currentTarget.value)),
+		ref,
+		value: month.getFullYear(),
+		children: years.map((year) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			disabled: monthDisabled(require_date_utils.createCalendarDate(year, month.getMonth(), 1)),
+			value: year,
+			children: year
+		}, year))
+	});
+});
+const CalendarDay = (0, react.forwardRef)(function CalendarDay({ children, className, date, disabled, onClick, onKeyDown, ...props }, ref) {
+	const { dateDisabled, disabled: calendarDisabled, focusDate, focusedDate, locale, month, onSelect, registerDay, selected, styles, today, weekStartsOn } = useCalendarContext();
+	const key = require_date_utils.dateKey(date);
+	const outsideMonth = !sameMonth(date, month);
+	const isDisabled = Boolean(disabled || calendarDisabled || dateDisabled(date));
+	const isSelected = require_date_utils.isSameDay(date, selected);
+	const isFocused = require_date_utils.isSameDay(date, focusedDate);
+	const isToday = require_date_utils.isSameDay(date, today);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(date),
+		"aria-current": isToday ? "date" : void 0,
+		"aria-selected": isSelected,
+		className: require_cx.cx(styles.day, className),
+		"data-date": key,
+		"data-disabled": isDisabled || void 0,
+		"data-outside-month": outsideMonth || void 0,
+		"data-selected": isSelected || void 0,
+		"data-slot": "calendar-day",
+		"data-today": isToday || void 0,
+		disabled: isDisabled,
+		onClick: (event) => {
+			onSelect(date);
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (!event.defaultPrevented) {
+				let nextDate;
+				switch (event.key) {
+					case "ArrowLeft":
+						nextDate = require_date_utils.addDays(date, -1);
+						break;
+					case "ArrowRight":
+						nextDate = require_date_utils.addDays(date, 1);
+						break;
+					case "ArrowUp":
+						nextDate = require_date_utils.addDays(date, -7);
+						break;
+					case "ArrowDown":
+						nextDate = require_date_utils.addDays(date, 7);
+						break;
+					case "Home":
+						nextDate = require_date_utils.addDays(date, -((date.getDay() - weekStartsOn + 7) % 7));
+						break;
+					case "End":
+						nextDate = require_date_utils.addDays(date, 6 - (date.getDay() - weekStartsOn + 7) % 7);
+						break;
+					case "PageUp":
+						nextDate = require_date_utils.addMonths(date, event.shiftKey ? -12 : -1);
+						break;
+					case "PageDown":
+						nextDate = require_date_utils.addMonths(date, event.shiftKey ? 12 : 1);
+						break;
+					case "Enter":
+					case " ":
+						if (!isDisabled) {
+							event.preventDefault();
+							onSelect(date);
+						}
+						break;
+				}
+				if (nextDate) {
+					event.preventDefault();
+					focusDate(nextDate, nextDate < date ? -1 : 1);
+				}
+			}
+			onKeyDown?.(event);
+		},
+		ref: (node) => {
+			registerDay(key, node);
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		role: "gridcell",
+		tabIndex: isFocused && !isDisabled ? 0 : -1,
+		type: "button",
+		children: children ?? date.getDate()
+	});
+});
+const CalendarGrid = (0, react.forwardRef)(function CalendarGrid({ "aria-label": ariaLabel, className, ...props }, ref) {
+	const { locale, month, styles, weekStartsOn } = useCalendarContext();
+	const days = (0, react.useMemo)(() => require_date_utils.getCalendarDays(month, weekStartsOn), [month, weekStartsOn]);
+	const weeks = (0, react.useMemo)(() => Array.from({ length: Math.ceil(days.length / 7) }, (_, index) => days.slice(index * 7, index * 7 + 7)), [days]);
+	const weekdays = (0, react.useMemo)(() => require_date_utils.getWeekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...props,
+		className: require_cx.cx(styles.calendar, className),
+		"data-slot": "calendar-grid",
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			className: styles.weekdays,
+			"data-slot": "calendar-weekdays",
+			children: weekdays.map((weekday) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.weekday,
+				"data-slot": "calendar-weekday",
+				children: weekday
+			}, weekday))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-label": ariaLabel ?? require_date_utils.formatMonthLabel(month, locale),
+			className: styles.grid,
+			"data-slot": "calendar-day-grid",
+			role: "grid",
+			children: weeks.map((week, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-rowindex": index + 1,
+				className: styles.row,
+				"data-slot": "calendar-week",
+				role: "row",
+				tabIndex: -1,
+				children: week.map((date) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarDay, { date }, require_date_utils.dateKey(date)))
+			}, week.map(require_date_utils.dateKey).join("-")))
+		})]
+	});
+});
+const Calendar = {
+	Root: CalendarRoot,
+	Header: CalendarHeader,
+	Caption: CalendarCaption,
+	Previous: CalendarPrevious,
+	Next: CalendarNext,
+	MonthSelect: CalendarMonthSelect,
+	YearSelect: CalendarYearSelect,
+	Grid: CalendarGrid,
+	Day: CalendarDay
+};
+//#endregion
+exports.Calendar = Calendar;
+exports.CalendarCaption = CalendarCaption;
+exports.CalendarDay = CalendarDay;
+exports.CalendarGrid = CalendarGrid;
+exports.CalendarHeader = CalendarHeader;
+exports.CalendarMonthSelect = CalendarMonthSelect;
+exports.CalendarNext = CalendarNext;
+exports.CalendarPrevious = CalendarPrevious;
+exports.CalendarRoot = CalendarRoot;
+exports.CalendarYearSelect = CalendarYearSelect;
+
+//# sourceMappingURL=calendar.cjs.map