@chekinapp/ui 0.0.42 → 0.0.44

package/dist/index.d.cts

@@ -2349,6 +2349,7 @@ type TogglesProps<T extends string | number, M extends boolean | undefined = und
     loading?: boolean;
     disabled?: boolean;
     disabledItems?: SelectorOption<T>['value'][];
+    readonlyItems?: SelectorOption<T>['value'][];
     readOnly?: boolean;
     label?: string;
     multiple?: M;
@@ -2359,7 +2360,7 @@ type TogglesProps<T extends string | number, M extends boolean | undefined = und
     value?: T;
     onChange?: (value: T, event: MouseEvent<HTMLButtonElement>) => void;
 });
-declare function TogglesInternal<T extends string | number, M extends boolean | undefined = undefined>({ className, groupClassName, loading, disabled, value, options, variant, size, theme, onAnySelectorActive, onClick, onChange, readOnly, minSelected, disabledItems, label, multiple, }: TogglesProps<T, M>, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TogglesInternal<T extends string | number, M extends boolean | undefined = undefined>({ className, groupClassName, loading, disabled, value, options, variant, size, theme, onAnySelectorActive, onClick, onChange, readOnly, minSelected, disabledItems, readonlyItems, label, multiple, }: TogglesProps<T, M>, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 type TogglesForwardType = <T extends string | number, M extends boolean | undefined = true>(props: TogglesProps<T, M> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReturnType<typeof TogglesInternal>;

package/dist/index.d.ts

@@ -2349,6 +2349,7 @@ type TogglesProps<T extends string | number, M extends boolean | undefined = und
     loading?: boolean;
     disabled?: boolean;
     disabledItems?: SelectorOption<T>['value'][];
+    readonlyItems?: SelectorOption<T>['value'][];
     readOnly?: boolean;
     label?: string;
     multiple?: M;
@@ -2359,7 +2360,7 @@ type TogglesProps<T extends string | number, M extends boolean | undefined = und
     value?: T;
     onChange?: (value: T, event: MouseEvent<HTMLButtonElement>) => void;
 });
-declare function TogglesInternal<T extends string | number, M extends boolean | undefined = undefined>({ className, groupClassName, loading, disabled, value, options, variant, size, theme, onAnySelectorActive, onClick, onChange, readOnly, minSelected, disabledItems, label, multiple, }: TogglesProps<T, M>, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TogglesInternal<T extends string | number, M extends boolean | undefined = undefined>({ className, groupClassName, loading, disabled, value, options, variant, size, theme, onAnySelectorActive, onClick, onChange, readOnly, minSelected, disabledItems, readonlyItems, label, multiple, }: TogglesProps<T, M>, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 type TogglesForwardType = <T extends string | number, M extends boolean | undefined = true>(props: TogglesProps<T, M> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReturnType<typeof TogglesInternal>;

package/dist/index.js

@@ -728,7 +728,7 @@ var buttonVariants = cva3(
 );
 
 // src/button/Button.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Button = React4.forwardRef(
   ({
     className,
@@ -768,10 +768,10 @@ var Button = React4.forwardRef(
         disabled: isDisabled,
         className: classNames,
         ...props,
-        children: loading ? /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5", children: [
+        children: loading ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
           /* @__PURE__ */ jsx10(Spinner, {}),
           showLoadingLabel ? /* @__PURE__ */ jsx10("span", { children: loadingText || t("please_wait") }) : null
-        ] }) : /* @__PURE__ */ jsx10("span", { className: "inline-flex items-center gap-2", children })
+        ] }) : children
       }
     );
   }
