@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/typography/Anchor.tsx

@@ -0,0 +1,63 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { cn } from "@react-fabric/utilities";
+import type { ChildrenProp, CssProp, PolymorphicProps, RefProp } from "../types";
+
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp {
+  onClick?: React.MouseEventHandler;
+}
+
+/**
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * This component is useful for creating links that need to be styled consistently across an application, while also providing flexibility in terms of the HTML element used.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with default styling.
+ * ```
+ */
+export function Anchor<Tag extends React.ElementType = "a">({
+  ref,
+  as,
+  children,
+  className,
+  ...props
+}: AnchorProps & PolymorphicProps<Tag>) {
+  const E = as ?? "a";
+  return (
+    <E
+      className={cn("link", className)}
+      ref={ref as React.RefObject<HTMLAnchorElement | null>}
+      data-clickable={true}
+      {...props}
+    >
+      {children}
+    </E>
+  );
+}

package/src/typography/Copy.tsx

@@ -1,34 +1,44 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import classNames from "classnames";
-import { useCallback } from "react";
+import { cn } from "@react-fabric/utilities";
 import { useTranslation } from "react-i18next";
 import { Button } from "../components/button/Button";
-import { Tooltip } from "../overlays/tooltip/Tooltip";
-import { type CssProp, type SizeType } from "../types";
-import { CoreIcons } from "../types/icons";
+import { Tooltip } from "../components/tooltip/Tooltip";
+import type { CssProp, SizeType } from "../types";
 
+/**
+ * A component that provides a button to copy text to the clipboard.
+ * It uses the Clipboard API to write the specified text to the clipboard.
+ * The button displays a tooltip feedback when the text is successfully copied.
+ *
+ * @example
+ * ```jsx
+ * <Copy text="Text to copy" size="small" />
+ * ```
+ */
 export interface CopyProps extends CssProp {
   text: string;
   /**
@@ -37,25 +47,25 @@ export interface CopyProps extends CssProp {
   size?: SizeType;
 }
 
-export const Copy = ({ text, size, className }: CopyProps) => {
+export function Copy({ text, size, className }: CopyProps) {
   const { t } = useTranslation("core");
 
   /** ***************** handle copy *******************/
-  const doCopy = useCallback(() => {
+  const doCopy = () => {
     void navigator.clipboard.writeText(text);
-  }, [text]);
+  };
 
   return (
     <Tooltip content={t("action.copy")}>
       <Button
-        icon={CoreIcons.copy}
+        icon="icon-[mdi--content-copy]"
         aria-label="Copy text"
-        actionMessage={t("action.copied")}
         variant="link"
         size={size}
-        className={classNames(className, "align-bottom")}
+        showActionDone
+        className={cn(className, "align-bottom")}
         onClick={doCopy}
       />
     </Tooltip>
   );
-};
+}

package/src/typography/Kbd.tsx

@@ -0,0 +1,50 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { formatForDisplay } from "@tanstack/react-hotkeys";
+
+/**
+ * Renders a styled keyboard shortcut label from a key combination string.
+ *
+ * Parses the `keyCombo` string (e.g., `"Ctrl+S"`) and renders the modifier keys
+ * and main key as uppercase text inside a `<kbd>` element. Arrow keys are rendered
+ * as directional labels (LEFT, RIGHT, UP, DOWN).
+ *
+ * @example
+ * ```tsx
+ * <HotKeyLabel keys={['Ctrl', 'S']} />
+ * // Renders: CTRL S
+ * ```
+ */
+export function Kbd({ keys }: { keys: string | string[] }) {
+  return [keys].flat().map((key, i) => (
+    <kbd
+      key={`${key}-${i.toString(16)}`}
+      className="hotkey-label align-top inline-flex gap-1 select-none self-center font-sans items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1"
+    >
+      {formatForDisplay(key, { useSymbols: true })}
+    </kbd>
+  ));
+}

package/src/typography/Mark.tsx

@@ -1,86 +1,90 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import { isEmpty, isString, tokenize } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { cn, isEmpty, isString, tokenize } from "@react-fabric/utilities";
 import { Fragment, useCallback } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
-import { type ChildProp, type ColorType } from "../types";
-import { getBgClass, getColor } from "../utils";
-import classes from "./Typography.module.css";
+import type { ChildProp, CustomColors } from "../types";
+import { getColor } from "../utils";
 
 interface MarkTextProps {
   children: string;
   color?: string;
 }
 
