@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
136 lines (134 loc) • 3.78 kB
JavaScript
const require_utils_index = require('../../utils/index.cjs');
const require_config = require('../../core/system/config.cjs');
//#region src/components/input/input.style.ts
const getInputPaddingStartResetStyle = (key) => ({ "&:not([data-input-element] + &)": (0, require_utils_index.utils_exports.wrapWithKey)({ ps: "0px" }, key) });
const getInputPaddingEndResetStyle = (key) => ({ "&:not(:has(+ [data-input-element]))": (0, require_utils_index.utils_exports.wrapWithKey)({ pe: "0px" }, key) });
const getInputHeightStyle = (height, key) => ({
"&:has(+ [data-input-element])": (0, require_utils_index.utils_exports.wrapWithKey)({ pe: height }, key),
"& ~ [data-input-element]": { minW: height },
"--height": height,
"[data-input-element] + &": (0, require_utils_index.utils_exports.wrapWithKey)({ ps: height }, key),
"[data-input-element]:has(~ &)": { minW: height },
minH: height
});
const inputStyle = require_config.defineComponentStyle({
base: {
"--error-border-color": "colors.border.error",
"--focus-border-color": "colorScheme.outline",
appearance: "none",
minW: "0",
position: "relative",
rounded: "l2",
textAlign: "start",
transitionDuration: "moderate",
transitionProperty: "common",
w: "full",
_disabled: { layerStyle: "disabled" }
},
variants: {
filled: {
bg: "bg.panel",
border: "1px solid transparent",
focusRingColor: "{focus-border-color}",
focusVisibleRing: "inside",
_invalid: {
borderColor: "{error-border-color}",
focusRingColor: "{error-border-color}"
}
},
flushed: {
bg: "transparent",
borderBottomColor: "colorScheme.muted",
borderBottomWidth: "1px",
rounded: "0px",
_focusVisible: {
borderColor: "{focus-border-color}",
boxShadow: "0px 1px 0px 0px {focus-border-color}",
outline: "none"
},
_invalid: {
borderColor: "{error-border-color}",
_focusVisible: { boxShadow: "0px 1px 0px 0px {error-border-color}" }
}
},
outline: {
border: "1px solid {colors.border}",
focusRingColor: "{focus-border-color}",
focusVisibleRing: "inside",
_invalid: {
borderColor: "{error-border-color}",
focusRingColor: "{error-border-color}"
}
},
plain: {
focusRingColor: "{focus-border-color}",
focusVisibleRing: "inside",
_invalid: {
borderColor: "{error-border-color}",
focusRingColor: "{error-border-color}"
}
}
},
sizes: {
xs: {
"--space-x": "spaces.2",
"--space-y": "spaces.1.5",
fontSize: "xs",
px: "{space-x}",
...getInputHeightStyle("{sizes.8}")
},
sm: {
"--space-x": "spaces.2.5",
"--space-y": "spaces.2",
fontSize: "sm",
px: "{space-x}",
...getInputHeightStyle("{sizes.9}")
},
md: {
"--space-x": "spaces.3",
"--space-y": "spaces.2",
fontSize: "md",
px: "{space-x}",
...getInputHeightStyle("{sizes.10}")
},
lg: {
"--space-x": "spaces.3.5",
"--space-y": "spaces.2.5",
fontSize: "lg",
px: "{space-x}",
...getInputHeightStyle("{sizes.11}")
},
xl: {
"--space-x": "spaces.4",
"--space-y": "spaces.3",
fontSize: "xl",
px: "{space-x}",
...getInputHeightStyle("{sizes.12}")
},
"2xl": {
"--space-x": "spaces.4",
"--space-y": "spaces.3",
fontSize: "xl",
px: "{space-x}",
...getInputHeightStyle("{sizes.14}")
}
},
compounds: [{
css: {
...getInputPaddingStartResetStyle(),
...getInputPaddingEndResetStyle()
},
variant: "flushed",
layer: "variant"
}],
defaultProps: {
size: "md",
variant: "outline"
}
});
//#endregion
exports.getInputHeightStyle = getInputHeightStyle;
exports.getInputPaddingEndResetStyle = getInputPaddingEndResetStyle;
exports.getInputPaddingStartResetStyle = getInputPaddingStartResetStyle;
exports.inputStyle = inputStyle;
//# sourceMappingURL=input.style.cjs.map