Accessibility

import { focusRingClasses } from "@work-rjkashyap/unified-ui/utils";

// Returns a string of Tailwind classes
console.log(focusRingClasses);
// "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"

import {
  focusRingClasses,
  focusRingCompactClasses,
  focusRingInsetClasses,
  focusWithinRingClasses,
} from "@work-rjkashyap/unified-ui/utils";

// Standard button
<button className={`px-4 py-2 rounded-md bg-primary text-primary-foreground ${focusRingClasses}`}>
  Save
</button>

// Compact for inline links
<a href="/docs" className={`text-primary underline ${focusRingCompactClasses}`}>
  Read the docs
</a>

// Inset for table rows
<tr className={`${focusRingInsetClasses}`} tabIndex={0}>
  <td>Row content</td>
</tr>

// Focus-within for wrapper elements
<div className={`border border-border rounded-md p-4 ${focusWithinRingClasses}`}>
  <input type="text" className="outline-none" />
</div>

import { focusRingVariantOverrides } from "@work-rjkashyap/unified-ui/utils";

// Returns classes that override the focus ring color
const errorFocusClasses = focusRingVariantOverrides.danger;
// "focus-visible:ring-danger"

<input
	className={`${focusRingClasses} ${hasError ? focusRingVariantOverrides.danger : ""}`}
	aria-invalid={hasError}
/>;

import {
	focusRingClassList,
	focusRingCompactClassList,
	focusRingInsetClassList,
} from "@work-rjkashyap/unified-ui/utils";
import { cn } from "@work-rjkashyap/unified-ui/utils";

const buttonClasses = cn(
	"px-4 py-2 rounded-md",
	...focusRingClassList,
	isDisabled && "opacity-50 pointer-events-none",
);

import { Input, Label, Caption } from "@work-rjkashyap/unified-ui";

// The Input component handles aria-invalid and aria-describedby automatically
<div>
	<Label htmlFor="email">Email</Label>
	<Input id="email" variant="error" aria-describedby="email-error" />
	<Caption id="email-error" color="danger">
		Please enter a valid email address.
	</Caption>
</div>;

import {
	checkHexContrast,
	contrastRatio,
	meetsAA,
	meetsAAA,
} from "@work-rjkashyap/unified-ui/utils";

// Full check with detailed result
const result = checkHexContrast("#4F46E5", "#FFFFFF");
console.log(result);
// {
//   ratio: 6.35,
//   aa: true,        ← passes AA for normal text (≥ 4.5:1)
//   aaLarge: true,   ← passes AA for large text (≥ 3:1)
//   aaa: false,      ← does not pass AAA for normal text (≥ 7:1)
//   aaaLarge: true,  ← passes AAA for large text (≥ 4.5:1)
// }

// Raw ratio
console.log(contrastRatio("#000000", "#FFFFFF")); // 21

// Quick boolean checks
console.log(meetsAA(6.35, "normal")); // true (≥ 4.5:1)
console.log(meetsAA(6.35, "large")); // true (≥ 3:1)
console.log(meetsAAA(6.35, "normal")); // false (< 7:1)

import { meetsNonTextAA } from "@work-rjkashyap/unified-ui/utils";

// For borders, icons, and UI controls (SC 1.4.11)
console.log(meetsNonTextAA(3.2)); // true (≥ 3:1)
console.log(meetsNonTextAA(2.8)); // false (< 3:1)

import {
	auditContrast,
	DS_LIGHT_CRITICAL_PAIRS,
	DS_DARK_CRITICAL_PAIRS,
} from "@work-rjkashyap/unified-ui/utils";

// Audit all light mode critical pairs
const lightResults = auditContrast(DS_LIGHT_CRITICAL_PAIRS);
const lightFailures = lightResults.filter((r) => !r.passes);

if (lightFailures.length > 0) {
	console.error("Light mode contrast failures:", lightFailures);
}

// Audit all dark mode critical pairs
const darkResults = auditContrast(DS_DARK_CRITICAL_PAIRS);
const darkFailures = darkResults.filter((r) => !r.passes);

if (darkFailures.length > 0) {
	console.error("Dark mode contrast failures:", darkFailures);
}

import {
	parseHex,
	relativeLuminance,
	toRGBString,
	parseRGBString,
} from "@work-rjkashyap/unified-ui/utils";

// Parse hex to RGB
const rgb = parseHex("#4F46E5"); // { r: 79, g: 70, b: 229 }

// Calculate relative luminance (0–1)
const lum = relativeLuminance(rgb); // 0.065...

// Convert between formats
const rgbString = toRGBString(rgb); // "79 70 229"
const parsed = parseRGBString("79 70 229"); // { r: 79, g: 70, b: 229 }

import {
	WCAG_AA_NORMAL, // 4.5
	WCAG_AA_LARGE, // 3.0
	WCAG_AAA_NORMAL, // 7.0
	WCAG_AAA_LARGE, // 4.5
	WCAG_NON_TEXT_AA, // 3.0
} from "@work-rjkashyap/unified-ui/utils";

@media (prefers-reduced-motion: reduce) {
	/* Styles for users who prefer reduced motion */
}

import { useReducedMotion } from "@work-rjkashyap/unified-ui";

function MyComponent() {
	const prefersReduced = useReducedMotion();

	if (prefersReduced) {
		// Render without animation
	}
}

import { Heading, Body } from "@work-rjkashyap/unified-ui";

// ✅ Correct hierarchy
<Heading level={1}>Page Title</Heading>
  <Heading level={2}>Section</Heading>
    <Heading level={3}>Subsection</Heading>
      <Body>Content</Body>
    <Heading level={3}>Another Subsection</Heading>
      <Body>More content</Body>
  <Heading level={2}>Another Section</Heading>

// ❌ Skipped level (h1 → h3)
<Heading level={1}>Page Title</Heading>
  <Heading level={3}>Subsection</Heading>  {/* Screen readers expect h2 first */}

// Query by component type
document.querySelectorAll('[data-ds-component="button"]');

// Query by state
document.querySelectorAll('[data-ds-state="disabled"]');

// Query by variant
document.querySelectorAll('[data-ds-variant="danger"]');

// Combine for specific targets
document.querySelector('[data-ds-component="dialog"][data-ds-state="open"]');

// Playwright
await page
	.locator('[data-ds-component="button"][data-ds-variant="primary"]')
	.click();

// Testing Library
screen.getByRole("button", { name: "Submit" });