@diwauhris/ui 1.0.0

package/lib/index64.cjs

@@ -0,0 +1,86 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/permission-matrix/PermissionMatrix.tsx
+/**
+* PermissionMatrix — Design System Component
+*
+* A grid showing which roles have which permissions, using checkboxes
+* or check icons. Purely presentational. No RBAC logic.
+*
+* Based on the "Effective Permission Matrix" pattern in RoleDetailPage.tsx
+* but domain-free.
+*
+* Accessibility:
+*   - <table> with <caption>
+*   - Column headers: role names
+*   - Row headers: permission names
+*   - Cell has aria-label: "Permission X for Role Y: granted/denied"
+*/
+function PermissionMatrix({ roles, permissions, caption = "Permission matrix", className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `w-full overflow-x-auto rounded-xl border border-slate-200 ${className}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			className: "w-full text-sm border-collapse",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("caption", {
+					className: "sr-only",
+					children: caption
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+					className: "border-b border-slate-100 bg-slate-50",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						scope: "col",
+						className: "px-5 py-3 text-left text-[11px] font-bold uppercase tracking-widest text-slate-500",
+						children: "Permission"
+					}), roles.map((role) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						scope: "col",
+						className: "px-4 py-3 text-center text-[11px] font-bold uppercase tracking-widest text-slate-500",
+						children: role
+					}, role))]
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+					className: "divide-y divide-slate-100 bg-white",
+					children: permissions.map((perm) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+						className: "hover:bg-slate-50/60",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							scope: "row",
+							className: "px-5 py-3 text-left text-xs font-semibold text-slate-700",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [perm.group && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-[9px] font-bold uppercase tracking-wider text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded",
+									children: perm.group
+								}), perm.label]
+							})
+						}), perm.cells.map((cell, ci) => {
+							const roleLabel = roles[ci] ?? "";
+							const cellLabel = `${perm.label} for ${roleLabel}: ${cell.granted ? "granted" : "denied"}${cell.inherited ? " (inherited)" : ""}`;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "px-4 py-3 text-center",
+								"aria-label": cellLabel,
+								children: cell.granted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto ${cell.inherited ? "bg-brand-blue/15 text-brand-blue/60" : "bg-brand-blue text-white"}`,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+										size: 11,
+										strokeWidth: 2.5,
+										"aria-hidden": "true"
+									})
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto bg-slate-100 text-slate-300",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+										size: 11,
+										"aria-hidden": "true"
+									})
+								})
+							}, ci);
+						})]
+					}, perm.label))
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.PermissionMatrix = PermissionMatrix;
+
+//# sourceMappingURL=index64.cjs.map

