@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
82 lines (81 loc) • 2.63 kB
TypeScript
import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';
export declare const statusDotVariance: (props?: ({
status?: "default" | "success" | "warning" | "destructive" | "primary" | null | undefined;
size?: "sm" | "lg" | "md" | null | undefined;
appearance?: "solid" | "glow" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface StatusDotProps extends ComponentProps<"div">, VariantProps<typeof statusDotVariance> {
/**
* Screen reader label for the status dot.
* If not provided, a default label will be generated based on the status.
*/
"aria-label"?: string;
/**
* Whether the status dot should be hidden from screen readers.
* Use this when the status is already described by surrounding text.
*
* @default false
*/
"aria-hidden"?: boolean;
}
/**
* A small visual indicator used to represent status, state, or activity.
* Status dots are commonly used in badges, lists, and other UI components
* to provide quick visual feedback about an item's state.
*
* @example
* ```tsx
* // Basic status dot with automatic aria-label
* <StatusDot status="success" />
* ```
*
* @example
* ```tsx
* // With custom aria-label
* <StatusDot status="success" aria-label="Task completed successfully" />
* ```
*
* @example
* ```tsx
* // Hidden from screen readers when status is described elsewhere
* <StatusDot status="success" aria-hidden />
* ```
*
* @example
* ```tsx
* // Different statuses
* <StatusDot status="primary" />
* <StatusDot status="warning" />
* <StatusDot status="destructive" />
* ```
*
* @example
* ```tsx
* // Different sizes
* <StatusDot status="success" size="sm" />
* <StatusDot status="success" size="md" />
* <StatusDot status="success" size="lg" />
* ```
*
* @example
* ```tsx
* // Glow appearance for emphasis
* <StatusDot status="success" appearance="glow" />
* ```
*
* @example
* ```tsx
* // Custom colors
* <StatusDot status={null} className="bg-blue-500" aria-label="In progress" />
* <StatusDot status={null} appearance="glow" className="bg-purple-500 [--glow-color:theme(colors.purple.500)]" aria-label="Active" />
* ```
*
* @example
* ```tsx
* // Custom size
* <StatusDot size={null} className="size-10" />
* <StatusDot size={null} appearance="glow" className="size-10 [--glow-size:4px]" />
* ```
*/
export declare const StatusDot: ({ className, status, size, appearance, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: StatusDotProps) => import("react").JSX.Element;