CIA Compliance Manager API Documentation - v1.1.6
    Preparing search index...

    Variable WidgetClassesConst

    WidgetClasses: {
        badge: "inline-flex items-center px-sm py-xs text-caption font-medium rounded-sm";
        badgeError: "bg-error text-white";
        badgeInfo: "bg-info text-white";
        badgeNeutral: "bg-neutral text-white";
        badgeSuccess: "bg-success text-white";
        badgeWarning: "bg-warning text-gray-900";
        body: "text-body text-gray-600 dark:text-gray-400";
        buttonPrimary: "bg-primary hover:bg-primary-dark text-white font-medium py-sm px-md rounded-md transition-colors duration-fast focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2";
        buttonSecondary: "bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-medium py-sm px-md rounded-md transition-colors duration-fast focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2";
        card: "rounded-md border border-gray-200 dark:border-gray-600 p-md bg-gray-50 dark:bg-gray-700";
        cardInteractive: "hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer transition-colors duration-fast";
        container: "rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-md p-lg";
        containerHover: "hover:shadow-lg transition-shadow duration-normal";
        disabled: "opacity-50 cursor-not-allowed pointer-events-none";
        dividerHorizontal: "border-t border-gray-200 dark:border-gray-700 my-md";
        dividerVertical: "border-l border-gray-200 dark:border-gray-700 mx-md";
        flexRow: "flex flex-wrap gap-sm md:gap-md";
        focusVisible: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
        grid2Cols: "grid grid-cols-1 md:grid-cols-2 gap-md";
        grid3Cols: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md";
        heading: "text-subheading font-semibold text-gray-800 dark:text-gray-100 mb-md";
        hideDesktop: "block md:hidden";
        hideMobile: "hidden md:block";
        label: "text-caption font-medium text-gray-500 dark:text-gray-500 uppercase tracking-wide";
        labelNormal: "text-caption font-medium text-gray-500 dark:text-gray-500 tracking-wide";
        loading: "animate-pulse";
        section: "mb-lg space-y-md";
        sectionBorder: "border-l-4 border-primary pl-md";
        subheading: "text-body-lg font-medium text-gray-700 dark:text-gray-200 mb-sm";
        textResponsive: "text-body md:text-body-lg";
    } = ...

    Standard class patterns for consistent widget styling

    These patterns use Tailwind utility classes and design tokens from designTokens.ts to ensure visual consistency across all widgets.

    Type Declaration

    • Readonlybadge: "inline-flex items-center px-sm py-xs text-caption font-medium rounded-sm"

      Standard badge styling Use with specific color variants

    • ReadonlybadgeError: "bg-error text-white"

      Error badge (red)

    • ReadonlybadgeInfo: "bg-info text-white"

      Info badge (blue)

    • ReadonlybadgeNeutral: "bg-neutral text-white"

      Neutral badge (gray)

    • ReadonlybadgeSuccess: "bg-success text-white"

      Success badge (green)

    • ReadonlybadgeWarning: "bg-warning text-gray-900"

      Warning badge (yellow)

    • Readonlybody: "text-body text-gray-600 dark:text-gray-400"

      Standard body text style Use for primary content and descriptions

    • ReadonlybuttonPrimary: "bg-primary hover:bg-primary-dark text-white font-medium py-sm px-md rounded-md transition-colors duration-fast focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"

      Primary button style High contrast for main actions

    • ReadonlybuttonSecondary: "bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-medium py-sm px-md rounded-md transition-colors duration-fast focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"

      Secondary button style Lower contrast for alternative actions

    • Readonlycard: "rounded-md border border-gray-200 dark:border-gray-600 p-md bg-gray-50 dark:bg-gray-700"

      Standard card container for nested content Lighter background to distinguish from main container

    • ReadonlycardInteractive: "hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer transition-colors duration-fast"

      Interactive card with hover effect Use for clickable cards and list items

    • Readonlycontainer: "rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-md p-lg"

      Standard widget container with rounded corners, border, shadow, and padding Uses design tokens for consistent spacing and elevation

    • ReadonlycontainerHover: "hover:shadow-lg transition-shadow duration-normal"

      Hover effect for interactive containers Increases shadow on hover with smooth transition

    • Readonlydisabled: "opacity-50 cursor-not-allowed pointer-events-none"

      Disabled state styling Reduced opacity and no pointer events

    • ReadonlydividerHorizontal: "border-t border-gray-200 dark:border-gray-700 my-md"

      Horizontal divider

    • ReadonlydividerVertical: "border-l border-gray-200 dark:border-gray-700 mx-md"

      Vertical divider (for flex layouts)

    • ReadonlyflexRow: "flex flex-wrap gap-sm md:gap-md"

      Flexible row layout with wrapping Adjusts gap between items responsively

    • ReadonlyfocusVisible: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"

      Focus-visible ring for keyboard navigation Ensures accessibility compliance

    • Readonlygrid2Cols: "grid grid-cols-1 md:grid-cols-2 gap-md"

      Two-column grid layout Stacks on mobile, 2 columns on medium+ screens

    • Readonlygrid3Cols: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md"

      Three-column grid layout Stacks on mobile, 2 columns on tablet, 3 columns on desktop

    • Readonlyheading: "text-subheading font-semibold text-gray-800 dark:text-gray-100 mb-md"

      Primary heading style for widget titles Uses design token typography and semantic colors

    • ReadonlyhideDesktop: "block md:hidden"

      Show on mobile only, hide on tablet and desktop Use for mobile-optimized alternatives

    • ReadonlyhideMobile: "hidden md:block"

      Hide on mobile, show on tablet and desktop Use for non-essential content on small screens

    • Readonlylabel: "text-caption font-medium text-gray-500 dark:text-gray-500 uppercase tracking-wide"

      Small label text for form labels and metadata Uppercase with tracking for emphasis

    • ReadonlylabelNormal: "text-caption font-medium text-gray-500 dark:text-gray-500 tracking-wide"

      Small label text for form labels and metadata in normal case Use this when label text should preserve its original casing instead of being forced to uppercase.

    • Readonlyloading: "animate-pulse"

      Loading state with pulse animation Use for skeleton screens and loading indicators

    • Readonlysection: "mb-lg space-y-md"

      Standard section with bottom margin and vertical spacing Use for major content divisions within widgets

    • ReadonlysectionBorder: "border-l-4 border-primary pl-md"

      Section with left border accent Use for emphasized or highlighted sections

    • Readonlysubheading: "text-body-lg font-medium text-gray-700 dark:text-gray-200 mb-sm"

      Secondary heading for subsections Smaller and medium weight for content hierarchy

    • ReadonlytextResponsive: "text-body md:text-body-lg"

      Responsive text sizing Smaller on mobile, larger on desktop

    import { WidgetClasses, cn } from '@/utils/tailwindClassHelpers';

    function MyWidget() {
      return (
        <div className={cn(WidgetClasses.container, WidgetClasses.containerHover)}>
          <h2 className={WidgetClasses.heading}>Widget Title</h2>
          <div className={WidgetClasses.grid2Cols}>
            <div className={WidgetClasses.card}>Content 1</div>
            <div className={WidgetClasses.card}>Content 2</div>
          </div>
        </div>
      );
    }

    Settings

    Member Visibility