-const MarkText = ({ color, children }: MarkTextProps) => {
+function MarkText({ color, children }: MarkTextProps) {
   return (
     <mark
-      className={classNames(
-        classes.mark,
-        "whitespace-nowrap",
-        color && getBgClass(color),
-      )}
-      style={
-        color ? ({ "--mark-color": getColor(color) } as AnyObject) : undefined
-      }
+      className={cn("fabric-mark", "whitespace-nowrap")}
+      style={color ? ({ "--mark-color": getColor(color) } as React.CSSProperties) : undefined}
     >
       {children}
     </mark>
   );
-};
+}
 
 export interface MarkProps extends ChildProp<string> {
   /**
-   * texts to match and abbreviate within
+   * texts to match and highlight within
    *
    * [textPart, color (class name or color string)]
    */
-  mark: Array<[textPart: string, color?: ColorType | string]>;
+  mark: Array<[textPart: string, color?: CustomColors]>;
   /**
    * renderer callback
    */
-  renderer?: (part: string[]) => JSX.Element;
+  renderer?: (part: string[]) => React.ReactElement;
 }
 
 /**
- * Typography mark component to wrap text parts in `mark`
+ * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
+ * It tokenizes the children string based on the provided `mark` array,
+ * which contains pairs of text parts and their corresponding colors.
+ * The component can use a custom renderer to display the marked text,
+ * allowing for greater flexibility in how the text is presented.
+ *
+ * @example
+ * <Mark
+ *   mark={[
+ *     ["important", "red"],
+ *     ["note", "blue"],
+ *   ]}
+ * >
+ *   This is an important note that should be highlighted.
+ * </Mark>
  */
