@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,
  useId,
  useRef
} from "react";
import { composeEventHandlers } from "@crossed/core";
import { Label } from "../Label";
import { useInteraction } from "@crossed/styled";
import { YBox } from "../../layout/YBox";
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: "md", ...propsTmp, children });
};
const FormField = ({ name, ...props }) => {
  const inputId = useRef();
  const {
    state: { focus, hover },
    props: { onFocus, onBlur, onHoverIn, onHoverOut }
  } = useInteraction(props);
  return /* @__PURE__ */ jsx(
    fieldContext.Provider,
    {
      value: {
        name,
        inputId,
        states: { focus, hover, disabled: props.disabled },
        handles: { onFocus, onBlur, onHoverIn, onHoverOut }
      },
      children: /* @__PURE__ */ jsx(View, { ...props })
    }
  );
};
const FormControl = ({ children }) => {
  const { inputId, states, handles } = useContext(fieldContext);
  const localId = useId();
  if (!isValidElement(children)) {
    return children;
  }
  const id = children.props.id || children.props.nativeID || `form-control${localId}`;
  inputId.current = id;
  return cloneElement(children, {
    id,
    ...states,
    ...[void 0, true].includes(children.props.focusable) ? {
      onFocus: composeEventHandlers(
        handles.onFocus,
        children.props.onFocus
      ),
      onBlur: composeEventHandlers(handles.onBlur, children.props.onBlur)
    } : {}
  });
};
const FormLabel = (props) => {
  const { inputId, states, handles } = useContext(fieldContext);
  return /* @__PURE__ */ jsx(
    Pressable,
    {
      ...{ tabIndex: "-1" },
      onHoverIn: handles.onHoverIn,
      onHoverOut: handles.onHoverOut,
      children: /* @__PURE__ */ jsx(Label, { ...states, ...props, htmlFor: inputId.current })
    }
  );
};
const FormMessage = () => {
  return null;
};
export {
  Form,
  FormControl,
  FormField,
  FormLabel,
  FormMessage
};
//# sourceMappingURL=index.js.map