@veracity/vui/dist/calendar/components/dayPicker.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../../utils/styles.js";
import { th } from "../../core/theme.js";
import styled from "../../core/styled.js";
import { Box } from "../../box/box.js";
import { CalendarItem, CalendarItemsContainer } from "../calendar.styles.js";
import { weekDays } from "../consts.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/calendar/components/dayPicker.tsx
const DayItem = styled(CalendarItem)`
  aspect-ratio: 1;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  width: 40px;
  height: 40px;
  color: ${th.color("seaBlue.main")};
  display: inline-flex;
  align-items: center;

  & > .vui-t {
    margin-bottom: -3px;
  }
`;
const DaysContainer = styled(CalendarItemsContainer)`
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto;
`;
const DayPicker = ({ calendar, onSelectDay }) => /* @__PURE__ */ jsxs(DaysContainer, {
	className: cs("vui-day-picker"),
	mt: 1,
	wrap: true,
	children: [weekDays.map((day, index) => /* @__PURE__ */ jsx(Box, {
		border: 0,
		className: "dayHeader",
		color: "seaBlue.main",
		fontSize: 16,
		fontWeight: 500,
		children: day
	}, `week-day-${index}`)), calendar.items.map((item) => /* @__PURE__ */ jsx(DayItem, {
		className: cs("vui-day-item"),
		onClick: !item.isDisabled && onSelectDay?.(item.date) || void 0,
		...item,
		children: item.date.getUTCDate()
	}, item.date.getTime()))]
});

//#endregion
export { DayPicker };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=dayPicker.js.map