@tiny-design/react 1.0.9 → 1.0.10

package/es/typography/heading.d.ts

@@ -1,7 +1,8 @@
 import { HeadingProps } from "./types.js";
+import React from "react";
 
 //#region src/typography/heading.d.ts
-declare const Heading: (props: HeadingProps) => JSX.Element | null;
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 //#endregion
 export { Heading };
 //# sourceMappingURL=heading.d.ts.map

package/es/typography/heading.js

@@ -2,29 +2,22 @@ import { ConfigContext } from "../config-provider/config-context.js";
 import { getPrefixCls } from "../_utils/general.js";
 import React, { useContext } from "react";
 import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
 //#region src/typography/heading.tsx
-const headingGenerator = (htmlType, displayName) => {
-	const Component = React.forwardRef((props, ref) => {
-		const { prefixCls: customisedCls, className, children, ...otherProps } = props;
-		const cls = classNames(getPrefixCls("typography", useContext(ConfigContext).prefixCls, customisedCls), className);
-		return React.createElement(htmlType, {
-			...otherProps,
-			ref,
-			className: cls
-		}, children);
-	});
-	Component.displayName = displayName;
-	return Component;
-};
-const Heading = (props) => {
-	const { level = 1, ...otherProps } = props;
+const Heading = React.forwardRef((props, ref) => {
+	const { level = 1, prefixCls: customisedCls, className, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("typography", useContext(ConfigContext).prefixCls, customisedCls);
 	if (level < 1 || level > 6) {
 		console.warn("The heading level parameter is invalid.");
 		return null;
 	}
-	return /* @__PURE__ */ jsx(headingGenerator(`h${level}`, `H${level}`), { ...otherProps });
-};
+	const cls = classNames(prefixCls, className);
+	return React.createElement(`h${level}`, {
+		...otherProps,
+		ref,
+		className: cls
+	}, children);
+});
+Heading.displayName = "Heading";
 //#endregion
 export { Heading as default };
 

package/es/typography/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../src/typography/heading.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { HeadingProps } from './types';\n\nconst headingGenerator = (htmlType: string, displayName: string) => {\n  const Component = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n    (props: HeadingProps, ref): JSX.Element => {\n      const { prefixCls: customisedCls, className, children, ...otherProps } = props;\n      const configContext = useContext(ConfigContext);\n      const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n      const cls = classNames(prefixCls, className);\n\n      return React.createElement(\n        htmlType,\n        {\n          ...otherProps,\n          ref,\n          className: cls,\n        },\n        children\n      );\n    }\n  );\n\n  Component.displayName = displayName;\n\n  return Component;\n};\n\nconst Heading = (props: HeadingProps): JSX.Element | null => {\n  const { level = 1, ...otherProps } = props;\n  if (level < 1 || level > 6) {\n    console.warn('The heading level parameter is invalid.');\n    return null;\n  }\n  const Component = headingGenerator(`h${level}`, `H${level}`);\n  return <Component {...otherProps} />;\n};\n\nexport default Heading;\n"],"mappings":";;;;;;AAMA,MAAM,oBAAoB,UAAkB,gBAAwB;CAClE,MAAM,YAAY,MAAM,YACrB,OAAqB,QAAqB;EACzC,MAAM,EAAE,WAAW,eAAe,WAAW,UAAU,GAAG,eAAe;EAGzE,MAAM,MAAM,WADM,aAAa,cADT,WAAW,cAAc,CACY,WAAW,cAAc,EAClD,UAAU;AAE5C,SAAO,MAAM,cACX,UACA;GACE,GAAG;GACH;GACA,WAAW;GACZ,EACD,SACD;GAEJ;AAED,WAAU,cAAc;AAExB,QAAO;;AAGT,MAAM,WAAW,UAA4C;CAC3D,MAAM,EAAE,QAAQ,GAAG,GAAG,eAAe;AACrC,KAAI,QAAQ,KAAK,QAAQ,GAAG;AAC1B,UAAQ,KAAK,0CAA0C;AACvD,SAAO;;AAGT,QAAO,oBADW,iBAAiB,IAAI,SAAS,IAAI,QAAQ,EACrD,EAAW,GAAI,YAAc,CAAA"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../src/typography/heading.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { HeadingProps } from './types';\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  (props, ref) => {\n    const { level = 1, prefixCls: customisedCls, className, children, ...otherProps } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n\n    if (level < 1 || level > 6) {\n      console.warn('The heading level parameter is invalid.');\n      return null;\n    }\n    const cls = classNames(prefixCls, className);\n\n    return React.createElement(\n      `h${level}`,\n      {\n        ...otherProps,\n        ref,\n        className: cls,\n      },\n      children\n    );\n  }\n);\n\nHeading.displayName = 'Heading';\n\nexport default Heading;\n"],"mappings":";;;;;AAMA,MAAM,UAAU,MAAM,YACnB,OAAO,QAAQ;CACd,MAAM,EAAE,QAAQ,GAAG,WAAW,eAAe,WAAW,UAAU,GAAG,eAAe;CAEpF,MAAM,YAAY,aAAa,cADT,WAAW,cAAc,CACY,WAAW,cAAc;AAEpF,KAAI,QAAQ,KAAK,QAAQ,GAAG;AAC1B,UAAQ,KAAK,0CAA0C;AACvD,SAAO;;CAET,MAAM,MAAM,WAAW,WAAW,UAAU;AAE5C,QAAO,MAAM,cACX,IAAI,SACJ;EACE,GAAG;EACH;EACA,WAAW;EACZ,EACD,SACD;EAEJ;AAED,QAAQ,cAAc"}

