"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/components/button.ts var button_exports = {}; __export(button_exports, { buttonTheme: () => buttonTheme }); module.exports = __toCommonJS(button_exports); var import_styled_system = require("@chakra-ui/styled-system"); var import_theme_tools = require("@chakra-ui/theme-tools"); // src/utils/run-if-fn.ts var isFunction = (value) => typeof value === "function"; function runIfFn(valueOrFn, ...args) { return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn; } // src/components/button.ts var baseStyle = (0, import_styled_system.defineStyle)({ lineHeight: "1.2", borderRadius: "md", fontWeight: "semibold", transitionProperty: "common", transitionDuration: "normal", _focusVisible: { boxShadow: "outline" }, _disabled: { opacity: 0.4, cursor: "not-allowed", boxShadow: "none" }, _hover: { _disabled: { bg: "initial" } } }); var variantGhost = (0, import_styled_system.defineStyle)((props) => { const { colorScheme: c, theme } = props; if (c === "gray") { return { color: (0, import_theme_tools.mode)(`gray.800`, `whiteAlpha.900`)(props), _hover: { bg: (0, import_theme_tools.mode)(`gray.100`, `whiteAlpha.200`)(props) }, _active: { bg: (0, import_theme_tools.mode)(`gray.200`, `whiteAlpha.300`)(props) } }; } const darkHoverBg = (0, import_theme_tools.transparentize)(`${c}.200`, 0.12)(theme); const darkActiveBg = (0, import_theme_tools.transparentize)(`${c}.200`, 0.24)(theme); return { color: (0, import_theme_tools.mode)(`${c}.600`, `${c}.200`)(props), bg: "transparent", _hover: { bg: (0, import_theme_tools.mode)(`${c}.50`, darkHoverBg)(props) }, _active: { bg: (0, import_theme_tools.mode)(`${c}.100`, darkActiveBg)(props) } }; }); var variantOutline = (0, import_styled_system.defineStyle)((props) => { const { colorScheme: c } = props; const borderColor = (0, import_theme_tools.mode)(`gray.200`, `whiteAlpha.300`)(props); return { border: "1px solid", borderColor: c === "gray" ? borderColor : "currentColor", ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": { marginEnd: "-1px" }, ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": { marginBottom: "-1px" }, ...runIfFn(variantGhost, props) }; }); var accessibleColorMap = { yellow: { bg: "yellow.400", color: "black", hoverBg: "yellow.500", activeBg: "yellow.600" }, cyan: { bg: "cyan.400", color: "black", hoverBg: "cyan.500", activeBg: "cyan.600" } }; var variantSolid = (0, import_styled_system.defineStyle)((props) => { var _a; const { colorScheme: c } = props; if (c === "gray") { const bg2 = (0, import_theme_tools.mode)(`gray.100`, `whiteAlpha.200`)(props); return { bg: bg2, color: (0, import_theme_tools.mode)(`gray.800`, `whiteAlpha.900`)(props), _hover: { bg: (0, import_theme_tools.mode)(`gray.200`, `whiteAlpha.300`)(props), _disabled: { bg: bg2 } }, _active: { bg: (0, import_theme_tools.mode)(`gray.300`, `whiteAlpha.400`)(props) } }; } const { bg = `${c}.500`, color = "white", hoverBg = `${c}.600`, activeBg = `${c}.700` } = (_a = accessibleColorMap[c]) != null ? _a : {}; const background = (0, import_theme_tools.mode)(bg, `${c}.200`)(props); return { bg: background, color: (0, import_theme_tools.mode)(color, `gray.800`)(props), _hover: { bg: (0, import_theme_tools.mode)(hoverBg, `${c}.300`)(props), _disabled: { bg: background } }, _active: { bg: (0, import_theme_tools.mode)(activeBg, `${c}.400`)(props) } }; }); var variantLink = (0, import_styled_system.defineStyle)((props) => { const { colorScheme: c } = props; return { padding: 0, height: "auto", lineHeight: "normal", verticalAlign: "baseline", color: (0, import_theme_tools.mode)(`${c}.500`, `${c}.200`)(props), _hover: { textDecoration: "underline", _disabled: { textDecoration: "none" } }, _active: { color: (0, import_theme_tools.mode)(`${c}.700`, `${c}.500`)(props) } }; }); var variantUnstyled = (0, import_styled_system.defineStyle)({ bg: "none", color: "inherit", display: "inline", lineHeight: "inherit", m: "0", p: "0" }); var variants = { ghost: variantGhost, outline: variantOutline, solid: variantSolid, link: variantLink, unstyled: variantUnstyled }; var sizes = { lg: (0, import_styled_system.defineStyle)({ h: "12", minW: "12", fontSize: "lg", px: "6" }), md: (0, import_styled_system.defineStyle)({ h: "10", minW: "10", fontSize: "md", px: "4" }), sm: (0, import_styled_system.defineStyle)({ h: "8", minW: "8", fontSize: "sm", px: "3" }), xs: (0, import_styled_system.defineStyle)({ h: "6", minW: "6", fontSize: "xs", px: "2" }) }; var buttonTheme = (0, import_styled_system.defineStyleConfig)({ baseStyle, variants, sizes, defaultProps: { variant: "solid", size: "md", colorScheme: "gray" } }); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { buttonTheme }); //# sourceMappingURL=button.js.map