@aurora-ds/components 1.7.2 → 1.7.4

package/dist/esm/index.js

@@ -908,6 +908,10 @@ const LINK_STYLES = createStyles((theme) => ({
         const hoverColor = color === 'secondary' ? theme.colors.textTertiary : theme.colors.linkHover;
         const activeColor = color === 'secondary' ? theme.colors.textPrimary : theme.colors.linkActive;
         const disabledColor = color === 'secondary' ? theme.colors.textDisabled : theme.colors.linkDisabled;
+        // We always set `text-decoration: underline` and drive visibility via
+        // `text-decoration-color` so the transition is smooth.
+        const underlineVisible = underline === 'always' ? mainColor : 'transparent';
+        const underlineHover = underline !== 'none' ? hoverColor : 'transparent';
         return {
             display: 'inline-flex',
             alignItems: 'center',
@@ -917,22 +921,25 @@ const LINK_STYLES = createStyles((theme) => ({
             fontSize: 'inherit',
             lineHeight: 'inherit',
             fontWeight: 'inherit',
-            textDecoration: underline === 'always' ? 'underline' : 'none',
+            textDecoration: 'underline',
+            textDecorationColor: underlineVisible,
+            textUnderlineOffset: '0.2em',
             cursor: 'pointer',
             borderRadius: theme.radius.xs,
-            transition: `color ${theme.transition.fast}`,
+            transition: `color ${theme.transition.fast}, text-decoration-color ${theme.transition.fast}`,
             ':hover:not([aria-disabled="true"])': {
                 color: hoverColor,
-                textDecoration: underline !== 'none' ? 'underline' : 'none',
+                textDecorationColor: underlineHover,
             },
             ':active:not([aria-disabled="true"])': {
                 color: activeColor,
+                textDecorationColor: underline !== 'none' ? activeColor : 'transparent',
             },
             ':focus-visible': getFocusRingStyles(theme),
             '&[aria-disabled="true"]': {
                 color: disabledColor,
                 cursor: 'not-allowed',
-                textDecoration: 'none',
+                textDecorationColor: 'transparent',
             },
         };
     },
@@ -967,7 +974,12 @@ const Link = ({ ref, label, fontSize = 'sm', underline = 'hover', color = 'defau
             e.preventDefault();
             return;
         }
-        onClick?.(e);
+        // 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 handleKeyDown = (e) => {
         if (disabled && e.key === 'Enter') {
@@ -3281,6 +3293,7 @@ const TEXTFIELD_WRAPPER_VARIANTS = createVariants((theme) => {
             // `stretch` lets the inner input fill the full height of the box so
             // clicking anywhere (including the vertical padding area) hits it.
             alignItems: 'stretch',
+            width: '100%',
             boxSizing: 'border-box',
             borderWidth: '1px',
             borderStyle: 'solid',
@@ -3430,13 +3443,13 @@ 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, ...rest }) => {
+const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, width = '100%', ...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', 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, 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';
 
@@ -7024,8 +7037,8 @@ const lightPalette = {
     skeletonSecondary: '#edf0f5',
     // Link (Blue)
     linkMain: '#1e40af',
-    linkHover: '#1d4ed8',
-    linkActive: '#2563eb',
+    linkHover: '#2563eb',
+    linkActive: '#4f46e5',
     linkDisabled: '#93c5fd',
 };
 
@@ -7302,11 +7315,11 @@ const darkPalette = {
     // Skeleton — visible shimmer on dark surfaces
     skeletonPrimary: '#1e293b',
     skeletonSecondary: '#334155',
-    // Link (Blue)
+    // Link — 3-step progression: sky blue → indigo → violet
     // linkMain (#60a5fa) → contrast ~6.7:1 on surfaceBackground ✓ (AA)
     linkMain: '#60a5fa',
-    linkHover: '#93c5fd',
-    linkActive: '#bfdbfe',
+    linkHover: '#818cf8',
+    linkActive: '#c4b5fd',
     linkDisabled: '#1e40af',
 };