@crossed/primitive/lib/module/Input/InputInput.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import {
  forwardRef,
  Fragment,
  isValidElement,
  cloneElement,
  Children
} from "react";
import { useInputContext } from "./context";
import { composeEventHandlers, composeRefs } from "@crossed/core";
const createInput = (Styled, Group) => forwardRef((props, ref) => {
  const groupContext = useInputContext();
  const Container = groupContext ? Fragment : Group;
  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Slot, { ...props, ref, children: /* @__PURE__ */ jsx(Styled, { ...props }) }) });
});
const Slot = forwardRef(
  ({ children, ...props }, ref) => {
    const { setStates, inputRef } = useInputContext() || {};
    return isValidElement(children) && Children.count(children) === 1 ? cloneElement(children, {
      ...props,
      ref: composeRefs(ref, inputRef),
      onBlur: composeEventHandlers(props.onBlur, () => {
        setStates == null ? void 0 : setStates({ isFocus: false });
      }),
      onFocus: composeEventHandlers(props.onFocus, () => {
        setStates == null ? void 0 : setStates({ isFocus: true });
      })
    }) : children;
  }
);
export {
  createInput
};
//# sourceMappingURL=InputInput.js.map