@gnist/design-system 0.1.0

package/dist/components/inputs/pickers/Calendar.css.d.ts

@@ -0,0 +1,38 @@
+export declare const containerStyle: string;
+export declare const gridStyle: string;
+export declare const rowStyle: string;
+export declare const firstDay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const selectMonthRow: string;
+export declare const headerCell: string;
+export declare const cellRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    isToday: {
+        true: {
+            border: `var(--${string}) var(--${string}) solid` | `var(--${string}) var(--${string}, ${string}) solid` | `var(--${string}) var(--${string}, ${number}) solid` | `var(--${string}, ${string}) var(--${string}) solid` | `var(--${string}, ${string}) var(--${string}, ${string}) solid` | `var(--${string}, ${string}) var(--${string}, ${number}) solid` | `var(--${string}, ${number}) var(--${string}) solid` | `var(--${string}, ${number}) var(--${string}, ${string}) solid` | `var(--${string}, ${number}) var(--${string}, ${number}) solid`;
+        };
+    };
+    isSelected: {
+        true: string[];
+        false: (string | {
+            backgroundColor: "transparent";
+        })[];
+    };
+    isHoliday: {
+        true: {};
+    };
+    isDisabled: {
+        true: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textDecoration: "line-through";
+        };
+    };
+    isUnavailable: {
+        true: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textDecoration: "line-through";
+        };
+    };
+}>;
+export declare const buttonRow: string;
+export declare const arrowButton: string;
+export declare const cellSkeletonStyle: string;
+//# sourceMappingURL=Calendar.css.d.ts.map

package/dist/components/inputs/pickers/Calendar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/Calendar.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc,QAazB,CAAC;AAEH,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QASnB,CAAC;AAEH,eAAO,MAAM,QAAQ,oFAAc,CAAC;AAMpC,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuErB,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA6C,CAAC;AAEtE,eAAO,MAAM,iBAAiB,QAQ5B,CAAC"}

package/dist/components/inputs/pickers/Calendar.css.js

