@juspay/blend-design-system 0.0.29-beta → 0.0.30-beta

package/dist/components/Menu/accessibility/MenuAccessibility.d.ts

@@ -0,0 +1,5 @@
+export type MenuAccessibilityProps = {
+    className?: string;
+};
+declare const MenuAccessibility: import('react').ForwardRefExoticComponent<MenuAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default MenuAccessibility;

package/dist/components/Menu/accessibility/MenuAccessibilityReport.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityReport } from '../../Button/accessibility/ButtonAccessibilityReport';
+export declare const menuAccessibilityReport: AccessibilityReport;

package/dist/components/Menu/accessibility/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuAccessibility } from './MenuAccessibility';
+export { menuAccessibilityReport } from './MenuAccessibilityReport';

package/dist/components/Menu/types.d.ts

@@ -11,6 +11,11 @@ export declare enum MenuSide {
     RIGHT = "right",
     BOTTOM = "bottom"
 }
+export type MenuSkeletonProps = {
+    count?: number;
+    show?: boolean;
+    variant?: SkeletonVariant;
+};
 export type MenuProps = {
     trigger: React.ReactNode;
     items?: MenuGroupType[];
@@ -32,11 +37,7 @@ export type MenuProps = {
     sideOffset?: number;
     alignOffset?: number;
     collisonBoundaryRef?: Element | null | Array<Element | null>;
-    skeleton?: {
-        count?: number;
-        show?: boolean;
-        variant?: SkeletonVariant;
-    };
+    skeleton?: MenuSkeletonProps;
 };
 export declare enum MenuItemVariant {
     DEFAULT = "default",

package/dist/components/Modal/ModalSkeleton.d.ts

@@ -0,0 +1,25 @@
+import { SkeletonVariant } from '../Skeleton';
+import { ModalTokensType } from './modal.tokens';
+type HeaderSkeletonConfig = {
+    show: boolean;
+    showDivider: boolean;
+    showCloseButton: boolean;
+};
+type BodySkeletonConfig = {
+    show: boolean;
+    width: string;
+    height: string | number;
+};
+type FooterSkeletonConfig = {
+    show: boolean;
+    showDivider: boolean;
+};
+type ModalSkeletonProps = {
+    modalTokens: ModalTokensType;
+    headerSkeleton?: HeaderSkeletonConfig;
+    bodySkeleton?: BodySkeletonConfig;
+    footerSkeleton?: FooterSkeletonConfig;
+    skeletonVariant: SkeletonVariant;
+};
+declare const ModalSkeleton: React.FC<ModalSkeletonProps>;
+export default ModalSkeleton;

package/dist/components/Modal/accessibility/ModalAccessibility.d.ts

@@ -0,0 +1,5 @@
+export type ModalAccessibilityProps = {
+    className?: string;
+};
+declare const ModalAccessibility: import('react').ForwardRefExoticComponent<ModalAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ModalAccessibility;

package/dist/components/Modal/accessibility/ModalAccessibilityReport.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityReport } from '../../Button/accessibility/ButtonAccessibilityReport';
+export declare const modalAccessibilityReport: AccessibilityReport;

package/dist/components/Modal/types.d.ts

@@ -1,8 +1,20 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from '../Button';
+import { SkeletonVariant } from '../Skeleton';
 type ModalButtonAction = Omit<ButtonProps, 'buttonGroupPosition'>;
+type BodySkeletonProps = {
+    show?: boolean;
+    width?: string;
+    height?: string;
+};
+export type ModalSkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    bodySkeletonProps?: BodySkeletonProps;
+};
 export type ModalProps = {
     isOpen: boolean;
+    isCustom?: boolean;
     onClose: () => void;
     title?: string;
     subtitle?: string;
@@ -19,5 +31,9 @@ export type ModalProps = {
     showDivider?: boolean;
     minWidth?: string;
     useDrawerOnMobile?: boolean;
+    skeleton?: ModalSkeletonProps;
+    maxWidth?: string;
+    maxHeight?: string;
+    minHeight?: string;
 };
 export {};

package/dist/components/MultiSelect/MultiSelectMenu.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, menuId, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

package/dist/components/MultiSelect/MultiSelectSkeleton.d.ts

@@ -0,0 +1,7 @@
+import { MultiSelectTokensType } from './multiSelect.tokens';
+import { MultiSelectSkeletonProps } from './types';
+declare const MultiSelectSkeleton: ({ multiSelectTokens, skeleton, }: {
+    multiSelectTokens: MultiSelectTokensType;
+    skeleton: MultiSelectSkeletonProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectSkeleton;

package/dist/components/MultiSelect/MultiSelectTrigger.d.ts

@@ -23,5 +23,5 @@ export type MultiSelectTriggerProps = {
     maxTriggerWidth?: number;
     minTriggerWidth?: number;
 };
-declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, open, onClick, multiSelectTokens, inline, error, disabled, maxTriggerWidth, minTriggerWidth, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, open, onClick, multiSelectTokens, inline, error, maxTriggerWidth, minTriggerWidth, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectTrigger;

package/dist/components/MultiSelect/accessibility/MultiSelectAccessibility.d.ts

@@ -0,0 +1,5 @@
+export interface MultiSelectAccessibilityProps {
+    className?: string;
+}
+declare const MultiSelectAccessibility: import('react').ForwardRefExoticComponent<MultiSelectAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default MultiSelectAccessibility;

package/dist/components/MultiSelect/accessibility/MultiSelectAccessibilityReport.d.ts

@@ -0,0 +1,44 @@
+/**
+ * MultiSelect Component Accessibility Report Data
+ * WCAG 2.1 Level AA Compliance Analysis
+ *
+ * Note: Items marked with "unsure" require manual verification
+ * Color contrast ratios verified using actual color values from theme tokens
+ */
+export type WCAGSuccessCriterion = {
+    id: string;
+    level: 'A' | 'AA' | 'AAA';
+    title: string;
+    status: 'compliant' | 'non-compliant' | 'unsure' | 'not-applicable';
+    description: string;
+    implementation: string;
+    testResults?: string;
+    notes?: string;
+};
+export type AccessibilityReport = {
+    componentName: string;
+    wcagVersion: string;
+    reportDate: string;
+    conformanceLevel: string;
+    overallStatus: 'compliant' | 'non-compliant' | 'partial' | 'unsure';
+    summary: string;
+    criteria: WCAGSuccessCriterion[];
+    strengths: string[];
+    recommendations: string[];
+    wcagVersions: {
+        '2.0': string[];
+        '2.1': string[];
+        '2.2': string[];
+    };
+    testMethodology: {
+        automated: string[];
+        manual: string[];
+        verificationTools: string[];
+        wcagLevels: {
+            A: string[];
+            AA: string[];
+            AAA: string[];
+        };
+    };
+};
+export declare const multiSelectAccessibilityReport: AccessibilityReport;

package/dist/components/MultiSelect/accessibility/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MultiSelectAccessibility } from './MultiSelectAccessibility';
+export type { MultiSelectAccessibilityProps } from './MultiSelectAccessibility';
+export { multiSelectAccessibilityReport } from './MultiSelectAccessibilityReport';
+export type { AccessibilityReport, WCAGSuccessCriterion, } from './MultiSelectAccessibilityReport';

package/dist/components/MultiSelect/types.d.ts

@@ -24,6 +24,11 @@ export declare enum MultiSelectSelectionTagType {
     COUNT = "count",
     TEXT = "text"
 }
+export type MultiSelectSkeletonProps = {
+    count?: number;
+    show?: boolean;
+    variant?: SkeletonVariant;
+};
 export type MultiSelectMenuItemType = {
     label: string;
     value: string;
@@ -115,11 +120,7 @@ export type MultiSelectProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
-    skeleton?: {
-        count?: number;
-        show?: boolean;
-        variant?: SkeletonVariant;
-    };
+    skeleton?: MultiSelectSkeletonProps;
     allowCustomValue?: boolean;
     customValueLabel?: string;
 };
@@ -165,13 +166,10 @@ export type MultiSelectMenuProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
-    skeleton?: {
-        count?: number;
-        show?: boolean;
-        variant?: SkeletonVariant;
-    };
+    skeleton?: MultiSelectSkeletonProps;
     size?: MultiSelectMenuSize;
     variant?: MultiSelectVariant;
     allowCustomValue?: boolean;
     customValueLabel?: string;
+    menuId?: string;
 };

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import { PopoverProps } from './types';
 declare const Popover: {
-    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, shadow, useDrawerOnMobile, avoidCollisions, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, description, trigger, children, showCloseButton, onOpenChange, open, asModal, primaryAction, secondaryAction, sideOffset, side, align, alignOffset, width, minWidth, maxWidth, height, minHeight, maxHeight, zIndex, size, onClose, shadow, useDrawerOnMobile, avoidCollisions, skeleton, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Popover;

package/dist/components/Popover/PopoverFooter.d.ts

@@ -1,6 +1,10 @@
 import { PopoverProps } from './types';
+import { SkeletonVariant } from '../Skeleton';
 declare const PopoverFooter: {
-    ({ primaryAction, secondaryAction, size, }: Pick<PopoverProps, "primaryAction" | "secondaryAction" | "size">): import("react/jsx-runtime").JSX.Element | null;
+    ({ primaryAction, secondaryAction, size, showSkeleton, skeletonVariant, }: Pick<PopoverProps, "primaryAction" | "secondaryAction" | "size"> & {
+        showSkeleton?: boolean;
+        skeletonVariant?: SkeletonVariant;
+    }): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default PopoverFooter;

package/dist/components/Popover/PopoverHeader.d.ts

@@ -1,6 +1,12 @@
 import { PopoverProps } from './types';
+import { SkeletonVariant } from '../Skeleton';
 declare const PopoverHeader: {
-    ({ heading, description, showCloseButton, onClose, size, }: Pick<PopoverProps, "heading" | "description" | "showCloseButton" | "size" | "onClose">): import("react/jsx-runtime").JSX.Element | null;
+    ({ heading, description, showCloseButton, onClose, size, showSkeleton, skeletonVariant, headingId, descriptionId, }: Pick<PopoverProps, "heading" | "description" | "showCloseButton" | "size" | "onClose"> & {
+        showSkeleton?: boolean;
+        skeletonVariant?: SkeletonVariant;
+        headingId?: string;
+        descriptionId?: string;
+    }): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default PopoverHeader;

package/dist/components/Popover/PopoverSkeleton.d.ts

@@ -0,0 +1,21 @@
+import { SkeletonVariant } from '../Skeleton';
+import { PopoverTokenType } from './popover.tokens';
+import { PopoverSize } from './types';
+declare const PopoverSkeleton: ({ headerSkeleton, bodySkeleton, footerSkeleton, skeletonVariant, }: {
+    popoverTokens: PopoverTokenType;
+    size: PopoverSize;
+    headerSkeleton?: {
+        show: boolean;
+        showCloseButton: boolean;
+    };
+    bodySkeleton?: {
+        show: boolean;
+        width: string;
+        height: string | number;
+    };
+    footerSkeleton?: {
+        show: boolean;
+    };
+    skeletonVariant: SkeletonVariant;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default PopoverSkeleton;

package/dist/components/Popover/accessibility/PopoverAccessibility.d.ts

@@ -0,0 +1,5 @@
+export type PopoverAccessibilityProps = {
+    className?: string;
+};
+declare const PopoverAccessibility: import('react').ForwardRefExoticComponent<PopoverAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default PopoverAccessibility;

package/dist/components/Popover/accessibility/PopoverAccessibilityReport.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityReport } from '../../Button/accessibility/ButtonAccessibilityReport';
+export declare const popoverAccessibilityReport: AccessibilityReport;

package/dist/components/Popover/types.d.ts

@@ -1,9 +1,20 @@
 import { ButtonProps } from '../Button';
+import { SkeletonVariant } from '../Skeleton';
 export type PopoverActionType = Omit<ButtonProps, 'buttonGroupPosition' | 'subType'>;
 export declare enum PopoverSize {
     SMALL = "small",
     MEDIUM = "medium"
 }
+type BodySkeletonProps = {
+    show?: boolean;
+    width?: string;
+    height?: string | number;
+};
+export type PopoverSkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    bodySkeletonProps?: BodySkeletonProps;
+};
 export type PopoverProps = {
     heading?: string;
     description?: string;
@@ -31,4 +42,6 @@ export type PopoverProps = {
     shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
     useDrawerOnMobile?: boolean;
     avoidCollisions?: boolean;
+    skeleton?: PopoverSkeletonProps;
 };
+export {};

package/dist/components/ProgressBar/accessibility/ProgressBarAccessibility.d.ts

@@ -0,0 +1,5 @@
+export type ProgressBarAccessibilityProps = {
+    className?: string;
+};
+declare const ProgressBarAccessibility: import('react').ForwardRefExoticComponent<ProgressBarAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ProgressBarAccessibility;

package/dist/components/ProgressBar/accessibility/ProgressBarAccessibilityReport.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ProgressBar Component Accessibility Report Data
+ * WCAG 2.0, 2.1, 2.2 Level A, AA Compliance Analysis
+ *
+ * Note: Items marked with "unsure" require manual verification
+ * Color contrast ratios verified using actual color values from theme tokens
+ */
+export type WCAGSuccessCriterion = {
+    id: string;
+    level: 'A' | 'AA' | 'AAA';
+    title: string;
+    status: 'compliant' | 'non-compliant' | 'unsure' | 'not-applicable';
+    description: string;
+    implementation: string;
+    testResults?: string;
+    notes?: string;
+};
+export type AccessibilityReport = {
+    componentName: string;
+    wcagVersion: string;
+    reportDate: string;
+    conformanceLevel: string;
+    overallStatus: 'compliant' | 'non-compliant' | 'partial' | 'unsure';
+    summary: string;
+    criteria: WCAGSuccessCriterion[];
+    strengths: string[];
+    recommendations: string[];
+    wcagVersions: {
+        '2.0': string[];
+        '2.1': string[];
+        '2.2': string[];
+    };
+    testMethodology: {
+        automated: string[];
+        manual: string[];
+        verificationTools: string[];
+        wcagLevels: {
+            A: string[];
+            AA: string[];
+            AAA: string[];
+        };
+    };
+};
+export declare const progressBarAccessibilityReport: AccessibilityReport;

package/dist/components/ProgressBar/types.d.ts

@@ -18,4 +18,6 @@ export type ProgressBarProps = {
     variant?: ProgressBarVariant;
     type?: ProgressBarType;
     showLabel?: boolean;
+    min?: number;
+    max?: number;
 };

package/dist/components/ProgressBar/utils.d.ts

@@ -0,0 +1,24 @@
+import { ProgressBarTokenType } from './progressbar.tokens';
+import { ProgressBarSize } from './types';
+export declare const clampValue: (value: number, min: number, max: number) => number;
+export declare const calculatePercentage: (value: number, min: number, max: number) => number;
+export declare const parseTokenValue: (tokenValue: string | number | undefined, fallback: number) => number;
+export declare const extractAriaProps: (rest: Record<string, unknown> | undefined) => {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    restProps: Record<string, unknown>;
+};
+export declare const generateDefaultAriaLabel: (value: number, min: number, max: number) => string;
+export declare const getCircularDimensions: (size: ProgressBarSize, tokens: ProgressBarTokenType) => {
+    circularSize: string;
+    sizeNum: number;
+    strokeWidth: number;
+    radius: number;
+    circumference: number;
+    center: number;
+};
+export declare const calculateCircularStroke: (type: "solid" | "segmented", circumference: number, percentage: number) => {
+    strokeDasharray: string;
+    strokeDashoffset: number;
+    dashArray: string;
+};

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import { RadioProps } from './types';
 export declare const Radio: {
-    ({ id, checked, defaultChecked, onChange, disabled, required, error, size, children, subtext, slot, name, maxLength, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, checked, defaultChecked, onChange, disabled, required, error, size, children, subtext, slot, name, value, maxLength, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Radio;

package/dist/components/Radio/StyledRadio.d.ts

@@ -1,7 +1,9 @@
 import { RadioSize } from './types';
+import { RadioTokensType } from './radio.token';
 export declare const StyledRadioInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     size: RadioSize;
     $isDisabled: boolean;
     $isChecked: boolean;
     $error?: boolean;
+    $tokens: RadioTokensType;
 }>> & string;

package/dist/components/Radio/accessibility/RadioAccessibility.d.ts

@@ -0,0 +1,5 @@
+export interface RadioAccessibilityProps {
+    className?: string;
+}
+declare const RadioAccessibility: import('react').ForwardRefExoticComponent<RadioAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RadioAccessibility;

package/dist/components/Radio/accessibility/RadioAccessibilityReport.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Radio Component Accessibility Report Data
+ * WCAG 2.1 Level AA Compliance Analysis
+ *
+ * Note: Items marked with "unsure" require manual verification
+ * Color contrast ratios verified using actual color values from theme tokens
+ */
+export type WCAGSuccessCriterion = {
+    id: string;
+    level: 'A' | 'AA' | 'AAA';
+    title: string;
+    status: 'compliant' | 'non-compliant' | 'unsure' | 'not-applicable';
+    description: string;
+    implementation: string;
+    testResults?: string;
+    notes?: string;
+};
+export type AccessibilityReport = {
+    componentName: string;
+    wcagVersion: string;
+    reportDate: string;
+    conformanceLevel: string;
+    overallStatus: 'compliant' | 'non-compliant' | 'partial' | 'unsure';
+    summary: string;
+    criteria: WCAGSuccessCriterion[];
+    strengths: string[];
+    recommendations: string[];
+    wcagVersions: {
+        '2.0': string[];
+        '2.1': string[];
+        '2.2': string[];
+    };
+    testMethodology: {
+        automated: string[];
+        manual: string[];
+        verificationTools: string[];
+        wcagLevels: {
+            A: string[];
+            AA: string[];
+            AAA: string[];
+        };
+    };
+};
+export declare const radioAccessibilityReport: AccessibilityReport;

package/dist/components/Radio/accessibility/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioAccessibility } from './RadioAccessibility';
+export { radioAccessibilityReport } from './RadioAccessibilityReport';

package/dist/components/Radio/types.d.ts

@@ -8,7 +8,7 @@ export type RadioProps = {
     value?: string;
     checked?: boolean;
     defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
@@ -31,4 +31,6 @@ export type RadioGroupProps = {
     children: ReactNode;
     onChange?: (value: string) => void;
     disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
 };

package/dist/components/Select/types.d.ts

@@ -62,5 +62,6 @@ export type SelectMenuItemType = {
         offset?: number;
     };
     disableTruncation?: boolean;
+    isDisabled?: boolean;
 };
 export declare const dummyMenuItemsLong: SelectMenuGroupType[];

package/dist/components/Sidebar/SidebarHeader.d.ts

@@ -7,6 +7,7 @@ type SidebarHeaderProps = {
     isScrolled: boolean;
     sidebarCollapseKey: string;
     onToggle: () => void;
+    sidebarNavId?: string;
 };
 declare const SidebarHeader: React.FC<SidebarHeaderProps>;
 export default SidebarHeader;

package/dist/components/Sidebar/accessibility/SidebarAccessibility.d.ts

@@ -0,0 +1,5 @@
+export type SidebarAccessibilityProps = {
+    className?: string;
+};
+declare const SidebarAccessibility: import('react').ForwardRefExoticComponent<SidebarAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SidebarAccessibility;

package/dist/components/Sidebar/accessibility/SidebarAccessibilityReport.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityReport } from '../../StatCard/accessibility/StatCardAccessibilityReport';
+export declare const sidebarAccessibilityReport: AccessibilityReport;

package/dist/components/Sidebar/types.d.ts

@@ -99,6 +99,9 @@ export type SidebarProps = {
      * Extends HTML button attributes
      */
     primaryActionButtonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+    activeItem?: string | null;
+    onActiveItemChange?: (item: string | null) => void;
+    defaultActiveItem?: string | null;
 };
 export type MobileNavigationItem = NavbarItem & {
     sectionLabel?: string;

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, ...rest }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectMenu.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { SelectMenuAlignment, SelectMenuSide, SelectMenuGroupType } from '../Select';
-import { SelectMenuSize, SelectMenuVariant } from './types';
-import { SkeletonVariant } from '../Skeleton';
+import { SelectMenuSize, SelectMenuVariant, SingleSelectSkeletonProps } from './types';
 type SingleSelectMenuProps = {
     items: SelectMenuGroupType[];
     selected: string;
@@ -28,13 +27,10 @@ type SingleSelectMenuProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
-    skeleton?: {
-        count?: number;
-        show?: boolean;
-        variant?: SkeletonVariant;
-    };
+    skeleton?: SingleSelectSkeletonProps;
     allowCustomValue?: boolean;
     customValueLabel?: string;
+    menuId?: string;
 };
 declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, allowCustomValue, customValueLabel, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

package/dist/components/SingleSelect/SingleSelectSkeleton.d.ts

@@ -0,0 +1,7 @@
+import { SingleSelectSkeletonProps } from './types';
+import { SingleSelectTokensType } from './singleSelect.tokens';
+declare const SingleSelectSkeleton: ({ singleSelectTokens, skeleton, }: {
+    singleSelectTokens: SingleSelectTokensType;
+    skeleton: SingleSelectSkeletonProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SingleSelectSkeleton;

package/dist/components/SingleSelect/SingleSelectTrigger.d.ts

@@ -23,5 +23,5 @@ export type SingleSelectTriggerProps = {
     maxTriggerWidth?: number;
     minTriggerWidth?: number;
 };
-declare const SingleSelectTrigger: ({ maxTriggerWidth, minTriggerWidth, size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, inline, error, disabled, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectTrigger: ({ maxTriggerWidth, minTriggerWidth, size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, inline, error, ...rest }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectTrigger;

package/dist/components/SingleSelect/accessibility/SingleSelectAccessibility.d.ts

@@ -0,0 +1,5 @@
+export interface SingleSelectAccessibilityProps {
+    className?: string;
+}
+declare const SingleSelectAccessibility: import('react').ForwardRefExoticComponent<SingleSelectAccessibilityProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SingleSelectAccessibility;