package/lib/index64.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index64.cjs","names":[],"sources":["../src/ui-library/gallery/permission-matrix/PermissionMatrix.tsx"],"sourcesContent":["/**\n * PermissionMatrix — Design System Component\n *\n * A grid showing which roles have which permissions, using checkboxes\n * or check icons. Purely presentational. No RBAC logic.\n *\n * Based on the \"Effective Permission Matrix\" pattern in RoleDetailPage.tsx\n * but domain-free.\n *\n * Accessibility:\n *   - <table> with <caption>\n *   - Column headers: role names\n *   - Row headers: permission names\n *   - Cell has aria-label: \"Permission X for Role Y: granted/denied\"\n */\n\nimport { Check, Minus } from 'lucide-react';\n\nexport interface PermissionMatrixCell {\n  granted: boolean;\n  /** If true, the cell is read-only and visually subdued */\n  inherited?: boolean;\n}\n\nexport interface PermissionMatrixProps {\n  /** Column headers (roles) */\n  roles: string[];\n  /** Row definitions */\n  permissions: Array<{\n    label: string;\n    group?: string;\n    cells: PermissionMatrixCell[];\n  }>;\n  caption?: string;\n  className?: string;\n}\n\nexport function PermissionMatrix({\n  roles,\n  permissions,\n  caption = 'Permission matrix',\n  className = '',\n}: PermissionMatrixProps) {\n  return (\n    <div className={`w-full overflow-x-auto rounded-xl border border-slate-200 ${className}`}>\n      <table className=\"w-full text-sm border-collapse\">\n        <caption className=\"sr-only\">{caption}</caption>\n        <thead>\n          <tr className=\"border-b border-slate-100 bg-slate-50\">\n            <th scope=\"col\" className=\"px-5 py-3 text-left text-[11px] font-bold uppercase tracking-widest text-slate-500\">\n              Permission\n            </th>\n            {roles.map((role) => (\n              <th\n                key={role}\n                scope=\"col\"\n                className=\"px-4 py-3 text-center text-[11px] font-bold uppercase tracking-widest text-slate-500\"\n              >\n                {role}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-slate-100 bg-white\">\n          {permissions.map((perm) => (\n            <tr key={perm.label} className=\"hover:bg-slate-50/60\">\n              <th\n                scope=\"row\"\n                className=\"px-5 py-3 text-left text-xs font-semibold text-slate-700\"\n              >\n                <div className=\"flex items-center gap-2\">\n                  {perm.group && (\n                    <span className=\"text-[9px] font-bold uppercase tracking-wider text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded\">\n                      {perm.group}\n                    </span>\n                  )}\n                  {perm.label}\n                </div>\n              </th>\n              {perm.cells.map((cell, ci) => {\n                const roleLabel = roles[ci] ?? '';\n                const cellLabel = `${perm.label} for ${roleLabel}: ${cell.granted ? 'granted' : 'denied'}${cell.inherited ? ' (inherited)' : ''}`;\n                return (\n                  <td\n                    key={ci}\n                    className=\"px-4 py-3 text-center\"\n                    aria-label={cellLabel}\n                  >\n                    {cell.granted ? (\n                      <span className={`inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto ${cell.inherited ? 'bg-brand-blue/15 text-brand-blue/60' : 'bg-brand-blue text-white'}`}>\n                        <Check size={11} strokeWidth={2.5} aria-hidden=\"true\" />\n                      </span>\n                    ) : (\n                      <span className=\"inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto bg-slate-100 text-slate-300\">\n                        <Minus size={11} aria-hidden=\"true\" />\n                      </span>\n                    )}\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,SAAgB,iBAAiB,EAC/B,OACA,aACA,UAAU,qBACV,YAAY,MACY;CACxB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,6DAA6D;EAC3E,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;GAAO,WAAU;GAAjB,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;KAAS,WAAU;KAAW,UAAA;IAAiB,CAAA;IAC/C,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;KAAI,WAAU;KAAd,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAAI,OAAM;MAAM,WAAU;MAAqF,UAAA;KAE3G,CAAA,GACH,MAAM,KAAK,SACV,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAEE,OAAM;MACN,WAAU;MAET,UAAA;KACC,GALG,IAKH,CACL,CACC;IACC,CAAA,EAAA,CAAA;IACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KAAO,WAAU;KACd,UAAA,YAAY,KAAK,SAChB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;MAAqB,WAAU;MAA/B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;OACE,OAAM;OACN,WAAU;OAEV,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACG,KAAK,SACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAU;SACb,UAAA,KAAK;QACF,CAAA,GAEP,KAAK,KACH;;MACH,CAAA,GACH,KAAK,MAAM,KAAK,MAAM,OAAO;OAC5B,MAAM,YAAY,MAAM,OAAO;OAC/B,MAAM,YAAY,GAAG,KAAK,MAAM,OAAO,UAAU,IAAI,KAAK,UAAU,YAAY,WAAW,KAAK,YAAY,iBAAiB;OAC7H,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;QAEE,WAAU;QACV,cAAY;QAEX,UAAA,KAAK,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAW,wEAAwE,KAAK,YAAY,wCAAwC;SAChJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;UAAO,MAAM;UAAI,aAAa;UAAK,eAAY;SAAQ,CAAA;QACnD,CAAA,IAEN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,WAAU;SACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;UAAO,MAAM;UAAI,eAAY;SAAQ,CAAA;QACjC,CAAA;OAEN,GAbG,EAaH;MAER,CAAC,CACC;KAnCK,GAAA,KAAK,KAmCV,CACL;IACI,CAAA;GACF;;CACJ,CAAA;AAET"}

package/lib/index64.mjs

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Minus } from "lucide-react";
+//#region src/ui-library/gallery/permission-matrix/PermissionMatrix.tsx
+/**
+* PermissionMatrix — Design System Component
+*
+* A grid showing which roles have which permissions, using checkboxes
+* or check icons. Purely presentational. No RBAC logic.
+*
+* Based on the "Effective Permission Matrix" pattern in RoleDetailPage.tsx
+* but domain-free.
+*
+* Accessibility:
+*   - <table> with <caption>
+*   - Column headers: role names
+*   - Row headers: permission names
+*   - Cell has aria-label: "Permission X for Role Y: granted/denied"
+*/
+function PermissionMatrix({ roles, permissions, caption = "Permission matrix", className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full overflow-x-auto rounded-xl border border-slate-200 ${className}`,
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-sm border-collapse",
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					className: "sr-only",
+					children: caption
+				}),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+					className: "border-b border-slate-100 bg-slate-50",
+					children: [/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "px-5 py-3 text-left text-[11px] font-bold uppercase tracking-widest text-slate-500",
+						children: "Permission"
+					}), roles.map((role) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "px-4 py-3 text-center text-[11px] font-bold uppercase tracking-widest text-slate-500",
+						children: role
+					}, role))]
+				}) }),
+				/* @__PURE__ */ jsx("tbody", {
+					className: "divide-y divide-slate-100 bg-white",
+					children: permissions.map((perm) => /* @__PURE__ */ jsxs("tr", {
+						className: "hover:bg-slate-50/60",
+						children: [/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							className: "px-5 py-3 text-left text-xs font-semibold text-slate-700",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [perm.group && /* @__PURE__ */ jsx("span", {
+									className: "text-[9px] font-bold uppercase tracking-wider text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded",
+									children: perm.group
+								}), perm.label]
+							})
+						}), perm.cells.map((cell, ci) => {
+							const roleLabel = roles[ci] ?? "";
+							const cellLabel = `${perm.label} for ${roleLabel}: ${cell.granted ? "granted" : "denied"}${cell.inherited ? " (inherited)" : ""}`;
+							return /* @__PURE__ */ jsx("td", {
+								className: "px-4 py-3 text-center",
+								"aria-label": cellLabel,
+								children: cell.granted ? /* @__PURE__ */ jsx("span", {
+									className: `inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto ${cell.inherited ? "bg-brand-blue/15 text-brand-blue/60" : "bg-brand-blue text-white"}`,
+									children: /* @__PURE__ */ jsx(Check, {
+										size: 11,
+										strokeWidth: 2.5,
+										"aria-hidden": "true"
+									})
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto bg-slate-100 text-slate-300",
+									children: /* @__PURE__ */ jsx(Minus, {
+										size: 11,
+										"aria-hidden": "true"
+									})
+								})
+							}, ci);
+						})]
+					}, perm.label))
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { PermissionMatrix };
+
+//# sourceMappingURL=index64.mjs.map

package/lib/index64.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index64.mjs","names":[],"sources":["../src/ui-library/gallery/permission-matrix/PermissionMatrix.tsx"],"sourcesContent":["/**\n * PermissionMatrix — Design System Component\n *\n * A grid showing which roles have which permissions, using checkboxes\n * or check icons. Purely presentational. No RBAC logic.\n *\n * Based on the \"Effective Permission Matrix\" pattern in RoleDetailPage.tsx\n * but domain-free.\n *\n * Accessibility:\n *   - <table> with <caption>\n *   - Column headers: role names\n *   - Row headers: permission names\n *   - Cell has aria-label: \"Permission X for Role Y: granted/denied\"\n */\n\nimport { Check, Minus } from 'lucide-react';\n\nexport interface PermissionMatrixCell {\n  granted: boolean;\n  /** If true, the cell is read-only and visually subdued */\n  inherited?: boolean;\n}\n\nexport interface PermissionMatrixProps {\n  /** Column headers (roles) */\n  roles: string[];\n  /** Row definitions */\n  permissions: Array<{\n    label: string;\n    group?: string;\n    cells: PermissionMatrixCell[];\n  }>;\n  caption?: string;\n  className?: string;\n}\n\nexport function PermissionMatrix({\n  roles,\n  permissions,\n  caption = 'Permission matrix',\n  className = '',\n}: PermissionMatrixProps) {\n  return (\n    <div className={`w-full overflow-x-auto rounded-xl border border-slate-200 ${className}`}>\n      <table className=\"w-full text-sm border-collapse\">\n        <caption className=\"sr-only\">{caption}</caption>\n        <thead>\n          <tr className=\"border-b border-slate-100 bg-slate-50\">\n            <th scope=\"col\" className=\"px-5 py-3 text-left text-[11px] font-bold uppercase tracking-widest text-slate-500\">\n              Permission\n            </th>\n            {roles.map((role) => (\n              <th\n                key={role}\n                scope=\"col\"\n                className=\"px-4 py-3 text-center text-[11px] font-bold uppercase tracking-widest text-slate-500\"\n              >\n                {role}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-slate-100 bg-white\">\n          {permissions.map((perm) => (\n            <tr key={perm.label} className=\"hover:bg-slate-50/60\">\n              <th\n                scope=\"row\"\n                className=\"px-5 py-3 text-left text-xs font-semibold text-slate-700\"\n              >\n                <div className=\"flex items-center gap-2\">\n                  {perm.group && (\n                    <span className=\"text-[9px] font-bold uppercase tracking-wider text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded\">\n                      {perm.group}\n                    </span>\n                  )}\n                  {perm.label}\n                </div>\n              </th>\n              {perm.cells.map((cell, ci) => {\n                const roleLabel = roles[ci] ?? '';\n                const cellLabel = `${perm.label} for ${roleLabel}: ${cell.granted ? 'granted' : 'denied'}${cell.inherited ? ' (inherited)' : ''}`;\n                return (\n                  <td\n                    key={ci}\n                    className=\"px-4 py-3 text-center\"\n                    aria-label={cellLabel}\n                  >\n                    {cell.granted ? (\n                      <span className={`inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto ${cell.inherited ? 'bg-brand-blue/15 text-brand-blue/60' : 'bg-brand-blue text-white'}`}>\n                        <Check size={11} strokeWidth={2.5} aria-hidden=\"true\" />\n                      </span>\n                    ) : (\n                      <span className=\"inline-flex items-center justify-center h-5 w-5 rounded-full mx-auto bg-slate-100 text-slate-300\">\n                        <Minus size={11} aria-hidden=\"true\" />\n                      </span>\n                    )}\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,SAAgB,iBAAiB,EAC/B,OACA,aACA,UAAU,qBACV,YAAY,MACY;CACxB,OACE,oBAAC,OAAD;EAAK,WAAW,6DAA6D;EAC3E,UAAA,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA;IACE,oBAAC,WAAD;KAAS,WAAU;KAAW,UAAA;IAAiB,CAAA;IAC/C,oBAAC,SAAD,EAAA,UACE,qBAAC,MAAD;KAAI,WAAU;KAAd,UAAA,CACE,oBAAC,MAAD;MAAI,OAAM;MAAM,WAAU;MAAqF,UAAA;KAE3G,CAAA,GACH,MAAM,KAAK,SACV,oBAAC,MAAD;MAEE,OAAM;MACN,WAAU;MAET,UAAA;KACC,GALG,IAKH,CACL,CACC;IACC,CAAA,EAAA,CAAA;IACP,oBAAC,SAAD;KAAO,WAAU;KACd,UAAA,YAAY,KAAK,SAChB,qBAAC,MAAD;MAAqB,WAAU;MAA/B,UAAA,CACE,oBAAC,MAAD;OACE,OAAM;OACN,WAAU;OAEV,UAAA,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACG,KAAK,SACJ,oBAAC,QAAD;SAAM,WAAU;SACb,UAAA,KAAK;QACF,CAAA,GAEP,KAAK,KACH;;MACH,CAAA,GACH,KAAK,MAAM,KAAK,MAAM,OAAO;OAC5B,MAAM,YAAY,MAAM,OAAO;OAC/B,MAAM,YAAY,GAAG,KAAK,MAAM,OAAO,UAAU,IAAI,KAAK,UAAU,YAAY,WAAW,KAAK,YAAY,iBAAiB;OAC7H,OACE,oBAAC,MAAD;QAEE,WAAU;QACV,cAAY;QAEX,UAAA,KAAK,UACJ,oBAAC,QAAD;SAAM,WAAW,wEAAwE,KAAK,YAAY,wCAAwC;SAChJ,UAAA,oBAAC,OAAD;UAAO,MAAM;UAAI,aAAa;UAAK,eAAY;SAAQ,CAAA;QACnD,CAAA,IAEN,oBAAC,QAAD;SAAM,WAAU;SACd,UAAA,oBAAC,OAAD;UAAO,MAAM;UAAI,eAAY;SAAQ,CAAA;QACjC,CAAA;OAEN,GAbG,EAaH;MAER,CAAC,CACC;KAnCK,GAAA,KAAK,KAmCV,CACL;IACI,CAAA;GACF;;CACJ,CAAA;AAET"}

package/lib/index65.cjs

@@ -0,0 +1,156 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/calendar/Calendar.tsx
+/**
+* Calendar — Design System Component
+*
+* A standalone month-view calendar grid for date selection and display.
+* Controlled or uncontrolled. No time support.
+*
+* Accessibility:
+*   - role="grid" for the calendar table
+*   - role="gridcell" for each day cell
+*   - aria-label on each cell: "Day Month Year, [Today|Selected]"
+*   - aria-selected on selected day
+*   - aria-current="date" on today
+*   - Keyboard: ArrowKeys navigate days, Enter/Space select
+*   - Previous/Next month buttons have aria-label
+*/
+var MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+var DAYS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function Calendar({ value, defaultValue, onChange, minDate, maxDate, className = "" }) {
+	const today = /* @__PURE__ */ new Date();
+	today.setHours(0, 0, 0, 0);
+	const [internal, setInternal] = (0, react.useState)(defaultValue ?? null);
+	const selected = value !== void 0 ? value : internal;
+	const [viewYear, setViewYear] = (0, react.useState)((selected ?? today).getFullYear());
+	const [viewMonth, setViewMonth] = (0, react.useState)((selected ?? today).getMonth());
+	const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+	const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+	const prevMonth = () => {
+		if (viewMonth === 0) {
+			setViewMonth(11);
+			setViewYear((y) => y - 1);
+		} else setViewMonth((m) => m - 1);
+	};
+	const nextMonth = () => {
+		if (viewMonth === 11) {
+			setViewMonth(0);
+			setViewYear((y) => y + 1);
+		} else setViewMonth((m) => m + 1);
+	};
+	const handleSelect = (day) => {
+		const date = new Date(viewYear, viewMonth, day);
+		if (minDate && date < minDate) return;
+		if (maxDate && date > maxDate) return;
+		if (!value) setInternal(date);
+		onChange?.(date);
+	};
+	const cells = [...Array(firstDay).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
+	while (cells.length % 7 !== 0) cells.push(null);
+	const weeks = [];
+	for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `inline-block select-none rounded-2xl border border-slate-200 bg-white p-4 shadow-sm ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-3 flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: prevMonth,
+					"aria-label": "Previous month",
+					className: "rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-sm font-bold text-slate-800",
+					children: [
+						MONTHS[viewMonth],
+						" ",
+						viewYear
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: nextMonth,
+					"aria-label": "Next month",
+					className: "rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			role: "grid",
+			"aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+			className: "w-full border-collapse",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: DAYS.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+				scope: "col",
+				className: "pb-2 text-center text-[10px] font-bold uppercase tracking-widest text-slate-400",
+				children: d
+			}, d)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: weeks.map((week, wi) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: week.map((day, di) => {
+				if (!day) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+					role: "gridcell",
+					"aria-label": "Empty"
+				}, di);
+				const date = new Date(viewYear, viewMonth, day);
+				const isToday = isSameDay(date, today);
+				const isSelected = !!selected && isSameDay(date, selected);
+				const isDisabled = (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);
+				const label = `${day} ${MONTHS[viewMonth]} ${viewYear}${isToday ? ", Today" : ""}${isSelected ? ", Selected" : ""}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+					role: "gridcell",
+					"aria-label": label,
+					"aria-selected": isSelected,
+					className: "p-0.5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => handleSelect(day),
+						disabled: isDisabled,
+						"aria-current": isToday ? "date" : void 0,
+						className: [
+							"flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition",
+							"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+							"disabled:cursor-not-allowed disabled:opacity-30",
+							isSelected ? "bg-brand-blue text-white shadow-md" : isToday ? "border border-brand-blue/60 text-brand-blue hover:bg-blue-50" : "text-slate-700 hover:bg-slate-100"
+						].join(" "),
+						children: day
+					})
+				}, di);
+			}) }, wi)) })]
+		})]
+	});
+}
+//#endregion
+exports.Calendar = Calendar;
+
+//# sourceMappingURL=index65.cjs.map

package/lib/index65.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index65.cjs","names":[],"sources":["../src/ui-library/gallery/calendar/Calendar.tsx"],"sourcesContent":["/**\n * Calendar — Design System Component\n *\n * A standalone month-view calendar grid for date selection and display.\n * Controlled or uncontrolled. No time support.\n *\n * Accessibility:\n *   - role=\"grid\" for the calendar table\n *   - role=\"gridcell\" for each day cell\n *   - aria-label on each cell: \"Day Month Year, [Today|Selected]\"\n *   - aria-selected on selected day\n *   - aria-current=\"date\" on today\n *   - Keyboard: ArrowKeys navigate days, Enter/Space select\n *   - Previous/Next month buttons have aria-label\n */\n\nimport { useState } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport interface CalendarProps {\n  /** Selected date (controlled). */\n  value?: Date | null;\n  /** Default selected date (uncontrolled). */\n  defaultValue?: Date | null;\n  /** Called when a date is selected. */\n  onChange?: (date: Date) => void;\n  /** Minimum selectable date. */\n  minDate?: Date;\n  /** Maximum selectable date. */\n  maxDate?: Date;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nconst MONTHS = [\n  'January','February','March','April','May','June',\n  'July','August','September','October','November','December',\n];\nconst DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa'];\n\nfunction isSameDay(a: Date, b: Date) {\n  return a.getFullYear() === b.getFullYear()\n    && a.getMonth() === b.getMonth()\n    && a.getDate() === b.getDate();\n}\n\nexport function Calendar({\n  value,\n  defaultValue,\n  onChange,\n  minDate,\n  maxDate,\n  className = '',\n}: CalendarProps) {\n  const today = new Date();\n  today.setHours(0, 0, 0, 0);\n\n  const [internal, setInternal] = useState<Date | null>(defaultValue ?? null);\n  const selected = value !== undefined ? value : internal;\n\n  const [viewYear, setViewYear] = useState(\n    (selected ?? today).getFullYear(),\n  );\n  const [viewMonth, setViewMonth] = useState(\n    (selected ?? today).getMonth(),\n  );\n\n  const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n\n  const prevMonth = () => {\n    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); }\n    else setViewMonth(m => m - 1);\n  };\n  const nextMonth = () => {\n    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); }\n    else setViewMonth(m => m + 1);\n  };\n\n  const handleSelect = (day: number) => {\n    const date = new Date(viewYear, viewMonth, day);\n    if (minDate && date < minDate) return;\n    if (maxDate && date > maxDate) return;\n    if (!value) setInternal(date);\n    onChange?.(date);\n  };\n\n  // Build calendar grid\n  const cells: Array<number | null> = [\n    ...Array(firstDay).fill(null),\n    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n  ];\n  // Pad to complete last row\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  return (\n    <div className={`inline-block select-none rounded-2xl border border-slate-200 bg-white p-4 shadow-sm ${className}`}>\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <button\n          type=\"button\"\n          onClick={prevMonth}\n          aria-label=\"Previous month\"\n          className=\"rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n        >\n          <ChevronLeft size={16} aria-hidden=\"true\" />\n        </button>\n        <span className=\"text-sm font-bold text-slate-800\">\n          {MONTHS[viewMonth]} {viewYear}\n        </span>\n        <button\n          type=\"button\"\n          onClick={nextMonth}\n          aria-label=\"Next month\"\n          className=\"rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n        >\n          <ChevronRight size={16} aria-hidden=\"true\" />\n        </button>\n      </div>\n\n      {/* Grid */}\n      <table\n        role=\"grid\"\n        aria-label={`${MONTHS[viewMonth]} ${viewYear}`}\n        className=\"w-full border-collapse\"\n      >\n        <thead>\n          <tr>\n            {DAYS.map((d) => (\n              <th key={d} scope=\"col\" className=\"pb-2 text-center text-[10px] font-bold uppercase tracking-widest text-slate-400\">\n                {d}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {weeks.map((week, wi) => (\n            <tr key={wi}>\n              {week.map((day, di) => {\n                if (!day) return <td key={di} role=\"gridcell\" aria-label=\"Empty\" />;\n                const date = new Date(viewYear, viewMonth, day);\n                const isToday = isSameDay(date, today);\n                const isSelected = !!selected && isSameDay(date, selected);\n                const isDisabled = (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);\n                const label = `${day} ${MONTHS[viewMonth]} ${viewYear}${isToday ? ', Today' : ''}${isSelected ? ', Selected' : ''}`;\n\n                return (\n                  <td key={di} role=\"gridcell\" aria-label={label} aria-selected={isSelected} className=\"p-0.5\">\n                    <button\n                      type=\"button\"\n                      onClick={() => handleSelect(day)}\n                      disabled={isDisabled}\n                      aria-current={isToday ? 'date' : undefined}\n                      className={[\n                        'flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition',\n                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n                        'disabled:cursor-not-allowed disabled:opacity-30',\n                        isSelected\n                          ? 'bg-brand-blue text-white shadow-md'\n                          : isToday\n                          ? 'border border-brand-blue/60 text-brand-blue hover:bg-blue-50'\n                          : 'text-slate-700 hover:bg-slate-100',\n                      ].join(' ')}\n                    >\n                      {day}\n                    </button>\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/lib/index65.mjs

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/ui-library/gallery/calendar/Calendar.tsx
+/**
+* Calendar — Design System Component
+*
+* A standalone month-view calendar grid for date selection and display.
+* Controlled or uncontrolled. No time support.
+*
+* Accessibility:
+*   - role="grid" for the calendar table
+*   - role="gridcell" for each day cell
+*   - aria-label on each cell: "Day Month Year, [Today|Selected]"
+*   - aria-selected on selected day
+*   - aria-current="date" on today
+*   - Keyboard: ArrowKeys navigate days, Enter/Space select
+*   - Previous/Next month buttons have aria-label
+*/
+var MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+var DAYS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function Calendar({ value, defaultValue, onChange, minDate, maxDate, className = "" }) {
+	const today = /* @__PURE__ */ new Date();
+	today.setHours(0, 0, 0, 0);
+	const [internal, setInternal] = useState(defaultValue ?? null);
+	const selected = value !== void 0 ? value : internal;
+	const [viewYear, setViewYear] = useState((selected ?? today).getFullYear());
+	const [viewMonth, setViewMonth] = useState((selected ?? today).getMonth());
+	const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+	const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+	const prevMonth = () => {
+		if (viewMonth === 0) {
+			setViewMonth(11);
+			setViewYear((y) => y - 1);
+		} else setViewMonth((m) => m - 1);
+	};
+	const nextMonth = () => {
+		if (viewMonth === 11) {
+			setViewMonth(0);
+			setViewYear((y) => y + 1);
+		} else setViewMonth((m) => m + 1);
+	};
+	const handleSelect = (day) => {
+		const date = new Date(viewYear, viewMonth, day);
+		if (minDate && date < minDate) return;
+		if (maxDate && date > maxDate) return;
+		if (!value) setInternal(date);
+		onChange?.(date);
+	};
+	const cells = [...Array(firstDay).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
+	while (cells.length % 7 !== 0) cells.push(null);
+	const weeks = [];
+	for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `inline-block select-none rounded-2xl border border-slate-200 bg-white p-4 shadow-sm ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-3 flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: prevMonth,
+					"aria-label": "Previous month",
+					className: "rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-sm font-bold text-slate-800",
+					children: [
+						MONTHS[viewMonth],
+						" ",
+						viewYear
+					]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: nextMonth,
+					"aria-label": "Next month",
+					className: "rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("table", {
+			role: "grid",
+			"aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+			className: "w-full border-collapse",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: DAYS.map((d) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				className: "pb-2 text-center text-[10px] font-bold uppercase tracking-widest text-slate-400",
+				children: d
+			}, d)) }) }), /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, wi) => /* @__PURE__ */ jsx("tr", { children: week.map((day, di) => {
+				if (!day) return /* @__PURE__ */ jsx("td", {
+					role: "gridcell",
+					"aria-label": "Empty"
+				}, di);
+				const date = new Date(viewYear, viewMonth, day);
+				const isToday = isSameDay(date, today);
+				const isSelected = !!selected && isSameDay(date, selected);
+				const isDisabled = (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);
+				const label = `${day} ${MONTHS[viewMonth]} ${viewYear}${isToday ? ", Today" : ""}${isSelected ? ", Selected" : ""}`;
+				return /* @__PURE__ */ jsx("td", {
+					role: "gridcell",
+					"aria-label": label,
+					"aria-selected": isSelected,
+					className: "p-0.5",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => handleSelect(day),
+						disabled: isDisabled,
+						"aria-current": isToday ? "date" : void 0,
+						className: [
+							"flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition",
+							"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+							"disabled:cursor-not-allowed disabled:opacity-30",
+							isSelected ? "bg-brand-blue text-white shadow-md" : isToday ? "border border-brand-blue/60 text-brand-blue hover:bg-blue-50" : "text-slate-700 hover:bg-slate-100"
+						].join(" "),
+						children: day
+					})
+				}, di);
+			}) }, wi)) })]
+		})]
+	});
+}
+//#endregion
+export { Calendar };
+
+//# sourceMappingURL=index65.mjs.map

