@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
96 lines (94 loc) • 2.56 kB
JavaScript
import { defineComponentSlotStyle } from "../../core/system/config.js";
import { getInputHeightStyle, getInputPaddingStartResetStyle, inputStyle } from "../input/input.style.js";
import { buttonStyle } from "../button/button.style.js";
//#region src/components/number-input/number-input.style.ts
const numberInputStyle = defineComponentSlotStyle({
base: {
button: {
...buttonStyle.base,
flex: "1",
lineHeight: "1",
rounded: "l1"
},
control: {
display: "flex",
flexDirection: "column"
},
decrement: {},
field: inputStyle.base,
increment: {},
root: {}
},
variants: {
base: { button: {
layerStyle: "ghost",
focusVisibleRing: "none",
_hover: { layerStyle: "ghost.hover" },
_focusVisible: { layerStyle: "ghost.hover" }
} },
filled: { field: inputStyle.variants?.filled },
flushed: {
field: inputStyle.variants?.flushed,
root: getInputPaddingStartResetStyle("& > input")
},
outline: { field: inputStyle.variants?.outline },
plain: { field: inputStyle.variants?.plain }
},
sizes: {
xs: {
control: {
boxSize: `calc({--height} - {spaces.2})`,
fontSize: inputStyle.sizes?.xs.fontSize
},
field: inputStyle.sizes?.xs,
root: getInputHeightStyle(inputStyle.sizes?.xs.minH, "& > input")
},
sm: {
control: {
boxSize: `calc({--height} - {spaces.2})`,
fontSize: inputStyle.sizes?.sm.fontSize
},
field: inputStyle.sizes?.sm,
root: getInputHeightStyle(inputStyle.sizes?.sm.minH, "& > input")
},
md: {
control: {
boxSize: `calc({--height} - {spaces.2})`,
fontSize: inputStyle.sizes?.md.fontSize
},
field: inputStyle.sizes?.md,
root: getInputHeightStyle(inputStyle.sizes?.md.minH, "& > input")
},
lg: {
control: {
boxSize: `calc({--height} - {spaces.2.5})`,
fontSize: inputStyle.sizes?.lg.fontSize
},
field: inputStyle.sizes?.lg,
root: getInputHeightStyle(inputStyle.sizes?.lg.minH, "& > input")
},
xl: {
control: {
boxSize: `calc({--height} - {spaces.3})`,
fontSize: inputStyle.sizes?.xl.fontSize
},
field: inputStyle.sizes?.xl,
root: getInputHeightStyle(inputStyle.sizes?.xl.minH, "& > input")
},
"2xl": {
control: {
boxSize: `calc({--height} - {spaces.3})`,
fontSize: inputStyle.sizes?.["2xl"].fontSize
},
field: inputStyle.sizes?.["2xl"],
root: getInputHeightStyle(inputStyle.sizes?.["2xl"]?.minH, "& > input")
}
},
defaultProps: {
size: "md",
variant: "outline"
}
});
//#endregion
export { numberInputStyle };
//# sourceMappingURL=number-input.style.js.map