@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/BottomSheet/types.ts

@@ -0,0 +1,172 @@
+import { ComponentPropsWithoutRef, DOMAttributes, ReactNode, RefObject } from 'react';
+
+/** Props returned by use-gesture's `bind()`, spread onto a drag target. */
+export type DragBindProps = Partial<DOMAttributes<EventTarget>>;
+
+/** The `bind` function produced by use-gesture's `useDrag`. */
+export type DragBind = (args?: { closeOnTap?: boolean }) => DragBindProps;
+
+export type SnapPointProps = {
+    /**
+     * The height of the sticky footer, if there's one
+     */
+    footerHeight: number;
+    /**
+     * The height of the sticky header, if there's one
+     */
+    headerHeight: number;
+    /**
+     * If the bottom sheet is animating to a snap point the height will match the destination height, not the height the bottom sheet might have in the middle of the animation. It includes the header and footer heights.
+     */
+    height: number;
+    /**
+     * Max height the sheet can be, your snap points are capped to this value. It's window.innerHeight by default but can be overriden using the maxHeight prop.
+     */
+    maxHeight: number;
+    /**
+     * Minimum height needed to avoid scroll overflow in the content area, if possible.
+     */
+    minHeight: number;
+};
+
+export type snapPoints = (props: SnapPointProps) => number[] | number;
+
+/**
+ * `window` comes from window.onresize, maxheightprop is if the `maxHeight` prop is used, and `element` comes from the resize observers that listens to header, footer and the content area
+ */
+export type ResizeSource = 'window' | 'maxheightprop' | 'element';
+
+export type defaultSnapProps = {
+    /** The last snap point the user dragged to, if any. 0 if the user haven't interacted */
+    lastSnap: number | null;
+    /** The snap points currently in use, this can be controlled by providing a `snapPoints` function on the bottom sheet. */
+    snapPoints: number[];
+} & SnapPointProps;
+
+/* Might make sense to expose a preventDefault method here */
+export type SpringEvent =
+    | { type: 'OPEN' }
+    | { type: 'CLOSE' }
+    | { source: ResizeSource; type: 'RESIZE' }
+    | { source: 'dragging' | 'custom' | string; type: 'SNAP' };
+
+export type Props = {
+    /**
+     * Ensure that whatever you put in here have at least 1px height, or else the bottom sheet won't open
+     */
+    children: ReactNode;
+
+    /**
+     * Additional CSS class for the container.
+     */
+    className?: string;
+
+    /**
+     * Handler that is called to get the initial height of the bottom sheet when it's opened (or when the viewport is resized).
+     * @default ({ snapPoints, lastSnap }) => lastSnap ?? Math.min(...snapPoints)
+     */
+    defaultSnap?: number | ((props: defaultSnapProps) => number);
+    /**
+     * Whether to disable the BottomSheet's own scrolling (useful when children handle their own scrolling)
+     * @default false
+     */
+    disableScroll?: boolean;
+
+    /**
+     * Renders a sticky footer at the bottom of the sheet.
+     */
+    footer?: ReactNode;
+
+    /**
+     * Renders a title/description header below the drag handle. Omit to render no header.
+     */
+    header?: {
+        description: ReactNode;
+        title: ReactNode;
+    };
+
+    /**
+     * A reference to the element that should be focused. By default it'll be the first interactive element.
+     * Set to false to disable keyboard focus when opening.
+     */
+    initialFocusRef?: RefObject<HTMLElement> | false;
+
+    /**
+     * By default the maxHeight is set to window.innerHeight to match 100vh, and responds to window resize events.
+     * You can override it by giving maxHeight a number, just make sure you handle things like resize events when needed.
+     */
+    maxHeight?: number;
+
+    /**
+     * Minimum height for the bottom sheet in pixels. Ensures usable height on small screens.
+     * @default 300
+     */
+    minHeight?: number;
+
+    /**
+     * Handler that is called when the close animation completes.
+     * This is useful for cleanup actions or state updates that should happen after the sheet is fully closed.
+     */
+    onCloseEnd?: () => void;
+
+    /**
+     * Handler that is called when the user presses *esc*, clicks outside the dialog or drags the sheet to the bottom of the display.
+     */
+    onDismiss?: () => void;
+
+    /**
+     * A running transition didn't finish or got stopped, this event isn't awaited on and might happen
+     * after the sheet is unmounted (if it were in the middle of something).
+     */
+    onSpringCancel?: (event: SpringEvent) => void;
+
+    /**
+     * The transition ended successfully. Handy to know when it's safe to unmount
+     * the sheet without interrupting the closing animation.
+     * Return a promise or async to delay the start of the transition, just remember it can be cancelled.
+     */
+    onSpringEnd?: (event: SpringEvent) => void;
+
+    /**
+     * Start a transition from closed to open, open to closed, or snap to snap.
+     * Return a promise or async to delay the start of the transition, just remember it can be cancelled.
+     */
+    onSpringStart?: (event: SpringEvent) => void;
+
+    /** Whether the bottom sheet is open or not. */
+    open: boolean;
+
+    /**
+     * Ensures that drag interactions works properly on iOS and Android.
+     * If setting this to `false`make sure you test on real iOS and Android devices to ensure the dragging interactions don't break.
+     * @default true
+     */
+    scrollLocking?: boolean;
+
+    /**
+     * Handler that is called to get the height values that the bottom sheet can *snap* to when the user stops dragging.
+     * @default ({ minHeight }) => minHeight
+     */
+    snapPoints?: snapPoints;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+
+export interface RefHandles {
+    /**
+     * Returns the current snap point, in other words the height.
+     * It's update lifecycle with events are onSpringStart and onSpringCancel will give you the old value, while onSpringEnd will give you the current one.
+     */
+    height: number;
+
+    /**
+     * When given a number it'll find the closest snap point, so you don't need to know the exact value,
+     * Use the callback method to access what snap points you can choose from.
+     *
+     * Use the second argument for advanced settings like:
+     * `source: string` which is passed to onSpring events, and is 'custom' by default
+     * `velocity: number` which is 1 by default, adjust it to control the speed of the spring transition to the new snap point
+     */
+    snapTo: (
+        numberOrCallback: number | ((state: defaultSnapProps) => number),
+        options?: { source?: string; velocity?: number }
+    ) => void;
+}

package/src/BottomSheet/utils.ts

@@ -0,0 +1,65 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-self-compare */
+
+// stolen from lodash
+export const clamp = (number: number, lower: number, upper: number) => {
+    number = Number(number);
+    lower = Number(lower);
+    upper = Number(upper);
+    lower = lower === lower ? lower : 0;
+    upper = upper === upper ? upper : 0;
+    if (number === number) {
+        number = number <= upper ? number : upper;
+        number = number >= lower ? number : lower;
+    }
+    return number;
+};
+
+// Mwahaha easiest way to filter out NaN I ever saw! >:3
+export const deleteNaN = (arr: number[]) => {
+    const set = new Set(arr);
+    set.delete(NaN);
+    return [...set];
+};
+
+export const roundAndCheckForNaN = (unrounded: number) => {
+    const rounded = Math.round(unrounded);
+    if (Number.isNaN(unrounded)) {
+        throw new TypeError('Found a NaN! Check your snapPoints / defaultSnap / snapTo ');
+    }
+
+    return rounded;
+};
+
+// Validate, sanitize, round and dedupe snap points, as well as extracting the minSnap and maxSnap points
+export const processSnapPoints = (unsafeSnaps: number | number[], maxHeight: number) => {
+    // @ts-expect-error - we're not sure what the type of unsafeSnaps is, but we know it's a number or an array of numbers
+    const safeSnaps = [].concat(unsafeSnaps).map(roundAndCheckForNaN);
+
+    // Get actual viewport height for hard capping
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : maxHeight;
+    // Use the smaller of maxHeight or actual viewport height as the absolute limit
+    const absoluteMaxHeight = Math.min(maxHeight, viewportHeight);
+
+    const snapPointsDedupedSet = safeSnaps.reduce((acc, snapPoint) => {
+        acc.add(clamp(snapPoint, 0, absoluteMaxHeight));
+        return acc;
+    }, new Set<number>());
+
+    const snapPoints = Array.from(snapPointsDedupedSet);
+
+    const minSnap = Math.min(...snapPoints);
+    if (Number.isNaN(minSnap)) {
+        throw new TypeError('minSnap is NaN');
+    }
+    const maxSnap = Math.max(...snapPoints);
+    if (Number.isNaN(maxSnap)) {
+        throw new TypeError('maxSnap is NaN');
+    }
+
+    return {
+        maxSnap,
+        minSnap,
+        snapPoints,
+    };
+};

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,126 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ReactElement, useMemo } from 'react';
+
+import { useHorizontalScrollFade } from '../hooks/useHorizontalScrollFade';
+import { ArrowLeft, CaretRight } from '../Icons';
+import { SubtleWeakLink } from '../Typography/Links/Links';
+
+type Props = {
+    'aria-label'?: string;
+    breadcrumbs?: {
+        href: string;
+        label: string;
+    }[];
+    className?: string;
+    onClick: (href: string, label: string) => void;
+} & (
+    | {
+          backHref?: string;
+          backText?: string;
+          showBackLink?: false;
+      }
+    | {
+          backHref: string;
+          backText: string;
+          showBackLink: true;
+      }
+);
+
+export const Breadcrumbs = ({
+    'aria-label': ariaLabel = 'breadcrumbs',
+    backHref,
+    backText = 'Back',
+    breadcrumbs: propBreadcrumbs,
+    className,
+    onClick,
+    showBackLink = false,
+}: Props) => {
+    const { leftFadeClass, ref, rightFadeClass } = useHorizontalScrollFade();
+
+    const backNode = useMemo(
+        () =>
+            showBackLink ? (
+                <>
+                    <SubtleWeakLink
+                        aria-label={`Navigate to ${backText}`}
+                        className="flex items-center"
+                        href={backHref}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            onClick(backHref!, backText!);
+                        }}
+                        size="xs"
+                    >
+                        <ArrowLeft
+                            className="mr-1 max-h-[14px] min-h-[14px] min-w-[14px] max-w-[14px]"
+                            color="primary"
+                            role="none"
+                            size="xs"
+                        />
+                        {backText}
+                    </SubtleWeakLink>
+                    <div className="mx-2 h-3 border-l border-border-secondary"></div>
+                </>
+            ) : null,
+        [showBackLink, backHref, backText, onClick]
+    );
+
+    const breadcrumbs = useMemo(() => {
+        if (!propBreadcrumbs) {
+            return null;
+        }
+
+        const breadcrumbs: ReactElement[] = [];
+
+        propBreadcrumbs.forEach(({ href, label }, i) => {
+            breadcrumbs.push(
+                <SubtleWeakLink
+                    aria-label={`Navigate to ${label}`}
+                    href={href}
+                    key={href}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        onClick(href, label);
+                    }}
+                    size="xs"
+                >
+                    {label}
+                </SubtleWeakLink>
+            );
+
+            if (i !== propBreadcrumbs.length - 1) {
+                breadcrumbs.push(
+                    <CaretRight
+                        className="mx-1 max-h-[14px] min-h-[14px] min-w-[14px] max-w-[14px]"
+                        color="primary"
+                        key={`separator-${i}`}
+                        role="none"
+                        size="xs"
+                    />
+                );
+            }
+        });
+
+        return breadcrumbs;
+    }, [propBreadcrumbs, onClick]);
+
+    return (
+        <div
+            className={cn('relative -ml-2', className)}
+            data-hui-id="Breadcrumbs"
+        >
+            <nav
+                aria-label={ariaLabel}
+                className={cn(
+                    'scrollbar-hide flex flex-row items-center overflow-x-auto whitespace-nowrap p-2',
+                    leftFadeClass,
+                    rightFadeClass
+                )}
+                ref={ref}
+            >
+                {backNode}
+                {breadcrumbs}
+            </nav>
+        </div>
+    );
+};

