@yamada-ui/input
Version:
Yamada UI input component
95 lines (93 loc) • 2.9 kB
JavaScript
"use client"
import {
InputLeftAddon,
InputRightAddon
} from "./chunk-HSHTS6CU.mjs";
import {
InputLeftElement,
InputRightElement
} from "./chunk-3TI2NWMJ.mjs";
import {
InputGroupProvider
} from "./chunk-N7GDIMME.mjs";
// src/input-group.tsx
import {
forwardRef,
omitThemeProps,
ui,
useComponentMultiStyle,
useCreateVars
} from "@yamada-ui/core";
import { cx, filterUndefined, getValidChildren } from "@yamada-ui/utils";
import { cloneElement } from "react";
import { jsx } from "react/jsx-runtime";
var InputGroup = forwardRef((props, ref) => {
var _a, _b;
const [styles] = useComponentMultiStyle("Input", props);
const { className, children, ...rest } = omitThemeProps(props);
const [vars, variableProps] = useCreateVars({ ...styles.field, ...rest }, [
"minHeight",
"minH",
"height",
"h",
"fontSize"
]);
const minHeight = (_a = variableProps.minHeight) != null ? _a : variableProps.minH;
const height = (_b = variableProps.height) != null ? _b : variableProps.h;
const fieldHeight = minHeight != null ? minHeight : height;
const fieldFontSize = variableProps.fontSize;
const css = {
display: "flex",
position: "relative",
vars,
width: "100%",
...styles.container
};
const groupProps = {};
const validChildren = getValidChildren(children);
validChildren.forEach((child) => {
if (fieldHeight && child.type === InputLeftElement)
groupProps.paddingStart = `${fieldHeight} !important`;
if (fieldHeight && child.type === InputRightElement)
groupProps.paddingEnd = `${fieldHeight} !important`;
if (child.type === InputLeftAddon) groupProps.roundedLeft = "0px !important";
if (child.type === InputRightAddon)
groupProps.roundedRight = "0px !important";
});
const cloneChildren = validChildren.map((child) => {
var _a2, _b2, _c, _d;
const isAddonElement = [
InputLeftAddon,
InputRightAddon,
InputLeftElement,
InputRightElement
].some((type) => child.type === type);
if (isAddonElement) {
return child;
} else {
const childProps = filterUndefined({
size: (_b2 = (_a2 = child.props) == null ? void 0 : _a2.size) != null ? _b2 : props.size,
variant: (_d = (_c = child.props) == null ? void 0 : _c.variant) != null ? _d : props.variant,
...child.props
});
return cloneElement(child, Object.assign(childProps, groupProps));
}
});
return /* @__PURE__ */ jsx(InputGroupProvider, { value: { fieldFontSize, fieldHeight, styles }, children: /* @__PURE__ */ jsx(
ui.div,
{
ref,
className: cx("ui-input-group", className),
role: "group",
__css: css,
...rest,
children: cloneChildren
}
) });
});
InputGroup.displayName = "InputGroup";
InputGroup.__ui__ = "InputGroup";
export {
InputGroup
};
//# sourceMappingURL=chunk-ILDQLKLF.mjs.map