@apcrda/ui 0.4.4 → 0.4.5

package/dist/components/Calendar/Calendar.d.ts

@@ -1,6 +1,6 @@
 import 'react-day-picker/style.css';
 import type { CalendarProps } from './Calendar.types';
-export declare function Calendar({ className, ...props }: CalendarProps): import("react").JSX.Element;
+export declare function Calendar({ className, captionLayout, startMonth, endMonth, ...props }: CalendarProps): import("react").JSX.Element;
 export declare namespace Calendar {
     var displayName: string;
 }

package/dist/index.js

@@ -7138,18 +7138,27 @@ function Ap(e) {
 }
 //#endregion
 //#region src/components/Calendar/Calendar.tsx
-function jp({ className: t, ...n }) {
+function jp({ className: t, captionLayout: n = "dropdown-years", startMonth: r, endMonth: i, ...a }) {
+	let o = (/* @__PURE__ */ new Date()).getFullYear();
 	return /* @__PURE__ */ N(Ap, {
 		showOutsideDays: !0,
+		captionLayout: n,
+		startMonth: r ?? new Date(o - 100, 0),
+		endMonth: i ?? new Date(o + 10, 11),
 		className: e("p-3", t),
 		classNames: {
 			months: "relative flex flex-col sm:flex-row gap-4",
 			month: "flex flex-col gap-4",
 			month_caption: "flex items-center justify-center h-9",
-			caption_label: "text-sm font-medium text-[var(--apcrda-color-foreground)]",
+			caption_label: "text-sm font-medium text-[var(--apcrda-color-foreground)] inline-flex items-center gap-1 select-none",
 			nav: "absolute top-0 left-0 right-0 flex items-center justify-between h-9 px-1",
 			button_previous: e("inline-flex h-7 w-7 items-center justify-center rounded-[var(--apcrda-radius-sm)] border border-[var(--apcrda-color-border)] bg-[var(--apcrda-color-surface)] opacity-50 hover:opacity-100 transition-opacity"),
 			button_next: e("inline-flex h-7 w-7 items-center justify-center rounded-[var(--apcrda-radius-sm)] border border-[var(--apcrda-color-border)] bg-[var(--apcrda-color-surface)] opacity-50 hover:opacity-100 transition-opacity"),
+			dropdowns: "inline-flex items-center gap-2",
+			dropdown_root: e("relative inline-flex items-center h-7 rounded-[var(--apcrda-radius-sm)]", "border border-[var(--apcrda-color-border)] bg-[var(--apcrda-color-surface)]", "px-2 cursor-pointer hover:border-[var(--apcrda-color-border-strong)] transition-colors"),
+			dropdown: "absolute inset-0 opacity-0 cursor-pointer w-full z-10",
+			years_dropdown: "",
+			months_dropdown: "",
 			month_grid: "w-full border-collapse",
 			weekdays: "flex",
 			weekday: "text-[var(--apcrda-color-muted)] rounded-[var(--apcrda-radius-sm)] w-9 font-normal text-xs text-center",
@@ -7165,8 +7174,8 @@ function jp({ className: t, ...n }) {
 			range_middle: "[&>button]:rounded-none [&>button]:bg-[var(--apcrda-color-surface-muted)]",
 			hidden: "invisible"
 		},
-		components: { Chevron: ({ orientation: e }) => N(e === "left" ? Rt : zt, { className: "h-4 w-4" }) },
-		...n
+		components: { Chevron: ({ orientation: e }) => e === "left" ? /* @__PURE__ */ N(Rt, { className: "h-4 w-4" }) : e === "down" ? /* @__PURE__ */ N(Lt, { className: "h-3 w-3 opacity-60" }) : /* @__PURE__ */ N(zt, { className: "h-4 w-4" }) },
+		...a
 	});
 }
 jp.displayName = "Calendar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apcrda/ui",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "APCRDA UI is a production-ready React design system for APCRDA applications.",
   "type": "module",
   "license": "MIT",