@aurora-ds/components 0.22.5 → 0.23.0

package/dist/cjs/components/actions/button-toggle/ButtonToggle/ButtonToggle.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { ButtonToggleProps } from '@components/actions/button-toggle/ButtonToggle/ButtonToggle.props';
+/**
+ * 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>;
+export default ButtonToggle;

package/dist/cjs/components/actions/button-toggle/ButtonToggle/ButtonToggle.props.d.ts

@@ -0,0 +1,48 @@
+import { MouseEvent, ReactNode } from 'react';
+import { IconButtonSizes, ThemeContract } from '@/interfaces';
+export 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;
+};
+export type ButtonToggleStyleParams = {
+    active?: boolean;
+    size?: IconButtonSizes;
+    activeTextColor?: keyof ThemeContract['colors'];
+    inactiveTextColor?: keyof ThemeContract['colors'];
+    textColor?: keyof ThemeContract['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
+    hoverBackgroundColor?: keyof ThemeContract['colors'];
+    activeBackgroundColor?: keyof ThemeContract['colors'];
+};

package/dist/cjs/components/actions/button-toggle/ButtonToggle/ButtonToggle.styles.d.ts

@@ -0,0 +1,4 @@
+import { ButtonToggleStyleParams } from '@components/actions/button-toggle/ButtonToggle/ButtonToggle.props';
+export declare const BUTTON_TOGGLE_STYLES: {
+    root: (args_0: ButtonToggleStyleParams) => string;
+};

package/dist/cjs/components/actions/button-toggle/ButtonToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ButtonToggle } from './ButtonToggle';
+export type { ButtonToggleProps } from './ButtonToggle.props';

package/dist/cjs/components/actions/button-toggle/ButtonToggleGroup/ButtonToggleGroup.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { ButtonToggleGroupProps } from '@components/actions/button-toggle/ButtonToggleGroup/ButtonToggleGroup.props';
+/**
+ * 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>;
+export default ButtonToggleGroup;

package/dist/cjs/components/actions/button-toggle/ButtonToggleGroup/ButtonToggleGroup.props.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+import { IconButtonSizes, ThemeContract } from '@/interfaces';
+import { ButtonToggleProps } from '@components/actions/button-toggle/ButtonToggle/ButtonToggle.props';
+export 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;
+};
+export type ButtonToggleGroupStyleParams = {
+    size?: IconButtonSizes;
+};
+export type ButtonToggleChild = ReactElement<ButtonToggleProps>;

package/dist/cjs/components/actions/button-toggle/ButtonToggleGroup/ButtonToggleGroup.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const BUTTON_TOGGLE_GROUP_STYLES: {
+    root: () => string;
+};

package/dist/cjs/components/actions/button-toggle/ButtonToggleGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ButtonToggleGroup } from './ButtonToggleGroup';
+export type { ButtonToggleGroupProps } from './ButtonToggleGroup.props';

package/dist/cjs/components/actions/button-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonToggle';
+export * from './ButtonToggleGroup';

package/dist/cjs/components/forms/select/Select.props.d.ts

@@ -36,4 +36,5 @@ export type SelectProps = {
 export type SelectStyleParams = {
     disabled?: boolean;
     width?: string | number;
+    isOpen?: boolean;
 };

package/dist/cjs/components/forms/select/Select.styles.d.ts

@@ -1,4 +1,4 @@
-import { SelectStyleParams } from '@components/forms/select/Select.props.ts';
+import { SelectStyleParams } from '@components/forms/select/Select.props';
 /**
  * Select styles using createStyles from @aurora-ds/theme
  */

package/dist/cjs/components/index.d.ts

@@ -5,6 +5,7 @@ export * from '@components/data-display/avatar';
 export * from '@components/data-display/skeleton';
 export * from '@components/actions/button';
 export * from '@components/actions/icon-button';
+export * from '@components/actions/button-toggle';
 export * from '@components/forms/form';
 export * from '@components/forms/input';
 export * from '@components/forms/textarea';

package/dist/cjs/index.js

