cherry-styled-components/dist/button.js

Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.

"use client";
"use client";
import { formElementHeightStyles, resetButton } from "./utils/mixins.js";
import { jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled, { css } from "styled-components";
import { darken, lighten } from "polished";
//#region src/lib/button.tsx
var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabled) => css([
	``,
	`;font-family:inherit;display:inline-flex;padding:15px 30px;border-radius:100px;font-weight:600;white-space:nowrap;hyphens:auto;color:`,
	`;text-decoration:none;transition:all 0.3s ease;text-align:center;gap:10px;text-overflow:ellipsis;justify-content:center;align-items:center;min-height:fit-content;& .icon,& .lucide{margin:auto 0;}`,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	``
], resetButton, theme.isDark ? theme.colors.dark : theme.colors.light, !disabled && $variant === "primary" && css([
	`color:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0px `,
	`;&:hover{background:`,
	`;border-color:`,
	`;`,
	`;}&:focus{box-shadow:0 0 0 4px `,
	`;}&:active{box-shadow:0 0 0 2px `,
	`;}`
], $outline ? theme.colors.primary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.primary, theme.colors.primary, theme.colors.primary, $outline ? "transparent" : theme.colors.primaryDark, theme.colors.primaryDark, $outline && `color: ${theme.colors.primaryDark}`, theme.colors.primaryLight, theme.colors.primaryLight), !disabled && $variant === "secondary" && css([
	`color:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0px `,
	`;&:hover{background:`,
	`;border-color:`,
	`;`,
	`;}&:focus{box-shadow:0 0 0 4px `,
	`;}&:active{box-shadow:0 0 0 2px `,
	`;}`
], $outline ? theme.colors.secondary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.secondary, theme.colors.secondary, theme.colors.secondary, $outline ? "transparent" : theme.colors.secondaryDark, theme.colors.secondaryDark, $outline && `color: ${theme.colors.secondaryDark}`, theme.colors.secondaryLight, theme.colors.secondaryLight), !disabled && $variant === "tertiary" && css([
	`color:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0px `,
	`;&:hover{background:`,
	`;border-color:`,
	`;`,
	`;}&:focus{box-shadow:0 0 0 4px `,
	`;}&:active{box-shadow:0 0 0 2px `,
	`;}`
], $outline ? theme.colors.tertiary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.tertiary, theme.colors.tertiary, theme.colors.tertiary, $outline ? "transparent" : theme.colors.tertiaryDark, theme.colors.tertiaryDark, $outline && `color: ${theme.colors.tertiaryDark}`, theme.colors.tertiaryLight, theme.colors.tertiaryLight), !disabled && $error && css([
	`color:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0px `,
	`;&:hover{background:`,
	`;border-color:`,
	`;`,
	`;}&:focus{box-shadow:0 0 0 4px `,
	`;}&:active{box-shadow:0 0 0 2px `,
	`;}`
], $outline ? theme.colors.error : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.error, theme.colors.error, theme.colors.error, $outline ? "transparent" : darken(.1, theme.colors.error), darken(.1, theme.colors.error), $outline && `color: ${darken(.1, theme.colors.error)}`, lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)), formElementHeightStyles($size), $size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
			line-height: ${theme.lineHeights.buttonBig.lg};
      padding: 18px 30px;
	` : $size === "small" ? `font-size: ${theme.fontSizes.buttonSmall.lg};
			line-height: ${theme.lineHeights.buttonSmall.lg};
      padding: 10px 20px;
	` : `font-size: ${theme.fontSizes.button.lg};
			line-height: ${theme.lineHeights.button.lg};`, disabled && `
		cursor: not-allowed;
		background: ${theme.colors.grayLight};
    border: solid 2px ${theme.colors.grayLight};
		color: ${theme.colors.gray};
	`, $fullWidth && `width: 100%;`);
var StyledButton = styled.button.withConfig({
	displayName: "button__StyledButton",
	componentId: "sc-f54d90ca-0"
})([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
function LocalButton({ $variant = "primary", ...props }, ref) {
	return /* @__PURE__ */ jsxs(StyledButton, {
		$variant,
		$error: props.$error,
		...props,
		ref,
		children: [
			props.$iconPosition !== "right" && props.$icon && props.$icon,
			props.children,
			props.$iconPosition === "right" && props.$icon && props.$icon
		]
	});
}
var Button = /* @__PURE__ */ forwardRef(LocalButton);
//#endregion
export { Button, buttonStyles };