@veracity/vui/dist/button/button.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { AnyString } from "../utils/types.js";
import "../utils/index.js";
import { ThemingProps } from "../theme/types.js";
import "../theme/index.js";
import { SystemProps } from "../system/system.js";
import "../system/index.js";
import { IconProp } from "../icon/icon.types.js";
import "../icon/index.js";
import { JSX } from "react";
//#region src/button/button.types.d.ts
/** Visual hierarchy (weight) of the button. */
type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
/** Semantic intent / colour family of the button. */
type ButtonIntent = 'brand' | 'contrast' | 'success' | 'danger' | 'warning';
/** Union of all fully-qualified legacy variant keys (backward-compat). */
type ButtonVariantLegacy = 'primaryBrand' | 'secondaryBrand' | 'tertiaryBrand' | 'primaryContrast' | 'secondaryContrast' | 'tertiaryContrast' | 'primarySuccess' | 'secondarySuccess' | 'tertiarySuccess' | 'primaryDanger' | 'secondaryDanger' | 'tertiaryDanger';
/** Token block per intent used by the generated theme approach. */
interface IntentTokens {
  solid: string;
  solidInverse: string;
  solidHover: string;
  solidPressed: string;
  subtleHover: string;
  subtlePressed: string;
}
/** Shape of a single container token object in a theme variant. */
interface ContainerStyles {
  bg?: string;
  borderColor?: string;
  color?: string;
  hoverBg?: string;
  hoverBorderColor?: string;
  hoverColor?: string;
  activeBg?: string;
  activeBorderColor?: string;
  activeColor?: string;
  borderRadius?: string | number;
  /** Outer horizontal padding (px). Used instead of the legacy `spaceX` formula. */
  paddingX?: number;
  /** Outer horizontal padding (px) when an icon is present. Falls back to paddingX if not set. */
  paddingXIcon?: number;
  /** Outer vertical padding (px). Combined with borderWidth to derive CSS pt/pb. */
  paddingY?: number;
  /** Gap between icon and text (px). */
  gapX?: number;
  [key: string]: unknown;
}
type ButtonProps = SystemProps & ThemingProps<'Button'> & {
  /**
   * Semantic intent (colour family) of the button. Used together with `variant`.
   * When both are set the resolved theme key is `${variant}${Intent}` (e.g. `primaryBrand`).
   * Accepts the canonical intent names or any string for custom/future intents.
   */
  intent?: ButtonIntent | AnyString;
  /**
   * Visual hierarchy of the button.
   * Accepts the canonical hierarchy values (`'primary' | 'secondary' | 'tertiary'`),
   * the fully-qualified legacy keys (`'primaryBrand'` etc.), or any custom string.
   */
  variant?: ButtonVariant | ButtonVariantLegacy | AnyString;
  /** Deprecated. Please use variant instead. @deprecated  */
  colorScheme?: string;
  /** Icon for the drop-down element. @default 'uiAngleDown' */
  dropDownIcon?: IconProp;
  /** Icon for icon-only buttons (no text content). */
  icon?: IconProp | JSX.Element;
  /** Icon displayed on the leading (left) side of the button content. */
  startIcon?: IconProp | JSX.Element;
  /** Icon displayed on the trailing (right) side of the button content. */
  endIcon?: IconProp | JSX.Element;
  /** Deprecated alias for `startIcon`. @deprecated */
  iconLeft?: IconProp | JSX.Element;
  /** Deprecated alias for `endIcon`. @deprecated */
  iconRight?: IconProp | JSX.Element;
  /** Adds an active class name for further handling. */
  isActive?: boolean;
  /** Adds a drop-down chevron indicator to the trailing (right) side of the button. */
  isDropDown?: boolean;
  /** Adds box shadow style. @default false */
  isElevated?: boolean;
  /** Makes the button take full width of the container. @deprecated */
  isFullWidth?: boolean;
  /** Replaces content with a loading spinner. @default false */
  isLoading?: boolean;
  /**
   * Text announced to screen readers when the button is in a loading state.
   * Rendered in a visually-hidden ARIA live region to meet WCAG requirements for
   * status messages (for example, WCAG 2.1 4.1.3 Status Messages).
   * @default 'Loading'
   */
  loadingText?: string;
  /** Rounds the borders. @default false */
  isRound?: boolean;
  /**
   * Separates right icon from the content.
   * @deprecated Has no effect and will be removed in VUI 5.x.
   */
  isSplit?: boolean;
  /** Socket placing text as alternative to children. */
  text?: React.ReactNode;
};
/** Narrower prop definition for IconButton component */
type IconButtonProps = Omit<ButtonProps, 'text'>;
/** @internal Resolved container token block as extracted from useStyleConfig. */
interface ButtonStyleContainer {
  borderWidth?: number;
  h?: number;
  minW?: number;
  spaceX?: number;
  disabledBg?: string;
  disabledBorderColor?: string;
  disabledColor?: string;
  disabledOpacity?: number;
  activeBg?: string;
  activeBorderColor?: string;
  activeColor?: string;
  borderRadius?: number | string;
  [key: string]: unknown;
}
/** @internal Normalised colour tokens after fallback resolution in useButtonComputed. */
interface ButtonComputedStyles {
  bg?: string;
  borderColor?: string;
  color?: string;
  hoverBg?: string;
  hoverBorderColor?: string;
  hoverColor?: string;
  activeBg?: string;
  activeBorderColor?: string;
  activeColor?: string;
  [key: string]: unknown;
}
/** @internal Computed padding/border values for a single render pass. */
interface SpacingProps {
  borderWidth: number;
  pl: string;
  pr: string;
  pt: string;
  pb: string;
  gap: string;
}
/** @internal Full return value of the useButtonComputed hook. */
interface ComputedResult {
  buttonStyles: ButtonComputedStyles;
  spacing: SpacingProps;
  disabledProps: SystemProps;
  activeProps: SystemProps;
  aliasedProps: SystemProps;
  buttonClassName: string;
}
/** @internal Options bag accepted by the useButtonComputed hook. */
interface ButtonComputedOptions {
  size: string | undefined;
  variant: {
    variant?: string;
  };
  intentProp: string | undefined;
  borderWidthProp: unknown;
  disabled: boolean;
  isActive: boolean;
  isIconOnly: boolean;
  isRound: boolean;
  isElevated: boolean;
  hasStartIcon: boolean;
  hasEndIcon: boolean;
  isFullWidth: boolean;
  className: string | undefined;
  variantProp: string | undefined;
}
//#endregion
export { ButtonComputedOptions, ButtonComputedStyles, ButtonIntent, ButtonProps, ButtonStyleContainer, ButtonVariant, ButtonVariantLegacy, ComputedResult, ContainerStyles, IconButtonProps, IntentTokens, SpacingProps };

//# sourceMappingURL=button.types.d.ts.map