wdi-dashboard/node_modules/@chakra-ui/theme/dist/components/button.js

"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