package/lib/index65.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index65.mjs","names":[],"sources":["../src/ui-library/gallery/calendar/Calendar.tsx"],"sourcesContent":["/**\n * Calendar — Design System Component\n *\n * A standalone month-view calendar grid for date selection and display.\n * Controlled or uncontrolled. No time support.\n *\n * Accessibility:\n *   - role=\"grid\" for the calendar table\n *   - role=\"gridcell\" for each day cell\n *   - aria-label on each cell: \"Day Month Year, [Today|Selected]\"\n *   - aria-selected on selected day\n *   - aria-current=\"date\" on today\n *   - Keyboard: ArrowKeys navigate days, Enter/Space select\n *   - Previous/Next month buttons have aria-label\n */\n\nimport { useState } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport interface CalendarProps {\n  /** Selected date (controlled). */\n  value?: Date | null;\n  /** Default selected date (uncontrolled). */\n  defaultValue?: Date | null;\n  /** Called when a date is selected. */\n  onChange?: (date: Date) => void;\n  /** Minimum selectable date. */\n  minDate?: Date;\n  /** Maximum selectable date. */\n  maxDate?: Date;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nconst MONTHS = [\n  'January','February','March','April','May','June',\n  'July','August','September','October','November','December',\n];\nconst DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa'];\n\nfunction isSameDay(a: Date, b: Date) {\n  return a.getFullYear() === b.getFullYear()\n    && a.getMonth() === b.getMonth()\n    && a.getDate() === b.getDate();\n}\n\nexport function Calendar({\n  value,\n  defaultValue,\n  onChange,\n  minDate,\n  maxDate,\n  className = '',\n}: CalendarProps) {\n  const today = new Date();\n  today.setHours(0, 0, 0, 0);\n\n  const [internal, setInternal] = useState<Date | null>(defaultValue ?? null);\n  const selected = value !== undefined ? value : internal;\n\n  const [viewYear, setViewYear] = useState(\n    (selected ?? today).getFullYear(),\n  );\n  const [viewMonth, setViewMonth] = useState(\n    (selected ?? today).getMonth(),\n  );\n\n  const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n\n  const prevMonth = () => {\n    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); }\n    else setViewMonth(m => m - 1);\n  };\n  const nextMonth = () => {\n    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); }\n    else setViewMonth(m => m + 1);\n  };\n\n  const handleSelect = (day: number) => {\n    const date = new Date(viewYear, viewMonth, day);\n    if (minDate && date < minDate) return;\n    if (maxDate && date > maxDate) return;\n    if (!value) setInternal(date);\n    onChange?.(date);\n  };\n\n  // Build calendar grid\n  const cells: Array<number | null> = [\n    ...Array(firstDay).fill(null),\n    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n  ];\n  // Pad to complete last row\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  return (\n    <div className={`inline-block select-none rounded-2xl border border-slate-200 bg-white p-4 shadow-sm ${className}`}>\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <button\n          type=\"button\"\n          onClick={prevMonth}\n          aria-label=\"Previous month\"\n          className=\"rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n        >\n          <ChevronLeft size={16} aria-hidden=\"true\" />\n        </button>\n        <span className=\"text-sm font-bold text-slate-800\">\n          {MONTHS[viewMonth]} {viewYear}\n        </span>\n        <button\n          type=\"button\"\n          onClick={nextMonth}\n          aria-label=\"Next month\"\n          className=\"rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30\"\n        >\n          <ChevronRight size={16} aria-hidden=\"true\" />\n        </button>\n      </div>\n\n      {/* Grid */}\n      <table\n        role=\"grid\"\n        aria-label={`${MONTHS[viewMonth]} ${viewYear}`}\n        className=\"w-full border-collapse\"\n      >\n        <thead>\n          <tr>\n            {DAYS.map((d) => (\n              <th key={d} scope=\"col\" className=\"pb-2 text-center text-[10px] font-bold uppercase tracking-widest text-slate-400\">\n                {d}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {weeks.map((week, wi) => (\n            <tr key={wi}>\n              {week.map((day, di) => {\n                if (!day) return <td key={di} role=\"gridcell\" aria-label=\"Empty\" />;\n                const date = new Date(viewYear, viewMonth, day);\n                const isToday = isSameDay(date, today);\n                const isSelected = !!selected && isSameDay(date, selected);\n                const isDisabled = (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);\n                const label = `${day} ${MONTHS[viewMonth]} ${viewYear}${isToday ? ', Today' : ''}${isSelected ? ', Selected' : ''}`;\n\n                return (\n                  <td key={di} role=\"gridcell\" aria-label={label} aria-selected={isSelected} className=\"p-0.5\">\n                    <button\n                      type=\"button\"\n                      onClick={() => handleSelect(day)}\n                      disabled={isDisabled}\n                      aria-current={isToday ? 'date' : undefined}\n                      className={[\n                        'flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition',\n                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n                        'disabled:cursor-not-allowed disabled:opacity-30',\n                        isSelected\n                          ? 'bg-brand-blue text-white shadow-md'\n                          : isToday\n                          ? 'border border-brand-blue/60 text-brand-blue hover:bg-blue-50'\n                          : 'text-slate-700 hover:bg-slate-100',\n                      ].join(' ')}\n                    >\n                      {day}\n                    </button>\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}