@chekinapp/ui 0.0.34 → 0.0.36

package/dist/styles.css

@@ -1,4 +1 @@
-@import "@chekinapp/tokens/tokens.css";
-
-/* src/styles.css */
-/*# sourceMappingURL=styles.css.map */
+@import '@chekinapp/tokens/tokens.css';

package/dist/styles.module-4AVOK5SA.module.css

@@ -0,0 +1,81 @@
+.selectorsWrapperTab {
+  @apply box-border flex h-auto max-h-none w-fit flex-wrap items-center rounded-md border border-[var(--chekin-color-gray-3)];
+  background: var(--chekin-color-surface-input-empty) 0 0 no-repeat padding-box;
+}
+
+.selectorsWrapperDefault {
+  @apply flex w-full flex-wrap;
+  margin-bottom: -10px;
+}
+
+.selectorsWrapperDefault .selectorButton {
+  @apply mb-[10px] mr-[10px];
+}
+
+.selectorButton {
+  @apply box-border whitespace-nowrap border border-transparent bg-transparent text-[15px] font-medium;
+  color: var(--chekin-color-gray-1);
+  min-width: auto;
+  box-shadow: none;
+  padding: 8px 21px;
+  margin: 2px;
+  min-height: 36px;
+  transition-duration: 0s;
+  flex: 1;
+}
+
+.selectorButton > div {
+  @apply mx-auto my-0;
+}
+
+.selectorButton:not(.active):hover {
+  @apply border-transparent text-white;
+  background: var(--chekin-color-brand-blue);
+  opacity: 0.35;
+}
+
+.selectorButton.active {
+  @apply cursor-default font-semibold text-white;
+  background: var(--chekin-color-brand-blue);
+  box-shadow: 0 3px 4px #00020334;
+  border-color: var(--chekin-color-brand-blue);
+}
+
+.selectorButton.active:hover {
+  @apply opacity-100;
+  box-shadow: 0 3px 4px #00020334;
+}
+
+.selectorButton.readOnly:not(.active) {
+  @apply cursor-default;
+  color: var(--chekin-color-gray-1);
+}
+
+.selectorButton.readOnly:not(.active):hover {
+  background: initial;
+  color: var(--chekin-color-gray-1);
+}
+
+.selectorButton.sizeSm {
+  @apply py-[7px] text-[14px] font-medium leading-6;
+}
+
+.selectorButton.active.sizeSm {
+  @apply py-[7px] text-[14px] font-bold leading-6;
+}
+
+.labelWrapper {
+  @apply flex;
+}
+
+.labelWrapper span {
+  @apply ml-[5px];
+}
+
+.name {
+  @apply box-border select-none overflow-x-hidden whitespace-nowrap text-left font-normal text-[var(--chekin-color-brand-navy)];
+  font-size: 16px;
+  min-height: 20px;
+  margin-bottom: 6px;
+  text-overflow: ellipsis;
+}

package/dist/styles.module-6FWQEZTQ.module.css

