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

package/src/components/tabpanel/TabPanel.module.css

@@ -25,10 +25,10 @@
   .tabPanel {
     --color: theme(colors.primary.500);
 
-    & > .tabList {
+    & > .tabHeader {
       grid-area: tablist;
 
-      & > .tabButton {
+      & > .tabList > .tabButton {
         &[data-color="accent"] {
           --color: theme(colors.accent.500);
         }
@@ -64,7 +64,7 @@
     }
 
     &[data-variant="outline"] {
-      & > .tabList > .tabButton:global(.active) {
+      & .tabList > .tabButton:global(.active) {
         --active-color: theme(backgroundColor.base);
         --active-border: 0 0 0 1px theme(borderColor.base) inset;
 
@@ -73,14 +73,14 @@
     }
 
     &[data-variant="solid"] {
-      & > .tabList > .tabButton:global(.active) {
+      & .tabList > .tabButton:global(.active) {
         color: theme(colors.white);
         background-color: var(--color);
       }
     }
 
     &[data-variant="soft"] {
-      & > .tabList > .tabButton:global(.active) {
+      & .tabList > .tabButton:global(.active) {
         background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       }
     }
@@ -89,9 +89,7 @@
       grid-template: "tablist" auto "content" 1fr / 1fr;
       padding-inline: 2px;
 
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
+      .tabHeader {
         box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
       }
     }
@@ -100,9 +98,8 @@
       grid-template: "content" 1fr "tablist" auto / 1fr;
       padding-inline: 2px;
 
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
+      .tabHeader {
+        margin-top: 1px;
         box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
       }
     }
@@ -111,9 +108,7 @@
       grid-template: "tablist content" 1fr / auto 1fr;
       padding-block: 2px;
 
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
+      .tabHeader {
         box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
       }
     }
@@ -122,9 +117,7 @@
       grid-template: "content tablist" 1fr / 1fr auto;
       padding-block: 2px;
 
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
+      .tabHeader {
         box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
       }
     }
@@ -133,11 +126,11 @@
 
 @layer util {
   .tabPanel {
-    & > .tabList > .tabButton:global(.active) {
+    & .tabList > .tabButton:global(.active) {
       pointer-events: none;
     }
 
-    &[data-orientation="top"] > .tabList {
+    &[data-orientation="top"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           0 -2px 0 var(--active-color) inset,
@@ -145,7 +138,7 @@
       }
     }
 
-    &[data-orientation="bottom"] > .tabList {
+    &[data-orientation="bottom"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           0 2px 0 var(--active-color) inset,
@@ -153,7 +146,7 @@
       }
     }
 
-    &[data-orientation="start"] > .tabList {
+    &[data-orientation="start"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           -2px 0 0 var(--active-color) inset,
@@ -161,7 +154,7 @@
       }
     }
 
-    &[data-orientation="end"] > .tabList {
+    &[data-orientation="end"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           2px 0 0 var(--active-color) inset,
@@ -169,28 +162,28 @@
       }
     }
 
-    &[data-orientation="top"] > .tabList > .tabButton {
+    &[data-orientation="top"] .tabList > .tabButton {
       margin-top: 2px;
       margin-inline: 1px;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="bottom"] > .tabList > .tabButton {
+    &[data-orientation="bottom"] .tabList > .tabButton {
       margin-bottom: 2px;
       margin-inline: 1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    &[data-orientation="start"] > .tabList > .tabButton {
+    &[data-orientation="start"] .tabList > .tabButton {
       margin-block: 1px;
       margin-inline-start: 2px;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="end"] > .tabList > .tabButton {
+    &[data-orientation="end"] .tabList > .tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;

package/src/components/tabpanel/TabPanel.tsx

@@ -25,6 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
+  type ReactElement,
   useCallback,
   useEffect,
   useMemo,
@@ -64,6 +65,14 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * append element
+   */
+  append?: ReactElement;
+  /**
+   * prepend element
+   */
+  prepend?: ReactElement;
   /**
    * change handler
    */
@@ -84,6 +93,8 @@ export const TabPanel = ({
   justify,
   variant,
   tabFlex,
+  append,
+  prepend,
   gap,
   onBeforeChange,
   onChange,
@@ -132,21 +143,32 @@ export const TabPanel = ({
     >
       <div
         className={classNames(
-          classes.tabList,
+          classes.tabHeader,
           headerClassName,
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
-          "flex flex-nowrap overflow-auto scroll-thin",
+          "flex flex-nowrap overflow-hidden items-center",
         )}
-        style={{ gap }}
       >
-        {tabs.map((node: AnyObject) =>
-          cloneElement(node, {
-            tabFlex: node.props.tabFlex ?? tabFlex,
-            onClick: handleClick,
-            active: node.props.id === active,
-          }),
-        )}
+        {prepend}
+        <div
+          className={classNames(
+            classes.tabList,
+            justify && `justify-${justify}`,
+            ["start", "end"].includes(orientation) && "flex-col",
+            "flex flex-1 flex-nowrap overflow-auto scroll-thin",
+          )}
+          style={{ gap }}
+        >
+          {tabs.map((node: AnyObject) =>
+            cloneElement(node, {
+              tabFlex: node.props.tabFlex ?? tabFlex,
+              onClick: handleClick,
+              active: node.props.id === active,
+            }),
+          )}
+        </div>
+        {append}
       </div>
       {rest}
       {activeTabPanel}

package/src/core/aside/Aside.tsx

@@ -22,7 +22,14 @@
  */
 
 import classNames from "classnames";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
@@ -31,6 +38,7 @@ import { useResize } from "../../hooks/useResize";
 import {
   type ChildrenProp,
   type CollapseProps,
+  type CssProp,
   type Elements,
   type IconProps,
   type TestProps,
@@ -43,11 +51,12 @@ export interface AsideProps
   extends IconProps,
     ChildrenProp,
     CollapseProps,
+    CssProp,
     TestProps {
   /**
    * page title
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * align inline-end
    */
@@ -60,6 +69,10 @@ export interface AsideProps
    * header class
    */
   headerClassName?: string;
+  /**
+   * header class
+   */
+  bodyClassName?: string;
 
   /**
    * show loading indicator
@@ -102,6 +115,8 @@ export const Aside = ({
   iconBg,
   iconColor,
   rtlFlip,
+  className,
+  bodyClassName,
   headerClassName,
   resizeable,
   flyout,
@@ -182,9 +197,10 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, "overflow-hidden grid")}
+      className={classNames(classes.aside, className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
+      data-loading={loading}
       data-collapsed={isCollapsed}
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
@@ -196,6 +212,7 @@ export const Aside = ({
           headerClassName,
           "grid area-head items-center",
         )}
+        data-testid="aside-header"
       >
         {title && (
           <div
@@ -243,8 +260,13 @@ export const Aside = ({
       <section
         ref={elementRef}
         data-ref="asideBody"
-        className={classNames(classes.asideBody, "overflow-hidden grid")}
+        className={classNames(
+          classes.asideBody,
+          bodyClassName,
+          "overflow-hidden grid",
+        )}
         style={isCollapsed ? widthStyles : undefined}
+        data-testid="aside-body"
       >
         <ErrorBoundary>{children}</ErrorBoundary>
       </section>

package/src/core/content/Content.tsx

@@ -22,14 +22,14 @@
  */
 
 import classNames from "classnames";
-import { useImperativeHandle } from "react";
+import { type MouseEvent, useImperativeHandle } from "react";
 import { useDebounce } from "../../hooks/useDebounce";
 import { useResizeObserver } from "../../hooks/useResizeObserver";
 import {
   type ChildrenProp,
   type CssProp,
-  type PositionObject,
   type RefProp,
+  type ScrollObject,
   type SizeObject,
   type TestProps,
 } from "../../types";
@@ -44,7 +44,7 @@ export interface ContentProps
   /**
    * scroll vevent handler
    */
-  onScroll?: (event: PositionObject) => void;
+  onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
   /**
    * scroll vevent handler
    */
@@ -65,13 +65,19 @@ export const Content = ({
 }: ContentProps) => {
   const resizeHandle = useResizeObserver(onResize);
   const scrollHandler = useDebounce(
-    (e: React.UIEvent<HTMLDivElement>) => {
-      onScroll?.({
-        // @ts-expect-error ignore
-        left: e.target.scrollLeft,
-        // @ts-expect-error ignore
-        top: e.target.scrollTop,
-      });
+    (e: MouseEvent<HTMLDivElement>) => {
+      const el = e.target as HTMLElement;
+      onScroll?.(
+        {
+          left: el.scrollLeft,
+          top: el.scrollTop,
+          scrollHeight: el.scrollHeight,
+          scrollWidth: el.scrollWidth,
+          width: el.offsetWidth,
+          height: el.offsetHeight,
+        },
+        e,
+      );
     },
     [onScroll],
   );

package/src/core/headfoot/HeadFoot.module.css

@@ -23,6 +23,8 @@
 
 @layer comp {
   .headfoot {
+    gap: 2px;
+
     .buttonWrapper + .buttonWrapper {
       margin-inline-start: 0.25rem;
     }

package/src/core/headfoot/HeadFoot.tsx

@@ -93,7 +93,7 @@ const HeadFoot = ({
         color && getColorClass(color),
         area === "head" ? "area-head" : "area-foot",
         `leading-none`,
-        flex && "flex flex-nowrap gap-px",
+        flex && "flex flex-nowrap",
         align && `items-${align}`,
         justify && `justify-${justify}`,
       )}

package/src/core/page/Page.tsx

@@ -66,6 +66,7 @@ export const Page = ({
     <div
       data-testid={testId}
       data-test-value={testValue}
+      data-loading={loading}
       className={classNames(
         classes.page,
         "overflow-hidden grid area-content",

package/src/core/section/Section.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { type ChildrenProp } from "../../types";
+import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 import classes from "./Section.module.css";
 
@@ -31,14 +31,20 @@ import classes from "./Section.module.css";
  */
 export const Section = ({
   children,
+  className,
   dir,
-}: ChildrenProp & { dir?: "ltr" | "rtl" }) => {
+  ref,
+}: ChildrenProp &
+  CssProp &
+  RefProp<HTMLDivElement> & { dir?: "ltr" | "rtl" }) => {
   return (
     <div
       data-ref="section"
       dir={dir}
+      ref={ref}
       className={classNames(
         classes.section,
+        className,
         "grid area-content overflow-hidden",
       )}
     >

package/src/hooks/useNavigator.tsx

@@ -21,24 +21,29 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+  const refCurrent = useRef(defaultIndex);
+
   const onNavigate = useCallback(
     (dir: 1 | -1) => {
       if (dir === -1) {
-        setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+        refCurrent.current =
+          refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
       }
       if (dir === 1) {
-        setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+        refCurrent.current =
+          refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
       }
+      setCurrentIndex(refCurrent.current);
     },
-    [currentIndex, totalCount],
+    [totalCount],
   );
   const headLabel = useMemo(
     () => (
-      <span className="text-muted leading-none">
+      <span className="text-muted leading-5">
         {currentIndex + 1}/{totalCount}
       </span>
     ),

package/src/overlays/alert/Alert.tsx

@@ -31,7 +31,7 @@ import {
   useRole,
 } from "@floating-ui/react";
 import classNames from "classnames";
-import { useCallback, useLayoutEffect, useMemo } from "react";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
@@ -71,6 +71,14 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
    * cancel label
    */
   cancelLabel?: string;
+  /**
+   * placeholder for prompt
+   */
+  placeholder?: string;
+  /**
+   * default value for prompt
+   */
+  defaultValue?: string;
 }
 
 export const Alert = ({
@@ -85,8 +93,11 @@ export const Alert = ({
   type,
   okLabel,
   cancelLabel,
+  placeholder,
+  defaultValue,
 }: AlertProps) => {
   const { t } = useTranslation("core");
+  const [value, setValue] = useState(defaultValue);
   const { refs, context } = useFloating({
     open: true,
     onOpenChange: () => {
@@ -181,7 +192,19 @@ export const Alert = ({
 
             <Title className="font-medium area-[title]">{title}</Title>
             <p className="area-[message] py-4">{message}</p>
-            <div className="area-[message]">{message}</div>
+            {type === "prompt" && (
+              <input
+                value={value}
+                placeholder={placeholder}
+                className={classNames(
+                  "border rounded focus:border-primary-500",
+                )}
+                ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
+                onBlur={(e) => e.target.focus()}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleClose(value)}
+              />
+            )}
             <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
               <div
                 className="contents"

package/src/overlays/modal/Modal.tsx

@@ -95,7 +95,7 @@ export interface ModalProps
   /**
    * close handler
    */
-  onClose: (...args: AnyObject) => void;
+  onClose?: (...args: AnyObject) => void;
   /**
    * before close handler, return false to prevent close
    */
@@ -174,7 +174,7 @@ export const Modal = ({
       <FloatingOverlay
         lockScroll
         style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        className="bg-base/20 backdrop-blur-sm grid place-items-center"
       >
         <FloatingFocusManager context={context}>
           <dialog

package/src/overlays/tooltip/Tooltip.module.css

@@ -24,7 +24,7 @@
 @layer comp {
   .tooltip {
     z-index: var(--z-tooltip);
-    color: theme(backgroundColor.invert);
+    color: theme(backgroundColor.dimmed);
 
     &[data-color="primary"] {
       color: theme(colors.primary.600);

package/src/overlays/tooltip/Tooltip.tsx

@@ -153,7 +153,7 @@ export const Tooltip = ({
       return (
         <span
           role="none"
-          className="ms-2 cursor-pointer text-invert flex-content opacity-75 hover:opacity-90 active:opacity-60"
+          className="ms-2 cursor-pointer flex-content opacity-75 hover:opacity-90 active:opacity-60"
           onClick={handler}
         >
           <Icon icon={CoreIcons.copy} />
@@ -176,7 +176,7 @@ export const Tooltip = ({
             data-color={color}
             className={classNames(
               classes.tooltip,
-              "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current",
+              "select-none text-sm not-italic flex py-1 px-2 !max-w-64 rounded shadow-md bg-current",
             )}
             ref={refs.setFloating}
             style={floatingStyles}
@@ -184,8 +184,8 @@ export const Tooltip = ({
           >
             <span
               className={classNames(
-                "font-medium text-invert flex-1",
-                isString(content) && "whitespace-pre-wrap",
+                "font-medium text-dimmed flex-1",
+                isString(content) && "whitespace-pre-wrap mixed-lang",
               )}
             >
               {content}

package/src/types/icons.ts

@@ -90,6 +90,11 @@ export module CoreIcons {
   export const collapse =
     "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
 
+  export const expandActive =
+    "M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+  export const collapseActive =
+    "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+
   export const expandAll =
     "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
   export const colapseAll =
@@ -244,6 +249,7 @@ export module CoreIcons {
     "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
   export const pause =
     "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+  export const stop = "M18,18H6V6H18V18Z";
   export const volumeOn =
     "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   export const volumeOff =

package/src/types/index.ts

@@ -145,7 +145,10 @@ export interface RefProp<T = HTMLElement> {
 /* *********** */
 
 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-export type CallbackReturn<T = unknown> = void | T | Promise<T | void>;
+export type CallbackReturn<T = unknown> =
+  | undefined
+  | T
+  | Promise<T | undefined>;
 
 export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -155,7 +158,7 @@ export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType
 
 export type PolymorphicProps<AsTag extends ReactTag> = Omit<
   PropsOf<AsTag>,
-  "children" | "as" | "className"
+  "children" | "as" | "className" | "onClick"
 > & {
   /**
    * The component used for the root node.
@@ -236,3 +239,8 @@ export interface SizeObject {
   width: number;
   height: number;
 }
+
+export interface ScrollObject extends PositionObject, SizeObject {
+  scrollWidth?: number;
+  scrollHeight: number;
+}

package/src/typography/Abbr.tsx

@@ -26,7 +26,7 @@ import classNames from "classnames";
 import { Fragment, useCallback, useMemo } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
 import { Tooltip, getTooltipProps } from "../overlays/tooltip/Tooltip";
-import { type ChildProp, type ColorType } from "../types";
+import { type ChildProp, type ColorType, type CssProp } from "../types";
 import { getColor, getColorClass } from "../utils";
 import classes from "./Typography.module.css";
 
@@ -64,7 +64,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
   );
 };
 
-export interface AbbrProps extends ChildProp<string> {
+export interface AbbrProps extends ChildProp<string>, CssProp {
   /**
    * content to copy using the tooltip copy action
    */
@@ -87,6 +87,7 @@ export interface AbbrProps extends ChildProp<string> {
 export const Abbr = ({
   children,
   abbr,
+  className,
   renderer,
   copyContent = "text",
 }: AbbrProps) => {
@@ -148,5 +149,5 @@ export const Abbr = ({
   );
 
   /** ***************** component *******************/
-  return <span>{inner}</span>;
+  return <span className={className}>{inner}</span>;
 };