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

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Form_exports = {};
__export(Form_exports, {
  Form: () => Form,
  FormControl: () => FormControl,
  FormField: () => FormField,
  FormLabel: () => FormLabel,
  FormMessage: () => FormMessage
});
module.exports = __toCommonJS(Form_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react_native = require("react-native");
var import_react = require("react");
var import_core = require("@crossed/core");
var import_Label = require("../Label");
var import_styled = require("@crossed/styled");
var import_YBox = require("../../layout/YBox");
const fieldContext = (0, import_react.createContext)({});
const Form = ({ onSubmit, asChild, children, ...props }) => {
  const propsTmp = { role: "form", ...props };
  return asChild && (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, propsTmp) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_YBox.YBox, { space: "md", ...propsTmp, children });
};
const FormField = ({ name, ...props }) => {
  const inputId = (0, import_react.useRef)();
  const {
    state: { focus, hover },
    props: { onFocus, onBlur, onHoverIn, onHoverOut }
  } = (0, import_styled.useInteraction)(props);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    fieldContext.Provider,
    {
      value: {
        name,
        inputId,
        states: { focus, hover, disabled: props.disabled },
        handles: { onFocus, onBlur, onHoverIn, onHoverOut }
      },
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { ...props })
    }
  );
};
const FormControl = ({ children }) => {
  const { inputId, states, handles } = (0, import_react.useContext)(fieldContext);
  const localId = (0, import_react.useId)();
  if (!(0, import_react.isValidElement)(children)) {
    return children;
  }
  const id = children.props.id || children.props.nativeID || `form-control${localId}`;
  inputId.current = id;
  return (0, import_react.cloneElement)(children, {
    id,
    ...states,
    ...[void 0, true].includes(children.props.focusable) ? {
      onFocus: (0, import_core.composeEventHandlers)(
        handles.onFocus,
        children.props.onFocus
      ),
      onBlur: (0, import_core.composeEventHandlers)(handles.onBlur, children.props.onBlur)
    } : {}
  });
};
const FormLabel = (props) => {
  const { inputId, states, handles } = (0, import_react.useContext)(fieldContext);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_native.Pressable,
    {
      ...{ tabIndex: "-1" },
      onHoverIn: handles.onHoverIn,
      onHoverOut: handles.onHoverOut,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, { ...states, ...props, htmlFor: inputId.current })
    }
  );
};
const FormMessage = () => {
  return null;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Form,
  FormControl,
  FormField,
  FormLabel,
  FormMessage
});
//# sourceMappingURL=index.js.map