@@ -1483,7 +1483,7 @@ function ErrorMessage({ className, children, disabled }) {
 }
 
 // src/checkbox/CheckboxGroup.tsx
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var ScrollAreaWrapper = ({
   children,
   scrollable,
@@ -1538,7 +1538,7 @@ var CheckboxGroup = React9.forwardRef(
     );
     const isAllSelected = selectedAvailableValues.length > 0 && selectedAvailableValues.length === availableOptions.length;
     return /* @__PURE__ */ jsxs15("div", { ref, className: cn("space-y-2", className), ...props, children: [
-      showSelectAll && /* @__PURE__ */ jsxs15(Fragment3, { children: [
+      showSelectAll && /* @__PURE__ */ jsxs15(Fragment4, { children: [
         /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx22(
             BaseCheckbox,
@@ -3292,10 +3292,10 @@ var CheckboxDropdownGroup = forwardRef16(
 CheckboxDropdownGroup.displayName = "CheckboxDropdownGroup";
 
 // src/dropdown-menu/CheckboxDropdownMultiGroup.tsx
-import { forwardRef as forwardRef17, Fragment as Fragment4 } from "react";
+import { forwardRef as forwardRef17, Fragment as Fragment5 } from "react";
 import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 var CheckboxDropdownMultiGroup = forwardRef17(({ groups, className = "", keepOpenOnSelect }, ref) => {
-  return /* @__PURE__ */ jsx36("div", { ref, className: cn("space-y-1", className), children: groups.map((group, index) => /* @__PURE__ */ jsxs27(Fragment4, { children: [
+  return /* @__PURE__ */ jsx36("div", { ref, className: cn("space-y-1", className), children: groups.map((group, index) => /* @__PURE__ */ jsxs27(Fragment5, { children: [
     /* @__PURE__ */ jsxs27(DropdownMenuGroup, { children: [
       /* @__PURE__ */ jsx36(DropdownMenuLabel, { children: group.label }),
       group.multiple ? /* @__PURE__ */ jsx36(
@@ -3746,7 +3746,7 @@ import {
   VolumeX,
   X as X2
 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function VideoPlayer({
   src,
   poster,
@@ -3942,7 +3942,7 @@ function VideoPlayer({
             onLoad: () => setIsLoading(false),
             title: title || "Vimeo video player"
           }
-        ) : /* @__PURE__ */ jsxs33(Fragment5, { children: [
+        ) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
           /* @__PURE__ */ jsxs33(
             "video",
             {
@@ -4434,7 +4434,7 @@ GridItems.displayName = "GridItems";
 
 // src/help-tooltip/HelpTooltip.tsx
 import { CircleQuestionMark } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
 function HelpTooltip({
   content,
   side,
@@ -4453,7 +4453,7 @@ function HelpTooltip({
     className
   );
   const triggerStyle = { width: size, height: size };
-  const triggerContent = /* @__PURE__ */ jsxs38(Fragment6, { children: [
+  const triggerContent = /* @__PURE__ */ jsxs38(Fragment7, { children: [
     /* @__PURE__ */ jsx59(CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
     /* @__PURE__ */ jsx59("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
   ] });
@@ -4482,11 +4482,11 @@ function HelpTooltip({
 
 // src/icon/Icon.tsx
 import { forwardRef as forwardRef26, memo as memo2 } from "react";
-import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
 var MissingIcon = forwardRef26(
   ({ size = 24, className = "", fallback = null, color, ...props }, ref) => {
     if (fallback) {
-      return /* @__PURE__ */ jsx60(Fragment7, { children: fallback });
+      return /* @__PURE__ */ jsx60(Fragment8, { children: fallback });
     }
     return /* @__PURE__ */ jsxs39(
       "svg",
@@ -6743,7 +6743,7 @@ function useRadioOptions({ options, defaultValue, onChange }) {
 }
 
 // src/radio/Radio.tsx
-import { Fragment as Fragment8, jsx as jsx86, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx86, jsxs as jsxs56 } from "react/jsx-runtime";
 var Radio = forwardRef37(
   ({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
     const { selectedValue, handleValueChange } = useRadioOptions({
@@ -6757,7 +6757,7 @@ var Radio = forwardRef37(
       }
       return option.value === selectedValue;
     };
-    return /* @__PURE__ */ jsxs56(Fragment8, { children: [
+    return /* @__PURE__ */ jsxs56(Fragment9, { children: [
       /* @__PURE__ */ jsx86(
         RadioGroup2,
         {
@@ -6774,7 +6774,7 @@ var Radio = forwardRef37(
                 "flex cursor-pointer items-center gap-2",
                 (disabled || option.disabled) && "cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
               ),
-              children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs56(Fragment8, { children: [
+              children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs56(Fragment9, { children: [
                 /* @__PURE__ */ jsx86(
                   RadioGroupItem,
                   {
@@ -7298,7 +7298,7 @@ function SelectorButton({
 SelectorButton.displayName = "SelectorButton";
 
 // src/selectors/Selectors.tsx
-import { Fragment as Fragment9, jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
 var getValueArray = (value) => {
   if (value) {
     return Array.isArray(value) ? value : [value];
@@ -7355,7 +7355,7 @@ function SelectorsInternal({
   useEffect21(() => {
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
-  return /* @__PURE__ */ jsxs64(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs64(Fragment10, { children: [
     label && /* @__PURE__ */ jsx97("div", { className: "flex [&_span]:ml-[5px]", children: /* @__PURE__ */ jsx97("div", { className: "label box-border mb-1.5 min-h-5 select-none overflow-x-hidden text-ellipsis whitespace-nowrap text-left text-base font-normal text-[var(--chekin-color-brand-navy)]", children: label }) }),
     /* @__PURE__ */ jsx97(
       "div",
@@ -8952,7 +8952,12 @@ var ToggleGroupItem = React28.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/toggle-group/Toggles.tsx
-import { forwardRef as forwardRef45, useEffect as useEffect23 } from "react";
+import {
+  cloneElement as cloneElement3,
+  forwardRef as forwardRef45,
+  isValidElement as isValidElement3,
+  useEffect as useEffect23
+} from "react";
 import { jsx as jsx116, jsxs as jsxs77 } from "react/jsx-runtime";
 var getValueArray2 = (value) => {
   if (value) {
@@ -8960,6 +8965,16 @@ var getValueArray2 = (value) => {
   }
   return [];
 };
+function getToggleContent(label, disabled, readOnly, active) {
+  if (isValidElement3(label)) {
+    return cloneElement3(label, {
+      disabled,
+      readOnly,
+      active
+    });
+  }
+  return label;
+}
 function TogglesInternal({
   className,
   groupClassName,
@@ -8976,6 +8991,7 @@ function TogglesInternal({
   readOnly,
   minSelected = 0,
   disabledItems,
+  readonlyItems,
   label,
   multiple = true
 }, ref) {
@@ -9041,19 +9057,21 @@ function TogglesInternal({
   return /* @__PURE__ */ jsxs77("div", { ref, className, children: [
     label && /* @__PURE__ */ jsx116("div", { className: "mb-2", children: /* @__PURE__ */ jsx116("div", { className: "select-none text-base font-normal text-[var(--chekin-color-brand-navy)]", children: label }) }),
     /* @__PURE__ */ jsx116(ToggleGroup, { className: groupClassName, ...toggleGroupProps, children: options.map((option, index) => {
-      const isSelected = getValueArray2(value).includes(option.value);
+      const isSelected = Boolean(
+        getValueArray2(value).find((selectedValue) => selectedValue === option.value)
+      );
       const isDisabled = disabled || disabledItems?.includes(option.value) || option.disabled;
       const isMinSelected = getValueArray2(value).length <= minSelected;
-      const isItemReadOnly = readOnly || isMinSelected && isSelected;
+      const isItemReadOnly = readOnly || isMinSelected && isSelected || readonlyItems?.includes(option.value);
       return /* @__PURE__ */ jsx116(
         ToggleGroupItem,
         {
           value: String(option.value),
           disabled: isDisabled || isItemReadOnly || loading,
           onClick: handleItemClick(option),
-          children: option.label
+          children: getToggleContent(option.label, isDisabled, isItemReadOnly, isSelected)
         },
-        `${option.value}-${index}`
+        index
       );
     }) })
   ] });
@@ -9342,7 +9360,7 @@ var LABEL_PLACEMENT = /* @__PURE__ */ ((LABEL_PLACEMENT2) => {
 })(LABEL_PLACEMENT || {});
 
 // src/three-dots-loader/ThreeDotsLoader.tsx
-import { Fragment as Fragment10, jsx as jsx122, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx122, jsxs as jsxs80 } from "react/jsx-runtime";
 function Dots({
   height,
   width,
@@ -9397,10 +9415,10 @@ function ThreeDotsLoader({
           "flex items-center justify-center gap-x-[13px] [&>div]:text-sm [&>div]:font-bold [&>div]:uppercase [&>div]:text-[#9696b9] [&>div]:opacity-50",
           className
         ),
-        children: labelPlacement === 0 /* right */ ? /* @__PURE__ */ jsxs80(Fragment10, { children: [
+        children: labelPlacement === 0 /* right */ ? /* @__PURE__ */ jsxs80(Fragment11, { children: [
           dots,
           /* @__PURE__ */ jsx122("div", { children: label })
-        ] }) : /* @__PURE__ */ jsxs80(Fragment10, { children: [
+        ] }) : /* @__PURE__ */ jsxs80(Fragment11, { children: [
           /* @__PURE__ */ jsx122("div", { children: label }),
           dots
         ] })
@@ -10338,7 +10356,7 @@ function FieldErrorMessage({
 }
 
 // src/field-trigger/FieldTrigger.tsx
-import { Fragment as Fragment11, jsx as jsx129, jsxs as jsxs86 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx129, jsxs as jsxs86 } from "react/jsx-runtime";
 var FieldTrigger = React32.forwardRef(
   ({
     as = "button",
@@ -10417,7 +10435,7 @@ var FieldTrigger = React32.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs86(Fragment11, { children: [
+    const sharedContent = /* @__PURE__ */ jsxs86(Fragment12, { children: [
       /* @__PURE__ */ jsxs86(
         "span",
         {