@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
130 lines (128 loc) • 4.49 kB
JavaScript
const require_config = require('../../core/system/config.cjs');
const require_focus_ring = require('../../core/css/focus-ring.cjs');
const require_menu_style = require('../menu/menu.style.cjs');
const require_native_select_style = require('../native-select/native-select.style.cjs');
//#region src/components/select/select.style.ts
const selectStyle = require_config.defineComponentSlotStyle({
base: {
...require_native_select_style.nativeSelectStyle.base,
content: {
...require_menu_style.menuStyle.base?.content,
maxH: "xs"
},
field: {
...require_native_select_style.nativeSelectStyle.base?.field,
"--gap": "spaces.1",
alignItems: "center",
display: "flex"
},
group: require_menu_style.menuStyle.base?.group,
indicator: require_menu_style.menuStyle.base?.indicator,
label: require_menu_style.menuStyle.base?.label,
option: require_menu_style.menuStyle.base?.item,
separator: require_menu_style.menuStyle.base?.separator,
valueText: { userSelect: "none" }
},
props: { wrap: {
false: { valueText: { truncated: true } },
true: {
field: { py: "{gap}" },
valueText: {
display: "inline-flex",
flexWrap: "wrap",
gapY: "{gap}"
}
}
} },
variants: {
filled: {
...require_native_select_style.nativeSelectStyle.variants?.filled,
field: {
_expanded: require_focus_ring.focusRingStyle.inside,
_focus: require_focus_ring.focusRingStyle.inside,
...require_native_select_style.nativeSelectStyle.variants?.filled.field
}
},
flushed: {
...require_native_select_style.nativeSelectStyle.variants?.flushed,
field: {
_expanded: {
...require_native_select_style.nativeSelectStyle.variants?.flushed.field?._focusVisible,
_invalid: {
borderColor: "{error-border-color}",
boxShadow: "0px 1px 0px 0px {error-border-color}"
}
},
_focus: {
...require_native_select_style.nativeSelectStyle.variants?.flushed.field?._focusVisible,
_invalid: {
borderColor: "{error-border-color}",
boxShadow: "0px 1px 0px 0px {error-border-color}"
}
},
...require_native_select_style.nativeSelectStyle.variants?.flushed.field
}
},
outline: {
...require_native_select_style.nativeSelectStyle.variants?.outline,
field: {
_expanded: require_focus_ring.focusRingStyle.inside,
_focus: require_focus_ring.focusRingStyle.inside,
...require_native_select_style.nativeSelectStyle.variants?.outline.field
}
},
plain: {
...require_native_select_style.nativeSelectStyle.variants?.plain,
field: {
_expanded: require_focus_ring.focusRingStyle.inside,
_focus: require_focus_ring.focusRingStyle.inside,
...require_native_select_style.nativeSelectStyle.variants?.plain.field
}
}
},
sizes: {
xs: {
...require_native_select_style.nativeSelectStyle.sizes?.xs,
content: require_menu_style.menuStyle.sizes?.sm.content,
indicator: require_menu_style.menuStyle.sizes?.sm.indicator,
label: require_menu_style.menuStyle.sizes?.sm.label,
option: require_menu_style.menuStyle.sizes?.sm.item
},
sm: {
...require_native_select_style.nativeSelectStyle.sizes?.sm,
content: require_menu_style.menuStyle.sizes?.md.content,
indicator: require_menu_style.menuStyle.sizes?.md.indicator,
label: require_menu_style.menuStyle.sizes?.md.label,
option: require_menu_style.menuStyle.sizes?.md.item
},
md: {
...require_native_select_style.nativeSelectStyle.sizes?.md,
content: require_menu_style.menuStyle.sizes?.md.content,
indicator: require_menu_style.menuStyle.sizes?.md.indicator,
label: require_menu_style.menuStyle.sizes?.md.label,
option: require_menu_style.menuStyle.sizes?.md.item
},
lg: {
...require_native_select_style.nativeSelectStyle.sizes?.lg,
content: require_menu_style.menuStyle.sizes?.lg.content,
indicator: require_menu_style.menuStyle.sizes?.lg.indicator,
label: require_menu_style.menuStyle.sizes?.lg.label,
option: require_menu_style.menuStyle.sizes?.lg.item
},
xl: {
...require_native_select_style.nativeSelectStyle.sizes?.xl,
content: require_menu_style.menuStyle.sizes?.lg.content,
indicator: require_menu_style.menuStyle.sizes?.lg.indicator,
label: require_menu_style.menuStyle.sizes?.lg.label,
option: require_menu_style.menuStyle.sizes?.lg.item
}
},
defaultProps: {
size: "md",
variant: "outline",
wrap: false
}
});
//#endregion
exports.selectStyle = selectStyle;
//# sourceMappingURL=select.style.cjs.map