package/es/typography/style/_index.scss

@@ -4,8 +4,6 @@ $tp-prefix: #{$prefix}-typography;
 
 .#{$tp-prefix} {
   box-sizing: border-box;
-  font-family: $font-family;
-
   & + h1.#{$tp-prefix},
   & + h2.#{$tp-prefix},
   & + h3.#{$tp-prefix},
@@ -46,22 +44,6 @@ $tp-prefix: #{$prefix}-typography;
     background-color: var(--ty-typography-mark-bg);
   }
 
-  u {
-    text-decoration: underline;
-  }
-
-  del {
-    text-decoration: line-through;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  i {
-    font-style: italic;
-  }
-
   sup {
     vertical-align: super;
   }

package/es/typography/style/index.css

@@ -1,6 +1,5 @@
 .ty-typography {
   box-sizing: border-box;
-  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 .ty-typography + h1.ty-typography, .ty-typography + h2.ty-typography, .ty-typography + h3.ty-typography, .ty-typography + h4.ty-typography {
   margin-top: 1.2em;
@@ -31,18 +30,6 @@
   padding: 0;
   background-color: var(--ty-typography-mark-bg);
 }
-.ty-typography u {
-  text-decoration: underline;
-}
-.ty-typography del {
-  text-decoration: line-through;
-}
-.ty-typography strong {
-  font-weight: 600;
-}
-.ty-typography i {
-  font-style: italic;
-}
 .ty-typography sup {
   vertical-align: super;
 }

package/es/typography/text.d.ts

@@ -1,7 +1,8 @@
 import { TextProps } from "./types.js";
+import React from "react";
 
 //#region src/typography/text.d.ts
-declare const Text: (props: TextProps) => JSX.Element;
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 //#endregion
 export { Text };
 //# sourceMappingURL=text.d.ts.map

package/es/typography/text.js

@@ -8,7 +8,7 @@ const tagGenerator = (isRequired, tag, element) => {
 	if (!isRequired) return element;
 	return React.createElement(tag, {}, element);
 };
-const Text = (props) => {
+const Text = React.forwardRef((props, ref) => {
 	const { code = false, del = false, underline = false, strong = false, italic = false, mark = false, sub = false, sup = false, className, children, prefixCls: customisedCls, ...otherProps } = props;
 	let Node = tagGenerator(code, "code", children);
 	Node = tagGenerator(del, "del", Node);
@@ -21,10 +21,12 @@ const Text = (props) => {
 	const cls = classNames(className, getPrefixCls("typography", useContext(ConfigContext).prefixCls, customisedCls));
 	return /* @__PURE__ */ jsx("span", {
 		...otherProps,
+		ref,
 		className: cls,
 		children: Node
 	});
-};
+});
+Text.displayName = "Text";
 //#endregion
 export { Text as default };
 

package/es/typography/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../src/typography/text.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { TextProps } from './types';\n\nconst tagGenerator = (\n  isRequired: boolean,\n  tag: string,\n  element: React.ReactNode\n): React.ReactNode => {\n  if (!isRequired) return element;\n  return React.createElement(tag, {}, element);\n};\n\nconst Text = (props: TextProps): JSX.Element => {\n  const {\n    code = false,\n    del = false,\n    underline = false,\n    strong = false,\n    italic = false,\n    mark = false,\n    sub = false,\n    sup = false,\n    className,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n\n  let Node = tagGenerator(code, 'code', children);\n  Node = tagGenerator(del, 'del', Node);\n  Node = tagGenerator(underline, 'u', Node);\n  Node = tagGenerator(strong, 'strong', Node);\n  Node = tagGenerator(italic, 'i', Node);\n  Node = tagGenerator(mark, 'mark', Node);\n  Node = tagGenerator(sub, 'sub', Node);\n  Node = tagGenerator(sup, 'sup', Node);\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n  const cls = classNames(className, prefixCls);\n\n  return (\n    <span {...otherProps} className={cls}>\n      {Node}\n    </span>\n  );\n};\n\nexport default Text;\n"],"mappings":";;;;;;AAMA,MAAM,gBACJ,YACA,KACA,YACoB;AACpB,KAAI,CAAC,WAAY,QAAO;AACxB,QAAO,MAAM,cAAc,KAAK,EAAE,EAAE,QAAQ;;AAG9C,MAAM,QAAQ,UAAkC;CAC9C,MAAM,EACJ,OAAO,OACP,MAAM,OACN,YAAY,OACZ,SAAS,OACT,SAAS,OACT,OAAO,OACP,MAAM,OACN,MAAM,OACN,WACA,UACA,WAAW,eACX,GAAG,eACD;CAEJ,IAAI,OAAO,aAAa,MAAM,QAAQ,SAAS;AAC/C,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,WAAW,KAAK,KAAK;AACzC,QAAO,aAAa,QAAQ,UAAU,KAAK;AAC3C,QAAO,aAAa,QAAQ,KAAK,KAAK;AACtC,QAAO,aAAa,MAAM,QAAQ,KAAK;AACvC,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,KAAK,OAAO,KAAK;CAIrC,MAAM,MAAM,WAAW,WADL,aAAa,cADT,WAAW,cAAc,CACY,WAAW,cAAc,CACxC;AAE5C,QACE,oBAAC,QAAD;EAAM,GAAI;EAAY,WAAW;YAC9B;EACI,CAAA"}
+{"version":3,"file":"text.js","names":[],"sources":["../../src/typography/text.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { TextProps } from './types';\n\nconst tagGenerator = (\n  isRequired: boolean,\n  tag: string,\n  element: React.ReactNode\n): React.ReactNode => {\n  if (!isRequired) return element;\n  return React.createElement(tag, {}, element);\n};\n\nconst Text = React.forwardRef<HTMLSpanElement, TextProps>(\n  (props, ref) => {\n    const {\n      code = false,\n      del = false,\n      underline = false,\n      strong = false,\n      italic = false,\n      mark = false,\n      sub = false,\n      sup = false,\n      className,\n      children,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n\n    let Node = tagGenerator(code, 'code', children);\n    Node = tagGenerator(del, 'del', Node);\n    Node = tagGenerator(underline, 'u', Node);\n    Node = tagGenerator(strong, 'strong', Node);\n    Node = tagGenerator(italic, 'i', Node);\n    Node = tagGenerator(mark, 'mark', Node);\n    Node = tagGenerator(sub, 'sub', Node);\n    Node = tagGenerator(sup, 'sup', Node);\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n    const cls = classNames(className, prefixCls);\n\n    return (\n      <span {...otherProps} ref={ref} className={cls}>\n        {Node}\n      </span>\n    );\n  }\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"mappings":";;;;;;AAMA,MAAM,gBACJ,YACA,KACA,YACoB;AACpB,KAAI,CAAC,WAAY,QAAO;AACxB,QAAO,MAAM,cAAc,KAAK,EAAE,EAAE,QAAQ;;AAG9C,MAAM,OAAO,MAAM,YAChB,OAAO,QAAQ;CACd,MAAM,EACJ,OAAO,OACP,MAAM,OACN,YAAY,OACZ,SAAS,OACT,SAAS,OACT,OAAO,OACP,MAAM,OACN,MAAM,OACN,WACA,UACA,WAAW,eACX,GAAG,eACD;CAEJ,IAAI,OAAO,aAAa,MAAM,QAAQ,SAAS;AAC/C,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,WAAW,KAAK,KAAK;AACzC,QAAO,aAAa,QAAQ,UAAU,KAAK;AAC3C,QAAO,aAAa,QAAQ,KAAK,KAAK;AACtC,QAAO,aAAa,MAAM,QAAQ,KAAK;AACvC,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,KAAK,OAAO,KAAK;CAIrC,MAAM,MAAM,WAAW,WADL,aAAa,cADT,WAAW,cAAc,CACY,WAAW,cAAc,CACxC;AAE5C,QACE,oBAAC,QAAD;EAAM,GAAI;EAAiB;EAAK,WAAW;YACxC;EACI,CAAA;EAGZ;AAED,KAAK,cAAc"}

package/es/typography/types.d.ts

@@ -9,7 +9,7 @@ interface ParagraphProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElem
   children?: React.ReactNode;
 }
 interface HeadingProps extends BaseProps, React.PropsWithRef<React.HTMLAttributes<HTMLHeadingElement>> {
-  level?: number;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
   children?: React.ReactNode;
 }
 interface TextProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['span']> {

package/lib/typography/heading.d.ts

@@ -1,7 +1,8 @@
 import { HeadingProps } from "./types.js";
+import React from "react";
 
 //#region src/typography/heading.d.ts
-declare const Heading: (props: HeadingProps) => JSX.Element | null;
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 //#endregion
 export { Heading };
 //# sourceMappingURL=heading.d.ts.map

package/lib/typography/heading.js

@@ -5,29 +5,22 @@ let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/typography/heading.tsx
-const headingGenerator = (htmlType, displayName) => {
-	const Component = react.default.forwardRef((props, ref) => {
-		const { prefixCls: customisedCls, className, children, ...otherProps } = props;
-		const cls = (0, classnames.default)(require_general.getPrefixCls("typography", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls), className);
-		return react.default.createElement(htmlType, {
-			...otherProps,
-			ref,
-			className: cls
-		}, children);
-	});
-	Component.displayName = displayName;
-	return Component;
-};
-const Heading = (props) => {
-	const { level = 1, ...otherProps } = props;
+const Heading = react.default.forwardRef((props, ref) => {
+	const { level = 1, prefixCls: customisedCls, className, children, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("typography", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
 	if (level < 1 || level > 6) {
 		console.warn("The heading level parameter is invalid.");
 		return null;
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(headingGenerator(`h${level}`, `H${level}`), { ...otherProps });
-};
+	const cls = (0, classnames.default)(prefixCls, className);
+	return react.default.createElement(`h${level}`, {
+		...otherProps,
+		ref,
+		className: cls
+	}, children);
+});
+Heading.displayName = "Heading";
 //#endregion
 exports.default = Heading;
 

package/lib/typography/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/typography/heading.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { HeadingProps } from './types';\n\nconst headingGenerator = (htmlType: string, displayName: string) => {\n  const Component = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n    (props: HeadingProps, ref): JSX.Element => {\n      const { prefixCls: customisedCls, className, children, ...otherProps } = props;\n      const configContext = useContext(ConfigContext);\n      const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n      const cls = classNames(prefixCls, className);\n\n      return React.createElement(\n        htmlType,\n        {\n          ...otherProps,\n          ref,\n          className: cls,\n        },\n        children\n      );\n    }\n  );\n\n  Component.displayName = displayName;\n\n  return Component;\n};\n\nconst Heading = (props: HeadingProps): JSX.Element | null => {\n  const { level = 1, ...otherProps } = props;\n  if (level < 1 || level > 6) {\n    console.warn('The heading level parameter is invalid.');\n    return null;\n  }\n  const Component = headingGenerator(`h${level}`, `H${level}`);\n  return <Component {...otherProps} />;\n};\n\nexport default Heading;\n"],"mappings":";;;;;;;;;AAMA,MAAM,oBAAoB,UAAkB,gBAAwB;CAClE,MAAM,YAAYA,MAAAA,QAAM,YACrB,OAAqB,QAAqB;EACzC,MAAM,EAAE,WAAW,eAAe,WAAW,UAAU,GAAG,eAAe;EAGzE,MAAM,OAAA,GAAA,WAAA,SADYC,gBAAAA,aAAa,eAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACY,WAAW,cAAc,EAClD,UAAU;AAE5C,SAAOF,MAAAA,QAAM,cACX,UACA;GACE,GAAG;GACH;GACA,WAAW;GACZ,EACD,SACD;GAEJ;AAED,WAAU,cAAc;AAExB,QAAO;;AAGT,MAAM,WAAW,UAA4C;CAC3D,MAAM,EAAE,QAAQ,GAAG,GAAG,eAAe;AACrC,KAAI,QAAQ,KAAK,QAAQ,GAAG;AAC1B,UAAQ,KAAK,0CAA0C;AACvD,SAAO;;AAGT,QAAO,iBAAA,GAAA,kBAAA,KADW,iBAAiB,IAAI,SAAS,IAAI,QAAQ,EACrD,EAAW,GAAI,YAAc,CAAA"}
+{"version":3,"file":"heading.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/typography/heading.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { HeadingProps } from './types';\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  (props, ref) => {\n    const { level = 1, prefixCls: customisedCls, className, children, ...otherProps } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n\n    if (level < 1 || level > 6) {\n      console.warn('The heading level parameter is invalid.');\n      return null;\n    }\n    const cls = classNames(prefixCls, className);\n\n    return React.createElement(\n      `h${level}`,\n      {\n        ...otherProps,\n        ref,\n        className: cls,\n      },\n      children\n    );\n  }\n);\n\nHeading.displayName = 'Heading';\n\nexport default Heading;\n"],"mappings":";;;;;;;;AAMA,MAAM,UAAUA,MAAAA,QAAM,YACnB,OAAO,QAAQ;CACd,MAAM,EAAE,QAAQ,GAAG,WAAW,eAAe,WAAW,UAAU,GAAG,eAAe;CAEpF,MAAM,YAAYC,gBAAAA,aAAa,eAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACY,WAAW,cAAc;AAEpF,KAAI,QAAQ,KAAK,QAAQ,GAAG;AAC1B,UAAQ,KAAK,0CAA0C;AACvD,SAAO;;CAET,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;AAE5C,QAAOF,MAAAA,QAAM,cACX,IAAI,SACJ;EACE,GAAG;EACH;EACA,WAAW;EACZ,EACD,SACD;EAEJ;AAED,QAAQ,cAAc"}

package/lib/typography/style/_index.scss

@@ -4,8 +4,6 @@ $tp-prefix: #{$prefix}-typography;
 
 .#{$tp-prefix} {
   box-sizing: border-box;
-  font-family: $font-family;
-
   & + h1.#{$tp-prefix},
   & + h2.#{$tp-prefix},
   & + h3.#{$tp-prefix},
@@ -46,22 +44,6 @@ $tp-prefix: #{$prefix}-typography;
     background-color: var(--ty-typography-mark-bg);
   }
 
-  u {
-    text-decoration: underline;
-  }
-
-  del {
-    text-decoration: line-through;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  i {
-    font-style: italic;
-  }
-
   sup {
     vertical-align: super;
   }

package/lib/typography/style/index.css

@@ -1,6 +1,5 @@
 .ty-typography {
   box-sizing: border-box;
-  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 .ty-typography + h1.ty-typography, .ty-typography + h2.ty-typography, .ty-typography + h3.ty-typography, .ty-typography + h4.ty-typography {
   margin-top: 1.2em;
@@ -31,18 +30,6 @@
   padding: 0;
   background-color: var(--ty-typography-mark-bg);
 }
-.ty-typography u {
-  text-decoration: underline;
-}
-.ty-typography del {
-  text-decoration: line-through;
-}
-.ty-typography strong {
-  font-weight: 600;
-}
-.ty-typography i {
-  font-style: italic;
-}
 .ty-typography sup {
   vertical-align: super;
 }

package/lib/typography/text.d.ts

@@ -1,7 +1,8 @@
 import { TextProps } from "./types.js";
+import React from "react";
 
 //#region src/typography/text.d.ts
-declare const Text: (props: TextProps) => JSX.Element;
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 //#endregion
 export { Text };
 //# sourceMappingURL=text.d.ts.map

package/lib/typography/text.js

@@ -11,7 +11,7 @@ const tagGenerator = (isRequired, tag, element) => {
 	if (!isRequired) return element;
 	return react.default.createElement(tag, {}, element);
 };
-const Text = (props) => {
+const Text = react.default.forwardRef((props, ref) => {
 	const { code = false, del = false, underline = false, strong = false, italic = false, mark = false, sub = false, sup = false, className, children, prefixCls: customisedCls, ...otherProps } = props;
 	let Node = tagGenerator(code, "code", children);
 	Node = tagGenerator(del, "del", Node);
@@ -24,10 +24,12 @@ const Text = (props) => {
 	const cls = (0, classnames.default)(className, require_general.getPrefixCls("typography", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		...otherProps,
+		ref,
 		className: cls,
 		children: Node
 	});
-};
+});
+Text.displayName = "Text";
 //#endregion
 exports.default = Text;
 

package/lib/typography/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/typography/text.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { TextProps } from './types';\n\nconst tagGenerator = (\n  isRequired: boolean,\n  tag: string,\n  element: React.ReactNode\n): React.ReactNode => {\n  if (!isRequired) return element;\n  return React.createElement(tag, {}, element);\n};\n\nconst Text = (props: TextProps): JSX.Element => {\n  const {\n    code = false,\n    del = false,\n    underline = false,\n    strong = false,\n    italic = false,\n    mark = false,\n    sub = false,\n    sup = false,\n    className,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n\n  let Node = tagGenerator(code, 'code', children);\n  Node = tagGenerator(del, 'del', Node);\n  Node = tagGenerator(underline, 'u', Node);\n  Node = tagGenerator(strong, 'strong', Node);\n  Node = tagGenerator(italic, 'i', Node);\n  Node = tagGenerator(mark, 'mark', Node);\n  Node = tagGenerator(sub, 'sub', Node);\n  Node = tagGenerator(sup, 'sup', Node);\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n  const cls = classNames(className, prefixCls);\n\n  return (\n    <span {...otherProps} className={cls}>\n      {Node}\n    </span>\n  );\n};\n\nexport default Text;\n"],"mappings":";;;;;;;;;AAMA,MAAM,gBACJ,YACA,KACA,YACoB;AACpB,KAAI,CAAC,WAAY,QAAO;AACxB,QAAOA,MAAAA,QAAM,cAAc,KAAK,EAAE,EAAE,QAAQ;;AAG9C,MAAM,QAAQ,UAAkC;CAC9C,MAAM,EACJ,OAAO,OACP,MAAM,OACN,YAAY,OACZ,SAAS,OACT,SAAS,OACT,OAAO,OACP,MAAM,OACN,MAAM,OACN,WACA,UACA,WAAW,eACX,GAAG,eACD;CAEJ,IAAI,OAAO,aAAa,MAAM,QAAQ,SAAS;AAC/C,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,WAAW,KAAK,KAAK;AACzC,QAAO,aAAa,QAAQ,UAAU,KAAK;AAC3C,QAAO,aAAa,QAAQ,KAAK,KAAK;AACtC,QAAO,aAAa,MAAM,QAAQ,KAAK;AACvC,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,KAAK,OAAO,KAAK;CAIrC,MAAM,OAAA,GAAA,WAAA,SAAiB,WADLC,gBAAAA,aAAa,eAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACY,WAAW,cAAc,CACxC;AAE5C,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,GAAI;EAAY,WAAW;YAC9B;EACI,CAAA"}
+{"version":3,"file":"text.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/typography/text.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { TextProps } from './types';\n\nconst tagGenerator = (\n  isRequired: boolean,\n  tag: string,\n  element: React.ReactNode\n): React.ReactNode => {\n  if (!isRequired) return element;\n  return React.createElement(tag, {}, element);\n};\n\nconst Text = React.forwardRef<HTMLSpanElement, TextProps>(\n  (props, ref) => {\n    const {\n      code = false,\n      del = false,\n      underline = false,\n      strong = false,\n      italic = false,\n      mark = false,\n      sub = false,\n      sup = false,\n      className,\n      children,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n\n    let Node = tagGenerator(code, 'code', children);\n    Node = tagGenerator(del, 'del', Node);\n    Node = tagGenerator(underline, 'u', Node);\n    Node = tagGenerator(strong, 'strong', Node);\n    Node = tagGenerator(italic, 'i', Node);\n    Node = tagGenerator(mark, 'mark', Node);\n    Node = tagGenerator(sub, 'sub', Node);\n    Node = tagGenerator(sup, 'sup', Node);\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);\n    const cls = classNames(className, prefixCls);\n\n    return (\n      <span {...otherProps} ref={ref} className={cls}>\n        {Node}\n      </span>\n    );\n  }\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"mappings":";;;;;;;;;AAMA,MAAM,gBACJ,YACA,KACA,YACoB;AACpB,KAAI,CAAC,WAAY,QAAO;AACxB,QAAOA,MAAAA,QAAM,cAAc,KAAK,EAAE,EAAE,QAAQ;;AAG9C,MAAM,OAAOA,MAAAA,QAAM,YAChB,OAAO,QAAQ;CACd,MAAM,EACJ,OAAO,OACP,MAAM,OACN,YAAY,OACZ,SAAS,OACT,SAAS,OACT,OAAO,OACP,MAAM,OACN,MAAM,OACN,WACA,UACA,WAAW,eACX,GAAG,eACD;CAEJ,IAAI,OAAO,aAAa,MAAM,QAAQ,SAAS;AAC/C,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,WAAW,KAAK,KAAK;AACzC,QAAO,aAAa,QAAQ,UAAU,KAAK;AAC3C,QAAO,aAAa,QAAQ,KAAK,KAAK;AACtC,QAAO,aAAa,MAAM,QAAQ,KAAK;AACvC,QAAO,aAAa,KAAK,OAAO,KAAK;AACrC,QAAO,aAAa,KAAK,OAAO,KAAK;CAIrC,MAAM,OAAA,GAAA,WAAA,SAAiB,WADLC,gBAAAA,aAAa,eAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACY,WAAW,cAAc,CACxC;AAE5C,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,GAAI;EAAiB;EAAK,WAAW;YACxC;EACI,CAAA;EAGZ;AAED,KAAK,cAAc"}

package/lib/typography/types.d.ts

@@ -9,7 +9,7 @@ interface ParagraphProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElem
   children?: React.ReactNode;
 }
 interface HeadingProps extends BaseProps, React.PropsWithRef<React.HTMLAttributes<HTMLHeadingElement>> {
-  level?: number;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
   children?: React.ReactNode;
 }
 interface TextProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['span']> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-design/react",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A friendly UI component set for React",
   "license": "MIT",
   "keywords": [
@@ -55,8 +55,8 @@
     "classnames": "^2.3.1",
     "react-transition-group": "^4.4.2",
     "tslib": "^2.3.1",
-    "@tiny-design/icons": "1.0.9",
-    "@tiny-design/tokens": "1.0.4"
+    "@tiny-design/icons": "1.0.10",
+    "@tiny-design/tokens": "1.0.10"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",