@traefik-labs/faency 12.2.1 → 12.2.2

package/dist/components/DateTimePicker/DateTimePicker.cjs

@@ -1,283 +1,268 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const reactIcons = require("@radix-ui/react-icons");
-const datepicker = require("@rehookify/datepicker");
-const dateFns = require("date-fns");
-const React = require("react");
-const stitches_config = require("../../stitches.config.cjs");
-const Box = require("../Box/Box.cjs");
-const Flex = require("../Flex/Flex.cjs");
-const Text = require("../Text/Text.cjs");
-const Button = require("../Button/Button.cjs");
-const CalendarGrid = stitches_config.styled("div", {
-  display: "grid",
-  alignItems: "center",
-  gap: "$1",
-  px: "$2",
-  borderLeft: "2px solid $buttonSecondaryBorder",
-  borderRight: "2px solid $buttonSecondaryBorder"
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_stitches_config = require("../../stitches.config.cjs");
+const require_Box = require("../Box/Box.cjs");
+const require_Flex = require("../Flex/Flex.cjs");
+const require_Text = require("../Text/Text.cjs");
+const require_Button = require("../Button/Button.cjs");
+let _radix_ui_react_icons = require("@radix-ui/react-icons");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _rehookify_datepicker = require("@rehookify/datepicker");
+let date_fns = require("date-fns");
+//#region components/DateTimePicker/DateTimePicker.tsx
+var CalendarGrid = require_stitches_config.styled("div", {
+	display: "grid",
+	alignItems: "center",
+	gap: "$1",
+	px: "$2",
+	borderLeft: "2px solid $buttonSecondaryBorder",
+	borderRight: "2px solid $buttonSecondaryBorder"
 });
-const SevenColGrid = stitches_config.styled(CalendarGrid, {
-  gridTemplateColumns: "repeat(7, 1fr)"
+var SevenColGrid = require_stitches_config.styled(CalendarGrid, { gridTemplateColumns: "repeat(7, 1fr)" });
+var ThreeColGrid = require_stitches_config.styled(CalendarGrid, {
+	gridTemplateColumns: "repeat(3, 1fr)",
+	height: "100%"
 });
-const ThreeColGrid = stitches_config.styled(CalendarGrid, {
-  gridTemplateColumns: "repeat(3, 1fr)",
-  height: "100%"
-});
-const StyledDiv = stitches_config.styled("div");
-function Header({
-  centerButtonLabel,
-  centerButtonOnClick,
-  leftButtonProps,
-  rightButtonProps
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { align: "center", gap: "2", css: { px: "$2" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", ghost: true, variant: "secondary", ...leftButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronLeftIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        type: "button",
-        role: "button",
-        tabIndex: 0,
-        css: { flexGrow: 1, textAlign: "center" },
-        ghost: true,
-        onClick: centerButtonOnClick,
-        variant: "secondary",
-        children: centerButtonLabel
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", ghost: true, variant: "secondary", ...rightButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronRightIcon, {}) })
-  ] });
+var StyledDiv = require_stitches_config.styled("div");
+function Header({ centerButtonLabel, centerButtonOnClick, leftButtonProps, rightButtonProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+		align: "center",
+		gap: "2",
+		css: { px: "$2" },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				ghost: true,
+				variant: "secondary",
+				...leftButtonProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronLeftIcon, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				role: "button",
+				tabIndex: 0,
+				css: {
+					flexGrow: 1,
+					textAlign: "center"
+				},
+				ghost: true,
+				onClick: centerButtonOnClick,
+				variant: "secondary",
+				children: centerButtonLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				ghost: true,
+				variant: "secondary",
+				...rightButtonProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronRightIcon, {})
+			})
+		]
+	});
 }
