@aurora-ds/components 1.7.4 → 1.7.6

package/dist/esm/index.js

@@ -352,6 +352,11 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
             on: c.errorOn, subtle: c.errorSubtle, subtleHover: c.errorSubtleHover, subtleActive: c.errorSubtleActive,
             fg: c.errorMain, fgHover: c.errorHover, border: c.errorMain,
         },
+        textPrimary: {
+            main: c.primaryMain, hover: c.primaryHover, active: c.primaryActive,
+            on: c.primaryOn, subtle: c.primarySubtle, subtleHover: c.primarySubtleHover, subtleActive: c.primarySubtleActive,
+            fg: c.textPrimary, fgHover: c.textPrimary, border: c.primaryMain,
+        },
     };
     const intent = intents[color];
     const colorVariantStyles = variant === 'contained'
@@ -3443,13 +3448,15 @@ const useTextField = ({ id, ref, type, size, endAction, }) => {
  * @example <TextField label="Name" status="error" helperText="This field is required." />
  * @example <TextField label="Search" startIcon={SearchIcon} endAction={<ClearButton />} />
  */
-const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, width = '100%', ...rest }) => {
+const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, 
+// ── Layout props → outer Stack wrapper (NOT the native <input>) ──
+width = '100%', minWidth = 0, maxWidth, flex, flexGrow, flexShrink, flexBasis, ...rest }) => {
     const { fieldId, helperId, mergedRef, isPassword, showPassword, togglePassword, resolvedType, iconSize, iconButtonSize, hasEndSection, focusInput, } = useTextField({ id, ref, type, size, endAction });
     // Associate the label with the input via `aria-labelledby` (and NOT `htmlFor`)
     // so the label stays accessible without natively focusing the input on click —
     // only clicking inside the bordered box should focus the field.
     const labelId = `${fieldId}-label`;
-    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', width: width, children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', id: labelId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-labelledby": label !== undefined ? labelId : undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_INPUT_VARIANTS({ size }), ...rest }), hasEndSection && (jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
+    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', width: width, minWidth: minWidth, maxWidth: maxWidth, flex: flex, flexGrow: flexGrow, flexShrink: flexShrink, flexBasis: flexBasis, children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', id: labelId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-labelledby": label !== undefined ? labelId : undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_INPUT_VARIANTS({ size }), ...rest }), hasEndSection && (jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
 TextField.displayName = 'TextField';
 
@@ -5886,7 +5893,12 @@ const DrawerItem = ({ startIcon, label, selected = false, endContent, href, onCl
             e.preventDefault();
             return;
         }
-        onClick?.();
+        // When an onClick handler is provided (e.g. React Router's navigate),
+        // prevent the browser from following the href and let the handler drive navigation.
+        if (onClick) {
+            e.preventDefault();
+            onClick(e);
+        }
     };
     const innerContent = (jsxs(Stack, { width: '100%', justifyContent: 'start', children: [jsx("span", { className: DRAWER_ITEM_STYLES.iconWrap, children: jsx(Icon, { icon: startIcon, size: 'md' }) }), isLabelVisible && (jsxs("span", { className: DRAWER_ITEM_STYLES.labelWrapper({ isFadingIn: isLabelFadingIn }), children: [jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'medium', className: DRAWER_ITEM_STYLES.label, textAlign: 'start', children: label }), endContent && (jsx("span", { className: DRAWER_ITEM_STYLES.endContent, children: endContent }))] }))] }));
     const item = href ? (jsx("a", { href: href, className: rootClassName, "aria-disabled": disabled || undefined, "aria-current": computedAriaCurrent, "aria-label": computedAriaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, tabIndex: disabled ? -1 : undefined, onClick: handleClick, children: innerContent })) : (jsx("button", { type: 'button', className: rootClassName, disabled: disabled, "aria-current": computedAriaCurrent, "aria-label": computedAriaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, onClick: handleClick, children: innerContent }));