package/src/Button/Button.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, MouseEventHandler, useCallback, useMemo } from 'react';
+
+import { iconSizesToPixels } from '../Icons/IconBase';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
+import { Props } from './Button.types';
+import {
+    filledCriticalClasses,
+    filledInverseClasses,
+    filledNeutralClasses,
+    filledPrimaryClasses,
+    outlinedCriticalClasses,
+    outlinedInverseClasses,
+    outlinedNeutralClasses,
+    outlinedPrimaryClasses,
+    transparentCriticalClasses,
+    transparentInverseClasses,
+    transparentNeutralClasses,
+    transparentPrimaryClasses,
+} from './buttonColorClasses';
+
+/**
+ * A wonderful HUI button. Inherits all props from a normal HTML button.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+export const Button = forwardRef<HTMLButtonElement, Props>(
+    (
+        {
+            as: Component = 'button',
+            children,
+            className,
+            dataTestId = 'Button',
+            disabled = false,
+            iconLeft: IconLeft,
+            iconRight: IconRight,
+            iconStyle = 'bold',
+            inlineStyles,
+            loading = false,
+            onClick: onClickProp,
+            size = 'md',
+            style = 'primary',
+            variant = 'filled',
+            ...rest
+        },
+        ref
+    ) => {
+        const onClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+            (e) => {
+                if (!disabled && !loading && onClickProp) {
+                    onClickProp(e);
+                }
+
+                // Handle the case where the button is in a Form and shouldnt trigger the form's onSubmit callback
+                if (disabled || loading) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            },
+            [disabled, loading, onClickProp]
+        );
+
+        const colorClasses = useMemo(
+            () => ({
+                [filledCriticalClasses]: variant === 'filled' && style === 'critical',
+                [filledInverseClasses]: variant === 'filled' && style === 'inverse',
+                [filledNeutralClasses]: variant === 'filled' && style === 'neutral',
+                [filledPrimaryClasses]: variant === 'filled' && style === 'primary',
+                [outlinedCriticalClasses]: variant === 'outlined' && style === 'critical',
+                [outlinedInverseClasses]: variant === 'outlined' && style === 'inverse',
+                [outlinedNeutralClasses]: variant === 'outlined' && style === 'neutral',
+                [outlinedPrimaryClasses]: variant === 'outlined' && style === 'primary',
+                [transparentCriticalClasses]: variant === 'transparent' && style === 'critical',
+                [transparentInverseClasses]: variant === 'transparent' && style === 'inverse',
+                [transparentNeutralClasses]: variant === 'transparent' && style === 'neutral',
+                [transparentPrimaryClasses]: variant === 'transparent' && style === 'primary',
+            }),
+            [style, variant]
+        );
+
+        const sizeClasses = useMemo(
+            () =>
+                cn({
+                    'gap-[4px] px-sm py-[13px] leading-[8px]': size === 'sm',
+                    'gap-[6px] px-md py-sm align-text-bottom leading-[10px]': size === 'md',
+                }),
+            [size]
+        );
+
+        const iconClasses = cn('absolute group-aria-busy:text-transparent');
+
+        return (
+            <Component
+                aria-busy={loading}
+                aria-live="polite"
+                className={cn(
+                    'hui-focus-visible-outline relative flex max-w-full items-center justify-center whitespace-nowrap rounded-button text-center font-primary tracking-[var(--letter-spacing-button)] outline outline-1 -outline-offset-1 transition-colors disabled:text-text-disabled',
+                    colorClasses,
+                    sizeClasses,
+                    className
+                )}
+                data-testid={dataTestId}
+                disabled={disabled && !loading}
+                onClick={onClick}
+                ref={ref}
+                style={{
+                    fontSize: size === 'sm' ? 'var(--font-size-button-200)' : 'var(--font-size-button-100)',
+                    fontWeight: 'var(--font-weight-button)',
+                    textTransform: 'var(--text-transform-button)',
+                    ...inlineStyles,
+                }}
+                {...rest}
+            >
+                {IconLeft && (
+                    <div
+                        className="relative flex items-center justify-center"
+                        style={{ width: `${size === 'md' ? iconSizesToPixels['sm'] : iconSizesToPixels['xs']}px` }}
+                    >
+                        <IconLeft
+                            className={iconClasses}
+                            size={size === 'md' ? 'sm' : 'xs'}
+                            style={iconStyle}
+                        />
+                    </div>
+                )}
+
+                {children}
+                {IconRight && (
+                    <div
+                        className="relative flex items-center justify-center"
+                        style={{ width: `${size === 'md' ? iconSizesToPixels['sm'] : iconSizesToPixels['xs']}px` }}
+                    >
+                        <IconRight
+                            className={iconClasses}
+                            size={size === 'md' ? 'sm' : 'xs'}
+                            style={iconStyle}
+                        />
+                    </div>
+                )}
+
+                {loading && (
+                    <LoadingSpinner
+                        className={cn('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform', {
+                            'text-critical-500': variant !== 'filled' && style === 'critical',
+                            'text-icon-inverse':
+                                (variant === 'filled' && style !== 'inverse') ||
+                                ((variant === 'outlined' || variant === 'transparent') && style === 'inverse'),
+                            'text-primary-500':
+                                (variant !== 'filled' && style === 'primary') ||
+                                (variant === 'filled' && style === 'inverse'),
+                            'text-surface-500': variant !== 'filled' && style === 'neutral',
+                        })}
+                        color="inherit"
+                        size={size === 'md' ? 'sm' : 'xs'}
+                    />
+                )}
+            </Component>
+        );
+    }
+);
+
+Button.displayName = 'Button';

package/src/Button/Button.types.ts

@@ -0,0 +1,80 @@
+import type { ComponentProps, ElementType, HTMLProps } from 'react';
+
+import type { AnyIcon } from '../Icons/anyIcon';
+import type { IconComponent } from '../Icons/IconBase';
+
+export type ButtonStyle = 'primary' | 'critical' | 'neutral' | 'inverse';
+export type ButtonVariant = 'filled' | 'outlined' | 'transparent';
+
+export type InlineStyles = {
+    inlineStyles?: HTMLProps<HTMLDivElement>['style'];
+};
+
+export type Props = {
+    as?: ElementType;
+    /**
+     * Optional test ID for targeting in tests.
+     *
+     * @default 'Button'
+     *
+     * Usage:
+     * ```tsx
+     * <Button dataTestId="submit-form">Submit</Button>
+     * ```
+     */
+    dataTestId?: string;
+    /**
+     * Optional icon to show alongside the left of the component.
+     *
+     * Usage:
+     * ```tsx
+     * <Button iconLeft={HeartStraight} />
+     * ```
+     */
+    iconLeft?: AnyIcon;
+    /**
+     * Optional icon to show alongside the right of the component.
+     *
+     * Usage:
+     * ```tsx
+     * <Button iconRight={HeartStraight} />
+     * ```
+     */
+    iconRight?: AnyIcon;
+    /**
+     * Optional icon style to show alongside the component.
+     *
+     * Usage:
+     * ```tsx
+     * <Button iconStyle="fill" />
+     * ```
+     */
+    iconStyle?: ComponentProps<IconComponent>['style'];
+
+    /**
+     * Optional loading state trigger. Disables button and adds a loading state.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Button size.
+     *
+     * @default 'md'
+     */
+    size?: 'md' | 'sm';
+    /**
+     * Button style. This matches a color palette in the theme.
+     *
+     * @default 'primary'
+     */
+    style?: ButtonStyle;
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * What kind of button to render. `filled`, `outlined`, or `transparent`.
+     *
+     * @default 'filled'
+     */
+    variant?: ButtonVariant;
+} & Omit<HTMLProps<HTMLButtonElement>, 'style' | 'size' | 'as'> &
+    InlineStyles;

