@crossed/ui/lib/module/forms/Form/index.js

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

import { jsx } from "react/jsx-runtime";
import { Pressable, View } from "react-native";
import {
  cloneElement,
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useId,
  useRef,
  useState
} from "react";
import { Label } from "../Label";
import { YBox } from "../../layout/YBox";
import { isWeb } from "@crossed/styled";
const fieldContext = createContext({});
const Form = ({ onSubmit, asChild, children, ...props }) => {
  const propsTmp = { role: "form", ...props };
  return asChild && isValidElement(children) ? cloneElement(children, propsTmp) : /* @__PURE__ */ jsx(YBox, { space: "xl", ...propsTmp, children });
};
const FormField = ({ name, ...props }) => {
  const [inputId, setInputId] = useState();
  const controlRef = useRef(null);
  return /* @__PURE__ */ jsx(fieldContext.Provider, { value: { setInputId, inputId, controlRef }, children: /* @__PURE__ */ jsx(View, { ...props }) });
};
const FormControl = ({ children }) => {
  var _a;
  const { setInputId } = useContext(fieldContext);
  const localId = useId();
  const id = ((_a = children.props) == null ? void 0 : _a.id) || `form-control${localId}`;
  useEffect(() => {
    setInputId(id);
  }, [id, setInputId]);
  return isValidElement(children) ? cloneElement(children, {
    id,
    "nativeID": id,
    "data-describedby": `${id}:helper`
  }) : children;
};
const FormLabel = (props) => {
  const { inputId, controlRef } = useContext(fieldContext);
  const render = /* @__PURE__ */ jsx(Label, { ...props, htmlFor: inputId });
  return isWeb ? render : /* @__PURE__ */ jsx(Pressable, { tabIndex: -1, onPress: () => {
    var _a;
    return (_a = controlRef.current) == null ? void 0 : _a.focus();
  }, children: render });
};
const FormMessage = () => {
  return null;
};
export {
  Form,
  FormControl,
  FormField,
  FormLabel,
  FormMessage
};
//# sourceMappingURL=index.js.map