colibri-ui 0.8.67 → 0.8.69

package/Calendar/Calendar.module.css

@@ -0,0 +1,322 @@
+.root {
+  --calendar-cell-size: var(--component-calendar-control-block-size);
+  --calendar-radius: var(--radius-sm);
+  --calendar-font-size: var(--font-size-text-md);
+  --calendar-line-height: var(--line-height-text-md);
+  --calendar-heading-font-size: var(--font-size-heading-sm);
+  --calendar-heading-line-height: var(--line-height-heading-sm);
+  --calendar-nav-icon-size: var(--space-3);
+  --calendar-title-icon-size: var(--space-4);
+  --calendar-weekdays-size: calc(var(--calendar-cell-size) - var(--space-3));
+  --calendar-heading-block-size: calc(
+    var(--calendar-heading-line-height) + var(--space-2)
+  );
+  --calendar-days-block-size: calc(
+    var(--calendar-weekdays-size) + var(--calendar-cell-size) * 6
+  );
+  --calendar-content-block-size: var(--calendar-days-block-size);
+  --calendar-month-inline-size: calc(var(--calendar-cell-size) * 7);
+  --calendar-inline-size: var(--calendar-month-inline-size);
+  color: var(--color-text-primary);
+  display: inline-block;
+  font-family: var(--font-family-ui);
+  position: relative;
+  width: var(--calendar-inline-size);
+}
+
+.xs {
+  --calendar-cell-size: var(--component-input-height-s);
+  --calendar-font-size: var(--font-size-text-xs);
+  --calendar-heading-font-size: var(--font-size-text-sm);
+  --calendar-heading-line-height: var(--line-height-text-sm);
+  --calendar-line-height: var(--line-height-text-xs);
+  --calendar-nav-icon-size: var(--space-3);
+  --calendar-title-icon-size: var(--space-3);
+}
+
+.s {
+  --calendar-cell-size: var(--component-input-height-l);
+  --calendar-font-size: var(--font-size-text-sm);
+  --calendar-heading-font-size: var(--font-size-text-md);
+  --calendar-heading-line-height: var(--line-height-text-md);
+  --calendar-line-height: var(--line-height-text-sm);
+  --calendar-nav-icon-size: var(--space-3);
+  --calendar-title-icon-size: var(--space-3);
+}
+
+.m {
+  --calendar-cell-size: var(--component-calendar-control-block-size);
+  --calendar-font-size: var(--font-size-text-md);
+  --calendar-heading-font-size: var(--font-size-heading-sm);
+  --calendar-heading-line-height: var(--line-height-heading-sm);
+  --calendar-line-height: var(--line-height-text-md);
+  --calendar-radius: var(--radius-sm);
+}
+
+.l {
+  --calendar-cell-size: var(--component-code-field-height-l);
+  --calendar-font-size: var(--font-size-text-lg);
+  --calendar-heading-font-size: var(--font-size-heading-md);
+  --calendar-heading-line-height: var(--line-height-heading-md);
+  --calendar-line-height: var(--line-height-text-lg);
+  --calendar-nav-icon-size: var(--space-3);
+  --calendar-title-icon-size: var(--space-4);
+  --calendar-radius: var(--radius-sm);
+}
+
+.xl {
+  --calendar-cell-size: var(--component-code-field-height-xl);
+  --calendar-font-size: var(--font-size-text-lg);
+  --calendar-heading-font-size: var(--font-size-heading-md);
+  --calendar-heading-line-height: var(--line-height-heading-md);
+  --calendar-line-height: var(--line-height-text-lg);
+  --calendar-nav-icon-size: var(--space-4);
+  --calendar-title-icon-size: var(--space-5);
+  --calendar-radius: var(--radius-md);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  gap: var(--space-2);
+  justify-content: space-between;
+  margin-block-end: var(--space-2);
+}
+
+.header-side {
+  align-items: center;
+  display: flex;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.header-side:first-child {
+  flex: 1 1 auto;
+}
+
+.header-side:last-child {
+  flex: none;
+  justify-content: flex-end;
+}
+
+.nav-button {
+  color: var(--color-icon-primary);
+}
+
+.nav-icon {
+  block-size: auto;
+  display: block;
+  inline-size: var(--calendar-nav-icon-size);
+}
+
+.title-button {
+  font-size: var(--calendar-heading-font-size);
+  font-weight: var(--font-weight-semibold);
+  justify-content: flex-start;
+  max-width: 100%;
+  padding: var(--space-0) var(--space-2);
+  text-transform: capitalize;
+}
+
+.title-button-static {
+  cursor: default;
+  pointer-events: none;
+}
+
+.title-icon {
+  block-size: var(--calendar-title-icon-size);
+  flex: none;
+  inline-size: var(--calendar-title-icon-size);
+}
+
+.calendars {
+  display: flex;
+  gap: var(--space-6);
+}
+
+.content {
+  block-size: var(--calendar-content-block-size);
+  overflow: hidden;
+}
+
+.hidden {
+  display: none;
+}
+
+.month {
+  width: var(--calendar-month-inline-size);
+}
+
+.heading {
+  box-sizing: border-box;
+  font-size: var(--calendar-heading-font-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--calendar-heading-line-height);
+  margin: var(--space-0) var(--space-0) var(--space-2);
+  overflow: hidden;
+  padding: var(--space-0);
+  text-align: center;
+  text-transform: capitalize;
+  white-space: nowrap;
+}
+
+.weekdays,
+.days {
+  display: grid;
+  grid-template-columns: repeat(7, var(--calendar-cell-size));
+}
+
+.weekdays span {
+  color: var(--color-text-secondary);
+  display: grid;
+  font-size: var(--font-size-text-xs);
+  height: var(--calendar-weekdays-size);
+  line-height: var(--line-height-text-xs);
+  place-items: center;
+  text-transform: capitalize;
+}
+
+.weekdays .weekend {
+  color: var(--color-status-error);
+}
+
+.period-grid {
+  block-size: var(--calendar-content-block-size);
+  display: grid;
+  gap: var(--space-3) var(--space-2);
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, minmax(var(--space-0), 1fr));
+  width: var(--calendar-month-inline-size);
+}
+
+.period-button {
+  background: var(--component-menu-item-bg);
+  border: var(--space-0);
+  border-radius: var(--calendar-radius);
+  box-sizing: border-box;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--calendar-font-size);
+  height: 100%;
+  line-height: var(--calendar-line-height);
+  padding: var(--space-0) var(--space-2);
+  text-transform: capitalize;
+}
+
+.period-button:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-input-focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-width));
+}
+
+.period-button:disabled {
+  color: var(--color-text-disabled);
+  cursor: default;
+}
+
+.period-button:hover:not(:disabled, .period-button-selected) {
+  background: var(--component-menu-item-bg-hover);
+}
+
+.period-button-selected {
+  border: var(--border-width-hairline) solid var(--color-border-focus);
+}
+
+.day {
+  background: var(--component-menu-item-bg);
+  border: var(--space-0);
+  border-radius: var(--calendar-radius);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  font-size: var(--calendar-font-size);
+  height: var(--calendar-cell-size);
+  line-height: var(--calendar-line-height);
+  padding: var(--space-0);
+  place-items: center;
+  position: relative;
+  width: var(--calendar-cell-size);
+}
+
+.day:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-input-focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-width));
+  z-index: 2;
+}
+
+.day:disabled {
+  color: var(--color-text-disabled);
+  cursor: default;
+}
+
+.day:hover:not(:disabled, .selected) {
+  background: var(--component-menu-item-bg-hover);
+}
+
+.outside {
+  color: var(--color-text-tertiary);
+}
+
+.today::after {
+  border: var(--border-width-hairline) solid var(--color-border-focus);
+  border-radius: calc(var(--calendar-radius) - var(--focus-ring-width));
+  content: "";
+  inset: var(--space-1);
+  pointer-events: none;
+  position: absolute;
+}
+
+.in-range {
+  background: var(--component-menu-item-bg-hover);
+  border-radius: var(--radius-none);
+}
+
+.selected {
+  background: var(--component-tab-bg-active);
+  border-radius: var(--calendar-radius);
+  color: var(--component-tab-text-active);
+  font-weight: var(--font-weight-semibold);
+  outline: var(--focus-ring-width) solid var(--component-input-focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-width));
+  z-index: 1;
+}
+
+.range-start {
+  border-radius: var(--calendar-radius);
+}
+
+.range-end {
+  border-radius: var(--calendar-radius);
+}
+
+.range-start.range-end {
+  border-radius: var(--calendar-radius);
+}
+
+.events {
+  bottom: var(--space-1);
+  display: flex;
+  gap: var(--focus-ring-width);
+  position: absolute;
+}
+
+.events i {
+  background: var(--color-icon-brand);
+  border-radius: var(--radius-full);
+  height: var(--space-1);
+  width: var(--space-1);
+}
+
+.double .month {
+  flex: none;
+}
+
+.double {
+  --calendar-content-block-size: calc(
+    var(--calendar-heading-block-size) + var(--calendar-days-block-size)
+  );
+  --calendar-inline-size: calc(
+    var(--calendar-month-inline-size) * 2 + var(--space-6)
+  );
+}

package/Calendar/index.d.ts

@@ -1,4 +1,2 @@
-import React from "react";
-import type { CalendarProps } from "./index.props";
-declare const Calendar: React.FC<CalendarProps>;
-export default Calendar;
+export { default, default as Calendar } from "./Calendar";
+export type { CalendarEvent, CalendarProps, CalendarRangeProps, CalendarSelectionMode, CalendarSingleProps, CalendarSize, CalendarView, } from "./Calendar";