@clayui/form/lib/esm/Input.js

ClayForm component

import classNames from "classnames";
import React from "react";
const GroupItem = React.forwardRef(
  ({
    append,
    children,
    className,
    prepend,
    shrink,
    ...otherProps
  }, ref) => /* @__PURE__ */ React.createElement(
    "div",
    {
      ...otherProps,
      className: classNames("input-group-item", className, {
        ["input-group-append"]: append,
        ["input-group-item-shrink"]: shrink,
        ["input-group-prepend"]: prepend
      }),
      ref
    },
    children
  )
);
GroupItem.displayName = "ClayInputGroupItem";
const Group = React.forwardRef(
  ({ children, className, small, stacked, ...otherProps }, ref) => /* @__PURE__ */ React.createElement(
    "div",
    {
      ...otherProps,
      className: classNames("input-group", className, {
        ["input-group-sm"]: small,
        ["input-group-stacked-sm-down"]: stacked
      }),
      ref
    },
    children
  )
);
Group.displayName = "ClayInputGroup";
const GroupText = React.forwardRef(({ children, className, ...otherProps }, ref) => /* @__PURE__ */ React.createElement(
  "div",
  {
    ...otherProps,
    className: classNames("input-group-text", className),
    ref
  },
  children
));
GroupText.displayName = "ClayInputGroupText";
const GroupInsetItem = React.forwardRef(
  ({
    after,
    before,
    children,
    className,
    tag: Tag = "div",
    ...otherProps
  }, ref) => /* @__PURE__ */ React.createElement(
    Tag,
    {
      ...otherProps,
      className: classNames("input-group-inset-item", className, {
        ["input-group-inset-item-after"]: after,
        ["input-group-inset-item-before"]: before
      }),
      ref
    },
    children
  )
);
GroupInsetItem.displayName = "ClayInputGroupInsetItem";
const InputComponent = React.forwardRef(
  ({
    className,
    component: Component = "input",
    insetAfter,
    insetBefore,
    sizing = "regular",
    type = "text",
    ...otherProps
  }, ref) => /* @__PURE__ */ React.createElement(
    Component,
    {
      ...otherProps,
      className: classNames("form-control", className, {
        [`form-control-${sizing}`]: sizing && sizing !== "regular",
        ["input-group-inset"]: insetAfter || insetBefore,
        ["input-group-inset-after"]: insetAfter,
        ["input-group-inset-before"]: insetBefore
      }),
      ref,
      type
    }
  )
);
InputComponent.displayName = "ClayInput";
const Input = Object.assign(InputComponent, {
  Group,
  GroupInsetItem,
  GroupItem,
  GroupText
});
var Input_default = Input;
export {
  Group,
  GroupItem,
  GroupText,
  Input,
  Input_default as default
};