@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.cjs CHANGED
@@ -12510,143 +12510,132 @@ var Input = React44.forwardRef(
12510
12510
  children: topLabel
12511
12511
  }
12512
12512
  ),
12513
- /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
12514
- "div",
12515
- {
12516
- className: cn(
12517
- "input__field",
12518
- "relative block w-full",
12519
- readOnly && "bg-[var(--empty-field-background)]",
12520
- fieldClassName
12521
- ),
12522
- children: [
12523
- /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
12524
- "div",
12525
- {
12526
- className: cn("input__content relative w-full cursor-text", contentClassName),
12527
- children: [
12528
- /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12529
- Fieldset,
12530
- {
12531
- isFocused: isFocused && !readOnly,
12532
- invalid: hasInvalidState,
12533
- isEmpty,
12534
- onClick: handleLabelClick,
12535
- isActivated: !isEmpty || isFocused,
12536
- readOnly,
12537
- loading,
12538
- disabled,
12539
- htmlFor: inputId,
12540
- labelId: `${inputId}-label`,
12541
- legend: typeof label === "string" ? label : void 0,
12542
- label,
12543
- tooltip,
12544
- className: "input__fieldset",
12545
- labelClassName: cn({
12546
- input__label: true,
12547
- "pl-[28px]": !!leftIcon
12548
- })
12549
- }
12550
- ),
12551
- leftIcon && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("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__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
12552
- /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12553
- "input",
12554
- {
12555
- ...props,
12556
- ref: combinedInputRef,
12557
- id: inputId,
12558
- name,
12559
- type: inputType,
12560
- "data-testid": "input",
12561
- value,
12562
- defaultValue,
12563
- disabled: disabled || loading,
12564
- readOnly,
12565
- required: !optional,
12566
- "aria-label": typeof label === "string" ? label : void 0,
12567
- "aria-invalid": hasInvalidState,
12568
- "aria-busy": loading,
12569
- "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
12570
- placeholder: isFocused || !label ? placeholder : void 0,
12571
- onChange: handleChange,
12572
- onFocus: handleFocus,
12573
- onBlur: handleBlur,
12574
- className: cn(
12575
- "input__control",
12576
- "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",
12577
- "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
12578
- isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
12579
- isEmpty && "text-[var(--chekin-color-gray-1)]",
12580
- inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
12581
- (disabled || readOnly) && "cursor-not-allowed",
12582
- loading && "cursor-progress",
12583
- leftIcon && "pl-10",
12584
- (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
12585
- sign && "pr-10",
12586
- inputClassName
12587
- )
12588
- }
12589
- ),
12590
- sign && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("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 }),
12591
- trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
12592
- onReset && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12593
- "button",
12594
- {
12595
- type: "button",
12596
- onClick: onReset,
12597
- disabled,
12598
- 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",
12599
- "aria-label": t("reset"),
12600
- children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.X, { size: 14 })
12601
- }
12602
- ),
12603
- isPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12604
- "button",
12605
- {
12606
- type: "button",
12607
- onClick: togglePasswordReveal,
12608
- 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",
12609
- "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
12610
- children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12611
- import_lucide_react42.Eye,
12612
- {
12613
- size: 20,
12614
- className: cn(
12615
- "input__password-icon",
12616
- isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
12617
- )
12618
- }
12619
- )
12620
- }
12621
- )
12622
- ]
12623
- }
12624
- ),
12625
- type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
12513
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: cn("input__field", "relative block w-full", fieldClassName), children: [
12514
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
12515
+ "div",
12516
+ {
12517
+ className: cn("input__content relative w-full cursor-text", contentClassName),
12518
+ children: [
12519
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12520
+ Fieldset,
12521
+ {
12522
+ isFocused: isFocused && !readOnly,
12523
+ invalid: hasInvalidState,
12524
+ isEmpty,
12525
+ onClick: handleLabelClick,
12526
+ isActivated: !isEmpty || isFocused,
12527
+ readOnly,
12528
+ loading,
12529
+ disabled,
12530
+ htmlFor: inputId,
12531
+ labelId: `${inputId}-label`,
12532
+ legend: typeof label === "string" ? label : void 0,
12533
+ label,
12534
+ tooltip,
12535
+ className: "input__fieldset",
12536
+ labelClassName: cn({
12537
+ input__label: true,
12538
+ "pl-[28px]": !!leftIcon
12539
+ })
12540
+ }
12541
+ ),
12542
+ leftIcon && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("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__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
12626
12543
  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12544
+ "input",
12545
+ {
12546
+ ...props,
12547
+ ref: combinedInputRef,
12548
+ id: inputId,
12549
+ name,
12550
+ type: inputType,
12551
+ "data-testid": "input",
12552
+ value,
12553
+ defaultValue,
12554
+ disabled: disabled || loading,
12555
+ readOnly,
12556
+ required: !optional,
12557
+ "aria-label": typeof label === "string" ? label : void 0,
12558
+ "aria-invalid": hasInvalidState,
12559
+ "aria-busy": loading,
12560
+ "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
12561
+ placeholder: isFocused || !label ? placeholder : void 0,
12562
+ onChange: handleChange,
12563
+ onFocus: handleFocus,
12564
+ onBlur: handleBlur,
12565
+ className: cn(
12566
+ "input__control",
12567
+ "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",
12568
+ "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
12569
+ isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
12570
+ isEmpty && "text-[var(--chekin-color-gray-1)]",
12571
+ inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
12572
+ (disabled || readOnly) && "cursor-not-allowed",
12573
+ loading && "cursor-progress",
12574
+ leftIcon && "pl-10",
12575
+ (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
12576
+ sign && "pr-10",
12577
+ inputClassName
12578
+ )
12579
+ }
12580
+ ),
12581
+ sign && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("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 }),
12582
+ trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
12583
+ onReset && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12627
12584
  "button",
12628
12585
  {
12629
12586
  type: "button",
12630
- onClick: onDecrement,
12631
- 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",
12632
- "aria-label": t("decrement"),
12633
- children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
12587
+ onClick: onReset,
12588
+ disabled,
12589
+ 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",
12590
+ "aria-label": t("reset"),
12591
+ children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.X, { size: 14 })
12634
12592
  }
12635
12593
  ),
12636
- /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12594
+ isPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12637
12595
  "button",
12638
12596
  {
12639
12597
  type: "button",
12640
- onClick: onIncrement,
12641
- 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",
12642
- "aria-label": t("increment"),
12643
- children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
12598
+ onClick: togglePasswordReveal,
12599
+ 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",
12600
+ "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
12601
+ children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12602
+ import_lucide_react42.Eye,
12603
+ {
12604
+ size: 20,
12605
+ className: cn(
12606
+ "input__password-icon",
12607
+ isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
12608
+ )
12609
+ }
12610
+ )
12644
12611
  }
12645
12612
  )
