@juspay/blend-design-system 0.0.32-beta → 0.0.33-beta

package/dist/pollyfills/resizeObserverPollyfill.d.ts

@@ -0,0 +1 @@
+export declare function patchResizeObserver(): void;

package/dist/tokens/font.tokens.d.ts

@@ -55,10 +55,65 @@ type FontSizeType = Readonly<{
         lg: FontGroupType;
     };
 }>;
+type FontSizesType = Readonly<{
+    10: CSSObject['fontSize'];
+    12: CSSObject['fontSize'];
+    14: CSSObject['fontSize'];
+    16: CSSObject['fontSize'];
+    18: CSSObject['fontSize'];
+    20: CSSObject['fontSize'];
+    24: CSSObject['fontSize'];
+    28: CSSObject['fontSize'];
+    32: CSSObject['fontSize'];
+    36: CSSObject['fontSize'];
+    40: CSSObject['fontSize'];
+    44: CSSObject['fontSize'];
+    48: CSSObject['fontSize'];
+    52: CSSObject['fontSize'];
+    56: CSSObject['fontSize'];
+    60: CSSObject['fontSize'];
+    64: CSSObject['fontSize'];
+    68: CSSObject['fontSize'];
+    72: CSSObject['fontSize'];
+    76: CSSObject['fontSize'];
+    80: CSSObject['fontSize'];
+    84: CSSObject['fontSize'];
+    88: CSSObject['fontSize'];
+    92: CSSObject['fontSize'];
+    96: CSSObject['fontSize'];
+    100: CSSObject['fontSize'];
+}>;
+type LineHeightType = Readonly<{
+    14: CSSObject['lineHeight'];
+    18: CSSObject['lineHeight'];
+    20: CSSObject['lineHeight'];
+    24: CSSObject['lineHeight'];
+    28: CSSObject['lineHeight'];
+    32: CSSObject['lineHeight'];
+    36: CSSObject['lineHeight'];
+    40: CSSObject['lineHeight'];
+    44: CSSObject['lineHeight'];
+    48: CSSObject['lineHeight'];
+    52: CSSObject['lineHeight'];
+    56: CSSObject['lineHeight'];
+    60: CSSObject['lineHeight'];
+    64: CSSObject['lineHeight'];
+    68: CSSObject['lineHeight'];
+    72: CSSObject['lineHeight'];
+    76: CSSObject['lineHeight'];
+    80: CSSObject['lineHeight'];
+    84: CSSObject['lineHeight'];
+    88: CSSObject['lineHeight'];
+    92: CSSObject['lineHeight'];
+    96: CSSObject['lineHeight'];
+    100: CSSObject['lineHeight'];
+}>;
 export type FontTokensType = Readonly<{
     family: FontFamilyType;
     weight: FontWeightType;
     letterSpacing: LetterSpacingType;
+    fontSize: FontSizesType;
+    lineHeight: LineHeightType;
     size: FontSizeType;
 }>;
 /**

package/dist/utils/accessibility/aria-helpers.d.ts

@@ -0,0 +1,202 @@
+/**
+ * Shared ARIA attribute helpers for consistent accessibility across all components
+ *
+ * These utilities ensure consistent ARIA implementation following WCAG 2.2 Level AA standards
+ * and reduce code duplication across components.
+ */
+export type AriaAttributes = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-expanded'?: boolean;
+    'aria-selected'?: boolean;
+    'aria-disabled'?: boolean;
+    'aria-busy'?: boolean;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-controls'?: string;
+    'aria-live'?: 'polite' | 'assertive' | 'off';
+    'aria-atomic'?: boolean;
+    'aria-haspopup'?: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-modal'?: boolean;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    role?: string;
+};
+/**
+ * Generate ARIA attributes for button components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getButtonAriaAttributes({
+ *     disabled: true,
+ *     loading: false,
+ *     ariaLabel: 'Close dialog'
+ * })
+ * <button {...ariaAttrs}>Close</button>
+ * ```
+ */
+export declare function getButtonAriaAttributes(props: {
+    disabled?: boolean;
+    loading?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for input components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getInputAriaAttributes({
+ *     id: 'email-input',
+ *     labelId: 'email-label',
+ *     errorId: 'email-error',
+ *     hintId: 'email-hint',
+ *     required: true,
+ *     invalid: true
+ * })
+ * <input {...ariaAttrs} />
+ * ```
+ */
+export declare function getInputAriaAttributes(props: {
+    id: string;
+    labelId?: string;
+    errorId?: string;
+    hintId?: string;
+    required?: boolean;
+    invalid?: boolean;
+    describedBy?: string[];
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for modal/dialog components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getModalAriaAttributes({
+ *     id: 'dialog-1',
+ *     titleId: 'dialog-title',
+ *     descriptionId: 'dialog-description',
+ *     isAlert: false
+ * })
+ * <div role="dialog" {...ariaAttrs}>...</div>
+ * ```
+ */
+export declare function getModalAriaAttributes(props: {
+    id: string;
+    titleId: string;
+    descriptionId?: string;
+    isAlert?: boolean;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for dropdown/select components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getDropdownAriaAttributes({
+ *     id: 'select-1',
+ *     isOpen: true,
+ *     triggerId: 'select-trigger',
+ *     menuId: 'select-menu'
+ * })
+ * <button {...ariaAttrs}>Select</button>
+ * ```
+ */
+export declare function getDropdownAriaAttributes(props: {
+    id: string;
+    isOpen: boolean;
+    triggerId: string;
+    menuId: string;
+    hasPopup?: 'listbox' | 'menu';
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for tab components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getTabAriaAttributes({
+ *     id: 'tab-1',
+ *     panelId: 'panel-1',
+ *     selected: true
+ * })
+ * <button role="tab" {...ariaAttrs}>Tab 1</button>
+ * ```
+ */
+export declare function getTabAriaAttributes(props: {
+    id: string;
+    panelId: string;
+    selected: boolean;
+    controls?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for tab panel components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getTabPanelAriaAttributes({
+ *     id: 'panel-1',
+ *     tabId: 'tab-1',
+ *     labelledBy: 'tab-1-label'
+ * })
+ * <div role="tabpanel" {...ariaAttrs}>Panel content</div>
+ * ```
+ */
+export declare function getTabPanelAriaAttributes(props: {
+    id: string;
+    tabId: string;
+    labelledBy?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for accordion components
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getAccordionAriaAttributes({
+ *     headerId: 'accordion-header-1',
+ *     contentId: 'accordion-content-1',
+ *     expanded: false
+ * })
+ * <button {...ariaAttrs}>Accordion Header</button>
+ * ```
+ */
+export declare function getAccordionAriaAttributes(props: {
+    headerId: string;
+    contentId: string;
+    expanded: boolean;
+}): AriaAttributes;
+/**
+ * Generate ARIA live region attributes for dynamic content
+ *
+ * @example
+ * ```tsx
+ * const ariaAttrs = getLiveRegionAriaAttributes({
+ *     live: 'assertive',
+ *     atomic: true
+ * })
+ * <div {...ariaAttrs}>Error message</div>
+ * ```
+ */
+export declare function getLiveRegionAriaAttributes(props: {
+    live?: 'polite' | 'assertive' | 'off';
+    atomic?: boolean;
+}): AriaAttributes;
+/**
+ * Generate unique IDs for ARIA relationships
+ *
+ * @example
+ * ```tsx
+ * const labelId = generateAriaId('label')
+ * const inputId = generateAriaId('input')
+ * ```
+ */
+export declare function generateAriaId(prefix: string): string;
+/**
+ * Combine multiple ARIA attribute objects
+ * Later objects override earlier ones for conflicting keys
+ *
+ * @example
+ * ```tsx
+ * const baseAttrs = getButtonAriaAttributes({ disabled: true })
+ * const additionalAttrs = { 'aria-label': 'Custom label' }
+ * const merged = mergeAriaAttributes(baseAttrs, additionalAttrs)
+ * ```
+ */
+export declare function mergeAriaAttributes(...attrs: Array<AriaAttributes | undefined>): AriaAttributes;

package/dist/utils/accessibility/focus-helpers.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Focus management helpers for accessibility
+ *
+ * These utilities ensure consistent focus management across all components,
+ * following WCAG 2.2 Level AA standards for keyboard navigation and focus visibility.
+ */
+/**
+ * Focus an element safely (handles cases where element might not exist)
+ *
+ * @example
+ * ```tsx
+ * const inputRef = useRef<HTMLInputElement>(null)
+ * safeFocus(inputRef.current)
+ * ```
+ */
+export declare function safeFocus(element: HTMLElement | null): void;
+/**
+ * Focus first focusable element in container
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null)
+ * focusFirstFocusable(containerRef.current!)
+ * ```
+ */
+export declare function focusFirstFocusable(container: HTMLElement): void;
+/**
+ * Focus last focusable element in container
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null)
+ * focusLastFocusable(containerRef.current!)
+ * ```
+ */
+export declare function focusLastFocusable(container: HTMLElement): void;
+/**
+ * Store and restore focus (for modals, dropdowns, etc.)
+ *
+ * @example
+ * ```tsx
+ * const focusManager = createFocusManager()
+ *
+ * // When opening modal
+ * focusManager.store()
+ * focusFirstFocusable(modalRef.current!)
+ *
+ * // When closing modal
+ * focusManager.restore()
+ * ```
+ */
+export declare function createFocusManager(): {
+    store: () => void;
+    restore: () => void;
+    getStored: () => HTMLElement | null;
+};
+/**
+ * Check if element is focusable
+ *
+ * @example
+ * ```tsx
+ * if (isFocusable(element)) {
+ *     element.focus()
+ * }
+ * ```
+ */
+export declare function isFocusable(element: HTMLElement): boolean;
+/**
+ * Get all focusable elements within a container
+ *
+ * @example
+ * ```tsx
+ * const focusables = getFocusableElements(containerRef.current!)
+ * focusables.forEach(el => console.log(el))
+ * ```
+ */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Check if focus is within a container
+ *
+ * @example
+ * ```tsx
+ * if (isFocusWithin(modalRef.current!)) {
+ *     // Focus is inside modal
+ * }
+ * ```
+ */
+export declare function isFocusWithin(container: HTMLElement): boolean;
+/**
+ * Focus next focusable element in document order
+ *
+ * @example
+ * ```tsx
+ * focusNextFocusable(currentElement)
+ * ```
+ */
+export declare function focusNextFocusable(currentElement: HTMLElement): void;
+/**
+ * Focus previous focusable element in document order
+ *
+ * @example
+ * ```tsx
+ * focusPreviousFocusable(currentElement)
+ * ```
+ */
+export declare function focusPreviousFocusable(currentElement: HTMLElement): void;
+/**
+ * Remove focus from element
+ *
+ * @example
+ * ```tsx
+ * removeFocus(element)
+ * ```
+ */
+export declare function removeFocus(element: HTMLElement): void;

package/dist/utils/accessibility/icon-helpers.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode, ReactElement } from 'react';
+export declare function hasAccessibleLabel(slot: ReactElement): boolean;
+export declare function addAccessibleAriaAttributes(slot: ReactNode): ReactNode;

package/dist/utils/accessibility/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Centralized accessibility utilities export
+ *
+ * This module provides shared accessibility utilities for consistent
+ * ARIA implementation, keyboard navigation, and focus management across
+ * all components in the Blend Design System.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *     getButtonAriaAttributes,
+ *     createButtonKeyboardHandler,
+ *     focusFirstFocusable
+ * } from '@juspay/blend-design-system/utils/accessibility'
+ * ```
+ */
+export * from './aria-helpers';
+export * from './keyboard-helpers';
+export * from './focus-helpers';
+export type { AriaAttributes } from './aria-helpers';
+export type { KeyboardHandler } from './keyboard-helpers';

package/dist/utils/accessibility/keyboard-helpers.d.ts

@@ -0,0 +1,117 @@
+import { KeyboardEvent } from 'react';
+/**
+ * Keyboard navigation helpers for consistent keyboard support across all components
+ *
+ * These utilities ensure consistent keyboard interaction patterns following
+ * WCAG 2.2 Level AA standards and ARIA Authoring Practices Guide.
+ */
+export type KeyboardHandler = {
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+};
+/**
+ * Create keyboard handler for button-like elements
+ * Supports Enter and Space keys for activation
+ *
+ * @example
+ * ```tsx
+ * const keyboardHandler = createButtonKeyboardHandler(
+ *     () => handleClick(),
+ *     false // disabled
+ * )
+ * <button {...keyboardHandler}>Click me</button>
+ * ```
+ */
+export declare function createButtonKeyboardHandler(onClick: () => void, disabled?: boolean): KeyboardHandler;
+/**
+ * Create keyboard handler for arrow key navigation
+ * Supports ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, and End keys
+ *
+ * @example
+ * ```tsx
+ * const keyboardHandler = createArrowKeyHandler({
+ *     onArrowDown: () => moveToNext(),
+ *     onArrowUp: () => moveToPrevious(),
+ *     onHome: () => moveToFirst(),
+ *     onEnd: () => moveToLast()
+ * })
+ * <div {...keyboardHandler}>...</div>
+ * ```
+ */
+export declare function createArrowKeyHandler(options: {
+    onArrowUp?: () => void;
+    onArrowDown?: () => void;
+    onArrowLeft?: () => void;
+    onArrowRight?: () => void;
+    onHome?: () => void;
+    onEnd?: () => void;
+}): KeyboardHandler;
+/**
+ * Create keyboard handler for escape key
+ *
+ * @example
+ * ```tsx
+ * const keyboardHandler = createEscapeHandler(() => closeModal())
+ * <div {...keyboardHandler}>Modal content</div>
+ * ```
+ */
+export declare function createEscapeHandler(onEscape: () => void): KeyboardHandler;
+/**
+ * Create keyboard handler for tab trapping (modals, dropdowns)
+ * Traps focus within a container by cycling between first and last elements
+ *
+ * @example
+ * ```tsx
+ * const firstElement = containerRef.current?.querySelector('[tabindex="0"]')
+ * const lastElement = containerRef.current?.querySelector('[tabindex="0"]:last-child')
+ * const keyboardHandler = createTabTrapHandler(firstElement, lastElement)
+ * <div {...keyboardHandler}>Modal content</div>
+ * ```
+ */
+export declare function createTabTrapHandler(firstElement: HTMLElement | null, lastElement: HTMLElement | null): KeyboardHandler;
+/**
+ * Create keyboard handler for list navigation
+ * Combines arrow keys with Enter/Space for selection
+ *
+ * @example
+ * ```tsx
+ * const keyboardHandler = createListNavigationHandler({
+ *     onArrowDown: () => moveToNext(),
+ *     onArrowUp: () => moveToPrevious(),
+ *     onSelect: () => selectCurrent()
+ * })
+ * <ul {...keyboardHandler}>...</ul>
+ * ```
+ */
+export declare function createListNavigationHandler(options: {
+    onArrowDown?: () => void;
+    onArrowUp?: () => void;
+    onArrowLeft?: () => void;
+    onArrowRight?: () => void;
+    onHome?: () => void;
+    onEnd?: () => void;
+    onSelect?: () => void;
+}): KeyboardHandler;
+/**
+ * Create keyboard handler for grid navigation
+ * Supports arrow keys for 2D navigation
+ *
+ * @example
+ * ```tsx
+ * const keyboardHandler = createGridNavigationHandler({
+ *     onArrowUp: () => moveUp(),
+ *     onArrowDown: () => moveDown(),
+ *     onArrowLeft: () => moveLeft(),
+ *     onArrowRight: () => moveRight()
+ * })
+ * <div role="grid" {...keyboardHandler}>...</div>
+ * ```
+ */
+export declare function createGridNavigationHandler(options: {
+    onArrowUp?: () => void;
+    onArrowDown?: () => void;
+    onArrowLeft?: () => void;
+    onArrowRight?: () => void;
+    onHome?: () => void;
+    onEnd?: () => void;
+    orientation?: 'horizontal' | 'vertical';
+}): KeyboardHandler;

package/dist/utils/prop-helpers.d.ts

@@ -0,0 +1 @@
+export declare function filterBlockedProps<T extends Record<string, unknown>>(props: T): Omit<T, 'className' | 'style'>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@juspay/blend-design-system",
     "private": false,
-    "version": "0.0.32-beta",
+    "version": "0.0.33-beta",
     "description": "A comprehensive React component library and design system by Juspay",
     "type": "module",
     "main": "./dist/main.js",