@fluid-app/portal-widgets 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/dist/AlertWidget-AS_8Jjbd.cjs +39 -0
  2. package/dist/AlertWidget-AS_8Jjbd.cjs.map +1 -0
  3. package/dist/AlertWidget-Dy6pBmXm.mjs +22 -0
  4. package/dist/AlertWidget-Dy6pBmXm.mjs.map +1 -0
  5. package/dist/CalendarWidget-DAHnT9Wn.mjs +424 -0
  6. package/dist/CalendarWidget-DAHnT9Wn.mjs.map +1 -0
  7. package/dist/CalendarWidget-DW7q6Q7_.cjs +441 -0
  8. package/dist/CalendarWidget-DW7q6Q7_.cjs.map +1 -0
  9. package/dist/CarouselWidget-BJvLjY7H.mjs +436 -0
  10. package/dist/CarouselWidget-BJvLjY7H.mjs.map +1 -0
  11. package/dist/CarouselWidget-Bdn0LVXT.cjs +453 -0
  12. package/dist/CarouselWidget-Bdn0LVXT.cjs.map +1 -0
  13. package/dist/CatchUpWidget-CZMptzf8.cjs +264 -0
  14. package/dist/CatchUpWidget-CZMptzf8.cjs.map +1 -0
  15. package/dist/CatchUpWidget-vEP5scfy.mjs +247 -0
  16. package/dist/CatchUpWidget-vEP5scfy.mjs.map +1 -0
  17. package/dist/ChartWidget-B3GcdLqH.mjs +415 -0
  18. package/dist/ChartWidget-B3GcdLqH.mjs.map +1 -0
  19. package/dist/ChartWidget-DQB7K6S0.cjs +432 -0
  20. package/dist/ChartWidget-DQB7K6S0.cjs.map +1 -0
  21. package/dist/ContainerWidget-B-4hcPKJ.mjs +44 -0
  22. package/dist/ContainerWidget-B-4hcPKJ.mjs.map +1 -0
  23. package/dist/ContainerWidget-CHa4gVvV.cjs +2 -0
  24. package/dist/ContainerWidget-rGsakG66.cjs +51 -0
  25. package/dist/ContainerWidget-rGsakG66.cjs.map +1 -0
  26. package/dist/EmbedWidget-ChLVA_9a.mjs +156 -0
  27. package/dist/EmbedWidget-ChLVA_9a.mjs.map +1 -0
  28. package/dist/EmbedWidget-mv5ce32s.cjs +173 -0
  29. package/dist/EmbedWidget-mv5ce32s.cjs.map +1 -0
  30. package/dist/ImageWidget-DFt4mJJx.cjs +167 -0
  31. package/dist/ImageWidget-DFt4mJJx.cjs.map +1 -0
  32. package/dist/ImageWidget-DMubcgat.mjs +150 -0
  33. package/dist/ImageWidget-DMubcgat.mjs.map +1 -0
  34. package/dist/LayoutWidget-BEi0yFpz.mjs +107 -0
  35. package/dist/LayoutWidget-BEi0yFpz.mjs.map +1 -0
  36. package/dist/LayoutWidget-C4-ka0Ge.cjs +114 -0
  37. package/dist/LayoutWidget-C4-ka0Ge.cjs.map +1 -0
  38. package/dist/LayoutWidget-D4haEqTQ.cjs +2 -0
  39. package/dist/ListWidget-C-jcsCb4.mjs +901 -0
  40. package/dist/ListWidget-C-jcsCb4.mjs.map +1 -0
  41. package/dist/ListWidget-RHQ2fQXa.cjs +919 -0
  42. package/dist/ListWidget-RHQ2fQXa.cjs.map +1 -0
  43. package/dist/MediaRenderer-CcJvyOJ1.cjs +181 -0
  44. package/dist/MediaRenderer-CcJvyOJ1.cjs.map +1 -0
  45. package/dist/MediaRenderer-Uq90PZcY.mjs +163 -0
  46. package/dist/MediaRenderer-Uq90PZcY.mjs.map +1 -0
  47. package/dist/MySiteWidget-A_cYFgxJ.cjs +279 -0
  48. package/dist/MySiteWidget-A_cYFgxJ.cjs.map +1 -0
  49. package/dist/MySiteWidget-DariqlfU.mjs +262 -0
  50. package/dist/MySiteWidget-DariqlfU.mjs.map +1 -0
  51. package/dist/NestedWidget-CNkwGwhM.mjs +330 -0
  52. package/dist/NestedWidget-CNkwGwhM.mjs.map +1 -0
  53. package/dist/NestedWidget-ofk9O-t1.cjs +346 -0
  54. package/dist/NestedWidget-ofk9O-t1.cjs.map +1 -0
  55. package/dist/QuickShareWidget-DWvgEy74.cjs +262 -0
  56. package/dist/QuickShareWidget-DWvgEy74.cjs.map +1 -0
  57. package/dist/QuickShareWidget-DXq5lcDn.mjs +245 -0
  58. package/dist/QuickShareWidget-DXq5lcDn.mjs.map +1 -0
  59. package/dist/RecentActivityWidget-BvncOdax.mjs +391 -0
  60. package/dist/RecentActivityWidget-BvncOdax.mjs.map +1 -0
  61. package/dist/RecentActivityWidget-wODng8dt.cjs +408 -0
  62. package/dist/RecentActivityWidget-wODng8dt.cjs.map +1 -0
  63. package/dist/RegistryContext-CscXrsRa.mjs +36 -0
  64. package/dist/RegistryContext-CscXrsRa.mjs.map +1 -0
  65. package/dist/RegistryContext-xjea4xVV.cjs +55 -0
  66. package/dist/RegistryContext-xjea4xVV.cjs.map +1 -0
  67. package/dist/ScreenRenderer-D52h5VQr.mjs +76 -0
  68. package/dist/ScreenRenderer-D52h5VQr.mjs.map +1 -0
  69. package/dist/ScreenRenderer-DZAxcg7x.cjs +82 -0
  70. package/dist/ScreenRenderer-DZAxcg7x.cjs.map +1 -0
  71. package/dist/ScreenRendererContext-CK1IsFTn.cjs +36 -0
  72. package/dist/ScreenRendererContext-CK1IsFTn.cjs.map +1 -0
  73. package/dist/ScreenRendererContext-DKcdcmiT.mjs +23 -0
  74. package/dist/ScreenRendererContext-DKcdcmiT.mjs.map +1 -0
  75. package/dist/SpacerWidget-Bgz6701y.cjs +60 -0
  76. package/dist/SpacerWidget-Bgz6701y.cjs.map +1 -0
  77. package/dist/SpacerWidget-DHGoW6eu.mjs +43 -0
  78. package/dist/SpacerWidget-DHGoW6eu.mjs.map +1 -0
  79. package/dist/TableWidget--yLJTqoW.mjs +438 -0
  80. package/dist/TableWidget--yLJTqoW.mjs.map +1 -0
  81. package/dist/TableWidget-TfQfFHft.cjs +455 -0
  82. package/dist/TableWidget-TfQfFHft.cjs.map +1 -0
  83. package/dist/TextWidget-CL2H3vei.mjs +129 -0
  84. package/dist/TextWidget-CL2H3vei.mjs.map +1 -0
  85. package/dist/TextWidget-D6Ug_2Z1.cjs +146 -0
  86. package/dist/TextWidget-D6Ug_2Z1.cjs.map +1 -0
  87. package/dist/ToDoWidget-D8YIsl7y.mjs +274 -0
  88. package/dist/ToDoWidget-D8YIsl7y.mjs.map +1 -0
  89. package/dist/ToDoWidget-Dvs0GDkx.cjs +291 -0
  90. package/dist/ToDoWidget-Dvs0GDkx.cjs.map +1 -0
  91. package/dist/VideoWidget-D6C_jHOF.mjs +192 -0
  92. package/dist/VideoWidget-D6C_jHOF.mjs.map +1 -0
  93. package/dist/VideoWidget-SODAPZO4.cjs +209 -0
  94. package/dist/VideoWidget-SODAPZO4.cjs.map +1 -0
  95. package/dist/chunk-CZWwpsFl.cjs +43 -0
  96. package/dist/components/index.cjs +14 -0
  97. package/dist/components/index.cjs.map +1 -0
  98. package/dist/components/index.d.cts +11 -0
  99. package/dist/components/index.d.cts.map +1 -0
  100. package/dist/components/index.d.mts +11 -0
  101. package/dist/components/index.d.mts.map +1 -0
  102. package/dist/components/index.mjs +11 -0
  103. package/dist/components/index.mjs.map +1 -0
  104. package/dist/contexts/index.cjs +8 -0
  105. package/dist/contexts/index.d.cts +77 -0
  106. package/dist/contexts/index.d.cts.map +1 -0
  107. package/dist/contexts/index.d.mts +77 -0
  108. package/dist/contexts/index.d.mts.map +1 -0
  109. package/dist/contexts/index.mjs +3 -0
  110. package/dist/core/index.cjs +51 -0
  111. package/dist/core/index.d.cts +77 -0
  112. package/dist/core/index.d.cts.map +1 -0
  113. package/dist/core/index.d.mts +77 -0
  114. package/dist/core/index.d.mts.map +1 -0
  115. package/dist/core/index.mjs +4 -0
  116. package/dist/error-state-DErSxZwH.mjs +18 -0
  117. package/dist/error-state-DErSxZwH.mjs.map +1 -0
  118. package/dist/error-state-DSzVUtEl.cjs +24 -0
  119. package/dist/error-state-DSzVUtEl.cjs.map +1 -0
  120. package/dist/fields-4FC6JUNH.d.mts +2 -0
  121. package/dist/fields-DjLFJmz6.d.cts +2 -0
  122. package/dist/fields-wPOk-SmZ.mjs +2 -0
  123. package/dist/rolldown-runtime-wcPFST8Q.mjs +13 -0
  124. package/dist/scroll-arrows-BZIlsE_x.cjs +35 -0
  125. package/dist/scroll-arrows-BZIlsE_x.cjs.map +1 -0
  126. package/dist/scroll-arrows-BevCYRNT.mjs +29 -0
  127. package/dist/scroll-arrows-BevCYRNT.mjs.map +1 -0
  128. package/dist/ui/index.cjs +101 -0
  129. package/dist/ui/index.d.cts +15 -0
  130. package/dist/ui/index.d.cts.map +1 -0
  131. package/dist/ui/index.d.mts +15 -0
  132. package/dist/ui/index.d.mts.map +1 -0
  133. package/dist/ui/index.mjs +3 -0
  134. package/dist/widgets/index.cjs +92 -0
  135. package/dist/widgets/index.cjs.map +1 -0
  136. package/dist/widgets/index.d.cts +689 -0
  137. package/dist/widgets/index.d.cts.map +1 -0
  138. package/dist/widgets/index.d.mts +689 -0
  139. package/dist/widgets/index.d.mts.map +1 -0
  140. package/dist/widgets/index.mjs +46 -0
  141. package/dist/widgets/index.mjs.map +1 -0
  142. package/package.json +104 -0
  143. package/src/styles/globals.css +23 -0
  144. package/src/styles/index.ts +1 -0
  145. package/tailwind.config.ts +61 -0