@@ -0,0 +1,152 @@
+"use client";
+import { focusStyle, stateLayers } from "../../../styles/states.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style, createVar, globalStyle } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+const containerStyle = style([
+  atoms({
+    display: "flex",
+    flexDirection: "column",
+    padding: "s",
+    gap: "xs",
+    borderRadius: "input",
+    boxShadow: "low",
+    backgroundColor: "surface"
+  }),
+  {
+    width: "fit-content"
+  }
+]);
+const gridStyle = style([
+  atoms({
+    display: "flex",
+    flexDirection: "column",
+    gap: "xs"
+  }),
+  {
+    width: "fit-content"
+  }
+]);
+const rowStyle = style([
+  atoms({
+    gap: "base",
+    height: "xl"
+  }),
+  {
+    display: "grid",
+    gridTemplateColumns: `repeat(7, ${tokens.size.xl} [col-start])`
+  }
+]);
+const firstDay = createVar();
+globalStyle(`${rowStyle} > *:first-child`, {
+  gridColumn: firstDay ? calc(firstDay).add(1).toString() : 1
+});
+const selectMonthRow = atoms({
+  display: "flex",
+  justifyContent: "space-between",
+  typography: "body-medium"
+});
+const headerCell = style([
+  { textAlign: "center" },
+  atoms({ typography: "detail-large" })
+]);
+const cellRecipe = recipe({
+  base: [
+    atoms({
+      typography: "body-large",
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex",
+      borderRadius: "picker"
+    }),
+    focusStyle,
+    {
+      padding: 0,
+      position: "relative",
+      height: "100%",
+      width: "100%",
+      border: "none"
+    }
+  ],
+  variants: {
+    isToday: {
+      true: {
+        border: `${tokens.stroke.small} ${tokens.color.primary} solid`
+      }
+    },
+    isSelected: {
+      true: [
+        atoms({
+          backgroundColor: "primary",
+          color: "on-primary"
+        })
+      ],
+      false: [
+        atoms({
+          color: "on-background"
+        }),
+        {
+          backgroundColor: "transparent"
+        }
+      ]
+    },
+    isHoliday: { true: {} },
+    isDisabled: {
+      true: {
+        color: tokens.color["text-variant"],
+        textDecoration: "line-through"
+      }
+    },
+    isUnavailable: {
+      true: {
+        color: tokens.color["text-variant"],
+        textDecoration: "line-through"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { isSelected: false, isHoliday: true },
+      style: atoms({
+        color: "error"
+      })
+    },
+    {
+      variants: { isUnavailable: false, isDisabled: false },
+      style: stateLayers({
+        borderSize: "none",
+        borderRadius: "picker",
+        backgroundColor: "on-background",
+        setFocusState: false
+      })
+    }
+  ]
+});
+const buttonRow = atoms({
+  display: "flex",
+  gap: "base"
+});
+const arrowButton = style([atoms({ color: "on-background" })]);
+const cellSkeletonStyle = style([
+  atoms({
+    padding: "base",
+    borderRadius: "picker"
+  }),
+  {
+    boxSizing: "border-box"
+  }
+]);
+export {
+  arrowButton,
+  buttonRow,
+  cellRecipe,
+  cellSkeletonStyle,
+  containerStyle,
+  firstDay,
+  gridStyle,
+  headerCell,
+  rowStyle,
+  selectMonthRow
+};

package/dist/components/inputs/pickers/calendar.cjs

@@ -0,0 +1,210 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const componentUtils = require("@gnist/component-utils");
+require("../../../building-blocks/inputs/internal/TextBelowInput.cjs");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/typography/index.cjs");
+const React = require("react");
+require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+require("@gnist/themes/atoms.css.js");
+require("../../../utilities/layout/Row.cjs");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+const RectangularSkeleton = require("../../../building-blocks/skeletons/RectangularSkeleton.cjs");
+const index = require("../../../translations/index.cjs");
+const date = require("../../../utilities/time/date.cjs");
+const dynamic = require("@vanilla-extract/dynamic");
+const Array = require("fp-ts/Array");
+const _function = require("fp-ts/function");
+require("../../actions/buttons/PrimaryButton.cjs");
+require("../../actions/buttons/SecondaryButton.cjs");
+require("../../actions/buttons/SuccessButton.cjs");
+require("../../actions/buttons/DangerButton.cjs");
+require("../../actions/buttons/GhostButton.cjs");
+require("../../actions/buttons/TextButton.cjs");
+const IconButton = require("../../actions/buttons/IconButton.cjs");
+require("../../actions/selectionControls/Checkbox.cjs");
+require("../../actions/selectionControls/RadioButton.cjs");
+require("../../actions/chips/ActionChip.cjs");
+require("../../actions/chips/FilterChip.cjs");
+require("../../actions/chips/TagChip.cjs");
+const Calendar_css = require("./Calendar.css.cjs");
+const HeaderCell = componentUtils.component("HeaderCell", Calendar_css.headerCell, "div");
+function weekDayNumberStartingMonday(date2) {
+  return (date2.getDay() + 6) % 7;
+}
+const Week = ({ weekDays, current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
+  function isDateWithinRange(date2) {
+    return date2 >= (minDate ?? -Infinity) && date2 <= (maxDate ?? Infinity);
+  }
+  const moveToDate = (date2) => {
+    if (!isDateWithinRange(date2)) {
+      return;
+    }
+    setCurrent(date2);
+    setFocus(date2);
+  };
+  if (isLoading) {
+    return jsxRuntime.jsx("div", { className: Calendar_css.rowStyle, role: "row", style: {
+      ...dynamic.assignInlineVars({
+        [Calendar_css.firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString()
+      })
+    }, children: weekDays.map((d) => jsxRuntime.jsx(RectangularSkeleton.RectangularSkeleton, { className: Calendar_css.cellSkeletonStyle }, d.getTime())) });
+  }
+  return jsxRuntime.jsx("div", { className: Calendar_css.rowStyle, role: "row", style: {
+    ...dynamic.assignInlineVars({
+      [Calendar_css.firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString()
+    })
+  }, children: weekDays.map((d) => jsxRuntime.jsx("button", { className: Calendar_css.cellRecipe({
+    isToday: date.isSameDate(d, date.today()),
+    isSelected: selected ? date.isSameDate(d, selected) : false,
+    isHoliday: date.isNorwegianHoliday(d),
+    isDisabled: !isDateWithinRange(d),
+    isUnavailable: (isDateUnavailable == null ? void 0 : isDateUnavailable(d)) || false
+  }), role: "gridcell", "aria-selected": selected ? date.isSameDate(d, selected) : false, disabled: !isDateWithinRange(d), "aria-disabled": (isDateUnavailable == null ? void 0 : isDateUnavailable(d)) ? true : void 0, tabIndex: date.isSameDate(current, d) ? 0 : -1, ref: date.isSameDate(focused, d) ? focusRef : void 0, onKeyDown: (event) => {
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        moveToDate(date.addDays(current, -7));
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        moveToDate(date.addDays(current, 7));
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        moveToDate(date.addDays(current, -1));
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        moveToDate(date.addDays(current, 1));
+        break;
+      case "Home":
+        event.preventDefault();
+        if (event.ctrlKey) {
+          if (minDate && date.minDayOfMonth(d) < minDate) {
+            moveToDate(minDate);
+            break;
+          }
+          moveToDate(date.minDayOfMonth(d));
+          break;
+        }
+        if (minDate && weekDays[0] < minDate) {
+          moveToDate(minDate);
+          break;
+        }
+        moveToDate(weekDays[0]);
+        break;
+      case "End":
+        event.preventDefault();
+        if (event.ctrlKey) {
+          if (maxDate && date.maxDayOfMonth(d) > maxDate) {
+            moveToDate(maxDate);
+            break;
+          }
+          moveToDate(date.maxDayOfMonth(d));
+          break;
+        }
+        if (maxDate && weekDays[weekDays.length - 1] > maxDate) {
+          moveToDate(maxDate);
+          break;
+        }
+        moveToDate(weekDays[weekDays.length - 1]);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        if (minDate && date.nextMonth(d, -1) < minDate) {
+          moveToDate(minDate);
+          break;
+        }
+        moveToDate(date.nextMonth(d, -1));
+        break;
+      case "PageDown":
+        event.preventDefault();
+        if (maxDate && date.nextMonth(d, 1) > maxDate) {
+          moveToDate(maxDate);
+          break;
+        }
+        moveToDate(date.nextMonth(d, 1));
+        break;
+    }
+  }, onClick: () => {
+    if (isDateUnavailable == null ? void 0 : isDateUnavailable(d)) {
+      return;
+    }
+    moveToDate(d);
+    setSelected(d);
+  }, children: d.getDate() }, d.getTime())) });
+};
+function getWeeksInMonth(month) {
+  const firstDayOfMonth = date.minDayOfMonth(month);
+  const lastDayOfMonth = date.maxDayOfMonth(month);
+  const numberOfDaysInFirstWeek = 7 - weekDayNumberStartingMonday(firstDayOfMonth);
+  const numberOfDaysInMonth = lastDayOfMonth.getDate();
+  const daysInMonth = Array.makeBy(numberOfDaysInMonth, (n) => date.addDays(firstDayOfMonth, n));
+  return _function.pipe(daysInMonth, Array.splitAt(numberOfDaysInFirstWeek), ([firstWeek, remainingDays]) => [
+    firstWeek,
+    ...Array.chunksOf(7)(remainingDays)
+  ]);
+}
+const DateGrid = ({ current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
+  const weeks = getWeeksInMonth(current);
+  return jsxRuntime.jsx("div", { style: { display: "grid", gap: tokens_css_js.tokens.spacing.base }, role: "rowgroup", children: weeks.map((week) => jsxRuntime.jsx(Week, { weekDays: week, setCurrent, current, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }, week[0].toString())) });
+};
+function clampDate(date2, minDate, maxDate) {
+  if (minDate && date2 < minDate) {
+    return minDate;
+  }
+  if (maxDate && date2 > maxDate) {
+    return maxDate;
+  }
+  return date2;
+}
+const Calendar = React.forwardRef(function Calendar2({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading }, ref) {
+  const minDate = origMinDate ? date.getStartOfDay(origMinDate) : void 0;
+  const maxDate = origMaxDate ? date.getStartOfDay(origMaxDate) : void 0;
+  const text = index.useTranslation((t) => t.components.inputs.pickers.calendar);
+  const days = text.shortDayNames;
+  const getMonthName = (month) => {
+    if (month <= 0 || month > 12) {
+      return "";
+    }
+    return text.monthNames[month];
+  };
+  const [current, internalSetCurrent] = React.useState(clampDate(date.today(), minDate, maxDate));
+  React.useEffect(() => {
+    internalSetCurrent((d) => clampDate(d, minDate, maxDate));
+  }, [maxDate, minDate]);
+  const setCurrent = (date2) => {
+    internalSetCurrent(date2);
+    onNavigate == null ? void 0 : onNavigate(date2);
+  };
+  const [focused, setFocus] = React.useState(current);
+  const focusRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+    (_a = focusRef.current) == null ? void 0 : _a.focus();
+  }, [focused]);
+  const handleChangeMonth = (count) => {
+    const tmp = date.nextMonth(current, count);
+    if (count === -1) {
+      const nextDate = minDate && tmp < minDate ? minDate : tmp;
+      setCurrent(nextDate);
+    } else {
+      const nextDate = maxDate && tmp > maxDate ? maxDate : tmp;
+      setCurrent(nextDate);
+    }
+  };
+  return jsxRuntime.jsxs("div", { className: Calendar_css.containerStyle, role: "group", "aria-label": text.calendar, ref, children: [jsxRuntime.jsxs("div", { className: Calendar_css.selectMonthRow, children: [jsxRuntime.jsxs("span", { "aria-live": "polite", children: [getMonthName(current.getMonth() + 1), " ", current.getFullYear(), " "] }), jsxRuntime.jsxs("div", { className: Calendar_css.buttonRow, children: [jsxRuntime.jsx(IconButton.IconButton, { className: Calendar_css.arrowButton, icon: "arrow_backward", onClick: () => {
+    handleChangeMonth(-1);
+  }, label: text.showPreviousMonth, disabled: minDate && date.maxDayOfMonth(date.nextMonth(current, -1)) < minDate }), jsxRuntime.jsx(IconButton.IconButton, { className: Calendar_css.arrowButton, icon: "arrow_forward", onClick: () => {
+    handleChangeMonth(1);
+  }, label: text.showNextMonth, disabled: maxDate && date.nextMonth(current, 1) > maxDate })] })] }), jsxRuntime.jsxs("div", { className: Calendar_css.gridStyle, role: "grid", children: [jsxRuntime.jsxs("div", { className: Calendar_css.rowStyle, role: "row", style: { height: "unset" }, children: [jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.mon }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.tue }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.wed }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.thu }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.fri }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.sat }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.sun })] }), jsxRuntime.jsx(DateGrid, { current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading: !!isLoading })] })] });
+});
+exports.Calendar = Calendar;

