@iota/apps-ui-kit 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/ts-packages",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.7.5"
+    "@iota/apps-ui-icons": "0.7.6"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -58,12 +58,6 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {
-    "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
-    "prettier:fix": "prettier -w --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
-    "eslint:check": "eslint --max-warnings=0 .",
-    "eslint:fix": "pnpm run eslint:check --fix",
-    "lint": "pnpm run eslint:check && pnpm run prettier:check",
-    "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-package": "tsc --project tsconfig.package.json && vite build",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
+import type { ReactNode } from 'react';
 import { BadgeSize, BadgeType } from './badge.enums';
 import { BACKGROUND_COLORS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
@@ -18,9 +19,18 @@ interface BadgeProps {
      * The size of the badge
      */
     size?: BadgeSize;
+    /**
+     * An icon rendered before the label.
+     */
+    icon?: ReactNode;
 }
 
-export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): React.JSX.Element {
+export function Badge({
+    type,
+    label,
+    size = BadgeSize.Medium,
+    icon,
+}: BadgeProps): React.JSX.Element {
     const backgroundClasses = BACKGROUND_COLORS[type];
     const textClasses = TEXT_COLORS[type];
     const isSmall = size === BadgeSize.Small;
@@ -31,7 +41,8 @@ export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): Rea
     return (
         <div
             className={cx(
-                'inline-flex items-center space-x-2 rounded-full disabled:opacity-30',
+                'inline-flex items-center rounded-full disabled:opacity-30',
+                icon ? 'gap-xxs' : 'space-x-2',
                 { border: !isSmall },
                 { [BORDER_COLORS[type]]: !isSmall },
                 { 'badge-ring-outlined': isSmall && isOutlined },
@@ -39,6 +50,11 @@ export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): Rea
                 labelClasses,
             )}
         >
+            {icon && (
+                <span className={cx('flex h-4 w-4 items-center justify-center', textClasses)}>
+                    {icon}
+                </span>
+            )}
             <span className={cx(textSizeClass, textClasses)}>{label}</span>
         </div>
     );

package/src/lib/components/atoms/button/Button.tsx

@@ -26,7 +26,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * The text of the button.
      */
-    text?: string;
+    text?: React.ReactNode;
     /**
      The icon of the button
      */

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -98,7 +98,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 <span
                     onClick={() => inputRef.current?.click()}
                     className={cx(
-                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden',
+                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden shrink-0',
                         'checkbox-border-default',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked',
@@ -119,7 +119,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
     return (
-        <label htmlFor={name} className="checkbox-label checkbox-label-disabled">
+        <label htmlFor={name} className="checkbox-label checkbox-label-disabled flex-1">
             {label}
         </label>
     );

package/src/lib/components/atoms/divider/Divider.tsx

@@ -33,9 +33,8 @@ export function Divider({
     lineHeight = DEFAULT_LINE_HEIGHT,
 }: DividerProps): React.JSX.Element {
     // Set height and width of divider line based on type
-    const lineStyle = {
-        ...(type === DividerType.Horizontal ? { height: lineHeight } : { width: lineHeight }),
-    };
+    const lineStyle =
+        type === DividerType.Horizontal ? { height: lineHeight } : { width: lineHeight };
 
     let dividerSize = DIVIDER_FULL_WIDTH[type];
     if (width && type === DividerType.Horizontal) {

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -59,7 +59,7 @@ export function InfoBox({
                     {icon}
                 </span>
             )}
-            <div className="flex flex-col gap-1">
+            <div className="flex min-w-0 flex-col gap-1 [overflow-wrap:anywhere]">
                 {title && <span className="infobox-text-title text-title-sm">{title}</span>}
                 {supportingText && (
                     <span className="infobox-supporting-text text-body-sm">{supportingText}</span>

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -13,7 +13,7 @@ interface KeyValueProps {
     /**
      * The key of the KeyValue.
      */
-    keyText: string;
+    keyText: ReactNode;
     /**
      * An icon shown next to the key text (optional).
      */
@@ -62,6 +62,11 @@ interface KeyValueProps {
      * Reverse the KeyValue (optional).
      */
     isReverse?: boolean;
+    /**
+     * Use a receipt-style row with a dotted leader and right-aligned value.
+     * This is opt-in so existing KeyValueInfo layouts remain unchanged.
+     */
+    layout?: 'default' | 'receipt';
     /**
      * Text shown on value hover.
      */
@@ -82,9 +87,11 @@ export function KeyValueInfo({
     onCopyError,
     fullwidth,
     isReverse = false,
+    layout = 'default',
     valueHoverTitle,
 }: KeyValueProps): React.JSX.Element {
     const flexDirectionClass = isReverse ? 'flex-row-reverse' : 'flex-row';
+    const isReceiptLayout = layout === 'receipt';
     async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
         if (!navigator.clipboard) {
             return;
@@ -112,12 +119,12 @@ export function KeyValueInfo({
             )}
         >
             <div
-                className={cx('flex shrink-0 flex-row items-center gap-x-0.5', {
-                    'w-1/4': !fullwidth,
+                className={cx('flex max-w-full shrink-0 flex-row items-center gap-x-0.5', {
+                    'w-1/4': !fullwidth && !isReceiptLayout,
                 })}
             >
                 {keyIcon}
-                <span className="key-value-key-text-color break-normal text-body-md">
+                <span className="key-value-key-text-color min-w-0 break-words text-body-md">
                     {keyText}
                 </span>
                 {tooltipText && (
@@ -126,10 +133,18 @@ export function KeyValueInfo({
                     </Tooltip>
                 )}
             </div>
+            {isReceiptLayout && !fullwidth && (
+                <span
+                    aria-hidden="true"
+                    className="mb-1 min-w-[0.5rem] flex-1 border-b border-dotted border-iota-neutral-80 opacity-60 dark:border-iota-neutral-20"
+                />
+            )}
             <div
                 className={cx('flex min-w-0 flex-row items-baseline gap-1 break-all', {
-                    'w-3/4': !fullwidth,
+                    'w-3/4': !fullwidth && !isReceiptLayout,
+                    'max-w-[60%] justify-end text-right': !fullwidth && isReceiptLayout,
                     'flex-wrap': fullwidth,
+                    'justify-end text-right': fullwidth && isReceiptLayout,
                     truncate: isTruncated,
                 })}
             >

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRef, useState, useLayoutEffect } from 'react';
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
@@ -16,6 +16,13 @@ interface TooltipProps {
     closeDelay?: number;
 }
 
+const OPPOSITE_POSITION: Record<TooltipPosition, TooltipPosition> = {
+    [TooltipPosition.Top]: TooltipPosition.Bottom,
+    [TooltipPosition.Bottom]: TooltipPosition.Top,
+    [TooltipPosition.Left]: TooltipPosition.Right,
+    [TooltipPosition.Right]: TooltipPosition.Left,
+};
+
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
@@ -29,7 +36,7 @@ export function Tooltip({
     const tooltipRef = useRef<HTMLDivElement>(null);
 
     const [visible, setVisible] = useState(false);
-    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+    const [coords, setCoords] = useState({ top: 0, left: 0, overlapsTrigger: false });
 
     const openTimer = useRef<ReturnType<typeof setTimeout>>();
     const closeTimer = useRef<ReturnType<typeof setTimeout>>();
@@ -49,54 +56,110 @@ export function Tooltip({
         closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
     };
 
-    useLayoutEffect(() => {
-        if (!visible) return;
-
-        const rect = triggerRef.current?.getBoundingClientRect();
-        if (!rect) return;
-
-        const pos = {
+    const computePosition = (rect: DOMRect, placement: TooltipPosition) =>
+        ({
             [TooltipPosition.Top]: {
                 top: rect.top - offset,
                 left: rect.left + rect.width / 2,
                 transform: 'translate(-50%, -100%)',
+                anchorX: 0.5,
+                anchorY: 1,
             },
             [TooltipPosition.Bottom]: {
                 top: rect.bottom + offset,
                 left: rect.left + rect.width / 2,
                 transform: 'translate(-50%, 0)',
+                anchorX: 0.5,
+                anchorY: 0,
             },
             [TooltipPosition.Left]: {
                 top: rect.top + rect.height / 2,
                 left: rect.left - offset,
                 transform: 'translate(-100%, -50%)',
+                anchorX: 1,
+                anchorY: 0.5,
             },
             [TooltipPosition.Right]: {
                 top: rect.top + rect.height / 2,
                 left: rect.right + offset,
                 transform: 'translate(0, -50%)',
+                anchorX: 0,
+                anchorY: 0.5,
             },
-        }[position];
+        })[placement];
+
+    const clampDelta = (boxStart: number, size: number, viewportSize: number, margin: number) => {
+        const boxEnd = boxStart + size;
+        if (boxEnd > viewportSize - margin) return viewportSize - margin - boxEnd;
+        if (boxStart < margin) return margin - boxStart;
+        return 0;
+    };
+
+    useLayoutEffect(() => {
+        if (!visible) return;
 
-        setCoords({ top: pos.top, left: pos.left });
-        tooltipRef.current!.style.transform = pos.transform;
+        const rect = triggerRef.current?.getBoundingClientRect();
+        const tooltipEl = tooltipRef.current;
+        if (!rect || !tooltipEl) return;
+
+        const { width, height } = tooltipEl.getBoundingClientRect();
+        const margin = 8;
+        const isVertical = position === TooltipPosition.Top || position === TooltipPosition.Bottom;
+
+        const fitsMainAxis = (pos: ReturnType<typeof computePosition>) =>
+            isVertical
+                ? clampDelta(pos.top - height * pos.anchorY, height, window.innerHeight, margin) ===
+                  0
+                : clampDelta(pos.left - width * pos.anchorX, width, window.innerWidth, margin) ===
+                  0;
+
+        let pos = computePosition(rect, position);
+        if (!fitsMainAxis(pos)) {
+            const flipped = computePosition(rect, OPPOSITE_POSITION[position]);
+            if (fitsMainAxis(flipped)) pos = flipped;
+        }
+        tooltipEl.style.transform = pos.transform;
+
+        const boxLeft = pos.left - width * pos.anchorX;
+        const boxTop = pos.top - height * pos.anchorY;
+
+        const deltaX = clampDelta(boxLeft, width, window.innerWidth, margin);
+        const deltaY = clampDelta(boxTop, height, window.innerHeight, margin);
+
+        const left = boxLeft + deltaX;
+        const top = boxTop + deltaY;
+        const overlapsTrigger =
+            left < rect.right &&
+            left + width > rect.left &&
+            top < rect.bottom &&
+            top + height > rect.top;
+
+        setCoords({ top: pos.top + deltaY, left: pos.left + deltaX, overlapsTrigger });
     }, [visible, position, offset]);
 
     useLayoutEffect(() => {
         if (!visible) return;
-        const update = () => {
-            const rect = triggerRef.current?.getBoundingClientRect();
-            if (!rect) return;
-            setCoords((prev) => ({ ...prev, left: rect.left + rect.width / 2 }));
+        const dismiss = () => {
+            clearTimers();
+            setVisible(false);
         };
-        window.addEventListener('scroll', update, true);
-        window.addEventListener('resize', update);
+        window.addEventListener('scroll', dismiss, true);
+        window.addEventListener('resize', dismiss);
         return () => {
-            window.removeEventListener('scroll', update, true);
-            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', dismiss, true);
+            window.removeEventListener('resize', dismiss);
         };
     }, [visible]);
 
+    // Keeps a link or button wrapping the trigger from acting on clicks meant to open the tooltip.
+    const handleTriggerClick = (event: MouseEvent<HTMLDivElement>) => {
+        const interactive = (event.target as Element).closest('a, button');
+        if (!interactive || triggerRef.current?.contains(interactive)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        open();
+    };
+
     // z-[9999999999]: needed because we must exceed the popup’s ≈2 147 483 647 z-index;
     // otherwise the tooltip renders but stays invisible inside a Chrome extension
     const base = 'z-[9999999999] w-max rounded p-xs tooltip-bg tooltip-text-color';
@@ -110,6 +173,7 @@ export function Tooltip({
                 onFocus={open}
                 onMouseLeave={close}
                 onBlur={close}
+                onClick={handleTriggerClick}
             >
                 {children}
             </div>
@@ -126,7 +190,11 @@ export function Tooltip({
                             transition: 'opacity .15s ease',
                             opacity: 1,
                         }}
-                        className={cx(base, maxWidth)}
+                        className={cx(
+                            base,
+                            maxWidth,
+                            coords.overlapsTrigger && 'pointer-events-none',
+                        )}
                         onMouseEnter={open}
                         onMouseLeave={close}
                     >

package/src/lib/components/molecules/card/CardAction.tsx

@@ -6,7 +6,7 @@ import { CardActionType } from './card.enums';
 import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 
 export type CardActionProps = {
-    title?: string;
+    title?: React.ReactNode;
     subtitle?: string | React.ReactNode;
     type: CardActionType;
     onClick?: () => void;
@@ -51,7 +51,7 @@ export function CardAction({
                     <div className="card-action-title-color font-inter text-label-md">{title}</div>
                 )}
                 {subtitle && (
-                    <div className="card-action-subtitle-color font-inter text-label-sm">
+                    <div className="card-action-subtitle-color flex flex-row justify-end font-inter text-label-sm">
                         {subtitle}
                     </div>
                 )}

package/src/lib/components/molecules/card/CardBody.tsx

@@ -6,7 +6,7 @@ import { Tooltip } from '@/components/atoms/tooltip';
 import type { TooltipPosition } from '@/components/atoms/tooltip';
 
 export type CardBodyProps = {
-    title: string;
+    title: ReactNode;
     subtitle?: string | ReactNode;
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -28,7 +28,7 @@ interface DisplayStatsProps {
     /**
      * The tooltip text.
      */
-    tooltipText?: string;
+    tooltipText?: ReactNode;
     /**
      * The value of the stats.
      */
@@ -123,7 +123,7 @@ export function DisplayStats({
                 {icon && <span className="display-stats-icon-color">{icon}</span>}
             </div>
             <div className="flex w-full flex-row items-baseline gap-xxs">
-                <span className={cx('break-all', valueClass)}>{value}</span>
+                <span className={cx('min-w-0 break-all', valueClass)}>{value}</span>
                 {supportingLabel && (
                     <span className={cx('opacity-40', supportingLabelTextClass)}>
                         {supportingLabel}

package/src/lib/components/molecules/input/Input.tsx

@@ -31,7 +31,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Trailing element that is shown after the input
      */
@@ -47,7 +47,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * Text that is shown below the value of the input.
      */
-    supportingValue?: string | null;
+    supportingValue?: React.ReactNode;
     /**
      * Default value of the input
      */

package/src/lib/components/molecules/input/InputWrapper.tsx

@@ -5,6 +5,7 @@ import cx from 'classnames';
 import { SecondaryText } from '@/components/atoms/secondary-text';
 import { LABEL_CLASSES } from './input.classes';
 import { createElement } from 'react';
+import type { ReactNode } from 'react';
 
 export enum LabelHtmlTag {
     Label = 'label',
@@ -19,7 +20,7 @@ export interface InputWrapperProps {
     /**
      * Shows a caption with the text below the input.
      */
-    caption?: string;
+    caption?: ReactNode;
     /**
      * Error Message. Overrides the caption.
      */
@@ -27,7 +28,7 @@ export interface InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Is the input required
      */

package/src/lib/components/molecules/select/Select.tsx

@@ -17,8 +17,7 @@ export type SelectOption =
     | { id: string; label: React.ReactNode };
 
 interface SelectProps
-    extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>,
-        React.AriaAttributes {
+    extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>, React.AriaAttributes {
     /**
      * The selected option value.
      */

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -17,15 +17,21 @@ interface TableCellBaseProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
+    /**
+     * The number of columns the cell should span.
+     */
+    colSpan?: number;
 }
 
 export function TableCellBase({
     children,
     hasLastBorderNoneClass,
     isContentCentered,
+    colSpan,
 }: PropsWithChildren<TableCellBaseProps>) {
     return (
         <td
+            colSpan={colSpan}
             className={cx(
                 'table-cell-border-color h-14  border-b px-md',
                 { 'last:border-none': hasLastBorderNoneClass },

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -30,6 +30,13 @@ export interface AccordionHeaderProps {
      * Flag for hiding border.
      */
     hideBorder?: boolean;
+
+    /**
+     * Disable the header state layer while an interactive child is active.
+     * This keeps the parent hover treatment from competing with child links
+     * and controls.
+     */
+    disableStateLayer?: boolean;
 }
 
 interface AccordionContentProps {
@@ -44,6 +51,7 @@ export function AccordionHeader({
     children,
     isExpanded,
     hideArrow,
+    disableStateLayer = false,
 }: PropsWithChildren<AccordionHeaderProps>) {
     return (
         <div
@@ -51,7 +59,8 @@ export function AccordionHeader({
             role="button"
             aria-expanded={isExpanded}
             className={cx(
-                'state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
+                'relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
+                !disableStateLayer && 'state-layer',
                 {
                     'pr-md--rs': !hideArrow,
                 },

package/src/lib/components/organisms/table/Table.tsx

@@ -8,6 +8,7 @@ import type { ButtonProps } from '@/components/atoms';
 import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
 import { TableCellBase, TableHeaderCell } from '@/components/molecules';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
+import { INTERACTIVE_ELEMENT_SELECTOR } from '@/lib/constants';
 
 export interface TablePaginationOptions {
     /**
@@ -147,7 +148,7 @@ export function Table({
                                     />
                                 </>
                             )}
-                            {action && action}
+                            {action}
                         </div>
                     )}
                     {supportingLabel || pageSizeSelector ? (
@@ -174,12 +175,39 @@ export function TableHeader({ children }: PropsWithChildren): JSX.Element {
     return <thead>{children}</thead>;
 }
 
+function isRowClickIgnored(event: React.MouseEvent<HTMLTableRowElement>): boolean {
+    const interactiveElement =
+        event.target instanceof Element && event.target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+    if (interactiveElement && event.currentTarget.contains(interactiveElement)) return true;
+    return !!window.getSelection()?.toString();
+}
+
 export function TableRow({
     children,
     leading,
-}: PropsWithChildren<{ leading?: React.ReactNode }>): JSX.Element {
+    onClick,
+    onAuxClick,
+}: PropsWithChildren<{
+    leading?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLTableRowElement>;
+}>): JSX.Element {
+    function withRowClickGuard(handler?: React.MouseEventHandler<HTMLTableRowElement>) {
+        if (!handler) return undefined;
+        return (event: React.MouseEvent<HTMLTableRowElement>) => {
+            if (!isRowClickIgnored(event)) handler(event);
+        };
+    }
+
     return (
-        <tr>
+        <tr
+            onClick={withRowClickGuard(onClick)}
+            onAuxClick={withRowClickGuard(onAuxClick)}
+            className={cx({
+                'cursor-pointer row-hover:bg-shader-neutral-light-8 dark:row-hover:bg-shader-neutral-dark-8 inner-link:-mx-xxs inner-link:rounded inner-link:px-xxs inner-link:transition-colors inner-link-hover:bg-iota-primary-90/30 inner-link-hover:ring-1 inner-link-hover:ring-iota-primary-70/60 dark:inner-link-hover:bg-iota-primary-70/30':
+                    onClick,
+            })}
+        >
             {leading}
             {children}
         </tr>

package/src/lib/constants/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './colors.constants';
+export * from './interactive.constants';

package/src/lib/constants/interactive.constants.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const INTERACTIVE_ELEMENT_SELECTOR = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="link"]',
+    '[role="switch"]',
+].join(',');
+
+export const ROW_LINK_ATTRIBUTE = 'data-row-link';
+
+export const ROW_LINK_PROPS = { [ROW_LINK_ATTRIBUTE]: true } as const;

package/src/lib/styles/base.css

@@ -40,8 +40,9 @@
     }
 
     :root.names {
-        --roboto-flex-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750,
-            'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 640, 'slnt' 0, 'wdth' 130;
+        --roboto-flex-variation-settings:
+            'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
+            'YTLC' 514, 'YTUC' 640, 'slnt' 0, 'wdth' 130;
 
         .text-display-lg,
         .text-display-md,

package/src/lib/tailwind/base.presets.ts

@@ -16,13 +16,13 @@ import {
     generateVariableSpacing,
 } from './constants';
 import { THEMED_CUSTOM_COLORS } from './constants/customColors.constants';
-import { firefoxPlugin, namesVariant } from './plugins';
+import { firefoxPlugin, namesVariant, tableRowVariants } from './plugins';
 import { NAMES_GRADIENTS } from './constants/gradients.constants';
 
 export const BASE_CONFIG: Config = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
     darkMode: 'selector',
-    plugins: [firefoxPlugin, namesVariant],
+    plugins: [firefoxPlugin, namesVariant, tableRowVariants],
     theme: {
         extend: {
             fontSize: {