@yamada-ui/react/dist/esm/components/select/select.style.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { defineComponentSlotStyle } from "../../core/system/config.js";
import { focusRingStyle } from "../../core/css/focus-ring.js";
import { menuStyle } from "../menu/menu.style.js";
import { nativeSelectStyle } from "../native-select/native-select.style.js";

//#region src/components/select/select.style.ts
const selectStyle = defineComponentSlotStyle({
	base: {
		...nativeSelectStyle.base,
		content: {
			...menuStyle.base?.content,
			maxH: "xs"
		},
		field: {
			...nativeSelectStyle.base?.field,
			"--gap": "spaces.1",
			alignItems: "center",
			display: "flex"
		},
		group: menuStyle.base?.group,
		indicator: menuStyle.base?.indicator,
		label: menuStyle.base?.label,
		option: menuStyle.base?.item,
		separator: 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: {
			...nativeSelectStyle.variants?.filled,
			field: {
				_expanded: focusRingStyle.inside,
				_focus: focusRingStyle.inside,
				...nativeSelectStyle.variants?.filled.field
			}
		},
		flushed: {
			...nativeSelectStyle.variants?.flushed,
			field: {
				_expanded: {
					...nativeSelectStyle.variants?.flushed.field?._focusVisible,
					_invalid: {
						borderColor: "{error-border-color}",
						boxShadow: "0px 1px 0px 0px {error-border-color}"
					}
				},
				_focus: {
					...nativeSelectStyle.variants?.flushed.field?._focusVisible,
					_invalid: {
						borderColor: "{error-border-color}",
						boxShadow: "0px 1px 0px 0px {error-border-color}"
					}
				},
				...nativeSelectStyle.variants?.flushed.field
			}
		},
		outline: {
			...nativeSelectStyle.variants?.outline,
			field: {
				_expanded: focusRingStyle.inside,
				_focus: focusRingStyle.inside,
				...nativeSelectStyle.variants?.outline.field
			}
		},
		plain: {
			...nativeSelectStyle.variants?.plain,
			field: {
				_expanded: focusRingStyle.inside,
				_focus: focusRingStyle.inside,
				...nativeSelectStyle.variants?.plain.field
			}
		}
	},
	sizes: {
		xs: {
			...nativeSelectStyle.sizes?.xs,
			content: menuStyle.sizes?.sm.content,
			indicator: menuStyle.sizes?.sm.indicator,
			label: menuStyle.sizes?.sm.label,
			option: menuStyle.sizes?.sm.item
		},
		sm: {
			...nativeSelectStyle.sizes?.sm,
			content: menuStyle.sizes?.md.content,
			indicator: menuStyle.sizes?.md.indicator,
			label: menuStyle.sizes?.md.label,
			option: menuStyle.sizes?.md.item
		},
		md: {
			...nativeSelectStyle.sizes?.md,
			content: menuStyle.sizes?.md.content,
			indicator: menuStyle.sizes?.md.indicator,
			label: menuStyle.sizes?.md.label,
			option: menuStyle.sizes?.md.item
		},
		lg: {
			...nativeSelectStyle.sizes?.lg,
			content: menuStyle.sizes?.lg.content,
			indicator: menuStyle.sizes?.lg.indicator,
			label: menuStyle.sizes?.lg.label,
			option: menuStyle.sizes?.lg.item
		},
		xl: {
			...nativeSelectStyle.sizes?.xl,
			content: menuStyle.sizes?.lg.content,
			indicator: menuStyle.sizes?.lg.indicator,
			label: menuStyle.sizes?.lg.label,
			option: menuStyle.sizes?.lg.item
		}
	},
	defaultProps: {
		size: "md",
		variant: "outline",
		wrap: false
	}
});

//#endregion
export { selectStyle };
//# sourceMappingURL=select.style.js.map