-export const Mark = ({ children, mark, renderer }: MarkProps) => {
-  /** ***************** abbr text renderer *******************/
-  const abbrRender = useCallback(
+export function Mark({ children, mark, renderer }: MarkProps) {
+  /** ***************** mark text renderer *******************/
+  const markRender = useCallback(
     (text: string, color = "") => {
-      return (
-        <MarkText color={color}>
-          {(renderer?.([text, color]) ?? text) as string}
-        </MarkText>
-      );
+      return <MarkText color={color}>{(renderer?.([text, color]) ?? text) as string}</MarkText>;
     },
     [renderer],
   );
 
-  /** ***************** tokenize text with abbr list *******************/
+  /** ***************** tokenize text with mark list *******************/
   const inner = useMemoDebugger(
     () => {
       if (isString(children)) {
@@ -89,7 +93,7 @@ export const Mark = ({ children, mark, renderer }: MarkProps) => {
             children,
             mark.map(([keyword]) => keyword),
           );
-          const titles: KeyValue = mark.reduce(
+          const titles: KeyValue<{ color: string }> = mark.reduce<KeyValue<{ color: string }>>(
             (t, [a, color = ""]) => ({
               ...t,
               [a.toLowerCase()]: { color },
@@ -101,9 +105,10 @@ export const Mark = ({ children, mark, renderer }: MarkProps) => {
               {tokens.map(([start, text], i) => {
                 const { color = "" } = titles[text.toLowerCase()] ?? {};
                 return (
-                  <Fragment key={i}>
+                  // eslint-disable-next-line @eslint-react/no-array-index-key
+                  <Fragment key={`${text}-${i}`}>
                     {start}
-                    {text ? abbrRender(text, color) : null}
+                    {text ? markRender(text, color) : null}
                   </Fragment>
                 );
               })}
@@ -113,10 +118,10 @@ export const Mark = ({ children, mark, renderer }: MarkProps) => {
       }
       return children;
     },
-    [children, mark, abbrRender],
+    [children, mark, markRender],
     "TextMark inner",
   );
 
   /** ***************** component *******************/
-  return <span>{inner}</span>;
-};
+  return <span className="mixed-lang whitespace-pre-wrap">{inner}</span>;
+}

package/src/typography/Text.tsx

@@ -1,77 +1,41 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import { isNumber } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { useCallback, useRef, useState } from "react";
+import { cn, isNumber } from "@react-fabric/utilities";
+import { useEffectEvent, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  useLayoutEffectDebugger,
-  useMemoDebugger,
-} from "../hooks/useEffectDebugger";
+import { useLayoutEffectDebugger } from "../hooks/useEffectDebugger";
 import { usePropToggle } from "../hooks/usePropToggle";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type ColorWithGrays,
-  type CssProp,
-  type SizeType,
-  type TestProps,
-} from "../types";
-import {
-  calculateTextHeight,
-  getBgClass,
-  getColor,
-  getColorClass,
-} from "../utils";
-import classes from "./Typography.module.css";
-import { TextSizeMap } from "./types";
+import type { ChildrenProp, CssProp, TestProps } from "../types";
+import { calculateTextHeight } from "../utils";
 
-export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
+export interface TextProps extends ChildrenProp, CssProp, TestProps {
   /**
    * render text as inline span
    */
   inline?: boolean;
-  /**
-   * text background (CSS color / tailwind color)
-   */
-  bg?: ColorWithGrays | string;
-  /**
-   * text color (CSS color / tailwind color)
-   */
-  color?: ColorWithGrays | string;
-  /**
-   * text size
-   */
-  size?: SizeType | number | string;
-  /**
-   * font family
-   */
-  family?: "sans" | "serif" | "mono";
-  /**
-   * text align
-   */
-  align?: "start" | "end" | "center" | "justify";
   /**
    * text line clamp
    */
@@ -79,42 +43,40 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
 }
 
 /**
- * Typography text component
+ * A component that renders text with various styles, supports line clamping, and provides a "show more" link if the text is clipped.
+ * The component uses a combination of CSS and JavaScript to achieve the desired effects, ensuring a smooth user experience.
+ * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
+ *
+ * @example
+ * ```jsx
+ * <Text
+ *   inline={false}
+ *   clamp={2}
+ * >
+ *   This is a sample text that demonstrates the Text component with various styles applied.
+ * </Text>
+ * ```
  */
-export const Text = ({
-  children,
-  className,
-  inline,
-  bg,
-  color,
-  family,
-  size,
-  clamp,
-  align,
-  ...aria
-}: TextProps) => {
+export function Text({ children, className, inline, clamp, ...props }: TextProps) {
   const { t } = useTranslation("core");
-  const refContainer = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const [clipped, setClipped] = useState(false);
-  const [showMore, toggleShowMore, refShowMore] = usePropToggle(false);
+  const [showMore, toggleShowMore] = usePropToggle(false);
 
   /** ***************** check text height if clip enabled *******************/
-  const checkHeight = useCallback(() => {
-    const el = refContainer.current as HTMLElement;
-    if (el && isNumber(clamp) && clamp > 0 && !refShowMore.current) {
-      setClipped(
-        calculateTextHeight(el.firstElementChild as HTMLElement, el) >
-          el.offsetHeight,
-      );
+  const checkHeight = useEffectEvent(() => {
+    const el = containerRef.current as HTMLElement;
+    if (el && isNumber(clamp) && clamp > 0 && !showMore) {
+      setClipped(calculateTextHeight(el.firstElementChild as HTMLElement, el) > el.offsetHeight);
     }
-  }, [clamp]);
+  });
 
   /** ***************** observe element resize to recalculate height *******************/
   useLayoutEffectDebugger(
     () => {
-      if (refContainer.current) {
+      if (containerRef.current) {
         const ob = new ResizeObserver(checkHeight);
-        ob.observe(refContainer.current as HTMLElement);
+        ob.observe(containerRef.current);
         checkHeight();
         return () => {
           ob.disconnect();
@@ -125,65 +87,32 @@ export const Text = ({
     "Text check height",
   );
 
-  /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (align) {
-        s.textAlign = align;
-      }
-      if (size && !(size in TextSizeMap)) {
-        s.fontSize = size;
-      }
-      if (size && size in TextSizeMap) {
-        s.fontSize = TextSizeMap[size];
-      }
-      return s;
-    },
-    [bg, color, size, align, family],
-    "Text styles",
-  );
-
   return inline ? (
-    <span className={className} style={styles} {...aria}>
+    <span className={className} {...props}>
       {children}
     </span>
   ) : (
     <article className={className}>
       <div
-        ref={refContainer}
+        ref={containerRef}
         style={
-          { "--text-clamp": showMore ? "unset" : clamp ?? "unset" } as AnyObject
+          {
+            "--text-clamp": showMore ? "unset" : (clamp ?? "unset"),
+          } as React.CSSProperties
         }
       >
-        <div
-          className={classNames(
-            classes.text,
-            "text-reset mixed-lang px-[2px] whitespace-pre-wrap",
-            family && `font-${family}`,
-            bg && getBgClass(bg),
-            color && getColorClass(color),
-            clamp && "line-clamp-1",
-          )}
-          style={styles}
-          {...aria}
-        >
+        <div className={cn("fabric-text", "mixed-lang px-0.5 whitespace-pre-wrap", clamp && "line-clamp-1")} {...props}>
           {children}
         </div>
       </div>
       {clipped && (
-        <div className={classes.moreLink}>
+        <div className="fabric-moreLink">
           <span
             role="link"
             tabIndex={0}
             data-inner-clickable
             onClick={(e) => [e.stopPropagation(), toggleShowMore()]}
+            onKeyDown={() => toggleShowMore()}
           >
             ...{t(`action.${showMore ? "less" : "more"}`)}
           </span>
@@ -191,4 +120,4 @@ export const Text = ({
       )}
     </article>
   );
-};
+}