@koslibs/components 1.14.2 → 1.16.0

package/dist/components/Datepicker/index_module.css

@@ -0,0 +1,251 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-XIM8MH {
+  --field-background: var(--input-primary-background-color);
+  --field-color: var(--input-color);
+  --field-label-color: var(--input-label-color);
+  --field-icon-color: var(--input-icon-color);
+  --field-border: transparent;
+  gap: var(--input-gap);
+  width: var(--datepicker-width);
+  vertical-align: top;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-primary);
+  flex-direction: column;
+  display: inline-flex;
+
+  &.block-bqbbVY {
+    width: 100%;
+    display: flex;
+  }
+
+  &.secondary-PcSgFC {
+    --field-background: var(--input-secondary-background-color);
+  }
+
+  &.readOnly-h13qVH {
+    --field-border: var(--input-read-only-border-color);
+  }
+
+  &.error-c8nacQ {
+    --field-border: var(--input-error-border-color);
+  }
+
+  &.disabled-khgRiN {
+    --field-background: var(--input-disabled-background-color);
+    --field-color: var(--input-disabled-color);
+    --field-label-color: var(--input-disabled-color);
+    --field-icon-color: var(--input-disabled-color);
+    --field-border: transparent;
+    cursor: not-allowed;
+  }
+}
+
+.size-40-h9qqeQ {
+  --field-height: 40px;
+  --field-padding: var(--input-padding-40);
+}
+
+.size-48-aaoiXa {
+  --field-height: 48px;
+  --field-padding: var(--input-padding-48);
+}
+
+.size-56-OGJpdt {
+  --field-height: 56px;
+  --field-padding: var(--input-padding-56);
+}
+
+.size-64-kBX3a2 {
+  --field-height: 64px;
+  --field-padding: var(--input-padding-64);
+}
+
+.size-72-BC6gqa {
+  --field-height: 72px;
+  --field-padding: var(--input-padding-72);
+}
+
+.field-fNIrel {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--input-gap);
+  height: var(--field-height);
+  padding: 0 var(--field-padding);
+  border-radius: var(--input-border-radius);
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  color: var(--field-color);
+  display: flex;
+  position: relative;
+}
+
+@media (hover: hover) {
+  .component-XIM8MH:not(.disabled-khgRiN, .readOnly-h13qVH, .error-c8nacQ) .field-fNIrel:hover {
+    box-shadow: inset 0 0 0 1px var(--input-hover-border-color);
+  }
+}
+
+.component-XIM8MH.hasOutline-HAFy7G:not(.disabled-khgRiN) .field-fNIrel:focus-within, .component-XIM8MH.hasOutline-HAFy7G.open-S1x_K5 .field-fNIrel {
+  box-shadow: none;
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
+.component-XIM8MH.hasOutline-HAFy7G.error-c8nacQ .field-fNIrel:focus-within, .component-XIM8MH.hasOutline-HAFy7G.error-c8nacQ.open-S1x_K5 .field-fNIrel {
+  outline-color: var(--input-error-border-color);
+}
+
+.trigger-yqmoik {
+  min-width: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  background: none;
+  border: 0;
+  outline: none;
+  flex: 1;
+  align-self: stretch;
+  padding: 0;
+}
+
+.trigger-yqmoik:after {
+  content: "";
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+}
+
+.valueColumn-yqimvV {
+  justify-content: center;
+  gap: var(--size-2);
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+}
+
+.value-AslTvH {
+  width: 100%;
+  min-width: 0;
+  color: var(--field-color);
+}
+
+.placeholder-kZMY22 {
+  color: var(--input-placeholder-color);
+}
+
+.label-EQek4i, .innerLabel-qjRhOo {
+  min-width: 0;
+  color: var(--field-label-color);
+  overflow-wrap: anywhere;
+}
+
+.innerLabel-qjRhOo {
+  transform: translateY(calc(50% + var(--size-2) / 2));
+  transition: transform .18s, font-size .18s;
+}
+
+.component-XIM8MH.labelRaised-X1UZfx .innerLabel-qjRhOo {
+  transform: translateY(0);
+}
+
+.component-XIM8MH.hasInnerLabel-KmtJKD .value-AslTvH {
+  opacity: 0;
+  transition: opacity .18s;
+}
+
+.component-XIM8MH.hasInnerLabel-KmtJKD.labelRaised-X1UZfx .value-AslTvH {
+  opacity: 1;
+}
+
+.icon-QZ2qDs {
+  pointer-events: none;
+  color: var(--field-icon-color);
+  flex-shrink: 0;
+  display: block;
+}
+
+.component-XIM8MH .clear-Rcrq1X {
+  z-index: 1;
+  width: 18px;
+  min-width: 0;
+  height: 24px;
+  min-height: 0;
+  color: var(--field-icon-color);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.component-XIM8MH .clear-Rcrq1X:hover, .component-XIM8MH .clear-Rcrq1X:active {
+  color: var(--field-icon-color);
+}
+
+.component-XIM8MH.hasOutline-HAFy7G .clear-Rcrq1X:focus-visible {
+  outline: 2px solid var(--input-focus-border-color);
+}
+
+.component-XIM8MH.disabled-khgRiN .trigger-yqmoik, .component-XIM8MH.disabled-khgRiN .label-EQek4i {
+  cursor: not-allowed;
+}
+
+.component-XIM8MH.disabled-khgRiN .placeholder-kZMY22 {
+  color: var(--input-disabled-color);
+}
+
+.component-XIM8MH.readOnly-h13qVH:not(.disabled-khgRiN) .trigger-yqmoik {
+  cursor: default;
+}
+
+.component-XIM8MH .message-IkNTrK {
+  color: var(--input-hint-color);
+  overflow-wrap: anywhere;
+}
+
+.component-XIM8MH.error-c8nacQ .message-IkNTrK {
+  color: var(--input-error-message-color);
+}
+
+.component-XIM8MH.disabled-khgRiN .message-IkNTrK {
+  color: var(--input-disabled-color);
+}
+
+.popup-a9mcwf {
+  --popover-shadow: none;
+}
+
+.panelContainer-xno_kL {
+  min-width: 0;
+  min-height: 0;
+  max-height: inherit;
+  flex-direction: column;
+  display: flex;
+}
+
+@media (height <= 700px) {
+  .popup-a9mcwf.rangePopup-AVJC5u {
+    max-height: calc(100dvh - 16px);
+    top: 8px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  .popup-a9mcwf.rangePopup-AVJC5u .panelContainer-xno_kL {
+    --datepicker-popup-calendar-height: max(96px, calc(100dvh - 230px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .innerLabel-qjRhOo, .component-XIM8MH.hasInnerLabel-KmtJKD .value-AslTvH {
+    transition: none;
+  }
+}
+

package/dist/components/Datepicker/panel.module.js

@@ -0,0 +1,39 @@
+import "./panel_module.css";
+const panel_module = {
+    panel: "panel-Yl5t0N",
+    range: "range-PDIlXe",
+    title: "title-ORgvzc",
+    fields: "fields-G9X5NH",
+    input: "input-qmus0w",
+    inputField: "inputField-CJpjrk",
+    inputLabel: "inputLabel-zecPMt",
+    inputError: "inputError-G3MvZq",
+    body: "body-CHCACA",
+    singleCalendar: "singleCalendar-waNors",
+    navigation: "navigation-rr0ZWk",
+    arrow: "arrow-dli_dq",
+    weekdays: "weekdays-szhUFV",
+    month: "month-ojfniN",
+    monthTitle: "monthTitle-uMM8rO",
+    days: "days-L0OFe5",
+    day: "day-GR9k0b",
+    inRange: "inRange-XI5Z3W",
+    selected: "selected-Rn_79k",
+    rangeStart: "rangeStart-Ga7FdA",
+    rangeEnd: "rangeEnd-tPWcVm",
+    oneDay: "oneDay-ySm0RF",
+    previewEnd: "previewEnd-GpQ9Ct",
+    monthButton: "monthButton-Sg7pGr",
+    footer: "footer-Qcalpd",
+    count: "count-aMO4wG",
+    cancel: "cancel-GFcLkD",
+    rangeCalendar: "rangeCalendar-GJigFT",
+    months: "months-jIb0DO",
+    monthWindow: "monthWindow-rLvStO",
+    year: "year-MkIbMv",
+    monthVisible: "monthVisible-zRAM6M",
+    calendars: "calendars-kqa7kX",
+    calendarMonths: "calendarMonths-XpAPCj",
+    monthBlock: "monthBlock-GdHkqH"
+};
+export default panel_module;

package/dist/components/Datepicker/panel_module.css

@@ -0,0 +1,375 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.panel-Yl5t0N {
+  box-sizing: border-box;
+  gap: var(--size-12);
+  width: var(--datepicker-panel-width);
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  padding: var(--datepicker-panel-padding);
+  border-radius: var(--datepicker-panel-radius);
+  background: var(--datepicker-background);
+  color: var(--datepicker-color);
+  box-shadow: var(--datepicker-panel-shadow);
+  font-family: var(--font-primary);
+  overscroll-behavior: contain;
+  flex-direction: column;
+  display: flex;
+  overflow-y: auto;
+}
+
+.range-PDIlXe {
+  width: var(--datepicker-range-width);
+}
+
+.panel-Yl5t0N .title-ORgvzc {
+  flex-shrink: 0;
+  line-height: 24px;
+}
+
+.fields-G9X5NH {
+  gap: var(--size-12);
+  flex-shrink: 0;
+  display: flex;
+}
+
+.panel-Yl5t0N .input-qmus0w {
+  --field-height: 36px;
+  --field-padding: 8px;
+  --input-gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.panel-Yl5t0N .inputField-CJpjrk {
+  height: 36px;
+}
+
+.panel-Yl5t0N .inputLabel-zecPMt {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.panel-Yl5t0N .inputLabel-zecPMt > span {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.panel-Yl5t0N .inputError-G3MvZq {
+  margin-top: 0;
+}
+
+.body-CHCACA {
+  flex-shrink: 0;
+  min-height: 0;
+}
+
+.singleCalendar-waNors {
+  align-items: center;
+  gap: var(--size-8);
+  flex-direction: column;
+  display: flex;
+}
+
+.navigation-rr0ZWk {
+  justify-content: space-between;
+  align-items: center;
+  width: 308px;
+  max-width: 100%;
+  height: 24px;
+  display: flex;
+}
+
+.arrow-dli_dq {
+  width: 24px;
+  height: 24px;
+  color: var(--datepicker-muted-color);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.arrow-dli_dq:disabled {
+  opacity: .4;
+  cursor: default;
+}
+
+.arrow-dli_dq:hover:not(:disabled) {
+  background: var(--datepicker-hover-background);
+}
+
+.weekdays-szhUFV {
+  width: 308px;
+  max-width: 100%;
+  height: 20px;
+  color: var(--datepicker-muted-color);
+  text-align: center;
+  flex-shrink: 0;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  font-size: 12px;
+  line-height: 18px;
+  display: grid;
+}
+
+.month-ojfniN {
+  flex-shrink: 0;
+  width: 308px;
+  max-width: 100%;
+}
+
+.monthTitle-uMM8rO {
+  margin-bottom: var(--size-8);
+  line-height: 21px;
+}
+
+.days-L0OFe5 {
+  row-gap: var(--datepicker-week-gap);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  display: grid;
+}
+
+.day-GR9k0b {
+  box-sizing: border-box;
+  height: var(--datepicker-day-height);
+  border-radius: var(--datepicker-day-radius);
+  min-width: 0;
+  color: var(--datepicker-color);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 19px;
+}
+
+.day-GR9k0b:hover {
+  background: var(--datepicker-hover-background);
+}
+
+.day-GR9k0b.inRange-XI5Z3W {
+  background: var(--datepicker-range-background);
+  border-radius: 0;
+}
+
+.day-GR9k0b.selected-Rn_79k, .day-GR9k0b.rangeStart-Ga7FdA, .day-GR9k0b.rangeEnd-tPWcVm {
+  background: var(--datepicker-selected-background);
+  font-weight: 600;
+}
+
+.day-GR9k0b.rangeStart-Ga7FdA {
+  border-radius: var(--datepicker-day-radius) 0 0 var(--datepicker-day-radius);
+}
+
+.day-GR9k0b.rangeEnd-tPWcVm {
+  border-radius: 0 var(--datepicker-day-radius) var(--datepicker-day-radius) 0;
+}
+
+.day-GR9k0b.oneDay-ySm0RF {
+  border-radius: var(--datepicker-day-radius);
+}
+
+.day-GR9k0b.previewEnd-GpQ9Ct {
+  box-shadow: inset 0 0 0 1px var(--datepicker-focus-color);
+}
+
+.day-GR9k0b:focus-visible, .arrow-dli_dq:focus-visible, .monthButton-Sg7pGr:focus-visible {
+  outline: 2px solid var(--datepicker-focus-color);
+  outline-offset: -2px;
+}
+
+.footer-Qcalpd {
+  z-index: 1;
+  background: var(--datepicker-background);
+  align-items: center;
+  gap: var(--size-8);
+  flex-shrink: 0;
+  min-height: 40px;
+  display: flex;
+  position: sticky;
+  bottom: 0;
+}
+
+.count-aMO4wG {
+  flex: 1;
+  min-width: 0;
+}
+
+.footer-Qcalpd .cancel-GFcLkD {
+  min-width: 80px;
+}
+
+.rangeCalendar-GJigFT {
+  gap: var(--size-16);
+  min-height: 0;
+  height: min(calc(var(--datepicker-range-calendar-height) + var(--datepicker-months-extra-height)),
+        var(--datepicker-popup-calendar-height, 100000px));
+  display: flex;
+}
+
+.months-jIb0DO {
+  --datepicker-month-padding: var(--size-8);
+  box-sizing: border-box;
+  flex: 0 0 var(--datepicker-months-width);
+  min-width: 0;
+  height: 100%;
+  padding: var(--datepicker-month-padding);
+  border-radius: var(--border-radius-8);
+  overscroll-behavior: contain;
+  background: var(--datepicker-hover-background);
+  overflow-anchor: none;
+  isolation: isolate;
+  position: relative;
+  overflow: auto;
+}
+
+.monthWindow-rLvStO {
+  z-index: -1;
+  top: 0;
+  right: var(--datepicker-month-padding);
+  left: var(--datepicker-month-padding);
+  border-radius: var(--border-radius-6);
+  background: var(--datepicker-month-selected-background);
+  pointer-events: none;
+  height: 0;
+  position: absolute;
+}
+
+.year-MkIbMv {
+  height: 18px;
+  color: var(--datepicker-muted-color);
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.monthButton-Sg7pGr {
+  border-radius: var(--border-radius-6);
+  width: 100%;
+  height: 36px;
+  color: var(--datepicker-color);
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0 8px;
+  font-family: inherit;
+  font-size: 13px;
+  display: block;
+}
+
+.monthButton-Sg7pGr:hover {
+  background: var(--datepicker-month-selected-background);
+}
+
+.monthButton-Sg7pGr.monthVisible-zRAM6M {
+  font-weight: 600;
+}
+
+.calendars-kqa7kX {
+  height: calc(100% - var(--datepicker-months-extra-height));
+  align-self: center;
+  align-items: center;
+  gap: var(--size-8);
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.calendarMonths-XpAPCj {
+  align-items: center;
+  gap: var(--size-20);
+  overflow-anchor: none;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  position: relative;
+  overflow: auto;
+}
+
+.monthBlock-GdHkqH {
+  flex-shrink: 0;
+  justify-content: center;
+  width: 100%;
+  display: flex;
+}
+
+.panel-Yl5t0N, .months-jIb0DO, .calendarMonths-XpAPCj {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &::-webkit-scrollbar {
+    background: none;
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--border-radius-pill);
+    background: var(--datepicker-scrollbar-color);
+  }
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  .panel-Yl5t0N, .months-jIb0DO, .calendarMonths-XpAPCj {
+    scrollbar-width: thin;
+    scrollbar-color: var(--datepicker-scrollbar-color) transparent;
+  }
+}
+
+@media (width <= 520px) {
+  .rangeCalendar-GJigFT {
+    gap: 8px;
+  }
+
+  .months-jIb0DO {
+    --datepicker-month-padding: 4px;
+    flex-basis: 100px;
+  }
+
+  .monthButton-Sg7pGr {
+    padding: 0 4px;
+    font-size: 11px;
+  }
+
+  .year-MkIbMv {
+    padding: 0 4px;
+  }
+
+  .panel-Yl5t0N {
+    padding: 12px;
+  }
+}
+