@chekinapp/ui 0.0.34 → 0.0.36

package/dist/Accordion.module-5SXQLE6L.module.css

@@ -0,0 +1,71 @@
+.accordion__item {
+  background: var(--accordion-item-bg);
+  border-color: var(--accordion-item-border);
+  border-radius: var(--accordion-item-radius);
+  border-style: solid;
+  border-width: 1px;
+  border-top-color: var(--accordion-item-divider);
+  box-shadow: 0 0 10px 0 rgba(143, 143, 143, 0.2);
+}
+
+.accordion__item[data-state='open'] {
+  background: var(--accordion-item-open-bg);
+}
+
+.accordion__item[data-state='closed'] {
+  background: var(--accordion-item-bg);
+}
+
+.accordion__item[data-state='closed']:hover {
+  background: var(--accordion-item-hover-bg);
+}
+
+.accordion__trigger {
+  color: var(--accordion-trigger-color);
+  font-family: var(--accordion-trigger-font-family);
+  font-size: 18px;
+  font-weight: var(--accordion-trigger-font-weight);
+  gap: var(--accordion-trigger-gap);
+  line-height: 28px;
+  padding: 24px;
+}
+
+.accordion__trigger:focus-visible {
+  box-shadow: var(--accordion-trigger-focus-shadow);
+}
+
+.accordion__trigger:disabled {
+  opacity: var(--accordion-trigger-disabled-opacity);
+}
+
+.accordion__icon {
+  color: var(--accordion-icon-color-closed);
+  height: var(--accordion-icon-size);
+  margin-left: auto;
+  min-width: initial;
+  width: 16px;
+}
+
+.accordion__trigger[data-state='open'] .accordion__icon {
+  color: var(--accordion-icon-color-open);
+}
+
+.accordion__icon svg {
+  height: var(--accordion-icon-size);
+  transition: transform 0.2s;
+  width: var(--accordion-icon-size);
+}
+
+.accordion__content {
+  color: var(--accordion-content-color);
+  font-size: var(--accordion-content-font-size);
+  line-height: var(--accordion-content-line-height);
+}
+
+.accordion__content[data-state='closed'] {
+  display: block;
+}
+
+.accordion__contentItem {
+  padding: 8px 24px 24px;
+}

package/dist/AlertBox.module-PL4N3ELX.module.css

@@ -0,0 +1,36 @@
+.alertBox {
+  border-radius: var(--alert-box-radius);
+}
+
+.alertBox--info {
+  background: var(--alert-box-info-bg);
+}
+
+.alertBox--info svg {
+  color: var(--alert-box-info-icon);
+}
+
+.alertBox--warning {
+  background: var(--alert-box-warning-bg);
+}
+
+.alertBox--warning svg {
+  color: var(--alert-box-warning-icon);
+}
+
+.alertBox--success {
+  background: var(--alert-box-success-bg);
+  color: var(--alert-box-success-text);
+}
+
+.alertBox--success svg {
+  color: var(--alert-box-success-icon);
+}
+
+.alertBox--error {
+  background: var(--alert-box-error-bg);
+}
+
+.alertBox--error svg {
+  color: var(--alert-box-error-icon);
+}

package/dist/AudioPlayer.module-RDUQ533M.module.css

@@ -0,0 +1,24 @@
+.playButton {
+  background: var(--audio-player-button-bg);
+  border-radius: var(--audio-player-button-radius);
+}
+
+.playButton:hover {
+  background: var(--audio-player-button-hover-bg);
+}
+
+.playButton svg {
+  color: var(--audio-player-icon-color);
+}
+
+.track {
+  background: var(--audio-player-track-bg);
+}
+
+.progress {
+  background: var(--audio-player-progress-bg);
+}
+
+.time {
+  color: var(--audio-player-time-color);
+}

package/dist/Avatar.module-VPJKIZT3.module.css

@@ -0,0 +1,4 @@
+.fallback {
+  background: var(--avatar-fallback-bg);
+  color: var(--avatar-fallback-text);
+}

package/dist/BetaBadge.module-W2AGK53A.module.css

@@ -0,0 +1,9 @@
+.betaBadge {
+  background: var(--beta-badge-bg);
+  color: var(--beta-badge-text);
+}
+
+.betaBadge--readonly {
+  background: var(--beta-badge-readonly-bg);
+  color: var(--beta-badge-readonly-text);
+}

