@chekinapp/ui 0.0.116 → 0.0.117

package/dist/index.d.cts

@@ -3193,14 +3193,10 @@ type SelectCheckboxesProps<T = undefined, V extends SelectValue$1 = string, L ex
     options?: SelectGroupedOption<T, V, L>[];
     trigger?: SelectCheckboxesTriggerRenderer;
     components?: SelectComponents<T, V, L>;
-    /** Custom display for the count text in the trigger. Receives (count, total). */
     valueText?: string | ((selectedCount: number, total: number) => string);
-    /** Show "Select All" row at top of menu (default false). */
     allowSelectAll?: boolean;
     selectAllLabel?: string;
-    /** Render the in-menu search input (default true). */
     searchable?: boolean;
-    searchPlaceholder?: string;
 } & SelectCheckboxesPaginationProps<T, V, L>;
 type SelectCheckboxesComponent = <T = undefined, V extends SelectValue$1 = string, L extends ReactNode = string>(props: SelectCheckboxesProps<T, V, L> & {
     ref?: React$1.Ref<HTMLDivElement>;
@@ -3212,11 +3208,10 @@ declare function SelectCheckboxOption<T, V extends SelectValue$1, L extends Reac
 type SelectAllRowProps = {
     label: string;
     checked: boolean;
-    indeterminate?: boolean;
     disabled?: boolean;
     onToggle: () => void;
 };
-declare function SelectAllRow({ label, checked, indeterminate, disabled, onToggle, }: SelectAllRowProps): react_jsx_runtime.JSX.Element;
+declare function SelectAllRow({ label, checked, disabled, onToggle }: SelectAllRowProps): react_jsx_runtime.JSX.Element;
 
 type TextareaProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> & {
     label?: React$1.ReactNode;
@@ -4095,6 +4090,9 @@ interface AirbnbSwitchProps extends Omit<React$1.ComponentPropsWithoutRef<typeof
     onChange?: React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>['onCheckedChange'];
     loading?: boolean;
     readOnly?: boolean;
+    label?: React$1.ReactNode;
+    error?: string;
+    wrapperClassName?: string;
 }
 declare const AirbnbSwitch: React$1.ForwardRefExoticComponent<AirbnbSwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 

package/dist/index.d.ts

@@ -3193,14 +3193,10 @@ type SelectCheckboxesProps<T = undefined, V extends SelectValue$1 = string, L ex
     options?: SelectGroupedOption<T, V, L>[];
     trigger?: SelectCheckboxesTriggerRenderer;
     components?: SelectComponents<T, V, L>;
-    /** Custom display for the count text in the trigger. Receives (count, total). */
     valueText?: string | ((selectedCount: number, total: number) => string);
-    /** Show "Select All" row at top of menu (default false). */
     allowSelectAll?: boolean;
     selectAllLabel?: string;
-    /** Render the in-menu search input (default true). */
     searchable?: boolean;
-    searchPlaceholder?: string;
 } & SelectCheckboxesPaginationProps<T, V, L>;
 type SelectCheckboxesComponent = <T = undefined, V extends SelectValue$1 = string, L extends ReactNode = string>(props: SelectCheckboxesProps<T, V, L> & {
     ref?: React$1.Ref<HTMLDivElement>;
@@ -3212,11 +3208,10 @@ declare function SelectCheckboxOption<T, V extends SelectValue$1, L extends Reac
 type SelectAllRowProps = {
     label: string;
     checked: boolean;
-    indeterminate?: boolean;
     disabled?: boolean;
     onToggle: () => void;
 };
-declare function SelectAllRow({ label, checked, indeterminate, disabled, onToggle, }: SelectAllRowProps): react_jsx_runtime.JSX.Element;
+declare function SelectAllRow({ label, checked, disabled, onToggle }: SelectAllRowProps): react_jsx_runtime.JSX.Element;
 
 type TextareaProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> & {
     label?: React$1.ReactNode;
@@ -4095,6 +4090,9 @@ interface AirbnbSwitchProps extends Omit<React$1.ComponentPropsWithoutRef<typeof
     onChange?: React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>['onCheckedChange'];
     loading?: boolean;
     readOnly?: boolean;
+    label?: React$1.ReactNode;
+    error?: string;
+    wrapperClassName?: string;
 }
 declare const AirbnbSwitch: React$1.ForwardRefExoticComponent<AirbnbSwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 

package/dist/index.js

@@ -12512,9 +12512,9 @@ import { useTranslation as useTranslation28 } from "react-i18next";
 
 // src/dashboard/_select-internals/utils.ts
 function isOptionGroup(item) {
-  return Boolean(
-    item && Array.isArray(item.options)
-  );
+  if (!item || typeof item !== "object") return false;
+  if ("value" in item) return false;
+  return Array.isArray(item.options);
 }
 function flattenGroupedOptions(items) {
   if (!items) return [];
@@ -12625,7 +12625,7 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 import { jsx as jsx146, jsxs as jsxs93 } from "react/jsx-runtime";
-function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
+function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
   if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
     return options.map((option, index) => ({
       kind: "option",
@@ -12634,38 +12634,39 @@ function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
       flatIndex: index
     }));
   }
-  const indexByOption = /* @__PURE__ */ new Map();
-  options.forEach((option, index) => indexByOption.set(option, index));
+  const visibleValues = new Set(options.map((option) => option.value));
   const entries = [];
+  let flatIndex = 0;
   let groupCount = 0;
   for (const item of groupedOptions) {
     if (isOptionGroup(item)) {
-      const visible = item.options.filter((option) => indexByOption.has(option));
-      if (visible.length === 0) continue;
-      const label = formatGroupLabel ? formatGroupLabel(item) : item.label;
-      entries.push({
-        kind: "group-label",
-        key: `__group-${groupCount}`,
-        label
-      });
-      groupCount += 1;
-      for (const option of visible) {
-        const flatIndex = indexByOption.get(option);
-        entries.push({
-          kind: "option",
+      const visible = [];
+      for (const option of item.options) {
+        if (!visibleValues.has(option.value)) continue;
+        visible.push({
           key: `${String(option.value)}-${flatIndex}`,
           option,
           flatIndex
         });
+        flatIndex += 1;
       }
-    } else if (indexByOption.has(item)) {
-      const flatIndex = indexByOption.get(item);
+      if (visible.length === 0) continue;
+      entries.push({
+        kind: "group",
+        key: `__group-${groupCount}`,
+        labelId: `${listboxId}-group-${groupCount}`,
+        label: formatGroupLabel ? formatGroupLabel(item) : item.label,
+        options: visible
+      });
+      groupCount += 1;
+    } else if (visibleValues.has(item.value)) {
       entries.push({
         kind: "option",
         key: `${String(item.value)}-${flatIndex}`,
         option: item,
         flatIndex
       });
+      flatIndex += 1;
     }
   }
   return entries;
@@ -12709,9 +12710,37 @@ function SelectMenu({
     [selectedValues, selectedValue]
   );
   const entries = React45.useMemo(
-    () => buildMenuEntries(groupedOptions, options, formatGroupLabel),
-    [groupedOptions, options, formatGroupLabel]
+    () => buildMenuEntries(groupedOptions, options, formatGroupLabel, id),
+    [groupedOptions, options, formatGroupLabel, id]
   );
+  const renderOption = (entry) => {
+    const { option, flatIndex, key } = entry;
+    const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
+    const isHighlighted = flatIndex === highlightedIndex;
+    const optionDisabled = Boolean(
+      disabled || option.isDisabled || isOptionDisabled?.(option)
+    );
+    return /* @__PURE__ */ jsx146(
+      Option,
+      {
+        id: getOptionId2(flatIndex),
+        option,
+        index: flatIndex,
+        isSelected,
+        isHighlighted,
+        isDisabled: optionDisabled,
+        isLast: flatIndex === lastIndex,
+        isMulti: Boolean(isMulti),
+        onClick: onOptionClick,
+        onHover: onOptionHover ?? (() => void 0),
+        innerRef: (node) => selectedOptionRef?.(flatIndex, node),
+        inputValue,
+        selectedOptions: selectedList,
+        formatOptionLabel
+      },
+      key
+    );
+  };
   const wasAtBottomRef = React45.useRef(false);
   const handleScroll = React45.useCallback(
     (event) => {
@@ -12746,43 +12775,20 @@ function SelectMenu({
       children: [
         !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx146("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
         entries.map((entry) => {
-          if (entry.kind === "group-label") {
-            return /* @__PURE__ */ jsx146(
-              "div",
-              {
-                role: "presentation",
-                className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
-                children: entry.label
-              },
-              entry.key
-            );
+          if (entry.kind === "group") {
+            return /* @__PURE__ */ jsxs93("div", { role: "group", "aria-labelledby": entry.labelId, children: [
+              /* @__PURE__ */ jsx146(
+                "div",
+                {
+                  id: entry.labelId,
+                  className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
+                  children: entry.label
+                }
+              ),
+              entry.options.map(renderOption)
+            ] }, entry.key);
           }
-          const { option, flatIndex } = entry;
-          const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
-          const isHighlighted = flatIndex === highlightedIndex;
-          const optionDisabled = Boolean(
-            disabled || option.isDisabled || isOptionDisabled?.(option)
-          );
-          return /* @__PURE__ */ jsx146(
-            Option,
-            {
-              id: getOptionId2(flatIndex),
-              option,
-              index: flatIndex,
-              isSelected,
-              isHighlighted,
-              isDisabled: optionDisabled,
-              isLast: flatIndex === lastIndex,
-              isMulti: Boolean(isMulti),
-              onClick: onOptionClick,
-              onHover: onOptionHover ?? (() => void 0),
-              innerRef: (node) => selectedOptionRef?.(flatIndex, node),
-              inputValue,
-              selectedOptions: selectedList,
-              formatOptionLabel
-            },
-            entry.key
-          );
+          return renderOption(entry);
         }),
         footer
       ]
@@ -14787,13 +14793,7 @@ function createCountTrigger(opts) {
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
 import { jsx as jsx167, jsxs as jsxs104 } from "react/jsx-runtime";
-function SelectAllRow({
-  label,
-  checked,
-  indeterminate,
-  disabled,
-  onToggle
-}) {
+function SelectAllRow({ label, checked, disabled, onToggle }) {
   return /* @__PURE__ */ jsxs104(
     "button",
     {
@@ -14808,7 +14808,7 @@ function SelectAllRow({
         /* @__PURE__ */ jsx167(
           BaseCheckbox,
           {
-            checked: indeterminate ? "indeterminate" : checked,
+            checked,
             disabled,
             size: "s",
             tabIndex: -1,
@@ -14844,7 +14844,6 @@ function SelectCheckboxesInternal(props, ref) {
     allowSelectAll = false,
     selectAllLabel,
     searchable = true,
-    searchPlaceholder,
     filterOption = defaultFilterOption,
     closeMenuOnSelect = false,
     onSearchChange,
@@ -14879,7 +14878,6 @@ function SelectCheckboxesInternal(props, ref) {
     return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
   }, 0);
   const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
-  const someVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < filteredFlat.length;
   const handleToggleAll = React59.useCallback(() => {
     if (allVisibleSelected) {
       const visibleValues = new Set(filteredFlat.map((option) => option.value));
@@ -14915,7 +14913,6 @@ function SelectCheckboxesInternal(props, ref) {
     {
       label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
       checked: allVisibleSelected,
-      indeterminate: someVisibleSelected,
       onToggle: handleToggleAll
     }
   ) : void 0;
@@ -19952,45 +19949,60 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
 import * as React83 from "react";
 import * as SwitchPrimitives2 from "@radix-ui/react-switch";
 import { Check as Check7 } from "lucide-react";
-import { jsx as jsx194 } from "react/jsx-runtime";
-var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, ...props }, ref) => /* @__PURE__ */ jsx194(
-  SwitchPrimitives2.Root,
-  {
-    ref,
-    className: cn(
-      "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
-      "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
-      "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
-      "aria-readonly:cursor-default aria-readonly:opacity-100",
-      "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
-      className
-    ),
-    disabled,
-    checked: value,
-    value: String(value),
-    onCheckedChange: !disabled && !readOnly ? onChange : void 0,
-    "aria-busy": loading,
-    "aria-readonly": readOnly,
-    ...props,
-    children: /* @__PURE__ */ jsx194(
-      SwitchPrimitives2.Thumb,
-      {
-        className: cn(
-          "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
-          "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
-        ),
-        children: /* @__PURE__ */ jsx194(
-          Check7,
-          {
-            "aria-hidden": "true",
-            className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
-            strokeWidth: 3
-          }
-        )
-      }
-    )
+import { Fragment as Fragment19, jsx as jsx194, jsxs as jsxs126 } from "react/jsx-runtime";
+var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, id, label, error, wrapperClassName, ...props }, ref) => {
+  const generatedId = React83.useId();
+  const fieldId = id || generatedId;
+  const switchElement = /* @__PURE__ */ jsx194(
+    SwitchPrimitives2.Root,
+    {
+      ref,
+      className: cn(
+        "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
+        "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
+        "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
+        "aria-readonly:cursor-default aria-readonly:opacity-100",
+        "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
+        className
+      ),
+      id: fieldId,
+      disabled,
+      checked: value,
+      value: String(value),
+      onCheckedChange: !disabled && !readOnly ? onChange : void 0,
+      "aria-busy": loading,
+      "aria-readonly": readOnly,
+      ...props,
+      children: /* @__PURE__ */ jsx194(
+        SwitchPrimitives2.Thumb,
+        {
+          className: cn(
+            "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
+            "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
+          ),
+          children: /* @__PURE__ */ jsx194(
+            Check7,
+            {
+              "aria-hidden": "true",
+              className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
+              strokeWidth: 3
+            }
+          )
+        }
+      )
+    }
+  );
+  if (!label && !error) {
+    return switchElement;
   }
-));
+  return /* @__PURE__ */ jsxs126(Fragment19, { children: [
+    /* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
+      switchElement,
+      label && /* @__PURE__ */ jsx194(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
+    ] }),
+    error && /* @__PURE__ */ jsx194(ErrorMessage, { disabled, children: error })
+  ] });
+});
 AirbnbSwitch.displayName = "AirbnbSwitch";
 export {
   ALERT_BOX_VARIANTS,