@mantine/core/cjs/components/InlineInput/InlineInput.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var React = require('react');
var getSize = require('../../core/utils/get-size/get-size.cjs');
require('clsx');
require('@mantine/hooks');
require('../../core/MantineProvider/Mantine.context.cjs');
require('../../core/MantineProvider/default-theme.cjs');
require('../../core/MantineProvider/MantineProvider.cjs');
require('../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs');
var useStyles = require('../../core/styles-api/use-styles/use-styles.cjs');
var Box = require('../../core/Box/Box.cjs');
require('../../core/DirectionProvider/DirectionProvider.cjs');
var Input = require('../Input/Input.cjs');
require('../Input/InputWrapper/InputWrapper.cjs');
require('../Input/InputDescription/InputDescription.cjs');
require('../Input/InputError/InputError.cjs');
require('../Input/InputLabel/InputLabel.cjs');
require('../Input/InputPlaceholder/InputPlaceholder.cjs');
require('../Input/InputWrapper.context.cjs');
var InlineInput_module = require('./InlineInput.module.css.cjs');

const InlineInputClasses = InlineInput_module;
const InlineInput = React.forwardRef(
  ({
    __staticSelector,
    __stylesApiProps,
    className,
    classNames,
    styles,
    unstyled,
    children,
    label,
    description,
    id,
    disabled,
    error,
    size,
    labelPosition = "left",
    variant,
    style,
    vars,
    ...others
  }, ref) => {
    const getStyles = useStyles.useStyles({
      name: __staticSelector,
      props: __stylesApiProps,
      className,
      style,
      classes: InlineInput_module,
      classNames,
      styles,
      unstyled
    });
    return /* @__PURE__ */ React.createElement(
      Box.Box,
      {
        ...getStyles("root"),
        ref,
        __vars: {
          "--label-fz": getSize.getFontSize(size),
          "--label-lh": getSize.getSize(size, "label-lh")
        },
        mod: { "label-position": labelPosition },
        variant,
        size,
        ...others
      },
      /* @__PURE__ */ React.createElement("div", { ...getStyles("body") }, children, /* @__PURE__ */ React.createElement("div", { ...getStyles("labelWrapper"), "data-disabled": disabled || void 0 }, label && /* @__PURE__ */ React.createElement("label", { ...getStyles("label"), "data-disabled": disabled || void 0, htmlFor: id }, label), description && /* @__PURE__ */ React.createElement(Input.Input.Description, { size, __inheritStyles: false, ...getStyles("description") }, description), error && error !== "boolean" && /* @__PURE__ */ React.createElement(Input.Input.Error, { size, __inheritStyles: false, ...getStyles("error") }, error)))
    );
  }
);
InlineInput.displayName = "@mantine/core/InlineInput";

exports.InlineInput = InlineInput;
exports.InlineInputClasses = InlineInputClasses;
//# sourceMappingURL=InlineInput.cjs.map