package/dist/BoxOptionSelector.module-24AKP2OJ.module.css

@@ -0,0 +1,17 @@
+.boxOption {
+  border-color: var(--box-option-border);
+  background: var(--box-option-bg);
+}
+
+.boxOption:hover {
+  background: var(--box-option-hover-bg);
+}
+
+.boxOption--selected {
+  border-color: var(--box-option-selected-border);
+  background: var(--box-option-selected-bg);
+}
+
+.boxOption--selected:hover {
+  background: var(--box-option-selected-bg);
+}

package/dist/FormBox.module-WG4SQBRR.module.css

@@ -0,0 +1,55 @@
+.wrapper {
+  display: flex;
+  max-width: 1400px;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border: 1px solid var(--chekin-color-gray-separator);
+  border-radius: 10px;
+  container-type: inline-size;
+}
+
+.wrapperNested {
+  border: initial;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  color: var(--chekin-color-brand-navy);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.subHeader {
+  display: flex;
+  margin: 0;
+  padding: 8px 0;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-bottom: 1px solid var(--chekin-color-gray-separator);
+  color: var(--chekin-color-brand-navy);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.content {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  flex-wrap: wrap;
+}

package/dist/MetricCard.module-LEV46BXD.module.css

@@ -0,0 +1,88 @@
+.MetricCard {
+  @apply flex w-full min-w-52 gap-2 rounded-lg border border-[var(--chekin-color-gray-3)] p-4;
+}
+
+.MetricCard--loading {
+  @apply cursor-progress opacity-60;
+}
+
+.MetricCard__iconContainer {
+  @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full mix-blend-multiply;
+}
+
+.MetricCard__content {
+  @apply flex flex-1 flex-col gap-4;
+}
+
+.MetricCard__header {
+  @apply flex items-center gap-1;
+}
+
+.MetricCard__title {
+  @apply whitespace-nowrap text-base font-medium leading-6 text-[var(--chekin-color-brand-navy)];
+}
+
+.MetricCard__tooltip {
+  @apply text-[var(--chekin-color-gray-1)];
+}
+
+.MetricCard__footer {
+  @apply flex items-center justify-between gap-2;
+}
+
+.MetricCard__value {
+  @apply text-2xl font-bold leading-6;
+}
+
+.MetricCard--blue {
+  color: #385cf8;
+  background: linear-gradient(122deg, #e6f0ff 36.37%, #f6f9ff 86.4%);
+}
+
+.MetricCard--blue .MetricCard__iconContainer {
+  background: #dbeafe;
+}
+
+.MetricCard--green {
+  color: #2bc29f;
+  background: linear-gradient(122deg, #ddfbf4 36.37%, #f5fefc 86.4%);
+}
+
+.MetricCard--green .MetricCard__iconContainer {
+  background: #cff9ef;
+}
+
+.MetricCard--orange {
+  color: #f5721a;
+  background: linear-gradient(122deg, #ffeddc 36.37%, #fffaf5 86.4%);
+}
+
+.MetricCard--orange .MetricCard__iconContainer {
+  background: #ffe5cd;
+}
+
+.MetricCard--purple {
+  color: #9a51ff;
+  background: linear-gradient(122deg, #f5edff 36.37%, #fcfaff 86.4%);
+}
+
+.MetricCard--purple .MetricCard__iconContainer {
+  background: #f0e5ff;
+}
+
+.MetricCard--yellow {
+  color: #ce8b0b;
+  background: linear-gradient(122deg, #fff8e5 36.37%, #fffbef 86.4%);
+}
+
+.MetricCard--yellow .MetricCard__iconContainer {
+  background: #ffeeb2;
+}
+
+.MetricCard__percentage {
+  @apply inline-flex items-center gap-x-1 text-base font-semibold leading-6 text-[#059669];
+}
+
+.MetricCard__percentage.--negative {
+  @apply text-[var(--chekin-color-brand-red)];
+}

package/dist/Section.module-6UJGBE6B.module.css

@@ -0,0 +1,61 @@
+.section {
+  @apply mb-6 box-border flex w-full cursor-default flex-col gap-6 rounded-lg border border-solid border-[var(--chekin-color-gray-3)] bg-white px-6 py-10;
+}
+
+.section_loading {
+  @apply cursor-progress;
+}
+
+.section_disabled {
+  @apply pointer-events-none opacity-50;
+}
+
+.section__header {
+  @apply flex flex-col gap-2;
+}
+
+.section__title {
+  @apply flex max-w-[85%] items-center text-lg font-bold text-[var(--chekin-color-brand-navy)] md:max-w-full;
+}
+
+.section__titleTooltip {
+  @apply ml-2.5;
+}
+
+.section__titleLink {
+  @apply ml-6 text-sm font-semibold text-[var(--chekin-color-brand-blue)] no-underline hover:opacity-70 active:opacity-100;
+}
+
+.section__subtitleWrapper {
+  @apply w-full max-w-[720px] md:max-w-full;
+}
+
+.section__subtitle {
+  @apply inline text-base font-normal text-[var(--chekin-color-gray-1)];
+}
+
+.section__subtitleTooltip {
+  @apply ml-1.5 inline-block align-text-top;
+}
+
+.section__loader {
+  @apply mx-auto mb-3 mt-2.5;
+}
+
+.section_sub {
+  @apply m-0 box-border rounded-none border-none bg-transparent p-0;
+}
+
+.section_sub .section__title {
+  @apply text-base font-semibold;
+}
+
+.section_sub .section__titleLarge {
+  @apply text-lg font-bold;
+}
+
+.section_dividing {
+  border: none;
+  border-top: 1px solid #f1f1f1;
+  padding-top: 24px;
+}

package/dist/TaskCard.module-AVGS4US3.module.css

@@ -0,0 +1,99 @@
+.TaskCard {
+  @apply relative box-border flex min-h-[48px] min-w-[360px] items-center gap-4 overflow-hidden rounded-lg p-2 transition-colors duration-200;
+}
+
+.TaskCard--error {
+  @apply bg-red-50;
+}
+
+.TaskCard--warning {
+  @apply bg-amber-50;
+}
+
+.TaskCard--clickable {
+  @apply cursor-pointer;
+}
+
+.TaskCard--clickable:hover::before {
+  @apply pointer-events-none absolute inset-0 rounded-lg content-[''];
+}
+
+.TaskCard--error.TaskCard--clickable:hover::before {
+  @apply bg-red-100 mix-blend-multiply;
+}
+
+.TaskCard--warning.TaskCard--clickable:hover::before {
+  @apply bg-amber-100 mix-blend-multiply;
+}
+
+.TaskCard__indicator {
+  @apply relative w-1 flex-shrink-0 self-stretch rounded-sm;
+}
+
+.TaskCard--error .TaskCard__indicator {
+  @apply bg-chekin-red;
+}
+
+.TaskCard--warning .TaskCard__indicator {
+  @apply bg-amber-500;
+}
+
+.TaskCard__content {
+  @apply flex min-w-0 flex-1 flex-col items-start;
+}
+
+.TaskCard__title {
+  @apply m-0 w-full break-words text-base font-semibold leading-6 text-chekin-navy;
+}
+
+.TaskCard__date {
+  @apply m-0 w-full text-sm font-medium leading-6 text-chekin-gray-1;
+}
+
+.TaskCard__actions {
+  @apply flex flex-shrink-0 items-center gap-1;
+}
+
+.TaskCard__count {
+  @apply relative flex h-6 w-6 items-center justify-center rounded-full text-center text-sm font-semibold leading-6;
+}
+
+.TaskCard__count::before {
+  @apply absolute inset-0 rounded-full mix-blend-multiply content-[''];
+}
+
+.TaskCard__count--error {
+  @apply text-chekin-red;
+}
+
+.TaskCard__count--error::before {
+  @apply bg-red-100;
+}
+
+.TaskCard__count--warning {
+  @apply text-amber-700;
+}
+
+.TaskCard__count--warning::before {
+  @apply bg-amber-100;
+}
+
+.TaskCard__arrowButton {
+  @apply flex h-8 w-0 min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border-0 bg-transparent p-0 text-chekin-gray-1 opacity-0;
+  transition:
+    width 0.3s ease-in-out,
+    opacity 0.3s ease-in-out,
+    min-width 0.3s ease-in-out;
+}
+
+.TaskCard--clickable:hover .TaskCard__arrowButton {
+  @apply w-8 min-w-8 opacity-100;
+}
+
+.TaskCard__arrowButton:hover {
+  @apply bg-black/5;
+}
+
+.TaskCard__arrowButton:focus-visible {
+  @apply w-8 min-w-8 opacity-100 outline outline-2 outline-offset-2 outline-chekin-blue;
+}