@react-fabric/core 1.0.0-beta.1 → 1.0.0-beta.11

package/src/typography/{Link.tsx → Anchor.tsx}

@@ -22,6 +22,7 @@
  */
 
 import classNames from "classnames";
+import { type MouseEventHandler } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
 import {
   type AriaProps,
@@ -35,7 +36,7 @@ import {
 import { getBgClass, getColor, getColorClass } from "../utils";
 import { TextSizeMap } from "./types";
 
-export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
   /**
    * link background (CSS color / tailwind color)
    */
@@ -52,12 +53,14 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
    * font family
    */
   family?: "sans" | "serif" | "mono";
+
+  onClick?: MouseEventHandler;
 }
 
 /**
  * Typography link component
  */
-export const Link = <Tag extends React.ElementType = "a">({
+export const Anchor = <Tag extends React.ElementType = "a">({
   ref,
   as,
   children,
@@ -67,7 +70,7 @@ export const Link = <Tag extends React.ElementType = "a">({
   family,
   size,
   ...aria
-}: LinkProps & PolymorphicProps<Tag>) => {
+}: AnchorProps & PolymorphicProps<Tag>) => {
   /** ***************** style map *******************/
   const styles = useMemoDebugger(
     () => {

package/src/typography/Typography.module.css

@@ -27,7 +27,7 @@
   }
 
   .moreLink {
-    margin: -0.25rem 0 1rem;
+    margin: -0.25rem 0 0.25rem;
     text-align: end;
 
     & > span {
@@ -57,7 +57,7 @@
   }
 
   .mark {
-    --mark-color: var(--accent);
+    --mark-color: var(--primary);
 
     background-color: color-mix(
       in lab,

package/src/typography/index.ts

@@ -22,8 +22,8 @@
  */
 
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";