-const DateTimePicker = React.forwardRef(
-  ({ css, onFastTravelClick, onTimeButtonClick, showDatePresets, showTimePicker, ...config }, fowardedRef) => {
-    const {
-      data: { calendars, months, time, weekDays, years },
-      propGetters: {
-        addOffset,
-        dayButton,
-        monthButton,
-        nextYearsButton,
-        previousYearsButton,
-        subtractOffset,
-        timeButton,
-        yearButton
-      }
-    } = datepicker.useDatePicker(config);
-    const [page, setPage] = React.useState(0);
-    const { days, month, year } = calendars[0];
-    return /* @__PURE__ */ jsxRuntime.jsx(StyledDiv, { css, ref: fowardedRef, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { direction: "column", gap: "2", css: { display: "inline-flex" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Box.Box,
-          {
-            css: {
-              flex: 1,
-              minHeight: config.calendar?.mode === "fluid" ? "244px" : "280px",
-              minWidth: "268px"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Flex.Flex,
-                {
-                  direction: "column",
-                  css: { display: page === 0 ? "flex" : "none", height: "100%" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Header,
-                      {
-                        centerButtonLabel: month,
-                        centerButtonOnClick: () => setPage(1),
-                        leftButtonProps: subtractOffset({ months: 1 }),
-                        rightButtonProps: addOffset({ months: 1 })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(SevenColGrid, { children: [
-                      weekDays.map((weekDay, index) => /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { css: { lineHeight: "$sizes$6", textAlign: "center" }, children: weekDay }, index)),
-                      days.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
-                        Button.Button,
-                        {
-                          type: "button",
-                          css: {
-                            width: "32px",
-                            px: 0,
-                            color: !d.disabled && !d.inCurrentMonth && !d.selected ? "$textSubtle" : void 0,
-                            fontWeight: d.now && !d.selected ? "$bold" : void 0,
-                            textAlign: "center"
-                          },
-                          ghost: !d.selected,
-                          variant: d.now || d.selected ? "primary" : "secondary",
-                          ...dayButton(d),
-                          tabIndex: dayButton(d).disabled ? dayButton(d).tabIndex : 0,
-                          children: d.day
-                        },
-                        d.$date.toString()
-                      ))
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Flex.Flex,
-                {
-                  direction: "column",
-                  css: { display: page === 1 ? "flex" : "none", height: "100%" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Header,
-                      {
-                        centerButtonLabel: year,
-                        centerButtonOnClick: () => setPage(2),
-                        leftButtonProps: subtractOffset({ years: 1 }),
-                        rightButtonProps: addOffset({ years: 1 })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(ThreeColGrid, { children: months.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-                      Button.Button,
-                      {
-                        type: "button",
-                        css: {
-                          px: 0,
-                          fontWeight: m.now && !m.selected ? "$bold" : void 0,
-                          textAlign: "center"
-                        },
-                        ghost: !m.selected,
-                        variant: m.now || m.selected ? "primary" : "secondary",
-                        ...monthButton(m),
-                        onClick: (evt) => {
-                          setPage(0);
-                          const fn = monthButton(m).onClick;
-                          if (typeof fn !== "undefined") fn(evt);
-                        },
-                        tabIndex: monthButton(m).disabled ? monthButton(m).tabIndex : 0,
-                        children: m.month
-                      },
-                      m.$date.toString()
-                    )) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Flex.Flex,
-                {
-                  direction: "column",
-                  css: { display: page === 2 ? "flex" : "none", height: "100%" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Header,
-                      {
-                        centerButtonLabel: `${years[0].year} - ${years[years.length - 1].year}`,
-                        centerButtonOnClick: () => setPage(0),
-                        leftButtonProps: previousYearsButton(),
-                        rightButtonProps: nextYearsButton()
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(ThreeColGrid, { children: years.map((y) => /* @__PURE__ */ jsxRuntime.jsx(
-                      Button.Button,
-                      {
-                        type: "button",
-                        css: {
-                          px: 0,
-                          fontWeight: y.now && !y.selected ? "$bold" : void 0,
-                          textAlign: "center"
-                        },
-                        ghost: !y.selected,
-                        variant: y.now || y.selected ? "primary" : "secondary",
-                        ...yearButton(y),
-                        onClick: (evt) => {
-                          setPage(0);
-                          const fn = yearButton(y).onClick;
-                          if (typeof fn !== "undefined") fn(evt);
-                        },
-                        tabIndex: yearButton(y).disabled ? yearButton(y).tabIndex : 0,
-                        children: y.year
-                      },
-                      y.$date.toString()
-                    )) })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        showTimePicker ? /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { css: { flex: 1, width: "90px", position: "relative", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Flex.Flex,
-          {
-            direction: "column",
-            gap: "1",
-            css: { position: "absolute", top: 0, left: 0, height: "100%", width: "100%" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { css: { mt: "32px", ml: "8px", lineHeight: "$sizes$6" }, children: "Time" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { direction: "column", gap: "1", css: { overflow: "auto", px: "$2" }, children: time.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
-                Button.Button,
-                {
-                  type: "button",
-                  css: {
-                    px: "$2",
-                    fontWeight: t.now && !t.selected ? "$bold" : void 0,
-                    textAlign: "center"
-                  },
-                  ghost: !t.selected,
-                  variant: t.now || t.selected ? "primary" : "secondary",
-                  ...timeButton(t),
-                  onClick: (evt) => {
-                    const fn = timeButton(t).onClick;
-                    if (typeof fn !== "undefined") fn(evt);
-                    if (typeof onTimeButtonClick !== "undefined") onTimeButtonClick();
-                  },
-                  tabIndex: timeButton(t).disabled ? timeButton(t).tabIndex : 0,
-                  children: t.time
-                },
-                t.$date.toString()
-              )) })
-            ]
-          }
-        ) }) : void 0
-      ] }),
-      showDatePresets ? /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { gap: "2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button.Button,
-          {
-            type: "button",
-            css: { flex: "1 1 0" },
-            variant: "secondary",
-            onClick: () => {
-              config.onDatesChange([dateFns.addMonths(/* @__PURE__ */ new Date(), 1)]);
-              if (typeof onFastTravelClick !== "undefined") onFastTravelClick();
-            },
-            children: "Now + 1 M"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button.Button,
-          {
-            type: "button",
-            css: { flex: "1 1 0" },
-            variant: "secondary",
-            onClick: () => {
-              config.onDatesChange([dateFns.addMonths(/* @__PURE__ */ new Date(), 3)]);
-              if (typeof onFastTravelClick !== "undefined") onFastTravelClick();
-            },
-            children: "Now + 3 M"
-          }
-        ),
-        showTimePicker ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button.Button,
-          {
-            type: "button",
-            css: { flex: "1 1 0" },
-            variant: "secondary",
-            onClick: () => {
-              config.onDatesChange([dateFns.addYears(/* @__PURE__ */ new Date(), 1)]);
-              if (typeof onFastTravelClick !== "undefined") onFastTravelClick();
-            },
-            children: "Now + 1 Y"
-          }
-        ) : void 0
-      ] }) : void 0
-    ] }) });
-  }
-);
+var DateTimePicker = react.default.forwardRef(({ css, onFastTravelClick, onTimeButtonClick, showDatePresets, showTimePicker, ...config }, fowardedRef) => {
+	const { data: { calendars, months, time, weekDays, years }, propGetters: { addOffset, dayButton, monthButton, nextYearsButton, previousYearsButton, subtractOffset, timeButton, yearButton } } = (0, _rehookify_datepicker.useDatePicker)(config);
+	const [page, setPage] = (0, react.useState)(0);
+	const { days, month, year } = calendars[0];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDiv, {
+		css,
+		ref: fowardedRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+			direction: "column",
+			gap: "2",
+			css: { display: "inline-flex" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+				css: {
+					flex: 1,
+					minHeight: config.calendar?.mode === "fluid" ? "244px" : "280px",
+					minWidth: "268px"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+						direction: "column",
+						css: {
+							display: page === 0 ? "flex" : "none",
+							height: "100%"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
+							centerButtonLabel: month,
+							centerButtonOnClick: () => setPage(1),
+							leftButtonProps: subtractOffset({ months: 1 }),
+							rightButtonProps: addOffset({ months: 1 })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SevenColGrid, { children: [weekDays.map((weekDay, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+							css: {
+								lineHeight: "$sizes$6",
+								textAlign: "center"
+							},
+							children: weekDay
+						}, index)), days.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							type: "button",
+							css: {
+								width: "32px",
+								px: 0,
+								color: !d.disabled && !d.inCurrentMonth && !d.selected ? "$textSubtle" : void 0,
+								fontWeight: d.now && !d.selected ? "$bold" : void 0,
+								textAlign: "center"
+							},
+							ghost: !d.selected,
+							variant: d.now || d.selected ? "primary" : "secondary",
+							...dayButton(d),
+							tabIndex: dayButton(d).disabled ? dayButton(d).tabIndex : 0,
+							children: d.day
+						}, d.$date.toString()))] })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+						direction: "column",
+						css: {
+							display: page === 1 ? "flex" : "none",
+							height: "100%"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
+							centerButtonLabel: year,
+							centerButtonOnClick: () => setPage(2),
+							leftButtonProps: subtractOffset({ years: 1 }),
+							rightButtonProps: addOffset({ years: 1 })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreeColGrid, { children: months.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							type: "button",
+							css: {
+								px: 0,
+								fontWeight: m.now && !m.selected ? "$bold" : void 0,
+								textAlign: "center"
+							},
+							ghost: !m.selected,
+							variant: m.now || m.selected ? "primary" : "secondary",
+							...monthButton(m),
+							onClick: (evt) => {
+								setPage(0);
+								const fn = monthButton(m).onClick;
+								if (typeof fn !== "undefined") fn(evt);
+							},
+							tabIndex: monthButton(m).disabled ? monthButton(m).tabIndex : 0,
+							children: m.month
+						}, m.$date.toString())) })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+						direction: "column",
+						css: {
+							display: page === 2 ? "flex" : "none",
+							height: "100%"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
+							centerButtonLabel: `${years[0].year} - ${years[years.length - 1].year}`,
+							centerButtonOnClick: () => setPage(0),
+							leftButtonProps: previousYearsButton(),
+							rightButtonProps: nextYearsButton()
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreeColGrid, { children: years.map((y) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							type: "button",
+							css: {
+								px: 0,
+								fontWeight: y.now && !y.selected ? "$bold" : void 0,
+								textAlign: "center"
+							},
+							ghost: !y.selected,
+							variant: y.now || y.selected ? "primary" : "secondary",
+							...yearButton(y),
+							onClick: (evt) => {
+								setPage(0);
+								const fn = yearButton(y).onClick;
+								if (typeof fn !== "undefined") fn(evt);
+							},
+							tabIndex: yearButton(y).disabled ? yearButton(y).tabIndex : 0,
+							children: y.year
+						}, y.$date.toString())) })]
+					})
+				]
+			}), showTimePicker ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+				css: {
+					flex: 1,
+					width: "90px",
+					position: "relative",
+					overflow: "auto"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+					direction: "column",
+					gap: "1",
+					css: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						height: "100%",
+						width: "100%"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+						css: {
+							mt: "32px",
+							ml: "8px",
+							lineHeight: "$sizes$6"
+						},
+						children: "Time"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+						direction: "column",
+						gap: "1",
+						css: {
+							overflow: "auto",
+							px: "$2"
+						},
+						children: time.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							type: "button",
+							css: {
+								px: "$2",
+								fontWeight: t.now && !t.selected ? "$bold" : void 0,
+								textAlign: "center"
+							},
+							ghost: !t.selected,
+							variant: t.now || t.selected ? "primary" : "secondary",
+							...timeButton(t),
+							onClick: (evt) => {
+								const fn = timeButton(t).onClick;
+								if (typeof fn !== "undefined") fn(evt);
+								if (typeof onTimeButtonClick !== "undefined") onTimeButtonClick();
+							},
+							tabIndex: timeButton(t).disabled ? timeButton(t).tabIndex : 0,
+							children: t.time
+						}, t.$date.toString()))
+					})]
+				})
+			}) : void 0] }), showDatePresets ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+				gap: "2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						type: "button",
+						css: { flex: "1 1 0" },
+						variant: "secondary",
+						onClick: () => {
+							config.onDatesChange([(0, date_fns.addMonths)(/* @__PURE__ */ new Date(), 1)]);
+							if (typeof onFastTravelClick !== "undefined") onFastTravelClick();
+						},
+						children: "Now + 1 M"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						type: "button",
+						css: { flex: "1 1 0" },
+						variant: "secondary",
+						onClick: () => {
+							config.onDatesChange([(0, date_fns.addMonths)(/* @__PURE__ */ new Date(), 3)]);
+							if (typeof onFastTravelClick !== "undefined") onFastTravelClick();
+						},
+						children: "Now + 3 M"
+					}),
+					showTimePicker ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						type: "button",
+						css: { flex: "1 1 0" },
+						variant: "secondary",
+						onClick: () => {
+							config.onDatesChange([(0, date_fns.addYears)(/* @__PURE__ */ new Date(), 1)]);
+							if (typeof onFastTravelClick !== "undefined") onFastTravelClick();
+						},
+						children: "Now + 1 Y"
+					}) : void 0
+				]
+			}) : void 0]
+		})
+	});
+});
+//#endregion
 exports.DateTimePicker = DateTimePicker;
-//# sourceMappingURL=DateTimePicker.cjs.map
+
+//# sourceMappingURL=DateTimePicker.cjs.map