@crossed/ui/lib/module/typography/Anchor.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import {
  composeStyles,
  createStyles
} from "@crossed/styled";
import { Text } from "./Text";
import { forwardRef } from "react";
const anchorStyles = createStyles(({ colors }) => ({
  text: { web: { base: { cursor: "pointer" } } },
  underline: {
    ":hover": { textDecorationLine: "underline" },
    ":active": { textDecorationLine: "underline" },
    ":focus": { textDecorationLine: "underline" }
  },
  primary: {
    base: { color: colors.text.brand, textDecorationColor: colors.text.brand }
  },
  default: {
    base: {
      color: colors.text.primary,
      textDecorationColor: colors.text.primary
    }
  }
}));
const Anchor = forwardRef(
  ({ primary = true, style, ...props }, ref) => {
    return /* @__PURE__ */ jsx(
      Text,
      {
        role: "link",
        weight: "lg",
        ...props,
        style: composeStyles(
          anchorStyles.text,
          anchorStyles.underline,
          primary ? anchorStyles.primary : anchorStyles.default,
          style
        ),
        ref
      }
    );
  }
);
Anchor.displayName = "Anchor";
export {
  Anchor,
  anchorStyles
};
//# sourceMappingURL=Anchor.js.map