@yamada-ui/react/dist/esm/core/css/focus-ring.js

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

//#region src/core/css/focus-ring.ts
const focusRingStyle = {
	inline: {
		outlineOffset: "{focus-ring-offset, -5px}",
		outlineStyle: "{focus-ring-style, solid}",
		outlineWidth: "{focus-ring-width, 1px}"
	},
	inside: {
		borderColor: "{focus-ring-color}",
		boxShadow: "inset 0 0 0 1px {focus-ring-color}",
		outlineOffset: "inherit",
		outlineStyle: "inherit",
		outlineWidth: "inherit"
	},
	mixed: {
		borderColor: "{focus-ring-color}",
		outlineOffset: "{focus-ring-offset, 0px}",
		outlineStyle: "{focus-ring-style, solid}",
		outlineWidth: "{focus-ring-width, 2px}"
	},
	none: { outline: "none" },
	outline: {
		outlineOffset: "{focus-ring-offset, 2px}",
		outlineStyle: "{focus-ring-style, solid}",
		outlineWidth: "{focus-ring-width, 2px}"
	},
	outside: {
		borderColor: "{focus-ring-color}",
		boxShadow: "0 0 0 1px {focus-ring-color}",
		outlineOffset: "inherit",
		outlineStyle: "inherit",
		outlineWidth: "inherit"
	}
};
function generateFocusRing(selector) {
	return function(value, { prev }) {
		const focusRingColor = prev?.["--focus-ring-color"] ?? "{colorScheme.outline}";
		return {
			"--focus-ring-color": focusRingColor,
			outlineColor: "{focus-ring-color}",
			[selector]: { ...value in focusRingStyle ? focusRingStyle[value] : focusRingStyle.none }
		};
	};
}

//#endregion
export { focusRingStyle, generateFocusRing };
//# sourceMappingURL=focus-ring.js.map