@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) • 3.18 kB
JavaScript
const require_config = require('../../core/system/config.cjs');
const require_input_style = require('../input/input.style.cjs');
const require_button_style = require('../button/button.style.cjs');
//#region src/components/number-input/number-input.style.ts
const numberInputStyle = require_config.defineComponentSlotStyle({
base: {
button: {
...require_button_style.buttonStyle.base,
flex: "1",
lineHeight: "1",
rounded: "l1"
},
control: {
display: "flex",
flexDirection: "column"
},
decrement: {},
field: require_input_style.inputStyle.base,
increment: {},
root: {}
},
variants: {
base: { button: {
layerStyle: "ghost",
focusVisibleRing: "none",
_hover: { layerStyle: "ghost.hover" },
_focusVisible: { layerStyle: "ghost.hover" }
} },
filled: { field: require_input_style.inputStyle.variants?.filled },
flushed: {
field: require_input_style.inputStyle.variants?.flushed,
root: require_input_style.getInputPaddingStartResetStyle("& > input")
},
outline: { field: require_input_style.inputStyle.variants?.outline },
plain: { field: require_input_style.inputStyle.variants?.plain }
},
sizes: {
xs: {
control: {
boxSize: `calc({--height} - {spaces.2})`,
fontSize: require_input_style.inputStyle.sizes?.xs.fontSize
},
field: require_input_style.inputStyle.sizes?.xs,
root: require_input_style.getInputHeightStyle(require_input_style.inputStyle.sizes?.xs.minH, "& > input")
},
sm: {
control: {
boxSize: `calc({--height} - {spaces.2})`,
fontSize: require_input_style.inputStyle.sizes?.sm.fontSize
},
field: require_input_style.inputStyle.sizes?.sm,
root: require_input_style.getInputHeightStyle(require_input_style.inputStyle.sizes?.sm.minH, "& > input")
},
md: {
control: {
boxSize: `calc({--height} - {spaces.2})`,
fontSize: require_input_style.inputStyle.sizes?.md.fontSize
},
field: require_input_style.inputStyle.sizes?.md,
root: require_input_style.getInputHeightStyle(require_input_style.inputStyle.sizes?.md.minH, "& > input")
},
lg: {
control: {
boxSize: `calc({--height} - {spaces.2.5})`,
fontSize: require_input_style.inputStyle.sizes?.lg.fontSize
},
field: require_input_style.inputStyle.sizes?.lg,
root: require_input_style.getInputHeightStyle(require_input_style.inputStyle.sizes?.lg.minH, "& > input")
},
xl: {
control: {
boxSize: `calc({--height} - {spaces.3})`,
fontSize: require_input_style.inputStyle.sizes?.xl.fontSize
},
field: require_input_style.inputStyle.sizes?.xl,
root: require_input_style.getInputHeightStyle(require_input_style.inputStyle.sizes?.xl.minH, "& > input")
},
"2xl": {
control: {
boxSize: `calc({--height} - {spaces.3})`,
fontSize: require_input_style.inputStyle.sizes?.["2xl"].fontSize
},
field: require_input_style.inputStyle.sizes?.["2xl"],
root: require_input_style.getInputHeightStyle(require_input_style.inputStyle.sizes?.["2xl"]?.minH, "& > input")
}
},
defaultProps: {
size: "md",
variant: "outline"
}
});
//#endregion
exports.numberInputStyle = numberInputStyle;
//# sourceMappingURL=number-input.style.cjs.map