package/dist/components/inputs/pickers/calendar.d.ts

@@ -0,0 +1,19 @@
+export interface CalendarProps {
+    /** Seleted date */
+    selected: Date | undefined;
+    /** Function for selecting date */
+    setSelected: (date: Date | undefined) => void;
+    /** Function to determine whether a date is unavailable */
+    isDateUnavailable?: (date: Date) => boolean;
+    /** The first enabled date */
+    minDate?: Date;
+    /** The last enabled date */
+    maxDate?: Date;
+    /** A callback that is called when the user navigates in the calendar */
+    onNavigate?: (date: Date) => void;
+    /** Decides if the calendar is in a loading state */
+    isLoading?: boolean;
+}
+/** When a user does not know what date they will select, it can be useful to offer a browsing experience using a calendar component. This allows users to see dates organized into weeks and months, or with additional context such as which dates are unavailable for selection. */
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/inputs/pickers/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/calendar.tsx"],"names":[],"mappings":"AA6SA,MAAM,WAAW,aAAa;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,kCAAkC;IAClC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,sRAAsR;AAEtR,eAAO,MAAM,QAAQ,0GAyHnB,CAAC"}

package/dist/components/inputs/pickers/calendar.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { component } from "@gnist/component-utils";
+import "../../../building-blocks/inputs/internal/TextBelowInput.js";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import "../../../foundation/iconography/Icon.js";
+import "../../../foundation/typography/index.js";
+import { forwardRef, useState, useEffect, useRef } from "react";
+import "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import "@gnist/themes/atoms.css.js";
+import "../../../utilities/layout/Row.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+import { RectangularSkeleton } from "../../../building-blocks/skeletons/RectangularSkeleton.js";
+import { useTranslation } from "../../../translations/index.js";
+import { getStartOfDay, today, maxDayOfMonth, nextMonth, isSameDate, isNorwegianHoliday, minDayOfMonth, addDays } from "../../../utilities/time/date.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { makeBy, splitAt, chunksOf } from "fp-ts/Array";
+import { pipe } from "fp-ts/function";
+import "../../actions/buttons/PrimaryButton.js";
+import "../../actions/buttons/SecondaryButton.js";
+import "../../actions/buttons/SuccessButton.js";
+import "../../actions/buttons/DangerButton.js";
+import "../../actions/buttons/GhostButton.js";
+import "../../actions/buttons/TextButton.js";
+import { IconButton } from "../../actions/buttons/IconButton.js";
+import "../../actions/selectionControls/Checkbox.js";
+import "../../actions/selectionControls/RadioButton.js";
+import "../../actions/chips/ActionChip.js";
+import "../../actions/chips/FilterChip.js";
+import "../../actions/chips/TagChip.js";
+import { headerCell, containerStyle, selectMonthRow, buttonRow, arrowButton, gridStyle, rowStyle, firstDay, cellSkeletonStyle, cellRecipe } from "./Calendar.css.js";
+const HeaderCell = component("HeaderCell", headerCell, "div");
+function weekDayNumberStartingMonday(date) {
+  return (date.getDay() + 6) % 7;
+}
+const Week = ({ weekDays, current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
+  function isDateWithinRange(date) {
+    return date >= (minDate ?? -Infinity) && date <= (maxDate ?? Infinity);
+  }
+  const moveToDate = (date) => {
+    if (!isDateWithinRange(date)) {
+      return;
+    }
+    setCurrent(date);
+    setFocus(date);
+  };
+  if (isLoading) {
+    return jsx("div", { className: rowStyle, role: "row", style: {
+      ...assignInlineVars({
+        [firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString()
+      })
+    }, children: weekDays.map((d) => jsx(RectangularSkeleton, { className: cellSkeletonStyle }, d.getTime())) });
+  }
+  return jsx("div", { className: rowStyle, role: "row", style: {
+    ...assignInlineVars({
+      [firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString()
+    })
+  }, children: weekDays.map((d) => jsx("button", { className: cellRecipe({
+    isToday: isSameDate(d, today()),
+    isSelected: selected ? isSameDate(d, selected) : false,
+    isHoliday: isNorwegianHoliday(d),
+    isDisabled: !isDateWithinRange(d),
+    isUnavailable: (isDateUnavailable == null ? void 0 : isDateUnavailable(d)) || false
+  }), role: "gridcell", "aria-selected": selected ? isSameDate(d, selected) : false, disabled: !isDateWithinRange(d), "aria-disabled": (isDateUnavailable == null ? void 0 : isDateUnavailable(d)) ? true : void 0, tabIndex: isSameDate(current, d) ? 0 : -1, ref: isSameDate(focused, d) ? focusRef : void 0, onKeyDown: (event) => {
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        moveToDate(addDays(current, -7));
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        moveToDate(addDays(current, 7));
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        moveToDate(addDays(current, -1));
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        moveToDate(addDays(current, 1));
+        break;
+      case "Home":
+        event.preventDefault();
+        if (event.ctrlKey) {
+          if (minDate && minDayOfMonth(d) < minDate) {
+            moveToDate(minDate);
+            break;
+          }
+          moveToDate(minDayOfMonth(d));
+          break;
+        }
+        if (minDate && weekDays[0] < minDate) {
+          moveToDate(minDate);
+          break;
+        }
+        moveToDate(weekDays[0]);
+        break;
+      case "End":
+        event.preventDefault();
+        if (event.ctrlKey) {
+          if (maxDate && maxDayOfMonth(d) > maxDate) {
+            moveToDate(maxDate);
+            break;
+          }
+          moveToDate(maxDayOfMonth(d));
+          break;
+        }
+        if (maxDate && weekDays[weekDays.length - 1] > maxDate) {
+          moveToDate(maxDate);
+          break;
+        }
+        moveToDate(weekDays[weekDays.length - 1]);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        if (minDate && nextMonth(d, -1) < minDate) {
+          moveToDate(minDate);
+          break;
+        }
+        moveToDate(nextMonth(d, -1));
+        break;
+      case "PageDown":
+        event.preventDefault();
+        if (maxDate && nextMonth(d, 1) > maxDate) {
+          moveToDate(maxDate);
+          break;
+        }
+        moveToDate(nextMonth(d, 1));
+        break;
+    }
+  }, onClick: () => {
+    if (isDateUnavailable == null ? void 0 : isDateUnavailable(d)) {
+      return;
+    }
+    moveToDate(d);
+    setSelected(d);
+  }, children: d.getDate() }, d.getTime())) });
+};
+function getWeeksInMonth(month) {
+  const firstDayOfMonth = minDayOfMonth(month);
+  const lastDayOfMonth = maxDayOfMonth(month);
+  const numberOfDaysInFirstWeek = 7 - weekDayNumberStartingMonday(firstDayOfMonth);
+  const numberOfDaysInMonth = lastDayOfMonth.getDate();
+  const daysInMonth = makeBy(numberOfDaysInMonth, (n) => addDays(firstDayOfMonth, n));
+  return pipe(daysInMonth, splitAt(numberOfDaysInFirstWeek), ([firstWeek, remainingDays]) => [
+    firstWeek,
+    ...chunksOf(7)(remainingDays)
+  ]);
+}
+const DateGrid = ({ current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
+  const weeks = getWeeksInMonth(current);
+  return jsx("div", { style: { display: "grid", gap: tokens.spacing.base }, role: "rowgroup", children: weeks.map((week) => jsx(Week, { weekDays: week, setCurrent, current, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }, week[0].toString())) });
+};
+function clampDate(date, minDate, maxDate) {
+  if (minDate && date < minDate) {
+    return minDate;
+  }
+  if (maxDate && date > maxDate) {
+    return maxDate;
+  }
+  return date;
+}
+const Calendar = forwardRef(function Calendar2({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading }, ref) {
+  const minDate = origMinDate ? getStartOfDay(origMinDate) : void 0;
+  const maxDate = origMaxDate ? getStartOfDay(origMaxDate) : void 0;
+  const text = useTranslation((t) => t.components.inputs.pickers.calendar);
+  const days = text.shortDayNames;
+  const getMonthName = (month) => {
+    if (month <= 0 || month > 12) {
+      return "";
+    }
+    return text.monthNames[month];
+  };
+  const [current, internalSetCurrent] = useState(clampDate(today(), minDate, maxDate));
+  useEffect(() => {
+    internalSetCurrent((d) => clampDate(d, minDate, maxDate));
+  }, [maxDate, minDate]);
+  const setCurrent = (date) => {
+    internalSetCurrent(date);
+    onNavigate == null ? void 0 : onNavigate(date);
+  };
+  const [focused, setFocus] = useState(current);
+  const focusRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = focusRef.current) == null ? void 0 : _a.focus();
+  }, [focused]);
+  const handleChangeMonth = (count) => {
+    const tmp = nextMonth(current, count);
+    if (count === -1) {
+      const nextDate = minDate && tmp < minDate ? minDate : tmp;
+      setCurrent(nextDate);
+    } else {
+      const nextDate = maxDate && tmp > maxDate ? maxDate : tmp;
+      setCurrent(nextDate);
+    }
+  };
+  return jsxs("div", { className: containerStyle, role: "group", "aria-label": text.calendar, ref, children: [jsxs("div", { className: selectMonthRow, children: [jsxs("span", { "aria-live": "polite", children: [getMonthName(current.getMonth() + 1), " ", current.getFullYear(), " "] }), jsxs("div", { className: buttonRow, children: [jsx(IconButton, { className: arrowButton, icon: "arrow_backward", onClick: () => {
+    handleChangeMonth(-1);
+  }, label: text.showPreviousMonth, disabled: minDate && maxDayOfMonth(nextMonth(current, -1)) < minDate }), jsx(IconButton, { className: arrowButton, icon: "arrow_forward", onClick: () => {
+    handleChangeMonth(1);
+  }, label: text.showNextMonth, disabled: maxDate && nextMonth(current, 1) > maxDate })] })] }), jsxs("div", { className: gridStyle, role: "grid", children: [jsxs("div", { className: rowStyle, role: "row", style: { height: "unset" }, children: [jsx(HeaderCell, { role: "columnheader", children: days.mon }), jsx(HeaderCell, { role: "columnheader", children: days.tue }), jsx(HeaderCell, { role: "columnheader", children: days.wed }), jsx(HeaderCell, { role: "columnheader", children: days.thu }), jsx(HeaderCell, { role: "columnheader", children: days.fri }), jsx(HeaderCell, { role: "columnheader", children: days.sat }), jsx(HeaderCell, { role: "columnheader", children: days.sun })] }), jsx(DateGrid, { current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading: !!isLoading })] })] });
+});
+export {
+  Calendar
+};

package/dist/components/inputs/pickers/index.cjs

@@ -0,0 +1,5 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const calendar = require("./calendar.cjs");
+exports.Calendar = calendar.Calendar;

package/dist/components/inputs/pickers/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./calendar.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/pickers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/inputs/pickers/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { Calendar } from "./calendar.js";
+export {
+  Calendar
+};

package/dist/components/inputs/pickers/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}