@@ -0,0 +1,39 @@
1
+ const require_chunk = require("./chunk-CZWwpsFl.cjs");
2
+ const require_TextWidget = require("./TextWidget-D6Ug_2Z1.cjs");
3
+ let react_jsx_runtime = require("react/jsx-runtime");
4
+ //#region src/widgets/AlertWidget.tsx
5
+ var AlertWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
6
+ AlertWidget: () => AlertWidget,
7
+ alertWidgetPropertySchema: () => alertWidgetPropertySchema
8
+ });
9
+ /**
10
+ * AlertWidget - Wrapper for TextWidget (for backwards compatibility)
11
+ */
12
+ function AlertWidget(props) {
13
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextWidget.TextWidget, { ...props });
14
+ }
15
+ const alertWidgetPropertySchema = {
16
+ ...require_TextWidget.textWidgetPropertySchema,
17
+ widgetType: "AlertWidget"
18
+ };
19
+ //#endregion
20
+ Object.defineProperty(exports, "AlertWidget", {
21
+ enumerable: true,
22
+ get: function() {
23
+ return AlertWidget;
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "AlertWidget_exports", {
27
+ enumerable: true,
28
+ get: function() {
29
+ return AlertWidget_exports;
30
+ }
31
+ });
32
+ Object.defineProperty(exports, "alertWidgetPropertySchema", {
33
+ enumerable: true,
34
+ get: function() {
35
+ return alertWidgetPropertySchema;
36
+ }
37
+ });
38
+
39
+ //# sourceMappingURL=AlertWidget-AS_8Jjbd.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AlertWidget-AS_8Jjbd.cjs","names":["TextWidget","textWidgetPropertySchema"],"sources":["../src/widgets/AlertWidget.tsx"],"sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(\n props: ComponentProps<typeof TextWidget>,\n): React.JSX.Element {\n return <TextWidget {...props} />;\n}\n\nexport const alertWidgetPropertySchema: WidgetPropertySchema = {\n ...textWidgetPropertySchema,\n widgetType: \"AlertWidget\",\n};\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,YACd,OACmB;AACnB,QAAO,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,YAAD,EAAY,GAAI,OAAS,CAAA;;AAGlC,MAAa,4BAAkD;CAC7D,GAAGC,mBAAAA;CACH,YAAY;CACb"}
@@ -0,0 +1,22 @@
1
+ import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
2
+ import { r as textWidgetPropertySchema, t as TextWidget } from "./TextWidget-CL2H3vei.mjs";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/widgets/AlertWidget.tsx
5
+ var AlertWidget_exports = /* @__PURE__ */ __exportAll({
6
+ AlertWidget: () => AlertWidget,
7
+ alertWidgetPropertySchema: () => alertWidgetPropertySchema
8
+ });
9
+ /**
10
+ * AlertWidget - Wrapper for TextWidget (for backwards compatibility)
11
+ */
12
+ function AlertWidget(props) {
13
+ return /* @__PURE__ */ jsx(TextWidget, { ...props });
14
+ }
15
+ const alertWidgetPropertySchema = {
16
+ ...textWidgetPropertySchema,
17
+ widgetType: "AlertWidget"
18
+ };
19
+ //#endregion
20
+ export { AlertWidget_exports as n, alertWidgetPropertySchema as r, AlertWidget as t };
21
+
22
+ //# sourceMappingURL=AlertWidget-Dy6pBmXm.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AlertWidget-Dy6pBmXm.mjs","names":[],"sources":["../src/widgets/AlertWidget.tsx"],"sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(\n props: ComponentProps<typeof TextWidget>,\n): React.JSX.Element {\n return <TextWidget {...props} />;\n}\n\nexport const alertWidgetPropertySchema: WidgetPropertySchema = {\n ...textWidgetPropertySchema,\n widgetType: \"AlertWidget\",\n};\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,YACd,OACmB;AACnB,QAAO,oBAAC,YAAD,EAAY,GAAI,OAAS,CAAA;;AAGlC,MAAa,4BAAkD;CAC7D,GAAG;CACH,YAAY;CACb"}
@@ -0,0 +1,424 @@
1
+ import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
2
+ import { a as getFontSizeField, c as getPaddingField, i as getColorField, n as getBorderRadiusField } from "./fields-wPOk-SmZ.mjs";
3
+ import { t as ErrorState } from "./error-state-DErSxZwH.mjs";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { useMemo, useState } from "react";
6
+ import { useQuery } from "@tanstack/react-query";
7
+ import { useDataSourceConfig } from "@fluid-app/portal-core/data-sources/context";
8
+ import { useWidgetPreviewContext } from "@fluid-app/portal-core/data-sources/preview-context";
9
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
10
+ import { faChevronLeft, faChevronRight, faChevronsDown, faChevronsUp } from "@fortawesome/pro-regular-svg-icons";
11
+ //#region src/hooks/use-calendar-events.preview.ts
12
+ const today = /* @__PURE__ */ new Date();
13
+ const inTwoDays = new Date(today);
14
+ inTwoDays.setDate(inTwoDays.getDate() + 2);
15
+ function toISO(date, hours, minutes = 0) {
16
+ const d = new Date(date);
17
+ d.setHours(hours, minutes, 0, 0);
18
+ return d.toISOString();
19
+ }
20
+ function toDateString(date) {
21
+ return date.toISOString().split("T")[0];
22
+ }
23
+ const PREVIEW_DATA = [
24
+ {
25
+ id: 1,
26
+ title: "Team Strategy Call",
27
+ start: toISO(today, 9, 0),
28
+ end: toISO(today, 10, 0),
29
+ status: "active",
30
+ color: "#4f46e5"
31
+ },
32
+ {
33
+ id: 2,
34
+ title: "Product Launch Webinar",
35
+ start: toISO(today, 14, 0),
36
+ end: toISO(today, 15, 30),
37
+ status: "active",
38
+ color: "#0891b2",
39
+ venue: "Zoom"
40
+ },
41
+ {
42
+ id: 3,
43
+ title: "Annual Leadership Summit",
44
+ start: `${toDateString(inTwoDays)}T00:00:00.000Z`,
45
+ end: `${toDateString(inTwoDays)}T23:59:59.000Z`,
46
+ status: "active",
47
+ color: "#059669",
48
+ isAllDay: true,
49
+ venue: "Convention Center"
50
+ }
51
+ ];
52
+ //#endregion
53
+ //#region src/hooks/use-calendar-events.ts
54
+ function useCalendarEvents() {
55
+ const { baseUrl, getApiHeaders } = useDataSourceConfig();
56
+ const { isPreview } = useWidgetPreviewContext();
57
+ return useQuery({
58
+ queryKey: [
59
+ "portal-widget-use",
60
+ "calendar-events",
61
+ isPreview ? "preview" : baseUrl
62
+ ],
63
+ queryFn: async ({ signal }) => {
64
+ const url = baseUrl ? `${baseUrl}/events.json?event_timeline=upcoming` : "/events.json?event_timeline=upcoming";
65
+ const response = await fetch(url, {
66
+ headers: {
67
+ "content-type": "application/json",
68
+ ...getApiHeaders?.()
69
+ },
70
+ signal
71
+ });
72
+ if (!response.ok) throw new Error(`Failed to fetch calendar events: ${response.status}`);
73
+ return response.json();
74
+ },
75
+ enabled: !isPreview,
76
+ ...isPreview && { placeholderData: PREVIEW_DATA }
77
+ });
78
+ }
79
+ //#endregion
80
+ //#region src/widgets/CalendarWidget.tsx
81
+ var CalendarWidget_exports = /* @__PURE__ */ __exportAll({
82
+ CalendarWidget: () => CalendarWidget,
83
+ calendarWidgetPropertySchema: () => calendarWidgetPropertySchema
84
+ });
85
+ const getDaysInMonth = (year, month) => {
86
+ return new Date(year, month + 1, 0).getDate();
87
+ };
88
+ const getFirstDayOfMonth = (year, month) => {
89
+ return new Date(year, month, 1).getDay();
90
+ };
91
+ const generateMonthGrid = (year, month) => {
92
+ const daysInMonth = getDaysInMonth(year, month);
93
+ const firstDay = getFirstDayOfMonth(year, month);
94
+ const today = /* @__PURE__ */ new Date();
95
+ const days = [];
96
+ for (let i = 0; i < firstDay; i++) days.push({
97
+ date: null,
98
+ isToday: false,
99
+ isCurrentMonth: false
100
+ });
101
+ for (let day = 1; day <= daysInMonth; day++) {
102
+ const date = new Date(year, month, day);
103
+ const isToday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
104
+ days.push({
105
+ date,
106
+ isToday,
107
+ isCurrentMonth: true
108
+ });
109
+ }
110
+ return days;
111
+ };
112
+ const generateWeekGrid = () => {
113
+ const today = /* @__PURE__ */ new Date();
114
+ const currentDay = today.getDay();
115
+ const days = [];
116
+ for (let i = 0; i < 7; i++) {
117
+ const date = new Date(today);
118
+ date.setDate(today.getDate() - currentDay + i);
119
+ days.push({
120
+ date,
121
+ isToday: date.toDateString() === today.toDateString()
122
+ });
123
+ }
124
+ return days;
125
+ };
126
+ const getEventsForDate = (date, events) => {
127
+ const dayStart = new Date(date);
128
+ dayStart.setHours(0, 0, 0, 0);
129
+ const dayEnd = new Date(date);
130
+ dayEnd.setHours(23, 59, 59, 999);
131
+ return events.filter((event) => {
132
+ const eventStart = new Date(event.start);
133
+ const eventEnd = new Date(event.end);
134
+ return eventStart <= dayEnd && eventEnd >= dayStart;
135
+ });
136
+ };
137
+ const hasEventsOnDate = (date, events) => {
138
+ if (!date) return false;
139
+ return getEventsForDate(date, events).length > 0;
140
+ };
141
+ const EventItem = ({ title, start, end, color, isAllDay, accentColor }) => {
142
+ const startTime = new Date(start).toLocaleTimeString("en-US", {
143
+ hour: "numeric",
144
+ minute: "2-digit"
145
+ });
146
+ const endTime = new Date(end).toLocaleTimeString("en-US", {
147
+ hour: "numeric",
148
+ minute: "2-digit"
149
+ });
150
+ return /* @__PURE__ */ jsxs("div", {
151
+ className: "flex gap-x-2",
152
+ children: [/* @__PURE__ */ jsx("div", {
153
+ className: "w-0.5 shrink-0 rounded-full",
154
+ style: { backgroundColor: color || accentColor }
155
+ }), /* @__PURE__ */ jsxs("div", {
156
+ className: "min-w-0 flex-1",
157
+ children: [/* @__PURE__ */ jsx("div", {
158
+ className: "truncate text-sm font-medium",
159
+ children: title
160
+ }), /* @__PURE__ */ jsx("div", {
161
+ className: "text-xs opacity-60",
162
+ children: isAllDay ? "All day" : `${startTime} - ${endTime}`
163
+ })]
164
+ })]
165
+ });
166
+ };
167
+ const dayNames = [
168
+ "Sun",
169
+ "Mon",
170
+ "Tue",
171
+ "Wed",
172
+ "Thu",
173
+ "Fri",
174
+ "Sat"
175
+ ];
176
+ function DayButton({ date, isToday, isSelected, hasEvents, accentColor, onClick, extraClassName = "" }) {
177
+ return /* @__PURE__ */ jsxs("button", {
178
+ onClick,
179
+ className: `relative flex aspect-square items-center justify-center rounded-full text-sm transition-colors ${isSelected ? `bg-${accentColor} text-${accentColor}-foreground` : isToday ? `bg-${accentColor}/30 text-${accentColor}-foreground hover:bg-${accentColor}/50` : `hover:bg-${accentColor}/50 hover:text-${accentColor}-foreground`} ${extraClassName}`,
180
+ children: [date.getDate(), hasEvents && /* @__PURE__ */ jsx("div", { className: `absolute bottom-1 h-1 w-1 rounded-full bg-${accentColor}` })]
181
+ });
182
+ }
183
+ function CalendarWidget({ titleEnabled = true, titleText = "Calendar", titleFontSize = "xl", titleColor = "foreground", background = {
184
+ type: "solid",
185
+ color: "background"
186
+ }, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", className, ...props }) {
187
+ const backgroundColor = background.color || "background";
188
+ const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
189
+ const today = /* @__PURE__ */ new Date();
190
+ const [currentMonth, setCurrentMonth] = useState(today.getMonth());
191
+ const [currentYear, setCurrentYear] = useState(today.getFullYear());
192
+ const [isCollapsed, setIsCollapsed] = useState(false);
193
+ const [selectedDate, setSelectedDate] = useState(today);
194
+ const { data: events = [], isLoading, isError } = useCalendarEvents();
195
+ const monthGrid = useMemo(() => generateMonthGrid(currentYear, currentMonth), [currentYear, currentMonth]);
196
+ const weekGrid = useMemo(() => generateWeekGrid(), []);
197
+ const selectedDateEvents = useMemo(() => {
198
+ if (!selectedDate) return [];
199
+ return getEventsForDate(selectedDate, events);
200
+ }, [selectedDate, events]);
201
+ const goToPrevMonth = () => {
202
+ if (currentMonth === 0) {
203
+ setCurrentMonth(11);
204
+ setCurrentYear(currentYear - 1);
205
+ } else setCurrentMonth(currentMonth - 1);
206
+ };
207
+ const goToNextMonth = () => {
208
+ if (currentMonth === 11) {
209
+ setCurrentMonth(0);
210
+ setCurrentYear(currentYear + 1);
211
+ } else setCurrentMonth(currentMonth + 1);
212
+ };
213
+ const monthYearLabel = new Date(currentYear, currentMonth).toLocaleString("en-US", {
214
+ month: "long",
215
+ year: "numeric"
216
+ });
217
+ return /* @__PURE__ */ jsxs("div", {
218
+ className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className}`,
219
+ style: { backgroundImage },
220
+ ...props,
221
+ children: [titleEnabled && titleText && /* @__PURE__ */ jsx("div", {
222
+ className: `p-${padding} pb-0`,
223
+ children: /* @__PURE__ */ jsx("h2", {
224
+ className: `text-${titleFontSize} font-bold text-${titleColor}`,
225
+ children: titleText
226
+ })
227
+ }), isLoading ? /* @__PURE__ */ jsx("div", {
228
+ className: `flex min-h-[300px] items-center justify-center p-${padding}`,
229
+ children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" })
230
+ }) : isError ? /* @__PURE__ */ jsx(ErrorState, {}) : /* @__PURE__ */ jsx("div", {
231
+ className: `p-${padding}`,
232
+ children: /* @__PURE__ */ jsxs("div", {
233
+ className: "@md:flex @md:gap-6",
234
+ children: [/* @__PURE__ */ jsxs("div", {
235
+ className: "@md:flex-none",
236
+ children: [
237
+ /* @__PURE__ */ jsxs("div", {
238
+ className: "mb-4 flex items-center justify-between",
239
+ children: [
240
+ /* @__PURE__ */ jsx("button", {
241
+ onClick: goToPrevMonth,
242
+ className: "hover:bg-foreground/10 rounded-full p-1",
243
+ "aria-label": "Previous month",
244
+ children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faChevronLeft })
245
+ }),
246
+ /* @__PURE__ */ jsx("span", {
247
+ className: "text-base font-semibold",
248
+ children: monthYearLabel
249
+ }),
250
+ /* @__PURE__ */ jsx("button", {
251
+ onClick: goToNextMonth,
252
+ className: "hover:bg-foreground/10 rounded-full p-1",
253
+ "aria-label": "Next month",
254
+ children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faChevronRight })
255
+ })
256
+ ]
257
+ }),
258
+ /* @__PURE__ */ jsx("div", {
259
+ className: "mb-2 grid grid-cols-7 gap-1 text-center",
260
+ children: dayNames.map((day, idx) => /* @__PURE__ */ jsx("div", {
261
+ className: "text-xs font-medium uppercase opacity-60",
262
+ children: day
263
+ }, idx))
264
+ }),
265
+ isCollapsed && /* @__PURE__ */ jsx("div", {
266
+ className: "grid grid-cols-7 gap-1 @md:hidden",
267
+ children: weekGrid.map(({ date, isToday }, idx) => /* @__PURE__ */ jsx(DayButton, {
268
+ date,
269
+ isToday,
270
+ isSelected: selectedDate?.toDateString() === date.toDateString(),
271
+ hasEvents: hasEventsOnDate(date, events),
272
+ accentColor,
273
+ onClick: () => setSelectedDate(date)
274
+ }, idx))
275
+ }),
276
+ /* @__PURE__ */ jsx("div", {
277
+ className: `grid grid-cols-7 gap-1 ${isCollapsed ? "hidden @md:grid" : "grid"}`,
278
+ children: monthGrid.map((day, idx) => {
279
+ if (!day.date) return /* @__PURE__ */ jsx("div", { className: "aspect-square" }, idx);
280
+ return /* @__PURE__ */ jsx(DayButton, {
281
+ date: day.date,
282
+ isToday: day.isToday,
283
+ isSelected: selectedDate?.toDateString() === day.date.toDateString(),
284
+ hasEvents: hasEventsOnDate(day.date, events),
285
+ accentColor,
286
+ onClick: () => setSelectedDate(day.date),
287
+ extraClassName: "p-2 @md:m-3"
288
+ }, idx);
289
+ })
290
+ }),
291
+ /* @__PURE__ */ jsxs("button", {
292
+ onClick: () => setIsCollapsed(!isCollapsed),
293
+ className: `ml-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/50 @md:hidden`,
294
+ "aria-label": isCollapsed ? "Expand calendar" : "Collapse calendar",
295
+ children: [
296
+ /* @__PURE__ */ jsx("div", { className: `h-1 w-1/2 bg-${textColor}/50` }),
297
+ isCollapsed ? /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faChevronsDown }) : /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faChevronsUp }),
298
+ /* @__PURE__ */ jsx("div", { className: `h-1 w-1/2 bg-${textColor}/50` })
299
+ ]
300
+ })
301
+ ]
302
+ }), /* @__PURE__ */ jsxs("div", {
303
+ className: "border-muted mt-4 pt-4 @md:mt-0 @md:w-56 @md:border-l @md:pt-0 @md:pl-6",
304
+ children: [/* @__PURE__ */ jsx("div", {
305
+ className: "mb-2 text-sm font-medium opacity-60",
306
+ children: selectedDate ? selectedDate.toLocaleDateString("en-US", {
307
+ weekday: "long",
308
+ month: "short",
309
+ day: "numeric"
310
+ }) : "Select a date"
311
+ }), selectedDateEvents.length > 0 ? /* @__PURE__ */ jsx("div", {
312
+ className: "flex flex-col gap-3",
313
+ children: selectedDateEvents.map((event, idx) => /* @__PURE__ */ jsx(EventItem, {
314
+ ...event,
315
+ accentColor: `var(--${accentColor})`
316
+ }, `${event.id}-${idx}`))
317
+ }) : /* @__PURE__ */ jsx("div", {
318
+ className: "text-sm opacity-50",
319
+ children: "No events"
320
+ })]
321
+ })]
322
+ })
323
+ })]
324
+ });
325
+ }
326
+ const calendarWidgetPropertySchema = {
327
+ widgetType: "CalendarWidget",
328
+ displayName: "Calendar Widget",
329
+ tabsConfig: [{
330
+ id: "styling",
331
+ label: "Styling"
332
+ }],
333
+ fields: [
334
+ {
335
+ key: "titleEnabled",
336
+ label: "Widget Title",
337
+ type: "boolean",
338
+ description: "Enable the title displayed above the calendar",
339
+ defaultValue: true,
340
+ tab: "styling",
341
+ group: "Title"
342
+ },
343
+ {
344
+ key: "titleText",
345
+ label: "Title",
346
+ type: "text",
347
+ description: "Title text displayed above the calendar",
348
+ defaultValue: "Calendar",
349
+ tab: "styling",
350
+ group: "Title",
351
+ requiresKeyToBeTrue: "titleEnabled"
352
+ },
353
+ getFontSizeField({
354
+ key: "titleFontSize",
355
+ label: "Title Font Size",
356
+ description: "Font size for the widget title",
357
+ defaultValue: "xl",
358
+ tab: "styling",
359
+ group: "Title",
360
+ requiresKeyToBeTrue: "titleEnabled"
361
+ }),
362
+ getColorField({
363
+ key: "titleColor",
364
+ label: "Title Color",
365
+ description: "Color for the widget title",
366
+ defaultValue: "foreground",
367
+ tab: "styling",
368
+ group: "Title",
369
+ requiresKeyToBeTrue: "titleEnabled"
370
+ }),
371
+ {
372
+ type: "background",
373
+ key: "background",
374
+ label: "Background",
375
+ description: "Background for the calendar container",
376
+ defaultValue: "background",
377
+ tab: "styling",
378
+ group: "Design"
379
+ },
380
+ getColorField({
381
+ key: "textColor",
382
+ label: "Text Color",
383
+ description: "Default text color for calendar content",
384
+ defaultValue: "foreground",
385
+ tab: "styling",
386
+ group: "Design"
387
+ }),
388
+ getColorField({
389
+ key: "accentColor",
390
+ label: "Accent Color",
391
+ description: "Color used for today highlight and event indicators",
392
+ defaultValue: "primary",
393
+ tab: "styling",
394
+ group: "Design"
395
+ }),
396
+ {
397
+ key: "separator",
398
+ type: "separator",
399
+ label: "Separator",
400
+ tab: "styling",
401
+ group: "Design"
402
+ },
403
+ getPaddingField({
404
+ key: "padding",
405
+ label: "Padding",
406
+ description: "Padding around the calendar container",
407
+ defaultValue: 4,
408
+ tab: "styling",
409
+ group: "Design"
410
+ }),
411
+ getBorderRadiusField({
412
+ key: "borderRadius",
413
+ label: "Border Radius",
414
+ description: "Border radius for the calendar container",
415
+ defaultValue: "md",
416
+ tab: "styling",
417
+ group: "Design"
418
+ })
419
+ ]
420
+ };
421
+ //#endregion
422
+ export { CalendarWidget_exports as n, calendarWidgetPropertySchema as r, CalendarWidget as t };
423
+
424
+ //# sourceMappingURL=CalendarWidget-DAHnT9Wn.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CalendarWidget-DAHnT9Wn.mjs","names":[],"sources":["../src/hooks/use-calendar-events.preview.ts","../src/hooks/use-calendar-events.ts","../src/widgets/CalendarWidget.tsx"],"sourcesContent":["import type { CalendarEvent } from \"./use-calendar-events.types\";\n\nconst today = new Date();\nconst inTwoDays = new Date(today);\ninTwoDays.setDate(inTwoDays.getDate() + 2);\n\nfunction toISO(date: Date, hours: number, minutes = 0): string {\n const d = new Date(date);\n d.setHours(hours, minutes, 0, 0);\n return d.toISOString();\n}\n\nfunction toDateString(date: Date): string {\n return date.toISOString().split(\"T\")[0]!;\n}\n\nexport const PREVIEW_DATA: CalendarEvent[] = [\n {\n id: 1,\n title: \"Team Strategy Call\",\n start: toISO(today, 9, 0),\n end: toISO(today, 10, 0),\n status: \"active\",\n color: \"#4f46e5\",\n },\n {\n id: 2,\n title: \"Product Launch Webinar\",\n start: toISO(today, 14, 0),\n end: toISO(today, 15, 30),\n status: \"active\",\n color: \"#0891b2\",\n venue: \"Zoom\",\n },\n {\n id: 3,\n title: \"Annual Leadership Summit\",\n start: `${toDateString(inTwoDays)}T00:00:00.000Z`,\n end: `${toDateString(inTwoDays)}T23:59:59.000Z`,\n status: \"active\",\n color: \"#059669\",\n isAllDay: true,\n venue: \"Convention Center\",\n },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-calendar-events.preview\";\n\nimport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport function useCalendarEvents(): UseQueryResult<CalendarEvent[], Error> {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"portal-widget-use\",\n \"calendar-events\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<CalendarEvent[]> => {\n const url = baseUrl\n ? `${baseUrl}/events.json?event_timeline=upcoming`\n : \"/events.json?event_timeline=upcoming\";\n const response = await fetch(url, {\n headers: {\n \"content-type\": \"application/json\",\n ...getApiHeaders?.(),\n },\n signal,\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch calendar events: ${response.status}`);\n }\n\n return response.json();\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n","import { useState, useMemo, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport {\n useCalendarEvents,\n type CalendarEvent,\n} from \"../hooks/use-calendar-events\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronLeft,\n faChevronRight,\n faChevronsDown,\n faChevronsUp,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Utility to get days in a month\nconst getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n};\n\n// Utility to get the first day of month (0 = Sunday, 1 = Monday, etc.)\nconst getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n};\n\n// Generate calendar grid for a month\nconst generateMonthGrid = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const today = new Date();\n\n const days: Array<{\n date: Date | null;\n isToday: boolean;\n isCurrentMonth: boolean;\n }> = [];\n\n // Add empty slots for days before the 1st\n for (let i = 0; i < firstDay; i++) {\n days.push({ date: null, isToday: false, isCurrentMonth: false });\n }\n\n // Add days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const isToday =\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear();\n days.push({ date, isToday, isCurrentMonth: true });\n }\n\n return days;\n};\n\n// Generate week grid for current week\nconst generateWeekGrid = () => {\n const today = new Date();\n const currentDay = today.getDay();\n const days: Array<{\n date: Date;\n isToday: boolean;\n }> = [];\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(today);\n date.setDate(today.getDate() - currentDay + i);\n days.push({\n date,\n isToday: date.toDateString() === today.toDateString(),\n });\n }\n\n return days;\n};\n\n// Get events for a specific date\nconst getEventsForDate = (date: Date, events: CalendarEvent[]) => {\n const dayStart = new Date(date);\n dayStart.setHours(0, 0, 0, 0);\n const dayEnd = new Date(date);\n dayEnd.setHours(23, 59, 59, 999);\n\n return events.filter((event) => {\n const eventStart = new Date(event.start);\n const eventEnd = new Date(event.end);\n return eventStart <= dayEnd && eventEnd >= dayStart;\n });\n};\n\n// Check if a date has events\nconst hasEventsOnDate = (date: Date | null, events: CalendarEvent[]) => {\n if (!date) return false;\n return getEventsForDate(date, events).length > 0;\n};\n\n// Event item component\nconst EventItem = ({\n title,\n start,\n end,\n color,\n isAllDay,\n accentColor,\n}: CalendarEvent & { accentColor?: string }) => {\n const startTime = new Date(start).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n const endTime = new Date(end).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n\n return (\n <div className=\"flex gap-x-2\">\n <div\n className=\"w-0.5 shrink-0 rounded-full\"\n style={{ backgroundColor: color || accentColor }}\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-sm font-medium\">{title}</div>\n <div className=\"text-xs opacity-60\">\n {isAllDay ? \"All day\" : `${startTime} - ${endTime}`}\n </div>\n </div>\n </div>\n );\n};\n\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\ntype DayButtonProps = {\n date: Date;\n isToday: boolean;\n isSelected: boolean;\n hasEvents: boolean;\n accentColor: string;\n onClick: () => void;\n extraClassName?: string;\n};\n\nfunction DayButton({\n date,\n isToday,\n isSelected,\n hasEvents,\n accentColor,\n onClick,\n extraClassName = \"\",\n}: DayButtonProps) {\n return (\n <button\n onClick={onClick}\n className={`relative flex aspect-square items-center justify-center rounded-full text-sm transition-colors ${\n isSelected\n ? `bg-${accentColor} text-${accentColor}-foreground`\n : isToday\n ? `bg-${accentColor}/30 text-${accentColor}-foreground hover:bg-${accentColor}/50`\n : `hover:bg-${accentColor}/50 hover:text-${accentColor}-foreground`\n } ${extraClassName}`}\n >\n {date.getDate()}\n {hasEvents && (\n <div\n className={`absolute bottom-1 h-1 w-1 rounded-full bg-${accentColor}`}\n />\n )}\n </button>\n );\n}\n\ntype CalendarWidgetProps = ComponentProps<\"div\"> & {\n // Title\n titleEnabled?: boolean;\n titleText?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Styling\n background?: BackgroundValue;\n textColor?: ColorOptions;\n accentColor?: ColorOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n};\n\nexport function CalendarWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"Calendar\",\n titleFontSize = \"xl\",\n titleColor = \"foreground\",\n\n // Styling defaults\n background = {\n type: \"solid\",\n color: \"background\",\n },\n textColor = \"foreground\",\n accentColor = \"primary\",\n padding = 4,\n borderRadius = \"md\",\n\n className,\n ...props\n}: CalendarWidgetProps): React.JSX.Element {\n const backgroundColor = background.color || \"background\";\n const backgroundImage =\n (background.resource?.image_url || background.resource?.imageUrl) &&\n background.type === \"image\"\n ? `url(${background.resource.image_url || background.resource.imageUrl})`\n : \"none\";\n const today = new Date();\n const [currentMonth, setCurrentMonth] = useState(today.getMonth());\n const [currentYear, setCurrentYear] = useState(today.getFullYear());\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [selectedDate, setSelectedDate] = useState<Date | null>(today);\n\n const { data: events = [], isLoading, isError } = useCalendarEvents();\n\n // Generate calendar grids\n const monthGrid = useMemo(\n () => generateMonthGrid(currentYear, currentMonth),\n [currentYear, currentMonth],\n );\n const weekGrid = useMemo(() => generateWeekGrid(), []);\n\n // Get events for selected date\n const selectedDateEvents = useMemo(() => {\n if (!selectedDate) return [];\n return getEventsForDate(selectedDate, events);\n }, [selectedDate, events]);\n\n // Navigation handlers\n const goToPrevMonth = () => {\n if (currentMonth === 0) {\n setCurrentMonth(11);\n setCurrentYear(currentYear - 1);\n } else {\n setCurrentMonth(currentMonth - 1);\n }\n };\n\n const goToNextMonth = () => {\n if (currentMonth === 11) {\n setCurrentMonth(0);\n setCurrentYear(currentYear + 1);\n } else {\n setCurrentMonth(currentMonth + 1);\n }\n };\n\n const monthYearLabel = new Date(currentYear, currentMonth).toLocaleString(\n \"en-US\",\n {\n month: \"long\",\n year: \"numeric\",\n },\n );\n\n return (\n <div\n className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className}`}\n style={{ backgroundImage }}\n {...props}\n >\n {/* Title */}\n {titleEnabled && titleText && (\n <div className={`p-${padding} pb-0`}>\n <h2 className={`text-${titleFontSize} font-bold text-${titleColor}`}>\n {titleText}\n </h2>\n </div>\n )}\n\n {/* Loading state */}\n {isLoading ? (\n <div\n className={`flex min-h-[300px] items-center justify-center p-${padding}`}\n >\n <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n </div>\n ) : isError ? (\n /* Error state */\n <ErrorState />\n ) : (\n <div className={`p-${padding}`}>\n {/* Desktop: Side by side layout */}\n <div className=\"@md:flex @md:gap-6\">\n {/* Calendar Section */}\n <div className=\"@md:flex-none\">\n {/* Month/Year Header with Navigation */}\n <div className=\"mb-4 flex items-center justify-between\">\n <button\n onClick={goToPrevMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Previous month\"\n >\n <FontAwesomeIcon icon={faChevronLeft} />\n </button>\n\n <span className=\"text-base font-semibold\">\n {monthYearLabel}\n </span>\n\n <button\n onClick={goToNextMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Next month\"\n >\n <FontAwesomeIcon icon={faChevronRight} />\n </button>\n </div>\n\n {/* Day Headers */}\n <div className=\"mb-2 grid grid-cols-7 gap-1 text-center\">\n {dayNames.map((day, idx) => (\n <div\n key={idx}\n className=\"text-xs font-medium uppercase opacity-60\"\n >\n {day}\n </div>\n ))}\n </div>\n\n {/* Calendar Grid - Week view on mobile when collapsed */}\n {isCollapsed && (\n <div className=\"grid grid-cols-7 gap-1 @md:hidden\">\n {weekGrid.map(({ date, isToday }, idx) => (\n <DayButton\n key={idx}\n date={date}\n isToday={isToday}\n isSelected={\n selectedDate?.toDateString() === date.toDateString()\n }\n hasEvents={hasEventsOnDate(date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(date)}\n />\n ))}\n </div>\n )}\n\n {/* Month view (always on desktop, when not collapsed on mobile) */}\n <div\n className={`grid grid-cols-7 gap-1 ${isCollapsed ? \"hidden @md:grid\" : \"grid\"}`}\n >\n {monthGrid.map((day, idx) => {\n if (!day.date) {\n return <div key={idx} className=\"aspect-square\" />;\n }\n\n return (\n <DayButton\n key={idx}\n date={day.date}\n isToday={day.isToday}\n isSelected={\n selectedDate?.toDateString() === day.date.toDateString()\n }\n hasEvents={hasEventsOnDate(day.date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(day.date)}\n extraClassName=\"p-2 @md:m-3\"\n />\n );\n })}\n </div>\n\n {/* Mobile collapse toggle */}\n <button\n onClick={() => setIsCollapsed(!isCollapsed)}\n className={`ml-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/50 @md:hidden`}\n aria-label={\n isCollapsed ? \"Expand calendar\" : \"Collapse calendar\"\n }\n >\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n {isCollapsed ? (\n <FontAwesomeIcon icon={faChevronsDown} />\n ) : (\n <FontAwesomeIcon icon={faChevronsUp} />\n )}\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n </button>\n </div>\n\n {/* Events Panel */}\n <div className=\"border-muted mt-4 pt-4 @md:mt-0 @md:w-56 @md:border-l @md:pt-0 @md:pl-6\">\n <div className=\"mb-2 text-sm font-medium opacity-60\">\n {selectedDate\n ? selectedDate.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n })\n : \"Select a date\"}\n </div>\n\n {selectedDateEvents.length > 0 ? (\n <div className=\"flex flex-col gap-3\">\n {selectedDateEvents.map((event, idx) => (\n <EventItem\n key={`${event.id}-${idx}`}\n {...event}\n accentColor={`var(--${accentColor})`}\n />\n ))}\n </div>\n ) : (\n <div className=\"text-sm opacity-50\">No events</div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const calendarWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CalendarWidget\",\n displayName: \"Calendar Widget\",\n tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n fields: [\n // Styling Tab - Title Group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed above the calendar\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"titleText\",\n label: \"Title\",\n type: \"text\",\n description: \"Title text displayed above the calendar\",\n defaultValue: \"Calendar\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the widget title\",\n defaultValue: \"xl\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color for the widget title\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Styling Tab - Design Group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the calendar container\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Default text color for calendar content\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getColorField({\n key: \"accentColor\",\n label: \"Accent Color\",\n description: \"Color used for today highlight and event indicators\",\n defaultValue: \"primary\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding around the calendar container\",\n defaultValue: 4,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}