fix(emcn): fill compact switch segments to the border

Author: j15z

packages/emcn/src/components/icon-switch/icon-switch.tsx

@@ -43,7 +43,7 @@ export function IconSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-sm border border-[var(--border)] bg-[var(--surface-3)] p-[1px]',
+        'inline-flex w-fit shrink-0 items-center rounded-sm border border-[var(--border)] bg-[var(--surface-3)]',
         disabled && 'opacity-50',
         className
       )}
@@ -62,15 +62,18 @@ export function IconSwitch<T extends string>({
             onChange={() => onValueChange(option.value)}
             disabled={disabled}
             aria-label={option.label}
-            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.sm)-1px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+            className='peer m-0 size-[18px] cursor-pointer appearance-none rounded-[inherit] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
           />
         )
 
         return (
           <label
             key={option.value}
             htmlFor={optionId}
-            className={cn('relative flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+            className={cn(
+              'relative flex first:rounded-l-[calc(theme(borderRadius.sm)-var(--border-width,1px))] last:rounded-r-[calc(theme(borderRadius.sm)-var(--border-width,1px))]',
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+            )}
           >
             {showTooltips ? (
               <Tooltip.Root>