@chekinapp/ui 0.0.130 → 0.0.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +125 -132
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +125 -132
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -12146,143 +12146,132 @@ var Input = React44.forwardRef(
12146
12146
  children: topLabel
12147
12147
  }
12148
12148
  ),
12149
- /* @__PURE__ */ jsxs89(
12150
- "div",
12151
- {
12152
- className: cn(
12153
- "input__field",
12154
- "relative block w-full",
12155
- readOnly && "bg-[var(--empty-field-background)]",
12156
- fieldClassName
12157
- ),
12158
- children: [
12159
- /* @__PURE__ */ jsxs89(
12160
- "div",
12161
- {
12162
- className: cn("input__content relative w-full cursor-text", contentClassName),
12163
- children: [
12164
- /* @__PURE__ */ jsx142(
12165
- Fieldset,
12166
- {
12167
- isFocused: isFocused && !readOnly,
12168
- invalid: hasInvalidState,
12169
- isEmpty,
12170
- onClick: handleLabelClick,
12171
- isActivated: !isEmpty || isFocused,
12172
- readOnly,
12173
- loading,
12174
- disabled,
12175
- htmlFor: inputId,
12176
- labelId: `${inputId}-label`,
12177
- legend: typeof label === "string" ? label : void 0,
12178
- label,
12179
- tooltip,
12180
- className: "input__fieldset",
12181
- labelClassName: cn({
12182
- input__label: true,
12183
- "pl-[28px]": !!leftIcon
12184
- })
12185
- }
12186
- ),
12187
- leftIcon && /* @__PURE__ */ jsx142("span", { className: "input__left-icon pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx142("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
12188
- /* @__PURE__ */ jsx142(
12189
- "input",
12190
- {
12191
- ...props,
12192
- ref: combinedInputRef,
12193
- id: inputId,
12194
- name,
12195
- type: inputType,
12196
- "data-testid": "input",
12197
- value,
12198
- defaultValue,
12199
- disabled: disabled || loading,
12200
- readOnly,
12201
- required: !optional,
12202
- "aria-label": typeof label === "string" ? label : void 0,
12203
- "aria-invalid": hasInvalidState,
12204
- "aria-busy": loading,
12205
- "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
12206
- placeholder: isFocused || !label ? placeholder : void 0,
12207
- onChange: handleChange,
12208
- onFocus: handleFocus,
12209
- onBlur: handleBlur,
12210
- className: cn(
12211
- "input__control",
12212
- "m-0 box-border h-12 w-full rounded-[6px] border-0 px-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-200 [text-overflow:ellipsis] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
12213
- "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
12214
- isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
12215
- isEmpty && "text-[var(--chekin-color-gray-1)]",
12216
- inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
12217
- (disabled || readOnly) && "cursor-not-allowed",
12218
- loading && "cursor-progress",
12219
- leftIcon && "pl-10",
12220
- (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
12221
- sign && "pr-10",
12222
- inputClassName
12223
- )
12224
- }
12225
- ),
12226
- sign && /* @__PURE__ */ jsx142("span", { className: "input__sign pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
12227
- trailingAdornment && /* @__PURE__ */ jsx142("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
12228
- onReset && !isEmpty && /* @__PURE__ */ jsx142(
12229
- "button",
12230
- {
12231
- type: "button",
12232
- onClick: onReset,
12233
- disabled,
12234
- className: "input__reset-button absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
12235
- "aria-label": t("reset"),
12236
- children: /* @__PURE__ */ jsx142(X9, { size: 14 })
12237
- }
12238
- ),
12239
- isPasswordReveal && /* @__PURE__ */ jsx142(
12240
- "button",
12241
- {
12242
- type: "button",
12243
- onClick: togglePasswordReveal,
12244
- className: "input__password-button absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
12245
- "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
12246
- children: /* @__PURE__ */ jsx142(
12247
- Eye,
12248
- {
12249
- size: 20,
12250
- className: cn(
12251
- "input__password-icon",
12252
- isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
12253
- )
12254
- }
12255
- )
12256
- }
12257
- )
12258
- ]
12259
- }
12260
- ),
12261
- type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
12149
+ /* @__PURE__ */ jsxs89("div", { className: cn("input__field", "relative block w-full", fieldClassName), children: [
12150
+ /* @__PURE__ */ jsxs89(
12151
+ "div",
12152
+ {
12153
+ className: cn("input__content relative w-full cursor-text", contentClassName),
12154
+ children: [
12155
+ /* @__PURE__ */ jsx142(
12156
+ Fieldset,
12157
+ {
12158
+ isFocused: isFocused && !readOnly,
12159
+ invalid: hasInvalidState,
12160
+ isEmpty,
12161
+ onClick: handleLabelClick,
12162
+ isActivated: !isEmpty || isFocused,
12163
+ readOnly,
12164
+ loading,
12165
+ disabled,
12166
+ htmlFor: inputId,
12167
+ labelId: `${inputId}-label`,
12168
+ legend: typeof label === "string" ? label : void 0,
12169
+ label,
12170
+ tooltip,
12171
+ className: "input__fieldset",
12172
+ labelClassName: cn({
12173
+ input__label: true,
12174
+ "pl-[28px]": !!leftIcon
12175
+ })
12176
+ }
12177
+ ),
12178
+ leftIcon && /* @__PURE__ */ jsx142("span", { className: "input__left-icon pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx142("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
12262
12179
  /* @__PURE__ */ jsx142(
12180
+ "input",
12181
+ {
12182
+ ...props,
12183
+ ref: combinedInputRef,
12184
+ id: inputId,
12185
+ name,
12186
+ type: inputType,
12187
+ "data-testid": "input",
12188
+ value,
12189
+ defaultValue,
12190
+ disabled: disabled || loading,
12191
+ readOnly,
12192
+ required: !optional,
12193
+ "aria-label": typeof label === "string" ? label : void 0,
12194
+ "aria-invalid": hasInvalidState,
12195
+ "aria-busy": loading,
12196
+ "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
12197
+ placeholder: isFocused || !label ? placeholder : void 0,
12198
+ onChange: handleChange,
12199
+ onFocus: handleFocus,
12200
+ onBlur: handleBlur,
12201
+ className: cn(
12202
+ "input__control",
12203
+ "m-0 box-border h-12 w-full rounded-[6px] border-0 px-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-200 [text-overflow:ellipsis] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
12204
+ "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
12205
+ isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
12206
+ isEmpty && "text-[var(--chekin-color-gray-1)]",
12207
+ inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
12208
+ (disabled || readOnly) && "cursor-not-allowed",
12209
+ loading && "cursor-progress",
12210
+ leftIcon && "pl-10",
12211
+ (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
12212
+ sign && "pr-10",
12213
+ inputClassName
12214
+ )
12215
+ }
12216
+ ),
12217
+ sign && /* @__PURE__ */ jsx142("span", { className: "input__sign pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
12218
+ trailingAdornment && /* @__PURE__ */ jsx142("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
12219
+ onReset && !isEmpty && /* @__PURE__ */ jsx142(
12263
12220
  "button",
12264
12221
  {
12265
12222
  type: "button",
12266
- onClick: onDecrement,
12267
- className: "input__decrement-button mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
12268
- "aria-label": t("decrement"),
12269
- children: /* @__PURE__ */ jsx142(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
12223
+ onClick: onReset,
12224
+ disabled,
12225
+ className: "input__reset-button absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
12226
+ "aria-label": t("reset"),
12227
+ children: /* @__PURE__ */ jsx142(X9, { size: 14 })
12270
12228
  }
12271
12229
  ),
12272
- /* @__PURE__ */ jsx142(
12230
+ isPasswordReveal && /* @__PURE__ */ jsx142(
12273
12231
  "button",
12274
12232
  {
12275
12233
  type: "button",
12276
- onClick: onIncrement,
12277
- className: "input__increment-button inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
12278
- "aria-label": t("increment"),
12279
- children: /* @__PURE__ */ jsx142(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
12234
+ onClick: togglePasswordReveal,
12235
+ className: "input__password-button absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
12236
+ "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
12237
+ children: /* @__PURE__ */ jsx142(
12238
+ Eye,
12239
+ {
12240
+ size: 20,
12241
+ className: cn(
12242
+ "input__password-icon",
12243
+ isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
12244
+ )
12245
+ }
12246
+ )
12280
12247
  }
12281
12248
  )
12282
- ] })
12283
- ]
12284
- }
12285
- ),
12249
+ ]
12250
+ }
12251
+ ),
12252
+ type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
12253
+ /* @__PURE__ */ jsx142(
12254
+ "button",
12255
+ {
12256
+ type: "button",
12257
+ onClick: onDecrement,
12258
+ className: "input__decrement-button mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
12259
+ "aria-label": t("decrement"),
12260
+ children: /* @__PURE__ */ jsx142(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
12261
+ }
12262
+ ),
12263
+ /* @__PURE__ */ jsx142(
12264
+ "button",
12265
+ {
12266
+ type: "button",
12267
+ onClick: onIncrement,
12268
+ className: "input__increment-button inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
12269
+ "aria-label": t("increment"),
12270
+ children: /* @__PURE__ */ jsx142(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
12271
+ }
12272
+ )
12273
+ ] })
12274
+ ] }),
12286
12275
  !errorMessage && optional && /* @__PURE__ */ jsx142(
12287
12276
  "span",
12288
12277
  {
@@ -13098,15 +13087,19 @@ function useSelectMenuState({
13098
13087
  }) {
13099
13088
  const containerRef = React47.useRef(null);
13100
13089
  const [internalIsOpen, setInternalIsOpen] = React47.useState(false);
13101
- const isControlledOpen = controlledIsOpen === true;
13102
- const isOpen = isControlledOpen || internalIsOpen;
13090
+ const [hasClosedControlledOpen, setHasClosedControlledOpen] = React47.useState(false);
13091
+ const isOpen = controlledIsOpen === false ? false : controlledIsOpen === true ? !hasClosedControlledOpen : internalIsOpen;
13092
+ React47.useEffect(() => {
13093
+ if (controlledIsOpen !== true) setHasClosedControlledOpen(false);
13094
+ }, [controlledIsOpen]);
13103
13095
  const setIsOpen = React47.useCallback(
13104
13096
  (next) => {
13105
13097
  const value = typeof next === "function" ? next(isOpen) : next;
13106
- setInternalIsOpen(value);
13098
+ if (controlledIsOpen === true) setHasClosedControlledOpen(!value);
13099
+ if (controlledIsOpen !== false) setInternalIsOpen(value);
13107
13100
  onMenuOpenChange?.(value);
13108
13101
  },
13109
- [isOpen, onMenuOpenChange]
13102
+ [isOpen, controlledIsOpen, onMenuOpenChange]
13110
13103
  );
13111
13104
  const openMenu = React47.useCallback(() => {
13112
13105
  setIsOpen(true);
@@ -14307,7 +14300,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
14307
14300
  filterOption: countriesFilter,
14308
14301
  clearable: false,
14309
14302
  getValueLabel: (option) => option.value,
14310
- className: "!max-w-none",
14303
+ className: "max-w-none w-auto",
14311
14304
  dropdownClassName: "right-auto w-[280px]"
14312
14305
  }
14313
14306
  ),
@@ -14332,7 +14325,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
14332
14325
  onFocus,
14333
14326
  onBlur,
14334
14327
  renderErrorMessage: false,
14335
- wrapperClassName: "!max-w-none",
14328
+ wrapperClassName: "max-w-none w-auto",
14336
14329
  contentClassName: readOnly ? "!cursor-default" : void 0,
14337
14330
  inputClassName: readOnly ? "!cursor-default" : void 0
14338
14331
  }