@stratakit/react/dist/LabeledInput.js

A React component library for StrataKit

import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Field, TextBox } from "@stratakit/bricks";
import { useCompatProps } from "./~utils.js";
import { StatusMessage } from "./StatusMessage.js";
const LabeledInput = React.forwardRef((props, forwardedRef) => {
  const {
    label,
    message,
    wrapperProps = {},
    labelProps,
    messageContentProps,
    // NOT IMPLEMENTED
    inputWrapperProps,
    displayStyle,
    htmlSize,
    // biome-ignore-start lint/correctness/noUnusedVariables: NOT IMPLEMENTED
    children,
    status,
    size,
    // biome-ignore-end lint/correctness/noUnusedVariables: NOT IMPLEMENTED
    svgIcon,
    iconProps = {},
    type: inputType,
    id,
    ...rest
  } = useCompatProps(props);
  const {
    // biome-ignore-start lint/correctness/noUnusedVariables: NOT IMPLEMENTED
    labelPlacement,
    // biome-ignore-end lint/correctness/noUnusedVariables: NOT IMPLEMENTED
    ...restWrapperProps
  } = useCompatProps(wrapperProps);
  const {
    size: iconSize,
    // PARTIALLY IMPLEMENTED: Only supports `large` and `medium` size. Other values are mapped to `medium`.
    // biome-ignore-start lint/correctness/noUnusedVariables: NOT IMPLEMENTED
    fill: iconFill,
    padded: iconPadded,
    // biome-ignore-end lint/correctness/noUnusedVariables: NOT IMPLEMENTED
    ...restIconProps
  } = useCompatProps(iconProps);
  return /* @__PURE__ */ jsxs(
    Field.Root,
    {
      ...restWrapperProps,
      layout: displayStyle === "inline" ? "inline" : void 0,
      children: [
        label ? /* @__PURE__ */ jsx(Field.Label, { ...labelProps, children: label }) : null,
        /* @__PURE__ */ jsx(
          Field.Control,
          {
            render: (controlProps) => {
              return /* @__PURE__ */ jsxs(TextBox.Root, { ...inputWrapperProps, children: [
                /* @__PURE__ */ jsx(
                  TextBox.Input,
                  {
                    ...controlProps,
                    ...rest,
                    type: inputType,
                    size: htmlSize
                  }
                ),
                svgIcon ? /* @__PURE__ */ jsx(
                  TextBox.Icon,
                  {
                    ...restIconProps,
                    render: svgIcon,
                    size: iconSize === "large" ? "large" : void 0
                  }
                ) : null
              ] });
            },
            ref: forwardedRef,
            id
          }
        ),
        message ? /* @__PURE__ */ jsx(StatusMessage, { contentProps: messageContentProps, children: message }) : null
      ]
    }
  );
});
export {
  LabeledInput
};