package/src/Button/buttonColorClasses.ts

@@ -0,0 +1,53 @@
+import { cn } from '@evolve.ui/theme-system';
+
+/**
+ * Color class constants shared between Button and IconButton components.
+ * Each constant represents a combination of variant (filled/outlined/transparent) and style (primary/critical/neutral/inverse).
+ */
+
+export const filledPrimaryClasses = cn(
+    'bg-primary-500 text-text-inverse outline-transparent hover:bg-primary-700 active:bg-primary-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-primary-500 aria-busy:text-transparent'
+);
+
+export const filledCriticalClasses = cn(
+    'bg-critical-500 text-text-inverse outline-transparent hover:bg-critical-700 active:bg-critical-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-critical-500 aria-busy:text-transparent'
+);
+
+export const filledNeutralClasses = cn(
+    'bg-surface-500 text-text-inverse outline-transparent hover:bg-surface-700 active:bg-surface-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-surface-500 aria-busy:text-transparent'
+);
+
+export const filledInverseClasses = cn(
+    'bg-surface-50 text-primary-500 outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-surface-100 active:bg-surface-200 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'
+);
+
+export const outlinedNeutralClasses = cn(
+    'bg-background-primary text-surface-500 outline outline-1 outline-current hover:bg-surface-100 hover:text-surface-700 active:bg-surface-200 active:text-surface-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-surface-500'
+);
+export const outlinedPrimaryClasses = cn(
+    'bg-background-primary text-primary-500 outline outline-1 outline-current hover:bg-primary-100 hover:text-primary-700 active:bg-primary-200 active:text-primary-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-primary-500'
+);
+
+export const outlinedCriticalClasses = cn(
+    'bg-background-primary text-critical-500 outline outline-1 outline-current hover:bg-critical-100 hover:text-critical-700 active:bg-critical-200 active:text-critical-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-critical-500'
+);
+
+export const outlinedInverseClasses = cn(
+    'outline-solid bg-transparent text-icon-inverse outline outline-1 outline-surface-50 focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse focus:outline-focus-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:text-text-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'
+);
+
+export const transparentPrimaryClasses = cn(
+    'bg-transparent text-primary-500 outline-transparent hover:bg-background-hover hover:text-primary-700 active:bg-background-pressed active:text-primary-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'
+);
+
+export const transparentCriticalClasses = cn(
+    'bg-transparent text-critical-500 outline-transparent hover:bg-background-hover hover:text-critical-700 active:bg-background-pressed active:text-critical-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'
+);
+
+export const transparentNeutralClasses = cn(
+    'bg-transparent text-surface-500 outline-transparent hover:bg-background-hover hover:text-surface-700 active:bg-background-pressed active:text-surface-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'
+);
+
+export const transparentInverseClasses = cn(
+    'bg-transparent text-icon-inverse outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:text-transparent'
+);