prom-pal-ui 1.4.2 → 1.4.4

package/build/components/cjs/index.js

@@ -620,7 +620,7 @@ function createSlotClone$1(ownerName) {
       children = use(children._payload);
     }
     if (React__namespace.isValidElement(children)) {
-      const childrenRef = getElementRef$1(children);
+      const childrenRef = getElementRef$2(children);
       const props2 = mergeProps$1(slotProps, children.props);
       if (children.type !== React__namespace.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
@@ -660,7 +660,7 @@ function mergeProps$1(slotProps, childProps) {
   }
   return { ...slotProps, ...overrideProps };
 }
-function getElementRef$1(element) {
+function getElementRef$2(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
@@ -4121,7 +4121,7 @@ function createSlotClone(ownerName) {
   const SlotClone = React__namespace.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     if (React__namespace.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
+      const childrenRef = getElementRef$1(children);
       const props2 = mergeProps(slotProps, children.props);
       if (children.type !== React__namespace.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
@@ -4161,7 +4161,7 @@ function mergeProps(slotProps, childProps) {
   }
   return { ...slotProps, ...overrideProps };
 }
-function getElementRef(element) {
+function getElementRef$1(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
@@ -7312,7 +7312,7 @@ function useControllableState({
   const setValue = React__namespace.useCallback(
     (nextValue) => {
       if (isControlled) {
-        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        const value2 = isFunction$1(nextValue) ? nextValue(prop) : nextValue;
         if (value2 !== prop) {
           onChangeRef.current?.(value2);
         }
@@ -7342,7 +7342,7 @@ function useUncontrolledState({
   }, [value, prevValueRef]);
   return [value, setValue, onChangeRef];
 }
-function isFunction(value) {
+function isFunction$1(value) {
   return typeof value === "function";
 }
 
@@ -8336,12 +8336,12 @@ var Select = (props) => {
   ) });
 };
 Select.displayName = SELECT_NAME;
-var TRIGGER_NAME = "SelectTrigger";
+var TRIGGER_NAME$1 = "SelectTrigger";
 var SelectTrigger = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME$1, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
@@ -8413,7 +8413,7 @@ var SelectTrigger = React__namespace.forwardRef(
     ) });
   }
 );
-SelectTrigger.displayName = TRIGGER_NAME;
+SelectTrigger.displayName = TRIGGER_NAME$1;
 var VALUE_NAME = "SelectValue";
 var SelectValue = React__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -9264,7 +9264,7 @@ var SelectArrow = React__namespace.forwardRef(
   }
 );
 SelectArrow.displayName = ARROW_NAME;
-var BUBBLE_INPUT_NAME$1 = "SelectBubbleInput";
+var BUBBLE_INPUT_NAME$2 = "SelectBubbleInput";
 var SelectBubbleInput = React__namespace.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
     const ref = React__namespace.useRef(null);
@@ -9296,7 +9296,7 @@ var SelectBubbleInput = React__namespace.forwardRef(
     );
   }
 );
-SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -9439,7 +9439,7 @@ var Switch = React__namespace.forwardRef(
           role: "switch",
           "aria-checked": checked,
           "aria-required": required,
-          "data-state": getState(checked),
+          "data-state": getState$1(checked),
           "data-disabled": disabled ? "" : void 0,
           disabled,
           value,
@@ -9480,7 +9480,7 @@ var SwitchThumb = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Primitive$1.span,
       {
-        "data-state": getState(context.checked),
+        "data-state": getState$1(context.checked),
         "data-disabled": context.disabled ? "" : void 0,
         ...thumbProps,
         ref: forwardedRef
@@ -9489,7 +9489,7 @@ var SwitchThumb = React__namespace.forwardRef(
   }
 );
 SwitchThumb.displayName = THUMB_NAME;
-var BUBBLE_INPUT_NAME = "SwitchBubbleInput";
+var BUBBLE_INPUT_NAME$1 = "SwitchBubbleInput";
 var SwitchBubbleInput = React__namespace.forwardRef(
   ({
     __scopeSwitch,
@@ -9538,8 +9538,8 @@ var SwitchBubbleInput = React__namespace.forwardRef(
     );
   }
 );
-SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function getState(checked) {
+SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+function getState$1(checked) {
   return checked ? "checked" : "unchecked";
 }
 var Root$1 = Switch;
@@ -21772,7 +21772,7 @@ var PromInput = function (_a) {
     };
     return (jsxRuntimeExports.jsx(PromFormFiled, { control: control, name: name, render: function (_a) {
             var field = _a.field, fieldState = _a.fieldState;
-            return (jsxRuntimeExports.jsxs("div", { className: "space-y-2 relative flex flex-col", children: [label && (jsxRuntimeExports.jsx(PromLabel, { className: cn("block text-sm font-medium", styleTitle), children: label })), jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [jsxRuntimeExports.jsx("input", __assign({}, field, props, { type: inputType, onChange: function (e) { return handleChange(e.target.value); }, disabled: isLoad || props.disabled, className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", styleWrapper) })), type === "password" && (jsxRuntimeExports.jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none", tabIndex: -1, disabled: props.disabled, children: showPassword ? (jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" })) : (jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })) }))] }), fieldState.error && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1 text-center w-full", children: fieldState.error.message }))] }));
+            return (jsxRuntimeExports.jsxs("div", { className: "space-y-2 relative flex flex-col w-full", children: [label && (jsxRuntimeExports.jsx(PromLabel, { className: cn("block text-sm font-medium", styleTitle), children: label })), jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [jsxRuntimeExports.jsx("input", __assign({}, field, props, { type: inputType, onChange: function (e) { return handleChange(e.target.value); }, disabled: isLoad || props.disabled, className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", styleWrapper) })), type === "password" && (jsxRuntimeExports.jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none", tabIndex: -1, disabled: props.disabled, children: showPassword ? (jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" })) : (jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })) }))] }), fieldState.error && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1 text-center w-full", children: fieldState.error.message }))] }));
         } }));
 };
 
@@ -21823,6 +21823,411 @@ function promSelectFilterOptions(obj, allowedKeys) {
     });
 }
 
+function useStateMachine(initialState, machine) {
+  return React__namespace.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+
+// src/presence.tsx
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React__namespace.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React__namespace.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React__namespace.useState();
+  const stylesRef = React__namespace.useRef(null);
+  const prevPresentRef = React__namespace.useRef(present);
+  const prevAnimationNameRef = React__namespace.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React__namespace.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React__namespace.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required,
+    value = "on",
+    // @ts-expect-error
+    internal_do_not_use_render
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+    caller: CHECKBOX_NAME
+  });
+  const [control, setControl] = React__namespace.useState(null);
+  const [bubbleInput, setBubbleInput] = React__namespace.useState(null);
+  const hasConsumerStoppedPropagationRef = React__namespace.useRef(false);
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CheckboxProviderImpl,
+    {
+      scope: __scopeCheckbox,
+      ...context,
+      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  );
+}
+var TRIGGER_NAME = "CheckboxTrigger";
+var CheckboxTrigger = React__namespace.forwardRef(
+  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+    const {
+      control,
+      value,
+      disabled,
+      checked,
+      required,
+      setControl,
+      setChecked,
+      hasConsumerStoppedPropagationRef,
+      isFormControl,
+      bubbleInput
+    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setControl);
+    const initialCheckedStateRef = React__namespace.useRef(checked);
+    React__namespace.useEffect(() => {
+      const form = control?.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    }, [control, setChecked]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive$1.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        "aria-required": required,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value,
+        ...checkboxProps,
+        ref: composedRefs,
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeEventHandlers(onClick, (event) => {
+          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+          if (bubbleInput && isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })
+      }
+    );
+  }
+);
+CheckboxTrigger.displayName = TRIGGER_NAME;
+var Checkbox = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      value,
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CheckboxProvider,
+      {
+        __scopeCheckbox,
+        checked,
+        defaultChecked,
+        disabled,
+        required,
+        onCheckedChange,
+        name,
+        form,
+        value,
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxTrigger,
+            {
+              ...checkboxProps,
+              ref: forwardedRef,
+              __scopeCheckbox
+            }
+          ),
+          isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxBubbleInput,
+            {
+              __scopeCheckbox
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Presence,
+      {
+        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Primitive$1.span,
+          {
+            "data-state": getState(context.checked),
+            "data-disabled": context.disabled ? "" : void 0,
+            ...indicatorProps,
+            ref: forwardedRef,
+            style: { pointerEvents: "none", ...props.style }
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React__namespace.forwardRef(
+  ({ __scopeCheckbox, ...props }, forwardedRef) => {
+    const {
+      control,
+      hasConsumerStoppedPropagationRef,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput
+    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    React__namespace.useEffect(() => {
+      const input = bubbleInput;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
+    const defaultCheckedRef = React__namespace.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive$1.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        required,
+        disabled,
+        name,
+        value,
+        form,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+function PromCheckbox(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsxRuntimeExports.jsx(Checkbox, __assign({ "data-slot": "checkbox", className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: jsxRuntimeExports.jsx(CheckboxIndicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) }) })));
+}
+
+var PromSwitchListField = function (_a) {
+    var name = _a.name, label = _a.label, options = _a.options, error = _a.error; _a.errorMsg; var _b = _a.isLoad, isLoad = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.errorDisplay, errorDisplay = _d === void 0 ? true : _d, className = _a.className, props = __rest(_a, ["name", "label", "options", "error", "errorMsg", "isLoad", "disabled", "errorDisplay", "className"]);
+    var control = reactHookForm.useFormContext().control;
+    return (jsxRuntimeExports.jsx(PromFormFiled, { name: name, control: control, render: function (_a) {
+            var field = _a.field, fieldState = _a.fieldState;
+            return (jsxRuntimeExports.jsxs("div", { className: cn("relative space-y-3", className), children: [label && jsxRuntimeExports.jsx(PromLabel, { children: label }), !isLoad ? (jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-5", children: options.map(function (option) {
+                            var values = field.value || [];
+                            var isChecked = values.includes(option.id);
+                            return (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(PromCheckbox, __assign({ id: "".concat(name, "-").concat(option.id), checked: isChecked, disabled: disabled, onCheckedChange: function (checked) {
+                                            var newValues = checked
+                                                ? __spreadArray(__spreadArray([], values, true), [option.id], false) : values.filter(function (id) { return id !== option.id; });
+                                            field.onChange(newValues);
+                                        } }, props)), jsxRuntimeExports.jsx(PromLabel, { htmlFor: "".concat(name, "-").concat(option.id), className: cn("text-gray-500 cursor-pointer", disabled && "cursor-not-allowed opacity-50"), children: option.title })] }, option.id));
+                        }) })) : (jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-5", children: [1, 2, 3].map(function (i) { return (jsxRuntimeExports.jsx(PromSkeleton, { className: "w-10 h-5" }, i)); }) })), errorDisplay && fieldState.error && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: error ? (error(fieldState.error.message)) : (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: fieldState.error.message })) }))] }));
+        } }));
+};
+
 var promAllowedPatternUrlSocial = /^[a-zA-Z0-9_@:\/\.\-]*$/;
 var promAllowedPatternOnlyRu = /^[а-яёА-ЯЁ]*$/;
 var promAllowedPatternPhone = /^\+7\d{0,10}$/;
@@ -21898,6 +22303,14 @@ var promMaskPhoneWithoutPlus = function (val) {
     }
     return cleaned;
 };
+var promMaskUrl = function (val) {
+    if (!val)
+        return val;
+    var httpsIndex = val.indexOf("https");
+    if (httpsIndex === -1)
+        return val;
+    return val.substring(httpsIndex);
+};
 var promMaskEmail = function (val) {
     if (!val)
         return val;
@@ -24271,6 +24684,7 @@ var PROM_MSG_ERROR = {
 
 exports.PROM_MSG_ERROR = PROM_MSG_ERROR;
 exports.PromButton = PromButton;
+exports.PromCheckbox = PromCheckbox;
 exports.PromFormFiled = PromFormFiled;
 exports.PromFrom = PromFrom;
 exports.PromInput = PromInput;
@@ -24290,6 +24704,7 @@ exports.PromSelectValue = PromSelectValue;
 exports.PromSkeleton = PromSkeleton;
 exports.PromSwitch = PromSwitch;
 exports.PromSwitchField = PromSwitchField;
+exports.PromSwitchListField = PromSwitchListField;
 exports.PromTextarea = PromTextarea;
 exports.promAllowedPatternEmail = promAllowedPatternEmail;
 exports.promAllowedPatternNaturalNumbers = promAllowedPatternNaturalNumbers;
@@ -24301,6 +24716,7 @@ exports.promMaskEmail = promMaskEmail;
 exports.promMaskPhone = promMaskPhone;
 exports.promMaskPhoneWithoutPlus = promMaskPhoneWithoutPlus;
 exports.promMaskTelegram = promMaskTelegram;
+exports.promMaskUrl = promMaskUrl;
 exports.promMaskWhatsapp = promMaskWhatsapp;
 exports.promSchemaPhone = promSchemaPhone;
 exports.promSelectFilterOptions = promSelectFilterOptions;

package/build/components/esm/index.js

@@ -600,7 +600,7 @@ function createSlotClone$1(ownerName) {
       children = use(children._payload);
     }
     if (React.isValidElement(children)) {
-      const childrenRef = getElementRef$1(children);
+      const childrenRef = getElementRef$2(children);
       const props2 = mergeProps$1(slotProps, children.props);
       if (children.type !== React.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
@@ -640,7 +640,7 @@ function mergeProps$1(slotProps, childProps) {
   }
   return { ...slotProps, ...overrideProps };
 }
-function getElementRef$1(element) {
+function getElementRef$2(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
@@ -4101,7 +4101,7 @@ function createSlotClone(ownerName) {
   const SlotClone = React.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     if (React.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
+      const childrenRef = getElementRef$1(children);
       const props2 = mergeProps(slotProps, children.props);
       if (children.type !== React.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
@@ -4141,7 +4141,7 @@ function mergeProps(slotProps, childProps) {
   }
   return { ...slotProps, ...overrideProps };
 }
-function getElementRef(element) {
+function getElementRef$1(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
@@ -7292,7 +7292,7 @@ function useControllableState({
   const setValue = React.useCallback(
     (nextValue) => {
       if (isControlled) {
-        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        const value2 = isFunction$1(nextValue) ? nextValue(prop) : nextValue;
         if (value2 !== prop) {
           onChangeRef.current?.(value2);
         }
@@ -7322,7 +7322,7 @@ function useUncontrolledState({
   }, [value, prevValueRef]);
   return [value, setValue, onChangeRef];
 }
-function isFunction(value) {
+function isFunction$1(value) {
   return typeof value === "function";
 }
 
@@ -8316,12 +8316,12 @@ var Select = (props) => {
   ) });
 };
 Select.displayName = SELECT_NAME;
-var TRIGGER_NAME = "SelectTrigger";
+var TRIGGER_NAME$1 = "SelectTrigger";
 var SelectTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME$1, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
@@ -8393,7 +8393,7 @@ var SelectTrigger = React.forwardRef(
     ) });
   }
 );
-SelectTrigger.displayName = TRIGGER_NAME;
+SelectTrigger.displayName = TRIGGER_NAME$1;
 var VALUE_NAME = "SelectValue";
 var SelectValue = React.forwardRef(
   (props, forwardedRef) => {
@@ -9244,7 +9244,7 @@ var SelectArrow = React.forwardRef(
   }
 );
 SelectArrow.displayName = ARROW_NAME;
-var BUBBLE_INPUT_NAME$1 = "SelectBubbleInput";
+var BUBBLE_INPUT_NAME$2 = "SelectBubbleInput";
 var SelectBubbleInput = React.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
     const ref = React.useRef(null);
@@ -9276,7 +9276,7 @@ var SelectBubbleInput = React.forwardRef(
     );
   }
 );
-SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -9419,7 +9419,7 @@ var Switch = React.forwardRef(
           role: "switch",
           "aria-checked": checked,
           "aria-required": required,
-          "data-state": getState(checked),
+          "data-state": getState$1(checked),
           "data-disabled": disabled ? "" : void 0,
           disabled,
           value,
@@ -9460,7 +9460,7 @@ var SwitchThumb = React.forwardRef(
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Primitive$1.span,
       {
-        "data-state": getState(context.checked),
+        "data-state": getState$1(context.checked),
         "data-disabled": context.disabled ? "" : void 0,
         ...thumbProps,
         ref: forwardedRef
@@ -9469,7 +9469,7 @@ var SwitchThumb = React.forwardRef(
   }
 );
 SwitchThumb.displayName = THUMB_NAME;
-var BUBBLE_INPUT_NAME = "SwitchBubbleInput";
+var BUBBLE_INPUT_NAME$1 = "SwitchBubbleInput";
 var SwitchBubbleInput = React.forwardRef(
   ({
     __scopeSwitch,
@@ -9518,8 +9518,8 @@ var SwitchBubbleInput = React.forwardRef(
     );
   }
 );
-SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function getState(checked) {
+SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+function getState$1(checked) {
   return checked ? "checked" : "unchecked";
 }
 var Root$1 = Switch;
@@ -21752,7 +21752,7 @@ var PromInput = function (_a) {
     };
     return (jsxRuntimeExports.jsx(PromFormFiled, { control: control, name: name, render: function (_a) {
             var field = _a.field, fieldState = _a.fieldState;
-            return (jsxRuntimeExports.jsxs("div", { className: "space-y-2 relative flex flex-col", children: [label && (jsxRuntimeExports.jsx(PromLabel, { className: cn("block text-sm font-medium", styleTitle), children: label })), jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [jsxRuntimeExports.jsx("input", __assign({}, field, props, { type: inputType, onChange: function (e) { return handleChange(e.target.value); }, disabled: isLoad || props.disabled, className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", styleWrapper) })), type === "password" && (jsxRuntimeExports.jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none", tabIndex: -1, disabled: props.disabled, children: showPassword ? (jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" })) : (jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })) }))] }), fieldState.error && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1 text-center w-full", children: fieldState.error.message }))] }));
+            return (jsxRuntimeExports.jsxs("div", { className: "space-y-2 relative flex flex-col w-full", children: [label && (jsxRuntimeExports.jsx(PromLabel, { className: cn("block text-sm font-medium", styleTitle), children: label })), jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [jsxRuntimeExports.jsx("input", __assign({}, field, props, { type: inputType, onChange: function (e) { return handleChange(e.target.value); }, disabled: isLoad || props.disabled, className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", styleWrapper) })), type === "password" && (jsxRuntimeExports.jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none", tabIndex: -1, disabled: props.disabled, children: showPassword ? (jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" })) : (jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })) }))] }), fieldState.error && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1 text-center w-full", children: fieldState.error.message }))] }));
         } }));
 };
 
@@ -21803,6 +21803,411 @@ function promSelectFilterOptions(obj, allowedKeys) {
     });
 }
 
+function useStateMachine(initialState, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+
+// src/presence.tsx
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef(null);
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required,
+    value = "on",
+    // @ts-expect-error
+    internal_do_not_use_render
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+    caller: CHECKBOX_NAME
+  });
+  const [control, setControl] = React.useState(null);
+  const [bubbleInput, setBubbleInput] = React.useState(null);
+  const hasConsumerStoppedPropagationRef = React.useRef(false);
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CheckboxProviderImpl,
+    {
+      scope: __scopeCheckbox,
+      ...context,
+      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  );
+}
+var TRIGGER_NAME = "CheckboxTrigger";
+var CheckboxTrigger = React.forwardRef(
+  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+    const {
+      control,
+      value,
+      disabled,
+      checked,
+      required,
+      setControl,
+      setChecked,
+      hasConsumerStoppedPropagationRef,
+      isFormControl,
+      bubbleInput
+    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setControl);
+    const initialCheckedStateRef = React.useRef(checked);
+    React.useEffect(() => {
+      const form = control?.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    }, [control, setChecked]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive$1.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        "aria-required": required,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value,
+        ...checkboxProps,
+        ref: composedRefs,
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeEventHandlers(onClick, (event) => {
+          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+          if (bubbleInput && isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })
+      }
+    );
+  }
+);
+CheckboxTrigger.displayName = TRIGGER_NAME;
+var Checkbox = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      value,
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CheckboxProvider,
+      {
+        __scopeCheckbox,
+        checked,
+        defaultChecked,
+        disabled,
+        required,
+        onCheckedChange,
+        name,
+        form,
+        value,
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxTrigger,
+            {
+              ...checkboxProps,
+              ref: forwardedRef,
+              __scopeCheckbox
+            }
+          ),
+          isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxBubbleInput,
+            {
+              __scopeCheckbox
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Presence,
+      {
+        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Primitive$1.span,
+          {
+            "data-state": getState(context.checked),
+            "data-disabled": context.disabled ? "" : void 0,
+            ...indicatorProps,
+            ref: forwardedRef,
+            style: { pointerEvents: "none", ...props.style }
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React.forwardRef(
+  ({ __scopeCheckbox, ...props }, forwardedRef) => {
+    const {
+      control,
+      hasConsumerStoppedPropagationRef,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput
+    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    React.useEffect(() => {
+      const input = bubbleInput;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
+    const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive$1.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        required,
+        disabled,
+        name,
+        value,
+        form,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+function PromCheckbox(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsxRuntimeExports.jsx(Checkbox, __assign({ "data-slot": "checkbox", className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: jsxRuntimeExports.jsx(CheckboxIndicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) }) })));
+}
+
+var PromSwitchListField = function (_a) {
+    var name = _a.name, label = _a.label, options = _a.options, error = _a.error; _a.errorMsg; var _b = _a.isLoad, isLoad = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.errorDisplay, errorDisplay = _d === void 0 ? true : _d, className = _a.className, props = __rest(_a, ["name", "label", "options", "error", "errorMsg", "isLoad", "disabled", "errorDisplay", "className"]);
+    var control = useFormContext().control;
+    return (jsxRuntimeExports.jsx(PromFormFiled, { name: name, control: control, render: function (_a) {
+            var field = _a.field, fieldState = _a.fieldState;
+            return (jsxRuntimeExports.jsxs("div", { className: cn("relative space-y-3", className), children: [label && jsxRuntimeExports.jsx(PromLabel, { children: label }), !isLoad ? (jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-5", children: options.map(function (option) {
+                            var values = field.value || [];
+                            var isChecked = values.includes(option.id);
+                            return (jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(PromCheckbox, __assign({ id: "".concat(name, "-").concat(option.id), checked: isChecked, disabled: disabled, onCheckedChange: function (checked) {
+                                            var newValues = checked
+                                                ? __spreadArray(__spreadArray([], values, true), [option.id], false) : values.filter(function (id) { return id !== option.id; });
+                                            field.onChange(newValues);
+                                        } }, props)), jsxRuntimeExports.jsx(PromLabel, { htmlFor: "".concat(name, "-").concat(option.id), className: cn("text-gray-500 cursor-pointer", disabled && "cursor-not-allowed opacity-50"), children: option.title })] }, option.id));
+                        }) })) : (jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-5", children: [1, 2, 3].map(function (i) { return (jsxRuntimeExports.jsx(PromSkeleton, { className: "w-10 h-5" }, i)); }) })), errorDisplay && fieldState.error && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: error ? (error(fieldState.error.message)) : (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: fieldState.error.message })) }))] }));
+        } }));
+};
+
 var promAllowedPatternUrlSocial = /^[a-zA-Z0-9_@:\/\.\-]*$/;
 var promAllowedPatternOnlyRu = /^[а-яёА-ЯЁ]*$/;
 var promAllowedPatternPhone = /^\+7\d{0,10}$/;
@@ -21878,6 +22283,14 @@ var promMaskPhoneWithoutPlus = function (val) {
     }
     return cleaned;
 };
+var promMaskUrl = function (val) {
+    if (!val)
+        return val;
+    var httpsIndex = val.indexOf("https");
+    if (httpsIndex === -1)
+        return val;
+    return val.substring(httpsIndex);
+};
 var promMaskEmail = function (val) {
     if (!val)
         return val;
@@ -24249,4 +24662,4 @@ var PROM_MSG_ERROR = {
     INVALID_VALUES: "Недопустимые значения",
 };
 
-export { PROM_MSG_ERROR, PromButton, PromFormFiled, PromFrom, PromInput, PromLabel, PromMessage, PromSelect, PromSelectContent, PromSelectField, PromSelectGroup, PromSelectItem, PromSelectLabel, PromSelectScrollDownButton, PromSelectScrollUpButton, PromSelectSeparator, PromSelectTrigger, PromSelectValue, PromSkeleton, PromSwitch, PromSwitchField, PromTextarea, promAllowedPatternEmail, promAllowedPatternNaturalNumbers, promAllowedPatternOnlyRu, promAllowedPatternPhone, promAllowedPatternPhoneWithoutPlus, promAllowedPatternUrlSocial, promMaskEmail, promMaskPhone, promMaskPhoneWithoutPlus, promMaskTelegram, promMaskWhatsapp, promSchemaPhone, promSelectFilterOptions, useCreatePromForm, usePromForm };
+export { PROM_MSG_ERROR, PromButton, PromCheckbox, PromFormFiled, PromFrom, PromInput, PromLabel, PromMessage, PromSelect, PromSelectContent, PromSelectField, PromSelectGroup, PromSelectItem, PromSelectLabel, PromSelectScrollDownButton, PromSelectScrollUpButton, PromSelectSeparator, PromSelectTrigger, PromSelectValue, PromSkeleton, PromSwitch, PromSwitchField, PromSwitchListField, PromTextarea, promAllowedPatternEmail, promAllowedPatternNaturalNumbers, promAllowedPatternOnlyRu, promAllowedPatternPhone, promAllowedPatternPhoneWithoutPlus, promAllowedPatternUrlSocial, promMaskEmail, promMaskPhone, promMaskPhoneWithoutPlus, promMaskTelegram, promMaskUrl, promMaskWhatsapp, promSchemaPhone, promSelectFilterOptions, useCreatePromForm, usePromForm };

package/build/types/components/form/fields/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+declare function PromCheckbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { PromCheckbox };

package/build/types/components/form/fields/index.d.ts

@@ -3,4 +3,6 @@ export * from "./label";
 export * from "./textarea";
 export * from "./switch-field";
 export * from "./select-field";
+export * from "./switch-field-list";
+export * from "./checkbox";
 export * from "./types";

package/build/types/components/form/fields/switch-field-list.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { PromDictionariesType } from "../../types";
+interface PromSwitchListFieldProps {
+    name: string;
+    label?: string;
+    isLoad?: boolean;
+    errorMsg?: string;
+    className?: string;
+    disabled?: boolean;
+    errorDisplay?: boolean;
+    options: PromDictionariesType[];
+    error?: (msg: string) => React.ReactNode;
+}
+declare const PromSwitchListField: React.FC<PromSwitchListFieldProps>;
+export { PromSwitchListField };

package/build/types/components/form/rules/mask.d.ts

@@ -2,5 +2,6 @@ declare const promMaskTelegram: (val: string) => string;
 declare const promMaskWhatsapp: (val: string) => string;
 declare const promMaskPhone: (val: string) => string;
 declare const promMaskPhoneWithoutPlus: (val: string) => string;
+declare const promMaskUrl: (val: string) => string;
 declare const promMaskEmail: (val: string) => string;
-export { promMaskEmail, promMaskPhone, promMaskTelegram, promMaskWhatsapp, promMaskPhoneWithoutPlus, };
+export { promMaskUrl, promMaskEmail, promMaskPhone, promMaskTelegram, promMaskWhatsapp, promMaskPhoneWithoutPlus, };

package/build/types/components/types.d.ts

@@ -6,3 +6,7 @@ export interface PromComponentProps {
     isLoad?: boolean;
     skeleton?: boolean;
 }
+export interface PromDictionariesType {
+    id: number;
+    title: string;
+}

package/build/types/function/lib/logger.d.ts

@@ -0,0 +1,2 @@
+declare class PromLoggerError {
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prom-pal-ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "type": "module",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
@@ -38,6 +38,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",