@@ -886,6 +886,167 @@ const IconButton = ({ icon, variant = 'contained', active = false, type = 'butto
 };
 IconButton.displayName = 'IconButton';
 
+const BUTTON_TOGGLE_STYLES = theme.createStyles((theme) => {
+    const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getIconButtonSizeStyles();
+    const textVariant = variantStyles.text;
+    return {
+        root: ({ active = false, size = 'medium', activeTextColor = 'primary', inactiveTextColor = 'textSecondary', textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }) => {
+            const sizeConfig = sizeStyles[size];
+            // Determine the text color based on active state
+            const finalTextColor = textColor
+                ? theme.colors[textColor]
+                : active
+                    ? theme.colors[activeTextColor]
+                    : theme.colors[inactiveTextColor];
+            const overrides = {
+                color: finalTextColor,
+            };
+            const backgroundOverride = backgroundColor ? { backgroundColor: theme.colors[backgroundColor] } : {};
+            const hoverBackgroundOverride = hoverBackgroundColor ? { backgroundColor: theme.colors[hoverBackgroundColor] } : {};
+            const activeBackgroundOverride = activeBackgroundColor ? { backgroundColor: theme.colors[activeBackgroundColor] } : {};
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                gap: theme.spacing.sm,
+                padding: theme.spacing[sizeConfig.padding],
+                borderRadius: 0, // No border radius for grouped buttons
+                cursor: 'pointer',
+                transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+                minHeight: sizeConfig.size,
+                maxHeight: sizeConfig.size,
+                minWidth: sizeConfig.size,
+                fontFamily: 'inherit',
+                ...textVariant.default,
+                ...(active && textVariant.pressed),
+                ':hover': {
+                    ...textVariant.hover,
+                    ...hoverBackgroundOverride,
+                },
+                ':active': {
+                    ...textVariant.pressed,
+                    ...activeBackgroundOverride,
+                },
+                ':disabled': textVariant.disabled,
+                ...overrides,
+                ...backgroundOverride,
+            };
+        },
+    };
+});
+
+/**
+ * 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
+ */
+const ButtonToggle = ({ value, children, active = false, onClick, disabled, activeTextColor, inactiveTextColor, textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e, value);
+        }
+    };
+    return (jsxRuntime.jsx("button", { onClick: handleClick, disabled: disabled, type: 'button', className: BUTTON_TOGGLE_STYLES.root({
+            active,
+            size,
+            activeTextColor,
+            inactiveTextColor,
+            textColor,
+            backgroundColor,
+            hoverBackgroundColor,
+            activeBackgroundColor
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-pressed": active, role: role, tabIndex: tabIndex, children: children }));
+};
+ButtonToggle.displayName = 'ButtonToggle';
+
+const BUTTON_TOGGLE_GROUP_STYLES = theme.createStyles((theme) => {
+    return {
+        root: () => ({
+            display: 'inline-flex',
+            flexDirection: 'row',
+            gap: 0,
+            flexGrow: 0,
+            width: 'fit-content',
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radius.md,
+            overflow: 'hidden',
+            // First child - rounded left corners
+            '& > button:first-of-type': {
+                borderTopLeftRadius: theme.radius.md,
+                borderBottomLeftRadius: theme.radius.md,
+            },
+            // Last child - rounded right corners
+            '& > button:last-of-type': {
+                borderTopRightRadius: theme.radius.md,
+                borderBottomRightRadius: theme.radius.md,
+            },
+            // All children except last - border right
+            '& > button:not(:last-of-type)': {
+                borderRight: `1px solid ${theme.colors.border}`,
+            },
+        }),
+    };
+});
+
+/**
+ * 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
+ */
+const ButtonToggleGroup = ({ value, onChange, children, exclusive = true, required = false, size = 'medium', activeTextColor, inactiveTextColor, ariaLabel, role = 'group', }) => {
+    const handleToggleClick = (_e, toggleValue) => {
+        if (!onChange) {
+            return;
+        }
+        if (exclusive) {
+            // If required is true and clicking the currently active button, don't deselect
+            if (required && value === toggleValue) {
+                return;
+            }
+            // Toggle off if clicking the active button, otherwise set new value
+            onChange(value === toggleValue ? null : toggleValue);
+        }
+        else {
+            // Non-exclusive mode would need array value support
+            onChange(toggleValue);
+        }
+    };
+    return (jsxRuntime.jsx("div", { className: BUTTON_TOGGLE_GROUP_STYLES.root(), role: role, "aria-label": ariaLabel, children: React.Children.map(children, (child) => {
+            if (!React.isValidElement(child)) {
+                return child;
+            }
+            const toggleChild = child;
+            return React.cloneElement(toggleChild, {
+                ...toggleChild.props,
+                active: exclusive ? value === toggleChild.props.value : toggleChild.props.active,
+                size,
+                activeTextColor: toggleChild.props.activeTextColor || activeTextColor,
+                inactiveTextColor: toggleChild.props.inactiveTextColor || inactiveTextColor,
+                onClick: (e, toggleValue) => {
+                    handleToggleClick(e, toggleValue);
+                    // Also call original onClick if provided
+                    if (toggleChild.props.onClick) {
+                        toggleChild.props.onClick(e, toggleValue);
+                    }
+                },
+            });
+        }) }));
+};
+ButtonToggleGroup.displayName = 'ButtonToggleGroup';
+
 const FORM_STYLES = theme.createStyles(() => ({
     root: {
         display: 'contents',
@@ -1163,7 +1324,7 @@ var TextArea_default = React.memo(TextArea);
  * Select styles using createStyles from @aurora-ds/theme
  */
 const SELECT_STYLES = theme.createStyles((theme) => ({
-    root: ({ disabled = false, width }) => ({
+    root: ({ disabled = false, width, isOpen = false }) => ({
         position: 'relative',
         display: 'inline-flex',
         alignItems: 'center',
@@ -1171,7 +1332,7 @@ const SELECT_STYLES = theme.createStyles((theme) => ({
         boxSizing: 'border-box',
         width: width ?? '100%',
         padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-        border: `1px solid ${theme.colors.border}`,
+        border: `1px solid ${isOpen ? theme.colors.primary : theme.colors.border}`,
         borderRadius: theme.radius.md,
         fontSize: theme.fontSize.md,
         fontFamily: 'inherit',
@@ -1192,7 +1353,7 @@ const SELECT_STYLES = theme.createStyles((theme) => ({
             cursor: 'not-allowed',
             opacity: theme.opacity.high
         }),
-        ...(!disabled && {
+        ...(!disabled && !isOpen && {
             ':hover': {
                 borderColor: theme.colors.primaryHover,
             },
@@ -1493,7 +1654,7 @@ const Select = ({ options, value, onChange, label, mandatory = false, placeholde
         onChange(selectedValue);
         setIsOpen(false);
     };
-    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { ref: triggerRef, className: SELECT_STYLES.root({ disabled, width }), onClick: handleTriggerClick, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: [jsxRuntime.jsx("div", { className: SELECT_STYLES.trigger, children: jsxRuntime.jsx(Text, { variant: 'p', maxLines: 1, color: selectedOption ? 'text' : 'textSecondary', children: selectedOption ? selectedOption.label : placeholder }) }), jsxRuntime.jsx(Icon, { children: jsxRuntime.jsx(ChevronDownIcon, {}) })] }), jsxRuntime.jsx(Menu, { anchor: isOpen ? triggerRef.current : null, onClose: handleClose, width: menuWidth, children: jsxRuntime.jsx(MenuGroup, { children: options.map(option => (jsxRuntime.jsx(SelectItem, { option: option, isSelected: option.value === value, onSelect: handleSelect }, option.value))) }) })] }));
+    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { ref: triggerRef, className: SELECT_STYLES.root({ disabled, width, isOpen }), onClick: handleTriggerClick, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: [jsxRuntime.jsx("div", { className: SELECT_STYLES.trigger, children: jsxRuntime.jsx(Text, { variant: 'p', maxLines: 1, color: selectedOption ? 'text' : 'textSecondary', children: selectedOption ? selectedOption.label : placeholder }) }), jsxRuntime.jsx(Icon, { children: jsxRuntime.jsx(ChevronDownIcon, {}) })] }), jsxRuntime.jsx(Menu, { anchor: isOpen ? triggerRef.current : null, onClose: handleClose, width: menuWidth, children: jsxRuntime.jsx(MenuGroup, { children: options.map(option => (jsxRuntime.jsx(SelectItem, { option: option, isSelected: option.value === value, onSelect: handleSelect }, option.value))) }) })] }));
 };
 Select.displayName = 'Select';
 
@@ -2057,6 +2218,7 @@ const CARD_STYLES = theme.createStyles((theme) => ({
         width,
         height,
         maxHeight,
+        overflowY: maxHeight ? 'auto' : undefined,
         gap: gap ? theme.spacing[gap] : undefined,
         borderRadius: theme.radius[radius],
         boxShadow: theme.shadows[shadow],
@@ -3405,6 +3567,8 @@ exports.BreadcrumbLink = BreadcrumbLink;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
+exports.ButtonToggle = ButtonToggle;
+exports.ButtonToggleGroup = ButtonToggleGroup;
 exports.Card = Card;
 exports.DatePicker = DatePicker_default;
 exports.DrawerItem = DrawerItem;