12646
- ] })
12647
- ]
12648
- }
12649
- ),
12613
+ ]
12614
+ }
12615
+ ),
12616
+ type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
12617
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12618
+ "button",
12619
+ {
12620
+ type: "button",
12621
+ onClick: onDecrement,
12622
+ 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",
12623
+ "aria-label": t("decrement"),
12624
+ children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
12625
+ }
12626
+ ),
12627
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12628
+ "button",
12629
+ {
12630
+ type: "button",
12631
+ onClick: onIncrement,
12632
+ 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",
12633
+ "aria-label": t("increment"),
12634
+ children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
12635
+ }
12636
+ )
12637
+ ] })
12638
+ ] }),
12650
12639
  !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
12651
12640
  "span",
12652
12641
  {
@@ -13462,15 +13451,19 @@ function useSelectMenuState({
13462
13451
  }) {
13463
13452
  const containerRef = React47.useRef(null);
13464
13453
  const [internalIsOpen, setInternalIsOpen] = React47.useState(false);
13465
- const isControlledOpen = controlledIsOpen === true;
13466
- const isOpen = isControlledOpen || internalIsOpen;
13454
+ const [hasClosedControlledOpen, setHasClosedControlledOpen] = React47.useState(false);
13455
+ const isOpen = controlledIsOpen === false ? false : controlledIsOpen === true ? !hasClosedControlledOpen : internalIsOpen;
13456
+ React47.useEffect(() => {
13457
+ if (controlledIsOpen !== true) setHasClosedControlledOpen(false);
13458
+ }, [controlledIsOpen]);
13467
13459
  const setIsOpen = React47.useCallback(
13468
13460
  (next) => {
13469
13461
  const value = typeof next === "function" ? next(isOpen) : next;
13470
- setInternalIsOpen(value);
13462
+ if (controlledIsOpen === true) setHasClosedControlledOpen(!value);
13463
+ if (controlledIsOpen !== false) setInternalIsOpen(value);
13471
13464
  onMenuOpenChange?.(value);
13472
13465
  },
13473
- [isOpen, onMenuOpenChange]
13466
+ [isOpen, controlledIsOpen, onMenuOpenChange]
13474
13467
  );
13475
13468
  const openMenu = React47.useCallback(() => {
13476
13469
  setIsOpen(true);
@@ -14671,7 +14664,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
14671
14664
  filterOption: countriesFilter,
14672
14665
  clearable: false,
14673
14666
  getValueLabel: (option) => option.value,
14674
- className: "!max-w-none",
14667
+ className: "max-w-none w-auto",
14675
14668
  dropdownClassName: "right-auto w-[280px]"
14676
14669
  }
14677
14670
  ),
@@ -14696,7 +14689,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
14696
14689
  onFocus,
14697
14690
  onBlur,
14698
14691
  renderErrorMessage: false,
14699
- wrapperClassName: "!max-w-none",
14692
+ wrapperClassName: "max-w-none w-auto",
14700
14693
  contentClassName: readOnly ? "!cursor-default" : void 0,
14701
14694
  inputClassName: readOnly ? "!cursor-default" : void 0
14702
14695
  }