@aurora-ds/components 0.22.6 → 0.23.1

package/dist/index.d.ts

@@ -602,6 +602,91 @@ type IconButtonProps = {
 
 declare const IconButton: FC<IconButtonProps>;
 
+type ButtonToggleProps = {
+    /** Value to identify this toggle button */
+    value: string;
+    /** Button content (icon or text) */
+    children: ReactNode;
+    /** Click handler */
+    onClick?: (e: MouseEvent<HTMLButtonElement>, value: string) => void;
+    /** Active/pressed state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom text/icon color when active (default: primary) */
+    activeTextColor?: keyof ThemeContract['colors'];
+    /** Custom text/icon color when inactive (default: textSecondary) */
+    inactiveTextColor?: keyof ThemeContract['colors'];
+    /** Custom text/icon color (overrides activeTextColor and inactiveTextColor) */
+    textColor?: keyof ThemeContract['colors'];
+    /** Custom backgroundColor (overrides variant backgroundColor) */
+    backgroundColor?: keyof ThemeContract['colors'];
+    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
+    hoverBackgroundColor?: keyof ThemeContract['colors'];
+    /** Custom active backgroundColor (overrides variant active backgroundColor) */
+    activeBackgroundColor?: keyof ThemeContract['colors'];
+    /** Size of the button */
+    size?: IconButtonSizes;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this button */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this button */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+};
+
+/**
+ * ButtonToggle component
+ *
+ * A toggle button similar to IconButton but with active state.
+ * Uses only the 'text' variant style.
+ * Designed to be used within ButtonToggleGroup.
+ *
+ * **Colors:**
+ * - Active: primary (default) - customizable via activeTextColor
+ * - Inactive: textSecondary (default) - customizable via inactiveTextColor
+ */
+declare const ButtonToggle: FC<ButtonToggleProps>;
+
+type ButtonToggleGroupProps = {
+    /** Current selected value */
+    value?: string | null;
+    /** Change handler for value selection */
+    onChange?: (value: string | null) => void;
+    /** Children ButtonToggle components */
+    children: ReactNode;
+    /** If true, only one button can be active at a time */
+    exclusive?: boolean;
+    /** If true, at least one button must always be active (clicking the active button won't deselect it) */
+    required?: boolean;
+    /** Size of all buttons in the group */
+    size?: IconButtonSizes;
+    /** Custom text/icon color when active (default: primary) - applied to all children */
+    activeTextColor?: keyof ThemeContract['colors'];
+    /** Custom text/icon color when inactive (default: textSecondary) - applied to all children */
+    inactiveTextColor?: keyof ThemeContract['colors'];
+    /** Accessibility label for the group */
+    ariaLabel?: string;
+    /** ARIA role for the group */
+    role?: string;
+};
+
+/**
+ * ButtonToggleGroup component
+ *
+ * Groups multiple ButtonToggle components together in a row without gaps.
+ * Manages exclusive selection (only one button can be active at a time).
+ *
+ * **Default Colors:**
+ * - Active buttons: primary
+ * - Inactive buttons: textSecondary
+ */
+declare const ButtonToggleGroup: FC<ButtonToggleGroupProps>;
+
 type FormProps = {
     /** Form content (inputs, buttons, etc.) */
     children: ReactNode;
@@ -1248,6 +1333,8 @@ type MenuItemProps = {
     onClick: () => void;
     textColor?: keyof ThemeContract['colors'];
     iconColor?: keyof ThemeContract['colors'];
+    /** If true, the menu item is highlighted as active */
+    active?: boolean;
 };
 
 declare const MenuItem: FC<MenuItemProps>;
@@ -1620,5 +1707,5 @@ declare module '@aurora-ds/theme' {
  */
 declare const defaultTheme: Theme;
 
-export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, Status, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
-export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BoxProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardProps, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, StatusColor, StatusProps, StatusSize, StatusVariant, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };
+export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonToggle, ButtonToggleGroup, Card, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, Status, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
+export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BoxProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonToggleGroupProps, ButtonToggleProps, ButtonVariantStyle, ButtonVariants, CardProps, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, StatusColor, StatusProps, StatusSize, StatusVariant, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-ds/components",
-  "version": "0.22.6",
+  "version": "0.23.1",
   "type": "module",
   "description": "Aurora DS - React Components Library",
   "main": "dist/cjs/index.js",