@arolariu/components/dist/components/ui/calendar_module.css.map

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

{"version":3,"sources":["webpack://./src/components/ui/calendar.module.css"],"names":[],"mappings":"AAAA;EACE,sCAAsC;EACtC,sCAAsC;EACtC,kCAAkC;EAClC,2BAA2B;EAC3B,0BAA0B;AAC5B;;AAOA;EAJE,kBAAkB;AACpB;;AAOA;EAJE,sBAAsB;EACtB,sBAAsB;EACtB,aAAa;EACb,kBAAkB;AACpB;;AAOA;EACE;IAJE,mBAAmB;EACrB;AACF;;AAOA;EAJE,sBAAsB;EACtB,sBAAsB;AACxB;;AASA;EANE,WAAW;EACX,aAAa;AACf;;AAIA;EADE,mBAAmB;EACnB,sBAAsB;EACtB,eAAe;EACf,8BAA8B;EAC9B,kBAAkB;EAClB,MAAM;AACR;;AAMA;EAHE,2BAA2B;EAC3B,0BAA0B;EAC1B,UAAU;;EAMV;IAHE,WAAW;EACb;AACF;;AAOA;EAJE,mCAAmC;AACrC;;AAYA;EATE,2BAA2B;EAC3B,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,aAAa;AACf;;AAIA;EADE,4BAA4B;EAC5B,sBAAsB;EACtB,gBAAgB;AAClB;;AASA;EANE,sCAAsC;EACtC,kCAAkC;EAClC,kCAAkC;EAClC,kBAAkB;EAClB,+BAA+B;;EAS/B;IANE,4BAA4B;IAC5B,qEAAqE;IACrE,iBAAiB;EACnB;AACF;;AASA;EANE,UAAU;EACV,kBAAkB;EAClB,QAAQ;AACV;;AASA;EANE,4BAA4B;EAC5B,yBAAyB;EACzB,iBAAiB;EACjB,gBAAgB;AAClB;;AAQA;EALE,kCAAkC;EAClC,mBAAmB;EACnB,sBAAsB;EACtB,YAAY;EACZ,iCAAiC;EACjC,aAAa;AACf;;AAQA;EALE,yBAAyB;EACzB,WAAW;AACb;;AAQA;EALE,aAAa;AACf;;AAQA;EALE,kCAAkC;EAClC,iCAAiC;EACjC,kBAAkB;EAClB,yBAAyB;EACzB,iBAAiB;EACjB,OAAO;EACP,gBAAgB;EAChB,gBAAgB;AAClB;;AAOA;EAJE,6BAA6B;EAC7B,WAAW;EACX,aAAa;AACf;;AAOA;EAJE,iCAAiC;EACjC,kBAAkB;EAClB,yBAAyB;EACzB,iBAAiB;EACjB,0BAA0B;EAC1B,gBAAgB;AAClB;;AAOA;EAJE,2BAA2B;EAC3B,kBAAkB;EAClB,0BAA0B;EAC1B,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf;;AAOA;EAJE,kBAAkB;EAClB,yBAAyB;EACzB,iBAAiB;EACjB,WAAW;EACX,YAAY;EACZ,UAAU;EACV,kBAAkB;AACpB;;AAMA;EAHE,iCAAiC;EACjC,8CAA8C;EAC9C,2CAA2C;AAC7C;;AAMA;EAHE,gBAAgB;AAClB;;AAMA;EAHE,+CAA+C;EAC/C,4CAA4C;AAC9C;;AAOA;EAJE,iCAAiC;AACnC;;AAGA;EAAE,kCAAkC;EAClC,2BAA2B;AAC7B;;AAQA;EALE,iCAAiC;AACnC;;AAIA;EADE,WAAW;AACb;;AAKA;EAFE,kBAAkB;AACpB;;AAKA;EAFE,WAAW;EACX,YAAY;AACd;;AAKA;EAFE,eAAe;EACf,sBAAsB;EACtB,YAAY;EACZ,8BAA8B;EAC9B,UAAU;EACV,sBAAsB;EACtB,WAAW;EACX,gBAAgB;EAChB,cAAc;EACd,aAAa;EACb,kBAAkB;;EAKlB;IAFE,qEAAqE;IACrE,oBAAoB;IACpB,UAAU;EACZ;;EAMA;IAHE,sCAAsC;IACtC,2BAA2B;EAC7B;;EAQA;IALE,iCAAiC;IACjC,2BAA2B;IAC3B,gBAAgB;EAClB;;EAQA;IALE,kCAAkC;EACpC;;EASA;IANE,4BAA4B;IAC5B,WAAW;EACb;AACF","sourcesContent":[".container {\r\n  --ac-cell-size: var(--ac-size-default);\r\n  width: fit-content;\r\n  padding: var(--ac-space-3);\r\n  background-color: var(--ac-background);\r\n  color: var(--ac-foreground);\r\n  border-radius: var(--ac-radius-lg);\r\n}\r\n\r\n.calendarRoot {\r\n  width: fit-content;\r\n}\r\n\r\n.root {\r\n  width: fit-content;\r\n}\r\n\r\n.months {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--ac-space-4);\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .months {\r\n    flex-direction: row;\r\n  }\r\n}\r\n\r\n.month {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--ac-space-4);\r\n}\r\n\r\n.nav {\r\n  position: absolute;\r\n  inset-inline: 0;\r\n  top: 0;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--ac-space-1);\r\n}\r\n\r\n.navButton {\r\n  width: var(--ac-cell-size);\r\n  height: var(--ac-cell-size);\r\n  padding: 0;\r\n\r\n  &[disabled],\r\n  &[aria-disabled=\"true\"] {\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n.monthCaption {\r\n  display: flex;\r\n  width: 100%;\r\n  height: var(--ac-cell-size);\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-inline: var(--ac-cell-size);\r\n}\r\n\r\n.dropdowns {\r\n  display: flex;\r\n  width: 100%;\r\n  height: var(--ac-cell-size);\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--ac-space-2);\r\n  font-size: var(--ac-text-sm);\r\n  font-weight: 500;\r\n}\r\n\r\n.dropdownRoot {\r\n  position: relative;\r\n  border: 1px solid var(--ac-border);\r\n  border-radius: var(--ac-radius-md);\r\n  background-color: var(--ac-background);\r\n  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);\r\n\r\n  &:focus-within {\r\n    outline: 3px solid color-mix(in oklch, var(--ac-ring), transparent 65%);\r\n    outline-offset: 0;\r\n    border-color: var(--ac-ring);\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  position: absolute;\r\n  inset: 0;\r\n  opacity: 0;\r\n}\r\n\r\n.captionLabel {\r\n  user-select: none;\r\n  font-size: var(--ac-text-sm);\r\n  font-weight: 500;\r\n}\r\n\r\n.captionLabelDropdown {\r\n  display: flex;\r\n  height: 2rem;\r\n  align-items: center;\r\n  gap: var(--ac-space-1);\r\n  padding-inline: var(--ac-space-2);\r\n  border-radius: var(--ac-radius-md);\r\n}\r\n\r\n.monthGrid {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\n.weekdays {\r\n  display: flex;\r\n}\r\n\r\n.weekday {\r\n  flex: 1;\r\n  border-radius: var(--ac-radius-md);\r\n  color: var(--ac-muted-foreground);\r\n  font-size: 0.8rem;\r\n  font-weight: 400;\r\n  text-align: center;\r\n  user-select: none;\r\n}\r\n\r\n.week {\r\n  display: flex;\r\n  width: 100%;\r\n  margin-top: var(--ac-space-2);\r\n}\r\n\r\n.weekNumberHeader,\r\n.weekNumber {\r\n  width: var(--ac-cell-size);\r\n  color: var(--ac-muted-foreground);\r\n  font-size: 0.8rem;\r\n  text-align: center;\r\n  user-select: none;\r\n}\r\n\r\n.weekNumberCell {\r\n  display: flex;\r\n  width: var(--ac-cell-size);\r\n  height: var(--ac-cell-size);\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n}\r\n\r\n.day {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  padding: 0;\r\n  text-align: center;\r\n  user-select: none;\r\n}\r\n\r\n.rangeStart {\r\n  border-top-left-radius: var(--ac-radius-md);\r\n  border-bottom-left-radius: var(--ac-radius-md);\r\n  background-color: var(--ac-muted);\r\n}\r\n\r\n.rangeMiddle {\r\n  border-radius: 0;\r\n}\r\n\r\n.rangeEnd {\r\n  border-top-right-radius: var(--ac-radius-md);\r\n  border-bottom-right-radius: var(--ac-radius-md);\r\n  background-color: var(--ac-muted);\r\n}\r\n\r\n.today {\r\n  border-radius: var(--ac-radius-md);\r\n  background-color: var(--ac-muted);\r\n  color: var(--ac-foreground);\r\n}\r\n\r\n.outside {\r\n  color: var(--ac-muted-foreground);\r\n}\r\n\r\n.day[data-disabled=\"true\"] {\r\n  opacity: 0.5;\r\n  color: var(--ac-muted-foreground);\r\n}\r\n\r\n.hidden {\r\n  visibility: hidden;\r\n}\r\n\r\n.chevron {\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.dayButton {\r\n  position: relative;\r\n  z-index: 0;\r\n  display: flex;\r\n  width: 100%;\r\n  min-width: var(--ac-cell-size);\r\n  height: auto;\r\n  aspect-ratio: 1;\r\n  flex-direction: column;\r\n  gap: var(--ac-space-1);\r\n  font-weight: 400;\r\n  line-height: 1;\r\n\r\n  &:focus-visible,\r\n  .day[data-focused=\"true\"] & {\r\n    z-index: 1;\r\n    outline: 3px solid color-mix(in oklch, var(--ac-ring), transparent 65%);\r\n    outline-offset: -1px;\r\n  }\r\n\r\n  &[data-selected-single=\"true\"],\r\n  &[data-range-start=\"true\"],\r\n  &[data-range-end=\"true\"] {\r\n    background-color: var(--ac-foreground);\r\n    color: var(--ac-background);\r\n  }\r\n\r\n  &[data-range-middle=\"true\"] {\r\n    border-radius: 0;\r\n    background-color: var(--ac-muted);\r\n    color: var(--ac-foreground);\r\n  }\r\n\r\n  &[data-range-start=\"true\"],\r\n  &[data-range-end=\"true\"] {\r\n    border-radius: var(--ac-radius-md);\r\n  }\r\n\r\n  & > span {\r\n    font-size: var(--ac-text-xs);\r\n    opacity: 0.7;\r\n  }\r\n}\r\n\r\n"],"sourceRoot":""}