add compact sizing variants to ActionIcon

src/shared/components/action-icon/action-icon.module.css

@@ -4,6 +4,9 @@
     --ai-size-md: calc(2.625rem * var(--mantine-scale));
     --ai-size-lg: calc(3.125rem * var(--mantine-scale));
     --ai-size-xl: calc(3.75rem * var(--mantine-scale));
+    --ai-size-compact-xs: calc(1.5rem * var(--mantine-scale));
+    --ai-size-compact-sm: calc(1.75rem * var(--mantine-scale));
+    --ai-size-compact-md: calc(2rem * var(--mantine-scale));
 
     font-weight: 500;
     transition:
@@ -110,4 +113,25 @@
             border: 1px solid lighten(var(--theme-colors-border), 10%);
         }
     }
+
+    &[data-size='compact-xs'] {
+        width: var(--ai-size-compact-xs);
+        min-width: var(--ai-size-compact-xs);
+        height: var(--ai-size-compact-xs);
+        min-height: var(--ai-size-compact-xs);
+    }
+
+    &[data-size='compact-sm'] {
+        width: var(--ai-size-compact-sm);
+        min-width: var(--ai-size-compact-sm);
+        height: var(--ai-size-compact-sm);
+        min-height: var(--ai-size-compact-sm);
+    }
+
+    &[data-size='compact-md'] {
+        width: var(--ai-size-compact-md);
+        min-width: var(--ai-size-compact-md);
+        height: var(--ai-size-compact-md);
+        min-height: var(--ai-size-compact-md);
+    }
 }

src/shared/components/action-icon/action-icon.tsx

@@ -11,6 +11,13 @@ import { AppIcon, Icon, IconProps } from '/@/shared/components/icon/icon';
 import { Tooltip, TooltipProps } from '/@/shared/components/tooltip/tooltip';
 import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
 
+const COMPACT_SIZES = ['compact-xs', 'compact-sm', 'compact-md'] as const;
+type CompactSize = (typeof COMPACT_SIZES)[number];
+
+const isCompactSize = (size: string | undefined): size is CompactSize => {
+    return COMPACT_SIZES.includes(size as CompactSize);
+};
+
 export interface ActionIconProps
     extends ElementProps<'button', keyof MantineActionIconProps>,
         MantineActionIconProps {
@@ -49,12 +56,17 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
             [classNames],
         );
 
-        const actionIconProps: ActionIconProps = {
+        // For compact sizes, we need to ensure Mantine recognizes them
+        // by using a valid size and applying custom styles via CSS
+        const mantineSize = isCompactSize(size) ? 'sm' : size;
+
+        const actionIconProps: ActionIconProps & { 'data-size'?: string } = {
             classNames: memoizedClassNames,
-            size,
+            size: mantineSize,
             variant,
             ...props,
             onClick: handleClick,
+            ...(isCompactSize(size) && { 'data-size': size }),
         };
 
         if (tooltip && icon) {