@@ -0,0 +1,82 @@
+.container {
+  position: relative;
+}
+
+.label {
+  pointer-events: none;
+  position: absolute;
+  left: 0.75rem;
+  top: 1rem;
+  padding: 0 0.25rem;
+  color: #6b6b95;
+  transition: all 0.1s ease;
+}
+
+.container textarea:focus + .label,
+.container textarea:not(:placeholder-shown) + .label {
+  top: -0.6rem;
+  left: 0.5rem;
+  background-color: white;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.container textarea:focus + .label {
+  color: #385bf8;
+}
+
+.labelError {
+  color: #ff2467;
+}
+
+.labelDisabled {
+  color: #9696b9;
+}
+
+.textarea {
+  box-sizing: border-box;
+  min-height: 120px;
+  width: 100%;
+  resize: none;
+  border: 1px solid #cecede;
+  border-radius: 8px;
+  background: #f4f6f8;
+  padding: 12px 16px;
+  color: #161643;
+  font: inherit;
+  outline: none;
+  scrollbar-color: #777e91 transparent;
+  scrollbar-gutter: stable;
+}
+
+.textarea:focus,
+.textarea:not(:placeholder-shown) {
+  background-color: white;
+}
+
+.textarea::placeholder {
+  color: #6b6b95;
+  opacity: 1;
+}
+
+.textarea:focus {
+  border-color: #385bf8;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.textareaError,
+.textareaError:focus {
+  border-color: #ff2467;
+}
+
+.textareaDisabled {
+  cursor: not-allowed;
+  resize: none;
+  border-color: #9696b9;
+  background-color: #f4f6f8;
+  color: #9696b9;
+}
+
+.textareaDisabled::placeholder {
+  color: #9696b9;
+}

package/dist/styles.module-74HHIGIE.module.css

@@ -0,0 +1,35 @@
+.modal__content {
+  @apply flex h-auto min-w-[340px] w-auto flex-col items-center gap-y-6 rounded-md bg-[var(--chekin-color-white)] text-center;
+  color: var(--chekin-color-brand-navy);
+}
+
+.modal__contentCompact {
+  @apply min-w-0;
+  width: 360px;
+}
+
+.modal__close {
+  @apply absolute right-4 top-4 z-10 rounded-full p-1 hover:bg-[#f4f6f8];
+  color: var(--chekin-color-brand-blue);
+}
+
+.modal__icon {
+  @apply mx-auto mt-4;
+  user-select: none;
+}
+
+.modal__title {
+  @apply px-6 text-lg font-bold;
+}
+
+.modal__text {
+  @apply text-base;
+}
+
+.modal__buttonsWrapper {
+  @apply mb-2 mt-6 flex flex-col items-center justify-center gap-y-4;
+}
+
+.modal__button {
+  @apply min-w-[210px];
+}

package/dist/styles.module-AAYSW4RF.module.css

@@ -0,0 +1,64 @@
+.styledButton {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-width: 117px;
+  height: 48px;
+  padding: 0 16px;
+  border: 1px solid #cecede;
+  border-radius: 6px;
+  background-color: #f2f2fa;
+  color: #9696b9;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  outline: none;
+  text-align: left;
+  user-select: none;
+  transition: all 75ms ease-in-out;
+}
+
+.styledButton input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.styledButton.disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.styledButton.loading {
+  cursor: progress;
+}
+
+.styledButton:not(.disabled):hover {
+  border-color: #385bf8;
+}
+
+.styledButton:not(.disabled):active {
+  opacity: 1;
+}
+
+.styledButton.readOnly {
+  cursor: default;
+}
+
+.styledButton.readOnly:not(.active):hover {
+  border-color: transparent;
+}
+
+.styledButton.active {
+  border-color: #385bf8;
+  background: white;
+  color: #385bf8;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/dist/styles.module-H7R2VV2Q.module.css

@@ -0,0 +1,30 @@
+.RatingRadioGroup__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.RatingRadioGroup__star {
+  cursor: pointer;
+}
+
+.RatingRadioGroup .RatingRadioGroup__legend {
+  margin-bottom: 8px;
+}
+
+.RatingRadioGroup {
+  all: unset;
+  position: relative;
+}
+
+.RatingRadioGroup__list {
+  display: flex;
+  gap: 8px;
+}
+
+.RatingRadioGroup__label input[type='radio']:focus-visible + .RatingRadioGroup__star {
+  outline: 2px solid #385bf8;
+  outline-offset: 2px;
+  border-radius: 4px;
+}

package/dist/styles.module-I3PJNRXG.module.css

@@ -0,0 +1,20 @@
+.bar {
+  animation: loading-bar 0.9s linear infinite;
+}
+
+@keyframes loading-bar {
+  0% {
+    left: -43%;
+    width: 43%;
+  }
+
+  70% {
+    left: 42%;
+    width: 58%;
+  }
+
+  100% {
+    left: 100%;
+    width: 58%;
+  }
+}

package/dist/styles.module-REEJNJNW.module.css

@@ -0,0 +1,7 @@
+.radio__wrapper {
+  @apply flex cursor-pointer items-center gap-2;
+}
+
+.radio__wrapper_disabled {
+  @apply cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+}

package/dist/styles.module-SHDCFZJR.module.css

@@ -0,0 +1,151 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 300px;
+  font-family: var(--chekin-font-family-primary);
+}
+
+.labelRow {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.labelText,
+.optionalText {
+  font-size: 16px;
+  line-height: 16px;
+  color: var(--chekin-color-brand-navy);
+}
+
+.labelText {
+  font-weight: 500;
+}
+
+.optionalText em {
+  color: var(--chekin-color-gray-2);
+}
+
+.tooltip {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.fieldBox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 44px;
+  padding: 10px 14px;
+  border: 1px solid;
+  border-radius: 8px;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.fieldBoxEmpty {
+  background-color: var(--chekin-color-surface-input-empty);
+  border-color: rgba(22, 22, 67, 0.2);
+}
+
+.fieldBoxFilled {
+  background-color: white;
+  border-color: var(--chekin-color-brand-navy);
+}
+
+.fieldBoxErrorWrong {
+  background-color: white;
+  border-color: var(--error-message-color);
+}
+
+.fieldBoxAutocompleted {
+  background-color: var(--chekin-color-surface-autocomplete);
+  border-color: var(--chekin-color-brand-navy);
+}
+
+.fieldBoxFocused {
+  border-color: var(--chekin-color-brand-blue);
+}
+
+.input {
+  flex: 1 0 0;
+  min-width: 0;
+  min-height: 1px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--chekin-color-brand-navy);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--chekin-color-gray-1);
+  font-weight: 500;
+}
+
+.icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.supportingText {
+  margin: 0;
+  color: var(--chekin-color-gray-2);
+  font-size: 12px;
+  font-style: italic;
+  line-height: normal;
+}
+
+.errorText {
+  margin: 0;
+  color: var(--error-message-color);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  text-align: right;
+}
+
+.floatingLabel {
+  position: absolute;
+  top: -8px;
+  left: 13px;
+  display: flex;
+  align-items: center;
+  height: 16px;
+  padding: 0 3px;
+  background: linear-gradient(to bottom, transparent 50%, white 50%);
+  pointer-events: none;
+}
+
+.floatingLabelAutocompleted {
+  background: linear-gradient(
+    to bottom,
+    rgb(239 246 255 / 0%) 50%,
+    var(--chekin-color-surface-autocomplete) 50%
+  );
+}
+
+.floatingLabelText {
+  color: var(--chekin-color-gray-1);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  white-space: nowrap;
+}
+
+.floatingLabelTextError {
+  color: var(--error-message-color);
+}

package/dist/styles.module-VIYXJAAX.module.css

@@ -0,0 +1,8 @@
+.ErrorMessage {
+  @apply mt-0.5 text-left text-sm font-medium;
+  color: var(--error-message-color);
+}
+
+.ErrorMessage__disabled {
+  opacity: 0.3;
+}

package/dist/styles.module-Y6YCV6UA.module.css

@@ -0,0 +1,48 @@
+.Loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 13px;
+}
+
+.Loader > div {
+  color: #9696b9;
+  font-size: 14px;
+  font-weight: 700;
+  opacity: 0.5;
+  text-transform: uppercase;
+}
+
+.dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15%;
+}
+
+.dot {
+  width: 22%;
+  height: 22%;
+  border-radius: 9999px;
+  animation: three-dots 1.1s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes three-dots {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

package/dist/textField.module-5W2LJGIC.module.css

@@ -0,0 +1,17 @@
+.root {
+  --text-field-height: 2.75rem;
+  --text-field-radius: 8px;
+  --text-field-padding-x: 0.875rem;
+  --text-field-padding-y: 0.625rem;
+  --text-field-bg-empty: #f4f6f8;
+  --text-field-bg-filled: #ffffff;
+  --text-field-border-empty: rgba(22, 22, 67, 0.2);
+  --text-field-border-filled: #161643;
+  --text-field-border-error: #ff2467;
+  --text-field-text: #161643;
+  --text-field-placeholder: #6b6b95;
+  --text-field-label: #161643;
+  --text-field-supporting: #9696b9;
+  --text-field-error: #ff2467;
+  --text-field-focus-ring: rgba(56, 91, 248, 0.2);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chekinapp/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Chekin UI — React components on Radix primitives, styled with Chekin tokens",
   "private": false,
   "license": "UNLICENSED",
@@ -17,7 +17,8 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./index.css": "./dist/index.css"
   },
   "files": [
     "dist"
@@ -55,7 +56,7 @@
     "tailwind-merge": "^2.5.5",
     "@tanstack/react-virtual": "^3.13.24",
     "react-draggable": "^4.5.0",
-    "@chekinapp/tokens": "0.0.10"
+    "@chekinapp/tokens": "0.0.12"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.0.0",