ui-header/dist/composites/HeaderAuthButtons.js

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from '@lilith/ui-styled-components';
import { ArrowRight } from 'lucide-react';
const ButtonsContainer = styled.div `
  display: flex;
  align-items: center;
  gap: ${(props) => props.theme.spacing.md};

  @media (max-width: 500px) {
    display: none;
  }
`;
const LoginButton = styled.button `
  display: flex;
  align-items: center;
  padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
  background: transparent;
  color: ${(props) => props.theme.colors.text.primary};
  border: 1px solid ${(props) => props.theme.colors.border.default};
  border-radius: ${(props) => props.theme.borderRadius.sm};
  font-family: ${(props) => props.theme.typography.fontFamily.body};
  font-size: ${(props) => props.theme.typography.fontSize.sm};
  font-weight: ${(props) => props.theme.typography.fontWeight.medium};
  cursor: pointer;
  transition: ${(props) => props.theme.transitions.fast};

  &:hover {
    background: ${(props) => props.theme.colors.hover.surface};
    border-color: ${(props) => props.theme.colors.primary.main};
  }
`;
const CtaButton = styled.button `
  display: flex;
  align-items: center;
  gap: ${(props) => props.theme.spacing.xs};
  padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.lg};
  background: ${(props) => props.theme.colors.primary.main};
  color: ${(props) => props.theme.colors.background.primary};
  border: none;
  border-radius: ${(props) => props.theme.borderRadius.sm};
  font-family: ${(props) => props.theme.typography.fontFamily.body};
  font-size: ${(props) => props.theme.typography.fontSize.sm};
  font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
  cursor: pointer;
  transition: ${(props) => props.theme.transitions.fast};
  box-shadow: ${(props) => props.theme.shadows.md};

  &:hover {
    background: ${(props) => props.theme.colors.hover.primary};
    transform: translateY(-1px);
    box-shadow: ${(props) => props.theme.shadows.lg};
  }

  &:active {
    transform: translateY(0);
  }

  svg {
    width: 16px;
    height: 16px;
  }
`;
const CtaLink = styled.a `
  display: flex;
  align-items: center;
  gap: ${(props) => props.theme.spacing.xs};
  padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.lg};
  background: ${(props) => props.theme.colors.primary.main};
  color: ${(props) => props.theme.colors.background.primary};
  text-decoration: none;
  border: none;
  border-radius: ${(props) => props.theme.borderRadius.sm};
  font-family: ${(props) => props.theme.typography.fontFamily.body};
  font-size: ${(props) => props.theme.typography.fontSize.sm};
  font-weight: ${(props) => props.theme.typography.fontWeight.semibold};
  cursor: pointer;
  transition: ${(props) => props.theme.transitions.fast};
  box-shadow: ${(props) => props.theme.shadows.md};

  &:hover {
    background: ${(props) => props.theme.colors.hover.primary};
    transform: translateY(-1px);
    box-shadow: ${(props) => props.theme.shadows.lg};
  }

  &:active {
    transform: translateY(0);
  }

  svg {
    width: 16px;
    height: 16px;
  }
`;
export const HeaderAuthButtons = ({ loginLabel = 'Login', onLoginClick, ctaLabel, onCtaClick, showArrow = true, className, }) => {
    const isCtaPath = typeof onCtaClick === 'string';
    const handleCtaClick = (e) => {
        if (!isCtaPath && typeof onCtaClick === 'function') {
            e.preventDefault();
            onCtaClick();
        }
    };
    return (_jsxs(ButtonsContainer, { className: className, children: [_jsx(LoginButton, { onClick: onLoginClick, children: loginLabel }), isCtaPath ? (_jsxs(CtaLink, { href: onCtaClick, children: [_jsx("span", { children: ctaLabel }), showArrow && _jsx(ArrowRight, {})] })) : (_jsxs(CtaButton, { onClick: handleCtaClick, children: [_jsx("span", { children: ctaLabel }), showArrow && _jsx(ArrowRight, {})] }))] }));
};
//# sourceMappingURL=HeaderAuthButtons.js.map