@spark-web/nav-link/dist/spark-web-nav-link.cjs.dev.js

--- title: Nav Link storybookPath: navigation-navlink--default isExperimentalPackage: true ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var css = require('@emotion/css');
var a11y = require('@spark-web/a11y');
var box = require('@spark-web/box');
var link = require('@spark-web/link');
var text = require('@spark-web/text');
var theme = require('@spark-web/theme');
var react = require('react');
var jsxRuntime = require('react/jsx-runtime');

var NavLink = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
  var _ref$borderRadius = _ref.borderRadius,
    borderRadius = _ref$borderRadius === void 0 ? 'small' : _ref$borderRadius,
    children = _ref.children,
    data = _ref.data,
    href = _ref.href,
    _ref$inline = _ref.inline,
    inline = _ref$inline === void 0 ? false : _ref$inline,
    _ref$isSelected = _ref.isSelected,
    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size;
  var linkComponent = link.useLinkComponent(forwardedRef);
  var styles = useNavLinkStyles(isSelected);
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
    as: linkComponent,
    asElement: "a",
    href: href,
    "aria-current": isSelected ? 'page' : undefined,
    data: data
    // styles
    ,
    background: isSelected ? 'primaryMuted' : undefined,
    display: inline ? 'inline-flex' : 'flex',
    alignItems: "center",
    gap: "small",
    paddingY: "small",
    paddingX: "medium",
    borderRadius: {
      tablet: borderRadius
    },
    className: css.css(styles),
    children: resolveNavLinkChildren({
      children: children,
      isSelected: isSelected,
      size: size
    })
  });
});
NavLink.displayName = 'NavLink';
function useNavLinkStyles(isSelected) {
  var theme$1 = theme.useTheme();
  var focusRingStyles = a11y.useFocusRing();
  return {
    ':focus': focusRingStyles,
    ':hover': {
      backgroundColor: isSelected ? theme$1.backgroundInteractions.primaryLowHover : theme$1.color.background.surfaceMuted,
      '> *': {
        color: isSelected ? theme$1.color.foreground.primaryHover : undefined,
        stroke: isSelected ? theme$1.color.foreground.primaryHover : undefined
      }
    },
    ':active': {
      backgroundColor: isSelected ? theme$1.backgroundInteractions.positiveLowActive : theme$1.color.background.surfacePressed,
      '> *': {
        color: isSelected ? theme$1.color.foreground.primaryActive : undefined,
        stroke: isSelected ? theme$1.color.foreground.primaryActive : undefined
      }
    }
  };
}
function resolveNavLinkChildren(_ref2) {
  var children = _ref2.children,
    isSelected = _ref2.isSelected,
    size = _ref2.size;
  return react.Children.map(children, function (child) {
    if (typeof child === 'string') {
      return /*#__PURE__*/jsxRuntime.jsx(text.Text, {
        as: "span",
        baseline: false,
        overflowStrategy: "nowrap",
        weight: "semibold",
        size: mapTextSize[size],
        tone: isSelected ? 'primaryActive' : 'muted',
        children: child
      });
    }
    if ( /*#__PURE__*/react.isValidElement(child)) {
      return /*#__PURE__*/react.cloneElement(child, {
        size: 'xxsmall',
        tone: isSelected ? 'primaryActive' : 'muted'
      });
    }
    return null;
  });
}
var mapTextSize = {
  medium: 'small',
  large: 'standard'
};

exports.NavLink = NavLink;